fix bug on settings page

Fallback fonts

consumer/src/index.ts

@@ -112,7 +112,7 @@ async function process_visit(data: Record<string, string>, sessionHash: string)
 
 async function process_keep_alive(data: Record<string, string>, sessionHash: string) {
 
-    const { pid, instant, flowHash, timestamp } = data;
+    const { pid, instant, flowHash, timestamp, website } = data;
 
     const existingSession = await SessionModel.findOne({ project_id: pid, session: sessionHash }, { _id: 1 });
     if (!existingSession) {
@@ -123,13 +123,15 @@ async function process_keep_alive(data: Record<string, string>, sessionHash: str
         await SessionModel.updateOne({ project_id: pid, session: sessionHash, }, {
             $inc: { duration: 0 },
             flowHash,
-            updated_at: Date.now()
+            website,
+            updated_at: new Date(parseInt(timestamp))
         }, { upsert: true });
     } else {
         await SessionModel.updateOne({ project_id: pid, session: sessionHash, }, {
             $inc: { duration: 1 },
             flowHash,
-            updated_at: Date.now()
+            website,
+            updated_at: new Date(parseInt(timestamp))
         }, { upsert: true });
     }
 
@@ -137,7 +139,7 @@ async function process_keep_alive(data: Record<string, string>, sessionHash: str
 
 async function process_event(data: Record<string, string>, sessionHash: string) {
 
-    const { name, metadata, pid, flowHash, timestamp } = data;
+    const { name, metadata, pid, flowHash, timestamp, website } = data;
 
     let metadataObject;
     try {
@@ -149,6 +151,7 @@ async function process_event(data: Record<string, string>, sessionHash: string)
     await Promise.all([
         EventModel.create({
             project_id: pid, name, flowHash, metadata: metadataObject, session: sessionHash,
+            website,
             created_at: new Date(parseInt(timestamp))
         }),
         ProjectCountModel.updateOne({ project_id: pid }, { $inc: { 'events': 1 } }, { upsert: true }),

dashboard/assets/main.css

@@ -1,13 +1,14 @@
 @import './font-awesome/css/all.css';
+/* Are these many fonts required? For the time being switching to privacy friendly bunny.net for Google fonts. NOTE: No variable font support in bunnet.net yet. */
 
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
+@import url('https://fonts.bunny.net/css?family=nunito:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
 @import url('https://fonts.cdnfonts.com/css/brockmann');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+@import url('https://fonts.bunny.net/css?family=inter:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
 
 
 @import url('https://fonts.cdnfonts.com/css/geometric-sans-serif-v1');
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.bunny.net/css?family=manrope:300,400,500,600,700,800');
+@import url('https://fonts.bunny.net/css?family=lato:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
+@import url('https://fonts.bunny.net/css?family=poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
 
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
+@import url('https://cdn.jsdelivr.net/npm/material-symbols@0.28.2/index.css');

dashboard/assets/scss/main.scss

@@ -1,12 +1,16 @@
 @use './utilities.scss';
 @use './colors.scss';
 
+:root{
+  --font-sans: "SF Pro Text","SF Pro Icons", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Google Sans", "Helvetica Neue", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
+}
+
+
 @font-face {
   font-family: "Geist";
   src: url("../fonts/GeistVF.ttf");
 }
 
-
 .actionable-visits-color-checkbox {
   color: #5655d7;
 }
@@ -19,7 +23,7 @@
 }
 
 .geist {
-  font-family: "Geist";
+  font-family: "Geist", var(--font-sans);
 }
 
 
@@ -34,38 +38,38 @@
 }
 
 .brockmann {
-  font-family: "Brockmann" !important;
+  font-family: "Brockmann", var(--font-sans)!important;
 }
 
 .nunito {
-  font-family: "Nunito" !important;
+  font-family: "Nunito",var(--font-sans)!important;
 }
 
 .inter {
-  font-family: "Inter" !important;
+  font-family: "Inter", var(--font-sans)!important;
 }
 
 .geometric {
-  font-family: 'Geometric Sans Serif v1' !important;
+  font-family: "Geometric Sans Serif v1", var(--font-sans)!important;
 }
 
 .manrope {
-  font-family: 'Manrope' !important;
+  font-family: "Manrope", var(--font-sans)!important;
 }
 
 .lato {
-  font-family: 'Lato' !important;
+  font-family: "Lato", var(--font-sans)!important;
 }
 
 .poppins {
-  font-family: 'Poppins' !important;
+  font-family: "Poppins", var(--font-sans)!important;
 }
 
 .poppins-childs {
-  font-family: 'Poppins' !important;
+  font-family: "Poppins", var(--font-sans)!important;
 
   * {
-    font-family: 'Poppins' !important;
+    font-family: "Poppins", var(--font-sans)!important;
   }
 }
 
@@ -105,5 +109,5 @@ body {
 }
 
 * {
-  font-family: 'Nunito';
-}
+  font-family: 'Nunito', var(--font-sans);
+}

dashboard/components/FirstInteraction.vue

@@ -79,13 +79,13 @@ function reloadPage() {
         </div>
 
 
-        <div class="flex items-center justify-center mt-10">
+        <div class="flex items-center justify-center mt-10 w-full px-10">
             <div class="flex flex-col gap-6">
 
                 <div class="flex gap-6 xl:flex-row flex-col">
 
                     <div class="h-full w-full">
-                        <CardTitled class="h-full w-full xl:min-w-[500px] xl:h-[35rem]" title="Quick setup tutorial"
+                        <CardTitled class="h-full w-full xl:min-w-[400px] xl:h-[35rem]" title="Quick setup tutorial"
                             sub="Quickly Set Up Litlyx in 30 Seconds!">
 
                             <div class="flex items-center justify-center h-full w-full">
@@ -133,6 +133,28 @@ function reloadPage() {
 
                     </div>
                 </div>
+                <div>
+                    <div>
+                        <CardTitled class="w-full h-full" title="Wordpress + Elementor"
+                            sub="Our WordPress plugin is coming soon!.">
+                            <template #header>
+                                <LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
+                                    to="https://docs.litlyx.com">
+                                    Visit documentation
+                                </LyxUiButton>
+                            </template>
+
+                            <div class="flex flex-col items-end">
+                                <div class="justify-center w-full hidden xl:flex gap-3">
+                                    <a href="#">
+                                    <img class="cursor-pointer" :src="'tech-icons/wpel.png'" alt="Litlyx-Wordpress-Elementor">
+                                    </a>
+                                </div>
+
+                            </div>
+                        </CardTitled>
+                    </div>
+                </div>
                 <div>
                     <div>
                         <CardTitled class="w-full h-full" title="Modules"

dashboard/components/admin/Overview.vue

@@ -88,12 +88,15 @@ onMounted(() => {
 
 const filter = ref<string>('{}');
 
-const { data: projectsInfo, pending: pendingProjects } = await useFetch<{ count: number, projects: TAdminProject[] }>(
+const { data: projectsInfo, pending: pendingProjects } = useFetch<{ count: number, projects: TAdminProject[] }>(
     () => `/api/admin/projects?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}&filterFrom=${selected.value.start.toISOString()}&filterTo=${selected.value.end.toISOString()}`,
     signHeaders()
 );
 
-
+const { data: metrics, pending: pendingMetrics } = useFetch(
+    () => `/api/admin/metrics?filterFrom=${selected.value.start.toISOString()}&filterTo=${selected.value.end.toISOString()}`,
+    signHeaders()
+);
 
 const { uiMenu } = useSelectMenuStyle();
 
@@ -136,7 +139,7 @@ const { uiMenu } = useSelectMenuStyle();
                 <div class="flex gap-2 items-center shrink-0">
                     <div>Page {{ page }} </div>
                     <div> {{ Math.min(limit, projectsInfo?.count || 0) }} of {{ projectsInfo?.count || 0
-                        }}</div>
+                    }}</div>
                 </div>
 
                 <div>
@@ -165,6 +168,23 @@ const { uiMenu } = useSelectMenuStyle();
                 </UPopover>
             </div>
 
+
+            <div class="w-[80%]">
+                <div v-if="pendingMetrics"> Loading... </div>
+                <div class="flex gap-10 flex-wrap" v-if="!pendingMetrics && metrics">
+                    <div> Projects: {{ metrics.totalProjects }} ({{ metrics.premiumProjects }} premium) </div>
+                    <div>
+                        Total visits: {{ formatNumberK(metrics.totalVisits) }}
+                    </div>
+                    <div>
+                        Active: {{ metrics.totalProjects - metrics.deadProjects }} |
+                        Dead: {{ metrics.deadProjects }}
+                    </div>
+                    <div>
+                        Total events: {{ formatNumberK(metrics.totalEvents) }}
+                    </div>
+                </div>
+            </div>
         </div>
 
 

dashboard/components/admin/Users.vue

@@ -2,14 +2,34 @@
 
 import { useSelectMenuStyle } from '~/composables/ui/useSelectMenuStyle';
 import type { TAdminUser } from '~/server/api/admin/users';
+import { sub, format, isSameDay, type Duration, startOfDay, endOfDay } from 'date-fns'
+
 
 
 const filterText = ref<string>('');
 
-watch(filterText,()=>{
+watch(filterText, () => {
     page.value = 1;
 })
 
+function isRangeSelected(duration: Duration) {
+    return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
+}
+
+function selectRange(duration: Duration) {
+    selected.value = { start: sub(new Date(), duration), end: new Date() }
+}
+
+const ranges = [
+    { label: 'Last 7 days', duration: { days: 7 } },
+    { label: 'Last 14 days', duration: { days: 14 } },
+    { label: 'Last 30 days', duration: { days: 30 } },
+    { label: 'Last 3 months', duration: { months: 3 } },
+    { label: 'Last 6 months', duration: { months: 6 } },
+    { label: 'Last year', duration: { years: 1 } }
+]
+const selected = ref<{ start: Date, end: Date }>({ start: sub(new Date(), { days: 14 }), end: new Date() })
+
 const filter = computed(() => {
     return JSON.stringify({
         $or: [
@@ -39,7 +59,7 @@ const limitList = [
 const limit = ref<number>(20);
 
 const { data: usersInfo, pending: pendingUsers } = await useFetch<{ count: number, users: TAdminUser[] }>(
-    () => `/api/admin/users?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}`,
+    () => `/api/admin/users?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}&filterFrom=${selected.value.start.toISOString()}&filterTo=${selected.value.end.toISOString()}`,
     signHeaders()
 );
 
@@ -51,44 +71,71 @@ const { uiMenu } = useSelectMenuStyle();
     <div class="mt-6 h-full">
 
 
-        <div class="flex items-center gap-10 px-10">
+        <div class="flex flex-col items-center gap-6">
 
-            <div class="flex gap-2 items-center">
-                <div>Order:</div>
-                <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Order" :options="ordersList"
-                    value-attribute="id" option-attribute="label" v-model="order">
-                </USelectMenu>
-            </div>
+            <div class="flex items-center gap-10 px-10">
+                <div class="flex gap-2 items-center">
+                    <div>Order:</div>
+                    <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Order" :options="ordersList"
+                        value-attribute="id" option-attribute="label" v-model="order">
+                    </USelectMenu>
+                </div>
 
 
-            <div class="flex gap-2 items-center">
-                <div>Limit:</div>
-                <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Limit" :options="limitList"
-                    value-attribute="id" option-attribute="label" v-model="limit">
-                </USelectMenu>
-            </div>
+                <div class="flex gap-2 items-center">
+                    <div>Limit:</div>
+                    <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Limit" :options="limitList"
+                        value-attribute="id" option-attribute="label" v-model="limit">
+                    </USelectMenu>
+                </div>
 
-            <div class="flex gap-2 items-center">
-                <LyxUiInput placeholder="Search user" class="px-2 py-1" v-model="filterText"></LyxUiInput>
-            </div>
-
-            <div class="flex gap-2 items-center">
-                <div>Page {{ page }} </div>
-                <div>
-                    {{ Math.min(limit, usersInfo?.count || 0) }}
-                    of
-                    {{ usersInfo?.count || 0 }}
+                <div class="flex gap-2 items-center">
+                    <LyxUiInput placeholder="Search user" class="px-2 py-1" v-model="filterText"></LyxUiInput>
                 </div>
             </div>
 
-            <div>
-                <UPagination v-model="page" :page-count="limit" :total="usersInfo?.count || 0" />
+            <div class="flex items-centet gap-10">
+                <div class="flex gap-2 items-center">
+                    <div>Page {{ page }} </div>
+                    <div>
+                        {{ Math.min(limit, usersInfo?.count || 0) }}
+                        of
+                        {{ usersInfo?.count || 0 }}
+                    </div>
+                </div>
+
+                <div>
+                    <UPagination v-model="page" :page-count="limit" :total="usersInfo?.count || 0" />
+                </div>
+
+                <UPopover class="w-[20rem]" :popper="{ placement: 'bottom' }">
+                    <UButton class="w-full" color="primary" variant="solid">
+                        <div class="flex items-center justify-center w-full gap-2">
+                            <i class="i-heroicons-calendar-days-20-solid"></i>
+                            {{ selected.start.toLocaleDateString() }} - {{ selected.end.toLocaleDateString() }}
+                        </div>
+                    </UButton>
+                    <template #panel="{ close }">
+                        <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
+                            <div class="hidden sm:flex flex-col py-4">
+                                <UButton v-for="(range, index) in ranges" :key="index" :label="range.label" color="gray"
+                                    variant="ghost" class="rounded-none px-6"
+                                    :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
+                                    truncate @click="selectRange(range.duration)" />
+                            </div>
+
+                            <DatePicker v-model="selected" @close="close" />
+                        </div>
+                    </template>
+                </UPopover>
+
             </div>
 
         </div>
 
 
 
+
         <div
             class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
 

dashboard/components/dashboard/ActionableChart.vue

@@ -135,7 +135,7 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
             type: 'bubble',
             stack: 'combined',
             borderColor: ["#fbbf24"]
-        },
+        }
     ],
 });
 
@@ -198,11 +198,16 @@ const selectLabelsAvailable = computed<{ label: string, value: Slice, disabled:
 })
 
 const selectedSlice = computed<Slice>(() => {
+    console.log({ available: selectLabelsAvailable.value })
     const targetValue = selectLabelsAvailable.value[selectedLabelIndex.value];
     if (!targetValue) return 'day';
     if (targetValue.disabled) {
         selectedLabelIndex.value = selectLabelsAvailable.value.findIndex(e => !e.disabled);
     }
+    if (selectedLabelIndex.value === -1) {
+        console.error('ERROR CANNOT FIND CORRECT SLICE')
+        return 'day';
+    }
     return selectLabelsAvailable.value[selectedLabelIndex.value].value
 });
 
@@ -215,9 +220,14 @@ function transformResponse(input: { _id: string, count: number }[]) {
     const labels = input.map(e => DateService.getChartLabelFromISO(e._id, new Date().getTimezoneOffset(), selectedSlice.value));
     if (input.length > 0) allDatesFull.value = input.map(e => e._id.toString());
 
-    const todayIndex = input.findIndex(e => new Date(e._id).getTime() > (Date.now() - new Date().getTimezoneOffset() * 1000 * 60));
+    const current = (Date.now());
+    //console.log(input.map(e => e._id));
+    //console.log(new Date(current));
 
-    return { data, labels, todayIndex }
+    const todayIndex = input.findIndex(e => new Date(e._id).getTime() >= current);
+
+    //console.log({ todayIndex })
+    return { data, labels, todayIndex: todayIndex + 1 }
 }
 
 function onResponseError(e: any) {
@@ -276,7 +286,6 @@ function onDataReady() {
     chartData.value.datasets[1].backgroundColor = [createGradient('#4abde8')];
     chartData.value.datasets[2].backgroundColor = [createGradient('#fbbf24')];
 
-
     (chartData.value.datasets[1] as any).borderSkipped = sessionsData.data.value.data.map((e, i) => {
         const todayIndex = eventsData.data.value?.todayIndex || 0;
         if (i == todayIndex - 1) return true;
@@ -362,6 +371,11 @@ const legendClasses = ref<string[]>([
                         {{ (currentTooltipData as any)[tooltipNameIndex[index]] }}
                     </div>
                 </div>
+                <div class="mt-3 font-normal flex flex-col text-[.9rem] dark:text-lyx-text-dark text-lyx-lightmode-text-dark"
+                    v-if="(currentTooltipData as any).sessions > (currentTooltipData as any).visits">
+                    <div> Unique visitors is greater than visits. </div>
+                    <div> This can indicate bot traffic. </div>
+                </div>
                 <!-- <div class="bg-lyx-background-lighter h-[2px] w-full my-2"> </div> -->
             </LyxUiCard>
         </div>

dashboard/components/dashboard/TopCards.vue

@@ -8,7 +8,7 @@ const { snapshot, safeSnapshotDates, snapshotDuration } = useSnapshot()
 
 const chartSlice = computed(() => {
     if (snapshotDuration.value <= 3) return 'hour' as Slice;
-    if (snapshotDuration.value <= 32) return 'day' as Slice;
+    if (snapshotDuration.value <= 31 * 3) return 'day' as Slice;
     return 'month' as Slice;
 });
 
@@ -88,7 +88,7 @@ const avgSessionDuration = computed(() => {
 
 const todayIndex = computed(() => {
     if (!visitsData.data.value) return -1;
-    return visitsData.data.value.input.findIndex(e => new Date(e._id).getTime() > (Date.now() - new Date().getTimezoneOffset() * 1000 * 60));
+    return visitsData.data.value.input.findIndex(e => new Date(e._id).getTime() > (Date.now()));
 })
 
 

dashboard/components/dialog/ConfirmLogout.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+
+const emit = defineEmits(['success', 'cancel'])
+
+</script>
+
+<template>
+    <UModal :ui="{
+        strategy: 'override',
+        overlay: {
+            background: 'bg-lyx-background/85'
+        },
+        background: 'dark:bg-lyx-widget bg-lyx-lightmode-widget-light',
+        ring: 'border-solid border-[1px] border-[#262626]'
+    }">
+        <div class="h-full flex flex-col gap-2 p-4">
+
+            <div class="flex flex-col gap-3">
+
+                <div class="font-medium">
+                    Are you sure to logout ?
+                </div>
+
+
+                <div class="flex justify-end gap-2">
+                    <LyxUiButton type="secondary" @click="emit('cancel')">
+                        Cancel
+                    </LyxUiButton>
+                    <LyxUiButton @click="emit('success')" type="danger">
+                        Confirm
+                    </LyxUiButton>
+                </div>
+            </div>
+
+        </div>
+    </UModal>
+
+</template>

dashboard/components/dialog/CreateSnapshot.vue

@@ -107,7 +107,7 @@ async function confirmSnapshot() {
                 Cancel
             </LyxUiButton>
             <LyxUiButton @click="confirmSnapshot()" type="primary" class="w-full text-center"
-                :disabled="snapshotName.length == 0">
+                :disabled="snapshotName.trim().length == 0">
                 Confirm
             </LyxUiButton>
         </div>

dashboard/components/dialog/InviteManager.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import Accept_invite from '~/pages/accept_invite.vue';
+
+
+const { createAlert } = useAlert();
+const { close } = useModal()
+
+const emit = defineEmits(['success', 'cancel'])
+
+const props = defineProps<{
+    invites: {
+        project_name: string, project_id: string
+    }[]
+}>();
+
+async function acceptInvite(project_id: string) {
+    try {
+        await $fetch('/api/project/members/accept', {
+            method: 'POST',
+            body: JSON.stringify({ project_id }),
+            headers: useComputedHeaders({
+                custom: {
+                    'Content-Type': 'application/json'
+                }
+            }).value
+        });
+        emit('success');
+    } catch (ex) {
+        console.error(ex);
+        alert('Error accepting invite');
+        emit('cancel');       
+    }
+}
+
+async function declineInvite(project_id: string) {
+    try {
+        await $fetch('/api/project/members/decline', {
+            method: 'POST',
+            body: JSON.stringify({ project_id }),
+            headers: useComputedHeaders({
+                custom: {
+                    'Content-Type': 'application/json'
+                }
+            }).value
+        });
+        emit('success');
+    } catch (ex) {
+        console.error(ex);
+        alert('Error accepting invite');
+        emit('cancel');
+    }
+}
+
+</script>
+
+<template>
+    <UModal :ui="{
+        strategy: 'override',
+        overlay: {
+            background: 'bg-lyx-background/85'
+        },
+        background: 'dark:bg-lyx-widget bg-lyx-lightmode-widget-light',
+        ring: 'border-solid border-[1px] border-[#262626]'
+    }">
+        <div class="h-full flex flex-col gap-8 p-6">
+
+            <div class="flex flex-col gap-6" v-for="invite of invites">
+
+                <div class="dark:text-lyx-text text-lyx-lightmode-text">
+                    You are invited to join
+                    <span class="font-semibold">{{ invite.project_name }}</span>.
+                    Do you accept?
+                </div>
+
+                <div class="flex gap-4 w-full justify-end">
+                    <LyxUiButton @click="declineInvite(invite.project_id)" type="secondary"> Decline </LyxUiButton>
+                    <LyxUiButton @click="acceptInvite(invite.project_id)" type="primary"> Accept </LyxUiButton>
+                </div>
+
+            </div>
+
+
+
+        </div>
+    </UModal>
+</template>

dashboard/components/dialog/PermissionManager.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { useSelectMenuStyle } from '~/composables/ui/useSelectMenuStyle';
+import type { TTeamMember } from '~/shared/schema/TeamMemberSchema';
+
+const emit = defineEmits(['success', 'cancel'])
+
+const props = defineProps<{ member_id: string }>();
+
+const { domainList, domain, setActiveDomain, refreshDomains, refreshingDomains } = useDomain();
+
+const { data: member } = useFetch<TTeamMember>(`/api/project/members/get?member_id=${props.member_id}`, {
+    headers: useComputedHeaders({})
+})
+
+const { createAlert } = useAlert()
+
+async function save(member_id: string) {
+    if (!member.value) return;
+    const res = await $fetch('/api/project/members/edit', {
+        method: 'POST',
+        headers: useComputedHeaders({ custom: { 'Content-Type': 'application/json' } }).value,
+        body: JSON.stringify({
+            member_id,
+            webAnalytics: member.value.permission.webAnalytics,
+            events: member.value.permission.events,
+            ai: member.value.permission.ai,
+            domains: member.value.permission.domains
+        })
+    });
+    createAlert('Saved', 'Permission saved successfully', 'fas fa-check', 2500);
+    emit('success')
+}
+
+</script>
+
+
+
+<template>
+    <UModal :ui="{
+        strategy: 'override',
+        overlay: {
+            background: 'bg-lyx-background/85'
+        },
+        background: 'bg-lyx-lightmode-widget dark:bg-lyx-widget',
+        ring: 'border-solid border-[1px] border-[#262626]'
+    }">
+        <div class="p-8">
+            <div v-if="member" class="manage flex flex-col gap-4">
+
+                <div class="flex flex-col gap-1">
+                    <div class="poppins text-[1.1rem]"> Manage permissions </div>
+                    <div class="poppins text-[.9rem] dark:text-lyx-text-dark"> Choose what this member can do on this project. </div>
+                </div>
+
+                <LyxUiSeparator></LyxUiSeparator>
+
+                <div class="flex flex-col gap-1">
+                    <div>
+                        <div class="mb-1"> Select what domain is allowed to see: </div>
+                        <div class="mb-1">
+                            <USelectMenu v-model="member.permission.domains" :options="domainList" multiple
+                                value-attribute="_id">
+                                <template #option="{ option, active, selected }">
+                                    <div class="flex items-center gap-2">
+                                        <div>
+                                            <img class="h-5 bg-black rounded-full" :src="'/logo_32.png'"
+                                                alt="Litlyx logo">
+                                        </div>
+                                        <div> {{ option._id }} </div>
+                                    </div>
+                                </template>
+                                <template #label="e">
+                                    <div class="flex items-center gap-2">
+                                        <div>
+                                            <img class="h-5 bg-black rounded-full" :src="'/logo_32.png'"
+                                                alt="Litlyx logo">
+                                        </div>
+                                        <div>
+                                            {{
+                                                member.permission.domains.length > 2 ?
+                                                    `${member.permission.domains.length} domains` :
+                                                    (member.permission.domains.map(e => e).join(' & ') || 'No domains')
+                                            }}
+                                        </div>
+                                    </div>
+                                </template>
+                            </USelectMenu>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <UCheckbox v-model="member.permission.webAnalytics"></UCheckbox>
+                        <div> Allow web analytics page </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <UCheckbox v-model="member.permission.events"></UCheckbox>
+                        <div> Allow events page </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <UCheckbox v-model="member.permission.ai"></UCheckbox>
+                        <div> Allow to use AI data analyst </div>
+                    </div>
+                </div>
+            </div>
+
+
+
+
+            <div class="flex gap-2 justify-end mt-8">
+                <LyxUiButton class="!w-[6rem] text-center" type="secondary" @click="emit('cancel')"> Cancel </LyxUiButton>
+                <LyxUiButton class="!w-[6rem] text-center" v-if="member?.permission" @click="save(member._id.toString())" type="primary">
+                    Save
+                </LyxUiButton>
+            </div>
+
+        </div>
+    </UModal>
+
+</template>

dashboard/components/layout/TopNavigation.vue

@@ -5,6 +5,7 @@ import { DialogFeedback, DialogHelp } from '#components';
 const modal = useModal();
 const selfhosted = useSelfhosted();
 
+const { domain } = useDomain();
 
 const colorMode = useColorMode()
 const isDark = computed({
@@ -16,47 +17,50 @@ const isDark = computed({
     }
 })
 
-const {safeSnapshotDates} = useSnapshot();
+const { safeSnapshotDates } = useSnapshot();
 
 </script>
 
 <template>
     <div
-        class="w-full overflow-y-auto hide-scrollbars h-[4rem] border-solid border-[#D9D9E0] dark:border-[#202020] border-b-[1px] bg-lyx-lightmode-background dark:bg-lyx-background flex dark:shadow-[1px_0_10px_#000000]">
+        class="w-full hide-scrollbars relative h-[4rem] border-solid border-[#D9D9E0] dark:border-[#202020] border-b-[1px] bg-lyx-lightmode-background dark:bg-lyx-background dark:shadow-[1px_0_10px_#000000]">
 
-        <div class="flex items-center px-6">
-            <SelectorDomainSelector></SelectorDomainSelector>
-        </div>
-
-        <div class="hidden lg:flex pl-[12rem] items-center popping text-[.9rem] dark:text-lyx-text-dark">
-            Timeframe: 
-            {{new Date(safeSnapshotDates.from).toLocaleDateString()}} 
-            to
-             {{new Date(safeSnapshotDates.to).toLocaleDateString()}}
-        </div>
-
-
-        <div class="grow"></div>
-        <div class="flex items-center gap-6 mr-10">
-            
-            <div v-if="!selfhosted" @click="modal.open(DialogFeedback, {});"
-                class="flex gap-2 items-center cursor-pointer  outline-[1px] outline-lyx-widget-lighter p-1 px-3 rounded-md outline">
-                <i class="far fa-message"></i>
-                Feedback
+        <div class="absolute flex h-full w-full">
+            <div class="flex items-center px-6">
+                <SelectorDomainSelector></SelectorDomainSelector>
             </div>
 
-            <div @click="modal.open(DialogHelp, {});" class="cursor-pointer"> Help </div>
-            <NuxtLink to="https://docs.litlyx.com" target="_blank" class="cursor-pointer">
-                Docs
-            </NuxtLink>
+            <div class="hidden lg:flex items-center popping text-[.9rem] dark:text-lyx-text-dark">
+                Timeframe:
+                {{ new Date(safeSnapshotDates.from).toLocaleDateString() }}
+                to
+                {{ new Date(safeSnapshotDates.to).toLocaleDateString() }}
+            </div>
 
 
-            <div>
-                <UTooltip :text="isDark ? 'Toggle light mode' : 'Toggle dark mode'">
-                    <i @click="isDark = !isDark"
-                        class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
-                        :class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
-                </UTooltip>
+            <div class="grow"></div>
+            <div class="flex items-center gap-6 mr-10">
+
+                <div v-if="!selfhosted" @click="modal.open(DialogFeedback, {});"
+                    class="flex gap-2 items-center cursor-pointer  outline-[1px] outline-lyx-widget-lighter p-1 px-3 rounded-md outline">
+                    <i class="far fa-message"></i>
+                    Feedback
+                </div>
+
+                <div @click="modal.open(DialogHelp, {});" class="cursor-pointer"> Help </div>
+                <NuxtLink to="https://docs.litlyx.com" target="_blank" class="cursor-pointer">
+                    Docs
+                </NuxtLink>
+
+
+                <div>
+                    <UTooltip :text="isDark ? 'Toggle light mode' : 'Toggle dark mode'">
+                        <i @click="isDark = !isDark"
+                            class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
+                            :class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
+                    </UTooltip>
+                </div>
+
             </div>
 
         </div>

dashboard/components/layout/VerticalNavigation.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 
+import { DialogConfirmLogout, DialogInviteManager } from '#components';
 import CreateSnapshot from '../dialog/CreateSnapshot.vue';
 
 export type Entry = {
@@ -27,6 +28,10 @@ type Props = {
 const route = useRoute();
 const props = defineProps<Props>();
 
+const { data: pendingInvites, refresh: refreshInvites } = useFetch('/api/project/members/pending', {
+    headers: useComputedHeaders({})
+});
+
 const { userRoles, setLoggedUser } = useLoggedUser();
 const { projectList } = useProject();
 
@@ -89,12 +94,25 @@ async function generatePDF() {
 
 const { setToken } = useAccessToken();
 const router = useRouter();
+const { actions } = useProject();
+
+
+const modal = useModal();
+
 
 function onLogout() {
-    console.log('LOGOUT')
-    setToken('');
-    setLoggedUser(undefined);
-    router.push('/login');
+    modal.open(DialogConfirmLogout, {
+        onSuccess() {
+            modal.close();
+            console.log('LOGOUT');
+            setToken('');
+            setLoggedUser(undefined);
+            router.push('/login');
+        },
+        onCancel() {
+            modal.close();
+        }
+    })
 }
 
 const { data: maxProjects } = useFetch("/api/user/max_projects", {
@@ -106,6 +124,28 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
 });
 
 
+function openPendingInvites() {
+    if (!pendingInvites.value) return;
+    if (pendingInvites.value.length == 0) return;
+
+    console.log(pendingInvites);
+    modal.open(DialogInviteManager, {
+        invites: pendingInvites.value.map(e => {
+            return { project_id: e.project_id, project_name: e.project_name }
+        }),
+        onSuccess: () => {
+            modal.close();
+            actions.refreshProjectsList();
+            refreshInvites();
+        },
+        onCancel: () => {
+            modal.close();
+            actions.refreshProjectsList();
+            refreshInvites();
+        },
+    });
+}
+
 </script>
 
 <template>
@@ -249,7 +289,6 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
             <div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full"></div>
 
             <div class="flex flex-col h-full">
-
                 <div v-for="section of sections" class="flex flex-col gap-1 h-full pb-6">
 
                     <div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
@@ -283,6 +322,18 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
 
                 <div class="grow"></div>
 
+                <div v-if="pendingInvites && pendingInvites.length > 0" @click="openPendingInvites()"
+                    class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex flex-col justify-center cursor-pointer">
+                    <div class="poppins font-medium dark:text-lyx-text text-lyx-lightmode-text">
+                        Pending invitation
+                    </div>
+                    <div class="poppins dark:text-lyx-text-dark text-lyx-lightmode-text-dark">
+                        You have {{ pendingInvites.length }}
+                        pending invitation{{ pendingInvites.length != 1 ? 's' : '' }}
+                        awaiting your response
+                    </div>
+                </div>
+
                 <div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full px-4  mb-3"></div>
 
                 <div class="flex justify-end px-2">
@@ -296,7 +347,8 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
                     </div>
 
                     <UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">
-                        <div @click="onLogout()" class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
+                        <div @click="onLogout()"
+                            class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
                             <i class="far fa-arrow-right-from-bracket scale-x-[-100%]"></i>
                         </div>
                     </UTooltip>

dashboard/components/selector/DomainSelector.vue

@@ -8,7 +8,7 @@ function onChange(e: string) {
 </script>
 
 <template>
-    <div class="flex gap-2 absolute">
+    <div class="flex gap-2">
         <USelectMenu :uiMenu="{
             select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
             base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget w-max',
@@ -18,7 +18,7 @@ function onChange(e: string) {
             },
             input: 'z-[999] !bg-lyx-lightmode-widget dark:!bg-lyx-widget-light'
         }" class="w-full" searchable searchable-placeholder="Search domain..." v-if="domainList" @change="onChange"
-            :value="domain" value-attribute="_id" :options="domainList">
+            :value="domain" :loading="refreshingDomains" value-attribute="_id" :options="domainList">
 
             <template #option="{ option, active, selected }">
                 <div class="flex items-center gap-2">
@@ -35,7 +35,7 @@ function onChange(e: string) {
                         <img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
                     </div>
                     <div>
-                        {{ domain || '-' }}
+                        {{ refreshingDomains ? 'Loading...' : (domain || '-') }}
                     </div>
                 </div>
             </template>

dashboard/components/selector/ProjectSelector.vue

@@ -16,7 +16,6 @@ function isProjectMine(owner?: string) {
 
 function onChange(e: TProject) {
     actions.setActiveProject(e._id.toString());
-    setActiveDomain('All domains');
 }
 </script>
 

dashboard/components/settings/General.vue

@@ -4,6 +4,8 @@ import type { SettingsTemplateEntry } from './Template.vue';
 
 const { project, actions, projectList, isGuest, projectId } = useProject();
 
+const { createErrorAlert, createAlert } = useAlert();
+
 const entries: SettingsTemplateEntry[] = [
     { id: 'pname', title: 'Name', text: 'Project name' },
     { id: 'api', title: 'ApiKeys', text: 'Manage your authorization token' },
@@ -37,7 +39,7 @@ async function createApiKey() {
         apiKeys.value.push(res);
         newApiKeyName.value = '';
     } catch (ex: any) {
-        alert(ex.message);
+        createErrorAlert('Error', ex.message, 10000);
     }
 }
 
@@ -53,7 +55,7 @@ async function deleteApiKey(api_id: string) {
         newApiKeyName.value = '';
         await updateApiKeys();
     } catch (ex: any) {
-        alert(ex.message);
+        createErrorAlert('Error', ex.message, 10000);
     }
 
 }
@@ -116,14 +118,12 @@ async function deleteProject() {
 
 
     } catch (ex: any) {
-        alert(ex.message);
+        createErrorAlert('Error', ex.message);
     }
 
 
 }
 
-const { createAlert } = useAlert()
-
 function copyScript() {
     if (!navigator.clipboard) alert('You can\'t copy in HTTP');
 
@@ -172,7 +172,7 @@ function copyProjectId() {
                     <LyxUiInput class="grow px-4 py-2" :disabled="isGuest" placeholder="ApiKeyName"
                         v-model="newApiKeyName">
                     </LyxUiInput>
-                    <LyxUiButton v-if="!isGuest" @click="createApiKey()" :disabled="newApiKeyName.length < 3"
+                    <LyxUiButton v-if="!isGuest" @click="createApiKey()" :disabled="newApiKeyName.trim().length < 3"
                         type="primary">
                         <i class="far fa-plus"></i>
                     </LyxUiButton>

dashboard/components/settings/billing.vue

@@ -116,7 +116,7 @@ const { showDrawer } = useDrawer();
 </script>
 
 <template>
-    <div class="relative">
+    <div class="relative pb-[6rem]">
 
         <div v-if="invoicesPending || planPending"
             class="backdrop-blur-[1px] z-[20] mt-20 w-full h-full flex items-center justify-center font-bold">

dashboard/components/settings/members.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import type { SettingsTemplateEntry } from './Template.vue';
-
-const { projectId, isGuest } = useProject();
-
-definePageMeta({ layout: 'dashboard' });
-
-const columns = [
-    { key: 'me', label: '' },
-    { key: 'email', label: 'Email' },
-    { key: 'name', label: 'Name' },
-    { key: 'role', label: 'Role' },
-    { key: 'action', label: 'Actions' },
-    // { key: 'pending', label: 'Pending' },
-]
-
-const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', {
-    headers: useComputedHeaders({ useSnapshotDates: false })
-});
-
-const showAddMember = ref<boolean>(false);
-
-const addMemberEmail = ref<string>("");
-
-async function kickMember(email: string) {
-
-    const sure = confirm('Are you sure to kick ' + email + ' ?');
-    if (!sure) return;
-
-    try {
-
-        await $fetch('/api/project/members/kick', {
-            method: 'POST',
-            ...signHeaders({
-                'Content-Type': 'application/json',
-                'x-pid': projectId.value ?? ''
-            }),
-            body: JSON.stringify({ email }),
-            onResponseError({ request, response, options }) {
-                alert(response.statusText);
-            }
-        });
-
-        refreshMembers();
-
-    } catch (ex: any) { }
-
-
-
-}
-
-async function addMember() {
-
-    if (addMemberEmail.value.length === 0) return;
-
-    try {
-
-        showAddMember.value = false;
-
-        await $fetch('/api/project/members/add', {
-            method: 'POST',
-            ...signHeaders({
-                'Content-Type': 'application/json',
-                'x-pid': projectId.value ?? ''
-            }),
-            body: JSON.stringify({ email: addMemberEmail.value }),
-            onResponseError({ request, response, options }) {
-                alert(response.statusText);
-            }
-        });
-
-        addMemberEmail.value = '';
-
-        refreshMembers();
-
-    } catch (ex: any) { }
-
-
-}
-
-const entries: SettingsTemplateEntry[] = [
-    { id: 'add', title: 'Add member', text: 'Add new member to project' },
-    { id: 'members', title: 'Members', text: 'Manage members of current project' },
-]
-
-</script>
-
-<template>
-
-    <SettingsTemplate :entries="entries">
-        <template #add>
-            <div v-if="!isGuest" class="flex flex-col">
-                <div class="flex gap-4 items-center">
-                    <LyxUiInput class="px-4 py-1 w-full" placeholder="User email" v-model="addMemberEmail"></LyxUiInput>
-                    <LyxUiButton @click="addMember" type="secondary"> Add </LyxUiButton>
-                </div>
-                <div class="poppins text-[.8rem] mt-2 text-lyx-text-darker">
-                    User should have been registered to Litlyx
-                </div>
-            </div>
-            <div v-if="isGuest" class="text-lyx-text-darker"> Guests cannot add members</div>
-        </template>
-        <template #members>
-
-
-            <UTable :rows="members || []" :columns="columns">
-                <template #me-data="e">
-                    <i v-if="e.row.me" class="far fa-user"></i>
-                    <i v-if="!e.row.me"></i>
-                </template>
-
-                <template #action-data="e" v-if="!isGuest">
-                    <div @click="kickMember(e.row.email)" v-if="e.row.role != 'OWNER'"
-                        class="text-red-500 hover:bg-black/20 cursor-pointer outline outline-[1px] outline-red-500 px-3 py-1 rounded-lg text-center">
-                        Kick
-                    </div>
-                </template>
-
-            </UTable>
-        </template>
-    </SettingsTemplate>
-
-</template>

dashboard/composables/snapshots/BaseSnapshots.ts

@@ -71,7 +71,6 @@ export function getDefaultSnapshots(project_id: TProjectSnapshot['project_id'],
     }
 
 
-
     const allTime: DefaultSnapshot = {
         project_id,
         _id: '___allTime' as any,
@@ -83,8 +82,45 @@ export function getDefaultSnapshots(project_id: TProjectSnapshot['project_id'],
     }
 
 
+    const last30Days: DefaultSnapshot = {
+        project_id,
+        _id: '___last30days' as any,
+        name: 'Last 30 days',
+        from: fns.startOfDay(fns.subDays(Date.now(), 30)),
+        to: fns.endOfDay(fns.subDays(Date.now(), 0)),
+        color: '#606c38',
+        default: true
+    }
 
-    const snapshotList = [lastDay, today, lastMonth, currentMonth, lastWeek, currentWeek, allTime]
+    const last60Days: DefaultSnapshot = {
+        project_id,
+        _id: '___last60days' as any,
+        name: 'Last 60 days',
+        from: fns.startOfDay(fns.subDays(Date.now(), 60)),
+        to: fns.endOfDay(fns.subDays(Date.now(), 0)),
+        color: '#bc6c25',
+        default: true
+    }
+
+    const last90Days: DefaultSnapshot = {
+        project_id,
+        _id: '___last90days' as any,
+        name: 'Last 90 days',
+        from: fns.startOfDay(fns.subDays(Date.now(), 90)),
+        to: fns.endOfDay(fns.subDays(Date.now(), 0)),
+        color: '#fefae0',
+        default: true
+    }
+
+
+    const snapshotList = [
+        allTime,
+        lastDay, today,
+        lastWeek, currentWeek,
+        lastMonth, currentMonth,
+        last30Days,
+        last60Days, last90Days,
+    ]
 
     return snapshotList;
 

dashboard/composables/useAlert.ts

@@ -34,10 +34,19 @@ function createAlert(title: string, text: string, icon: string, ms: number) {
     }, 250)
 }
 
+function createSuccessAlert(title: string, text: string, ms?: number) {
+    return createAlert(title, text, 'far fa-circle-check', ms ?? 5000);
+}
+
+function createErrorAlert(title: string, text: string, ms?: number) {
+    return createAlert(title, text, 'far fa-triangle-exclamation', ms ?? 5000);
+}
+
+
 function closeAlert(id: number) {
     alerts.value = alerts.value.filter(e => e.id != id);
 }
 
 export function useAlert() {
-    return { alerts, createAlert, closeAlert }
+    return { alerts, createAlert, closeAlert, createSuccessAlert, createErrorAlert }
 }

dashboard/composables/useDomain.ts

@@ -16,26 +16,22 @@ function refreshDomains() {
     domainsRequest.refresh();
 }
 
+watch(domainsRequest.data, () => {
+    if (!domainsRequest.data.value) return;
+    setActiveDomain(domainList.value[0]._id);
+});
+
 const refreshingDomains = computed(() => domainsRequest.pending.value);
 
 const domainList = computed(() => {
-    return [
-        {
-            _id: 'All domains', visits: domainsRequest.data.value?.reduce((a, e) => a + e.visits, 0)
-        },
-        ...(domainsRequest.data.value?.sort((a, b) => b.visits - a.visits) || [])
-    ]
+    return (domainsRequest.data.value?.sort((a, b) => b.visits - a.visits) || []);
 })
 
 
 const activeDomain = ref<string>();
 
 const domain = computed(() => {
-    if (activeDomain.value) return activeDomain.value;
-    if (!domainList.value) return;
-    if (domainList.value.length == 0) return;
-    setActiveDomain(domainList.value[0]._id);
-    return domainList.value[0]._id;
+    return activeDomain.value;
 })
 
 function setActiveDomain(domain: string) {

dashboard/composables/usePermission.ts

@@ -0,0 +1,14 @@
+
+
+
+const { data: permission } = useFetch('/api/project/members/me', {
+    headers: useComputedHeaders({})
+});
+
+const canSeeWeb = computed(() => permission.value?.webAnalytics || false);
+const canSeeEvents = computed(() => permission.value?.events || false);
+const canSeeAi = computed(() => permission.value?.ai || false);
+
+export function usePermission() {
+    return { permission, canSeeWeb, canSeeEvents, canSeeAi };
+}

dashboard/composables/useProject.ts

@@ -33,7 +33,10 @@ const guestProjectList = computed(() => {
     return guestProjectsRequest.data.value;
 })
 
-const refreshProjectsList = () => projectsRequest.refresh();
+const refreshProjectsList = () => {
+    projectsRequest.refresh();
+    guestProjectsRequest.refresh();
+}
 
 const activeProjectId = ref<string | undefined>();
 

dashboard/composables/useSnapshot.ts

@@ -15,7 +15,7 @@ const remoteSnapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', {
 
 watch(project, async () => {
     await remoteSnapshots.refresh();
-    snapshot.value = isLiveDemo.value ? snapshots.value[3] : snapshots.value[3];
+    snapshot.value = isLiveDemo.value ? snapshots.value[7] : snapshots.value[7];
 });
 
 const snapshots = computed<GenericSnapshot[]>(() => {

dashboard/layouts/dashboard.vue

@@ -18,6 +18,7 @@ const sections: Section[] = [
         entries: [
             { label: 'Web Analytics', to: '/', icon: 'fal fa-table-layout' },
             { label: 'Custom Events', to: '/events', icon: 'fal fa-square-bolt' },
+            { label: 'Members', to: '/members', icon: 'fal fa-users' },
             { label: 'Ask AI', to: '/analyst', icon: 'fal fa-sparkles' },
 
             // { label: 'Security', to: '/security', icon: 'fal fa-shield', disabled: selfhosted },

dashboard/pages/accept_invite.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+
+const router = useRouter();
+const route = useRoute();
+
+onMounted(async () => {
+    try {
+        const project_id = route.query.project_id;
+        if (!project_id) throw Error('project_id is required');
+        const res = await $fetch('/api/project/members/accept', {
+            headers: useComputedHeaders({
+                custom: {
+                    'Content-Type': 'application/json'
+                }
+            }).value,
+            method: 'POST',
+            body: JSON.stringify({ project_id })
+        });
+        router.push('/');
+    } catch (ex) {
+        console.error('ERROR');
+        console.error(ex);
+        alert('An error occurred');
+    }
+});
+
+
+</script>
+
+<template>
+    <div>
+        You will be redirected soon.
+    </div>
+</template>

dashboard/pages/admin/index.vue

@@ -5,165 +5,8 @@ import type { CItem } from '~/components/CustomTab.vue';
 definePageMeta({ layout: 'dashboard' });
 
 
-const filterPremium = ref<boolean>(false);
-const filterAppsumo = ref<boolean>(false);
-
-
-
-const timeRange = ref<number>(9);
-
-function setTimeRange(n: number) {
-    timeRange.value = n;
-}
-
-const timeRangeTimestamp = computed(() => {
-    if (timeRange.value == 1) return Date.now() - 1000 * 60 * 60 * 24;
-    if (timeRange.value == 2) return Date.now() - 1000 * 60 * 60 * 24 * 7;
-    if (timeRange.value == 3) return Date.now() - 1000 * 60 * 60 * 24 * 30;
-    return 0;
-})
-
-
-// const { data: projectsAggregatedResponseData } = await useFetch<AdminProjectsList[]>('/api/admin/projects', signHeaders());
-// const { data: counts } = await useFetch(() => `/api/admin/counts?from=${timeRangeTimestamp.value}`, signHeaders());
-
-
-
-// function onHideClicked() {
-//     isAdminHidden.value = true;
-// }
-
-
-// function isAppsumoType(type: number) {
-//     return type > 6000 && type < 6004
-// }
-
-// const projectsAggregated = computed(() => {
-
-//     let pool = projectsAggregatedResponseData.value ? [...projectsAggregatedResponseData.value] : [];
-
-//     let shownPool: AdminProjectsList[] = [];
-
-
-//     for (const element of pool) {
-
-//         shownPool.push({ ...element, projects: [...element.projects] });
-
-//         if (filterAppsumo.value === true) {
-//             shownPool.forEach(e => {
-//                 e.projects = e.projects.filter(project => {
-//                     return isAppsumoType(project.premium_type)
-//                 })
-//             })
-
-//             shownPool = shownPool.filter(e => {
-//                 return e.projects.length > 0;
-//             })
-
-//         } else if (filterPremium.value === true) {
-//             shownPool.forEach(e => {
-//                 e.projects = e.projects.filter(project => {
-//                     return project.premium === true;
-//                 })
-//             })
-
-//             shownPool = shownPool.filter(e => {
-//                 return e.projects.length > 0;
-//             })
-
-//         } else {
-//             console.log('NO DATA')
-//         }
-//     }
-
-
-
-
-//     return shownPool.sort((a, b) => {
-//         const sumVisitsA = a.projects.reduce((pa, pe) => pa + (pe.counts?.visits || 0) + (pe.counts?.events || 0), 0);
-//         const sumVisitsB = b.projects.reduce((pa, pe) => pa + (pe.counts?.visits || 0) + (pe.counts?.events || 0), 0);
-//         return sumVisitsB - sumVisitsA;
-//     }).filter(e => {
-//         return new Date(e.created_at).getTime() >= timeRangeTimestamp.value
-//     });
-// })
-
-// const premiumCount = computed(() => {
-//     let premiums = 0;
-//     projectsAggregated.value?.forEach(e => {
-//         e.projects.forEach(p => {
-//             if (p.premium) premiums++;
-//         });
-
-//     })
-//     return premiums;
-// })
-
-
-// const activeProjects = computed(() => {
-//     let actives = 0;
-
-//     projectsAggregated.value?.forEach(e => {
-//         e.projects.forEach(p => {
-//             if (!p.counts) return;
-//             if (!p.counts.updated_at) return;
-//             const updated_at = new Date(p.counts.updated_at).getTime();
-//             if (updated_at < Date.now() - 1000 * 60 * 60 * 24) return;
-//             actives++;
-//         });
-//     })
-//     return actives;
-// });
-
-
-
-// const totalVisits = computed(() => {
-//     return projectsAggregated.value?.reduce((a, e) => {
-//         return a + e.projects.reduce((pa, pe) => pa + (pe.counts?.visits || 0), 0);
-//     }, 0) || 0;
-// });
-
-// const totalEvents = computed(() => {
-//     return projectsAggregated.value?.reduce((a, e) => {
-//         return a + e.projects.reduce((pa, pe) => pa + (pe.counts?.events || 0), 0);
-//     }, 0) || 0;
-// });
-
-
-
 const details = ref<any>();
 const showDetails = ref<boolean>(false);
-async function getProjectDetails(project_id: string) {
-    details.value = await $fetch(`/api/admin/details?project_id=${project_id}`, signHeaders());
-    showDetails.value = true;
-}
-
-async function resetCount(project_id: string) {
-    await $fetch(`/api/admin/reset_count?project_id=${project_id}`, signHeaders());
-}
-
-
-function dateDiffDays(a: string) {
-    return (Date.now() - new Date(a).getTime()) / (1000 * 60 * 60 * 24)
-}
-
-function getLogBg(last_logged_at?: string) {
-
-    const day = 1000 * 60 * 60 * 24;
-    const week = 1000 * 60 * 60 * 24 * 7;
-
-    const lastLoggedAtDate = new Date(last_logged_at || 0);
-
-    if (lastLoggedAtDate.getTime() > Date.now() - day) {
-        return 'bg-green-500'
-    } else if (lastLoggedAtDate.getTime() > Date.now() - week) {
-        return 'bg-yellow-500'
-    } else {
-        return 'bg-red-500'
-    }
-
-}
-
 
 const tabs: CItem[] = [
     { label: 'Overview', slot: 'overview' },

dashboard/pages/analyst.vue

@@ -6,6 +6,8 @@ definePageMeta({ layout: 'dashboard' });
 
 const selfhosted = useSelfhosted();
 
+const { permission, canSeeAi } = usePermission();
+
 const debugModeAi = ref<boolean>(false);
 
 const { userRoles } = useLoggedUser();
@@ -253,7 +255,12 @@ async function clearAllChats() {
 </script>
 
 <template>
-    <div class="w-full h-full overflow-y-hidden">
+
+    <div v-if="!canSeeAi" class="h-full w-full flex mt-[20vh] justify-center">
+        <div> You need AI permission to view this page </div>
+    </div>
+
+    <div v-if="canSeeAi" class="w-full h-full overflow-y-hidden">
 
         <div class="flex flex-row h-full overflow-y-hidden">
 

dashboard/pages/events.vue

@@ -4,6 +4,7 @@ import DateService, { type Slice } from '@services/DateService';
 
 definePageMeta({ layout: 'dashboard' });
 
+const { permission, canSeeEvents } = usePermission();
 
 const { snapshotDuration } = useSnapshot();
 
@@ -30,7 +31,12 @@ const eventsData = await useFetch(`/api/data/count`, {
 
 
 <template>
-    <div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
+
+    <div v-if="!canSeeEvents" class="h-full w-full flex mt-[20vh] justify-center">
+        <div> You need events permission to view this page </div>
+    </div>
+
+    <div v-if="canSeeEvents" class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
 
 
         <LyxUiCard class="w-full flex justify-between items-center lg:flex-row flex-col gap-6 lg:gap-0">

dashboard/pages/index.vue

@@ -11,6 +11,9 @@ const jwtLogin = computed(() => route.query.jwt_login as string);
 
 const { token, setToken } = useAccessToken();
 
+const { refreshingDomains } = useDomain();
+const { permission, canSeeWeb, canSeeEvents } = usePermission();
+
 onMounted(async () => {
 
     if (jwtLogin.value) {
@@ -36,27 +39,39 @@ const selfhosted = useSelfhosted();
 
 <template>
 
-    <div class="dashboard w-full h-full overflow-y-auto overflow-x-hidden pb-[7rem] md:pt-4 lg:pt-0">
+    <div v-if="!canSeeWeb" class="h-full w-full flex mt-[20vh] justify-center">
+        <div> You need webAnalytics permission to view this page </div>
+    </div>
 
+    <div v-if="canSeeWeb && refreshingDomains">
+        <div class="w-full flex justify-center items-center mt-[20vh]">
+            <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
+        </div>
+    </div>
+
+    <div v-if="canSeeWeb && !refreshingDomains" class="dashboard w-full h-full overflow-y-auto overflow-x-hidden pb-[7rem] md:pt-4 lg:pt-0">
 
         <div v-if="showDashboard">
-             <div class="w-full px-4 py-2 gap-2 flex flex-col">
+
+            <div class="w-full px-4 py-2 gap-2 flex flex-col">
                 <BannerLimitsInfo v-if="!selfhosted" :key="refreshKey"></BannerLimitsInfo>
-                <!-- <BannerOffer v-if="!selfhosted" :key="refreshKey"></BannerOffer> -->
             </div>
 
             <div>
                 <DashboardTopSection :key="refreshKey"></DashboardTopSection>
                 <DashboardTopCards :key="refreshKey"></DashboardTopCards>
             </div>
-           
+
 
             <div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row w-full">
-                <DashboardActionableChart :key="refreshKey"></DashboardActionableChart>
-            </div> 
+                <DashboardActionableChart v-if="canSeeWeb && canSeeEvents" :key="refreshKey"></DashboardActionableChart>
+                <LyxUiCard v-else class="flex justify-center w-full py-4">
+                    You need events permission to view this widget
+                </LyxUiCard>
+            </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">
                         <BarCardReferrers :key="refreshKey"></BarCardReferrers>
@@ -66,7 +81,7 @@ const selfhosted = useSelfhosted();
                     </div>
                 </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">
@@ -76,9 +91,9 @@ const selfhosted = useSelfhosted();
                         <BarCardDevices :key="refreshKey"></BarCardDevices>
                     </div>
                 </div>
-            </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">
@@ -88,11 +103,10 @@ const selfhosted = useSelfhosted();
                         <BarCardOperatingSystems :key="refreshKey"></BarCardOperatingSystems>
                     </div>
                 </div>
-            </div> 
+            </div>
 
         </div>
 
-
         <FirstInteraction v-if="!justLogged" :refresh-interaction="firstInteraction.refresh"
             :first-interaction="(firstInteraction.data.value || false)"></FirstInteraction>
 

dashboard/pages/login.vue

@@ -19,6 +19,8 @@ const router = useRouter();
 
 const { token, setToken } = useAccessToken();
 
+const { createErrorAlert } = useAlert();
+
 async function handleOnSuccess(response: any) {
 
     try {
@@ -97,7 +99,7 @@ function goBackToEmailLogin() {
 
 async function signInSelfhosted() {
     try {
-        const result = await $fetch(`/api/auth/no_auth`, {
+        const result: any = await $fetch(`/api/auth/no_auth`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ email: email.value, password: password.value })
@@ -124,7 +126,7 @@ async function signInSelfhosted() {
         }
 
     } catch (ex: any) {
-        alert('Error during login.' + ex.message);
+        createErrorAlert('Error', 'Error during login.' + ex.message);
     }
 }
 
@@ -137,7 +139,7 @@ async function signInWithCredentials() {
             body: JSON.stringify({ email: email.value, password: password.value })
         })
 
-        if (result.error) return alert(result.message);
+        if (result.error) return createErrorAlert('Error', result.message);
 
         setToken(result.access_token);
 
@@ -156,8 +158,8 @@ async function signInWithCredentials() {
         }
 
 
-    } catch (ex) {
-        alert('Something went wrong.');
+    } catch (ex: any) {
+        createErrorAlert('Error', 'Something went wrong.' + ex.message);
     }
 }
 
@@ -258,7 +260,7 @@ async function signInWithCredentials() {
 
 
 
-                    <div v-if="isNoAuth" @click="loginWithoutAuth"
+                    <div v-if="isNoAuth"
                         class="flex text-[1.3rem] flex-col gap-4 items-center px-8 py-3 relative z-[2]">
                         <div class="flex flex-col gap-4 z-[100] w-[20vw] min-w-[20rem]">
                             <LyxUiInput class="px-3 py-2" placeholder="Email" v-model="email"></LyxUiInput>

dashboard/pages/members.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { DialogPermissionManager } from '#components';
+import type { TPermission } from '~/shared/schema/TeamMemberSchema';
+
+const { projectId, isGuest } = useProject();
+
+definePageMeta({ layout: 'dashboard' });
+
+const columns = [
+    { key: 'me', label: '' },
+    { key: 'email', label: 'Email' },
+    { key: 'permission', label: 'Permission' },
+    { key: 'pending', label: 'Status' },
+    { key: 'action', label: 'Actions' },
+]
+
+const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', {
+    headers: useComputedHeaders({ useSnapshotDates: false })
+});
+
+const showAddMember = ref<boolean>(false);
+
+const addMemberEmail = ref<string>("");
+
+const { createErrorAlert } = useAlert();
+
+async function kickMember(email: string) {
+    const sure = confirm('Are you sure to kick ' + email + ' ?');
+    if (!sure) return;
+    try {
+        await $fetch('/api/project/members/kick', {
+            method: 'POST',
+            ...signHeaders({
+                'Content-Type': 'application/json',
+                'x-pid': projectId.value ?? ''
+            }),
+            body: JSON.stringify({ email }),
+            onResponseError({ request, response, options }) {
+                createErrorAlert('Error', response.statusText);
+            }
+        });
+
+        refreshMembers();
+    } catch (ex: any) { }
+}
+
+async function addMember() {
+
+    if (addMemberEmail.value.length === 0) return;
+
+    try {
+
+        showAddMember.value = false;
+
+        await $fetch('/api/project/members/add', {
+            method: 'POST',
+            ...signHeaders({
+                'Content-Type': 'application/json',
+                'x-pid': projectId.value ?? ''
+            }),
+            body: JSON.stringify({ email: addMemberEmail.value }),
+            onResponseError({ request, response, options }) {
+                createErrorAlert('Error', response.statusText);
+            }
+        });
+
+        addMemberEmail.value = '';
+
+        refreshMembers();
+
+    } catch (ex: any) { }
+
+
+}
+
+
+const modal = useModal();
+
+function openPermissionManagerDialog(member_id: string) {
+    modal.open(DialogPermissionManager, {
+        preventClose: true,
+        member_id,
+        onSuccess: () => {
+            modal.close();
+            refreshMembers();
+        },
+        onCancel: () => {
+            modal.close();
+            refreshMembers();
+        },
+    });
+}
+
+function permissionToString(permission: TPermission) {
+    const result: string[] = [];
+    if (permission.webAnalytics) result.push('w');
+    if (permission.events) result.push('e');
+    if (permission.ai) result.push('a');
+    if (permission.domains.includes('All domains')) {
+        result.push('+');
+    } else {
+        result.push(permission.domains.length.toString());
+    }
+    return result.join('');
+}
+
+async function leaveProject() {
+    try {
+        await $fetch('/api/project/members/leave', {
+            headers: useComputedHeaders({}).value
+        });
+        location.reload();
+    } catch (ex: any) {
+        alert(ex.message);
+    }
+
+}
+</script>
+
+<template>
+    <div class="p-6 pt-10">
+
+        <div v-if="!isGuest" class="flex flex-col gap-8">
+
+            <div class="flex flex-col">
+                <div class="flex gap-4 items-center">
+                    <LyxUiInput class="px-4 py-1 w-full" placeholder="Add a new member" v-model="addMemberEmail">
+                    </LyxUiInput>
+                    <LyxUiButton @click="addMember" type="secondary"> Add </LyxUiButton>
+                </div>
+                <div class="poppins text-[.8rem] mt-2 dark:text-lyx-text-dark">
+                    We will send an invitation email to the user you wish to add to this project.
+                </div>
+            </div>
+
+            <div>
+                <UTable :rows="members || []" :columns="columns">
+
+                    <template #me-data="e">
+                        <i v-if="e.row.me" class="far fa-user text-lyx-lightmode-text dark:text-lyx-text"></i>
+                        <i v-if="!e.row.me"></i>
+                    </template>
+
+                    <template #email-data="e">
+                        <div class="text-lyx-lightmode-text dark:text-lyx-text">
+                            {{ e.row.email }}
+                        </div>
+                    </template>
+
+                    <template #pending-data="e">
+                        <div class="text-lyx-lightmode-text dark:text-lyx-text">
+                            {{ e.row.pending ? 'Pending' : 'Accepted' }}
+                        </div>
+                    </template>
+
+                    <template #permission-data="e">
+                        <div class="text-lyx-lightmode-text dark:text-lyx-text flex gap-2">
+                            <div v-if="e.row.role !== 'OWNER' && !isGuest">
+                                <LyxUiButton class="!px-2" type="secondary"
+                                    @click="openPermissionManagerDialog(e.row.id.toString())">
+                                    <UTooltip text="Manage permissions">
+                                        <i class="far fa-gear"></i>
+                                    </UTooltip>
+                                </LyxUiButton>
+                            </div>
+
+                            <div class="flex gap-2 flex-wrap">
+                                <UBadge variant="outline" size="sm" color="yellow"
+                                    v-if="!e.row.permission.webAnalytics && !e.row.permission.events && !e.row.permission.ai && e.row.permission.domains.length == 0">
+                                    No permission given
+                                </UBadge>
+                                <UBadge variant="outline" size="sm" v-if="e.row.permission.webAnalytics"
+                                    label="Analytics"> </UBadge>
+                                <UBadge variant="outline" size="sm" v-if="e.row.permission.events" label="Events">
+                                </UBadge>
+                                <UBadge variant="outline" size="sm" v-if="e.row.permission.ai" label="AI"> </UBadge>
+                                <UBadge variant="outline" color="blue" size="sm"
+                                    v-if="e.row.permission.domains.includes('All domains')" label="All domains">
+                                </UBadge>
+
+                                <UBadge variant="outline" size="sm" color="blue"
+                                    v-if="!e.row.permission.domains.includes('All domains')"
+                                    v-for="domain of e.row.permission.domains" :label="domain"> </UBadge>
+
+
+                            </div>
+                        </div>
+                    </template>
+
+
+                    <template #action-data="e" v-if="!isGuest">
+                        <div @click="kickMember(e.row.email)" v-if="e.row.role != 'OWNER'"
+                            class="text-red-500 hover:bg-black/20 cursor-pointer outline outline-[1px] outline-red-500 px-3 py-1 rounded-lg text-center">
+                            Remove
+                        </div>
+                    </template>
+
+                </UTable>
+
+            </div>
+
+        </div>
+
+        <div v-if="isGuest" class="flex flex-col gap-8 mt-[10vh]">
+            <div class="flex flex-col gap-4 items-center">
+                <div class="text-[1.2rem]"> Leave this project </div>
+                <LyxUiButton @click="leaveProject()" type="primary"> Leave </LyxUiButton>
+            </div>
+        </div>
+
+    </div>
+</template>

dashboard/pages/project_creation.vue

@@ -23,7 +23,7 @@ onMounted(() => {
 
 
 async function createProject() {
-    if (projectName.value.length < 2) return;
+    if (projectName.value.trim().length < 2) return;
 
     Lit.event('create_project');
 
@@ -34,7 +34,7 @@ async function createProject() {
         await $fetch('/api/project/create', {
             method: 'POST',
             ...signHeaders({ 'Content-Type': 'application/json' }),
-            body: JSON.stringify({ name: projectName.value })
+            body: JSON.stringify({ name: projectName.value.trim() })
         });
 
         await actions.refreshProjectsList();
@@ -89,7 +89,7 @@ async function createProject() {
 
             <div>
 
-                <LyxUiButton type="primary" @click="createProject()" :disabled="projectName.length < 2">
+                <LyxUiButton type="primary" @click="createProject()" :disabled="projectName.trim().length < 2">
                     Create
                 </LyxUiButton>
 

dashboard/pages/settings.vue

@@ -7,7 +7,6 @@ const selfhosted = useSelfhosted();
 const items = [
     { label: 'General', slot: 'general', tab: 'general' },
     { label: 'Domains', slot: 'domains', tab: 'domains' },
-    { label: 'Members', slot: 'members', tab: 'members' },
     { label: 'Billing', slot: 'billing', tab: 'billing' },
     { label: 'Codes', slot: 'codes', tab: 'codes' },
     { label: 'Account', slot: 'account', tab: 'account' }
@@ -16,7 +15,7 @@ const items = [
 </script>
 
 <template>
-    <div class="lg:px-10 lg:py-8 h-dvh overflow-y-auto overflow-x-hidden hide-scrollbars !pb-[10rem]">
+    <div class="lg:px-10 h-full lg:py-8 overflow-hidden hide-scrollbars">
 
         <div class="poppins font-semibold text-[1.3rem] lg:px-0 px-4 lg:py-0 py-4"> Settings </div>
 
@@ -27,9 +26,6 @@ const items = [
             <template #domains>
                 <SettingsData :key="refreshKey"></SettingsData>
             </template>
-            <template #members>
-                <SettingsMembers :key="refreshKey"></SettingsMembers>
-            </template>
             <template #billing>
                 <SettingsBilling v-if="!selfhosted" :key="refreshKey"></SettingsBilling>
                 <div class="flex popping text-[1.2rem] font-semibold justify-center mt-[20vh] text-lyx-lightmode-text dark:text-lyx-text"

dashboard/pages/test_links.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+
+const { data: links } = useFetch('/api/project/links/list', {
+    headers: useComputedHeaders()
+});
+
+</script>
+
+<template>
+    <div>
+        <div v-for="link of links">
+            {{ link }}
+        </div>
+    </div>
+</template>

dashboard/server/api/admin/metrics.ts

@@ -0,0 +1,36 @@
+import { ProjectModel } from "@schema/project/ProjectSchema";
+import { UserModel } from "@schema/UserSchema";
+import { EventModel } from "@schema/metrics/EventSchema";
+import { VisitModel } from "@schema/metrics/VisitSchema";
+
+export default defineEventHandler(async event => {
+    const userData = getRequestUser(event);
+    if (!userData?.logged) return;
+    if (!userData.user.roles.includes('ADMIN')) return;
+
+    const { filterFrom, filterTo } = getQuery(event);
+
+
+    const matchQuery = {
+        created_at: {
+            $gte: new Date(filterFrom as string),
+            $lte: new Date(filterTo as string)
+        }
+    }
+
+    const totalProjects = await ProjectModel.countDocuments({ ...matchQuery });
+    const premiumProjects = await ProjectModel.countDocuments({ ...matchQuery, premium: true });
+
+    const deadProjects = await ProjectModel.countDocuments({ ...matchQuery });
+
+    const totalUsers = await UserModel.countDocuments({ ...matchQuery });
+
+    const totalVisits = 0;
+
+    const totalEvents = await EventModel.countDocuments({ ...matchQuery });
+
+
+    return { totalProjects, premiumProjects, deadProjects, totalUsers, totalVisits, totalEvents }
+
+
+});

dashboard/server/api/admin/users.ts

@@ -8,16 +8,27 @@ export default defineEventHandler(async event => {
     if (!userData?.logged) return;
     if (!userData.user.roles.includes('ADMIN')) return;
 
-    const { page, limit, sortQuery, filterQuery } = getQuery(event);
+    const { page, limit, sortQuery, filterQuery, filterFrom, filterTo } = getQuery(event);
 
     const pageNumber = parseInt(page as string);
     const limitNumber = parseInt(limit as string);
 
-    const count = await UserModel.countDocuments(JSON.parse(filterQuery as string));
+    const matchQuery = {
+        ...JSON.parse(filterQuery as string),
+        created_at: {
+            $gte: new Date(filterFrom as string),
+            $lte: new Date(filterTo as string)
+        }
+    }
+
+    
+    const count = await UserModel.countDocuments(matchQuery);
+
+
 
     const users = await UserModel.aggregate([
         {
-            $match: JSON.parse(filterQuery as string)
+            $match: matchQuery
         },
         {
             $lookup: {

dashboard/server/api/ai/[chat_id]/delete.ts

@@ -3,7 +3,7 @@ import { AiChatModel } from "@schema/ai/AiChatSchema";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestDataOld(event);
+    const data = await getRequestData(event, [], ['AI']);
     if (!data) return;
 
     const { project_id } = data;

dashboard/server/api/ai/[chat_id]/get_messages.ts

@@ -4,7 +4,7 @@ import type OpenAI from "openai";
 import { getChartsInMessage } from "~/server/services/AiService";
 
 export default defineEventHandler(async event => {
-    const data = await getRequestDataOld(event);
+    const data = await getRequestData(event, [], ['AI']);
     if (!data) return;
 
     const isAdmin = data.user.user.roles.includes('ADMIN');

dashboard/server/api/ai/[chat_id]/status.ts

@@ -2,7 +2,7 @@
 import { AiChatModel } from "@schema/ai/AiChatSchema";
 
 export default defineEventHandler(async event => {
-    const data = await getRequestDataOld(event);
+    const data = await getRequestData(event, [], ['AI']);
     if (!data) return;
 
     const { project_id } = data;

dashboard/server/api/ai/chats_remaining.ts

@@ -10,7 +10,7 @@ export async function getAiChatRemainings(project_id: string) {
 }
 
 export default defineEventHandler(async event => {
-    const data = await getRequestDataOld(event);
+    const data = await getRequestData(event, [], ['AI']);
     if (!data) return;
 
     const { pid } = data;

dashboard/server/api/ai/delete_all_chats.ts

@@ -3,7 +3,7 @@ import { AiChatModel } from "@schema/ai/AiChatSchema";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestDataOld(event);
+    const data = await getRequestData(event, [], ['AI']);
     if (!data) return;
 
     const { project_id } = data;

dashboard/server/api/ai/send_message.post.ts

@@ -5,7 +5,7 @@ import { ProjectLimitModel } from "@schema/project/ProjectsLimits";
 
 
 export default defineEventHandler(async event => {
-    const data = await getRequestDataOld(event);
+    const data = await getRequestData(event, [], ['AI']);
     if (!data) return;
 
     const { pid } = data;

dashboard/server/api/data/browsers.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'RANGE', 'GUEST', 'DOMAIN']);
+    const data = await getRequestData(event, ['RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/data/count.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 export default defineEventHandler(async event => {
 
 
-    const data = await getRequestData(event, ['GUEST', 'DOMAIN', 'RANGE', 'SCHEMA']);
+    const data = await getRequestData(event, ['DOMAIN', 'RANGE', 'SCHEMA'], ['WEB']);
     if (!data) return;
 
     const { schemaName, pid, from, to, model, project_id, domain } = data;

dashboard/server/api/data/countries.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'RANGE', 'GUEST', 'DOMAIN']);
+    const data = await getRequestData(event, ['RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/data/devices.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'RANGE', 'GUEST', 'DOMAIN']);
+    const data = await getRequestData(event, ['RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/data/events.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'DOMAIN', 'RANGE']);
+    const data = await getRequestData(event, ['DOMAIN', 'RANGE'], ['EVENTS']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/data/oss.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'RANGE', 'GUEST', 'DOMAIN']);
+    const data = await getRequestData(event, ['RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/data/pages.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'RANGE', 'GUEST', 'DOMAIN']);
+    const data = await getRequestData(event, ['RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/data/referrers.ts

@@ -4,7 +4,7 @@ import { Redis } from "~/server/services/CacheService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['OFFSET', 'RANGE', 'GUEST', 'DOMAIN']);
+    const data = await getRequestData(event, ['OFFSET', 'RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, project_id, limit, domain } = data;

dashboard/server/api/domains/list.ts

@@ -1,18 +1,45 @@
 
 import { VisitModel } from "@schema/metrics/VisitSchema";
+import { TeamMemberModel } from "~/shared/schema/TeamMemberSchema";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST']);
+    const data = await getRequestData(event, []);
     if (!data) return;
 
-    const { project_id } = data;
+    const { project_id, project, user } = data;
 
-    const result = await VisitModel.aggregate([
+    const result: { _id: string, visits: number }[] = await VisitModel.aggregate([
         { $match: { project_id, } },
         { $group: { _id: "$website", visits: { $sum: 1 } } },
     ]);
 
-    return result as { _id: string, visits: number }[];
+    const isOwner = user.id === project.owner.toString();
+    if (isOwner) return [
+        {
+            _id: 'All domains',
+            visits: result.reduce((a, e) => a + e.visits, 0)
+        },
+        ...result
+    ]
+
+    const member = await TeamMemberModel.findOne({ project_id, user_id: data.user.id, pending: false });
+    if (!member) return setResponseStatus(event, 400, 'Not a member');
+    if (!member.permission) return setResponseStatus(event, 400, 'No permission');
+
+    if (member.permission.domains.includes('All domains')) {
+        return [
+            {
+                _id: 'All domains',
+                visits: result.reduce((a, e) => a + e.visits, 0)
+            },
+            ...result
+        ]
+    }
+
+    return result.filter(e => {
+        return member.permission.domains.includes(e._id);
+    });
+
 
 });

dashboard/server/api/keys/create.post.ts

@@ -13,23 +13,28 @@ export default defineEventHandler(async event => {
 
     const body = await readBody(event);
 
-    if (body.name.length == 0) return setResponseStatus(event, 400, 'name is required');
-
-    if (body.name.length < 3) return setResponseStatus(event, 400, 'name too short');
-    if (body.name.length > 32) return setResponseStatus(event, 400, 'name too long');
-
-    const data = await getRequestDataOld(event, { allowGuests: false, allowLitlyx: false, });
+    const data = await getRequestData(event, [], ['OWNER']);
     if (!data) return;
 
+    if (!body.name) return setResponseStatus(event, 400, 'body is required');
+    if (body.name.trim().length == 0) return setResponseStatus(event, 400, 'name is required');
+    if (body.name.trim().length < 3) return setResponseStatus(event, 400, 'name too short');
+    if (body.name.trim().length > 32) return setResponseStatus(event, 400, 'name too long');
+
     const { project_id } = data;
-    
+
+
+    const sameName = await ApiSettingsModel.exists({ project_id, apiName: body.name.trim() });
+    if (sameName) return setResponseStatus(event, 400, 'An api key with the same name exists');
+
+
     const key = generateApiKey();
 
     const keyNumbers = await ApiSettingsModel.countDocuments({ project_id });
 
     if (keyNumbers >= 5) return setResponseStatus(event, 400, 'Api key limit reached');
 
-    const newApiSettings = await ApiSettingsModel.create({ project_id, apiKey: key, apiName: body.name, created_at: Date.now(), usage: 0 });
+    const newApiSettings = await ApiSettingsModel.create({ project_id, apiKey: key, apiName: body.name.trim(), created_at: Date.now(), usage: 0 });
 
     return newApiSettings.toJSON();
 

dashboard/server/api/project/change_name.post.ts

@@ -1,16 +1,18 @@
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestDataOld(event, { requireSchema: false, allowGuests: false, allowLitlyx: false });
+    const data = await getRequestData(event, [], ['OWNER']);
     if (!data) return;
 
     const { project } = data;
 
     const { name } = await readBody(event);
 
-    if (name.length == 0) return setResponseStatus(event, 400, 'name is required');
+    if (name.trim()) return setResponseStatus(event, 400, 'name is required');
+    if (name.trim().length < 2) return setResponseStatus(event, 400, 'name too short');
+    if (name.trim().length > 32) return setResponseStatus(event, 400, 'name too long');
 
-    project.name = name;
+    project.name = name.trim();
     await project.save();
 
     return { ok: true };

dashboard/server/api/project/create.post.ts

@@ -8,7 +8,7 @@ export default defineEventHandler(async event => {
 
     const body = await readBody(event);
 
-    const newProjectName = body.name;
+    const newProjectName = body.name.trim();
 
     if (!newProjectName) return setResponseStatus(event, 400, 'ProjectName too short');
     if (newProjectName.length < 2) return setResponseStatus(event, 400, 'ProjectName too short');

dashboard/server/api/project/links/list.ts

@@ -0,0 +1,18 @@
+
+import { UserModel } from "@schema/UserSchema";
+import { ProjectLinkModel } from "~/shared/schema/project/ProjectLinkSchema";
+
+export default defineEventHandler(async event => {
+
+    const data = await getRequestData(event, [], ['OWNER']);
+    if (!data) return;
+
+    const { project_id, project } = data;
+
+    const owner = await UserModel.findById(project.owner);
+    if (!owner) return setResponseStatus(event, 400, 'No owner');
+
+    const links = await ProjectLinkModel.find({ project_id });
+    return links;
+
+});

dashboard/server/api/project/list_guest.ts

@@ -7,9 +7,7 @@ export default defineEventHandler(async event => {
     if (!userData?.logged) return [];
 
 
-    const members = await TeamMemberModel.find({
-        user_id: userData.id
-    });
+    const members = await TeamMemberModel.find({ user_id: userData.id, pending: false });
 
     const projects: TProject[] = [];
 

dashboard/server/api/project/members/accept.post.ts

@@ -0,0 +1,23 @@
+import { TeamMemberModel } from "~/shared/schema/TeamMemberSchema";
+
+export default defineEventHandler(async event => {
+
+    const data = await getRequestData(event, [], []);
+    if (!data) return [];
+
+    const body = await readBody(event);
+
+    const { project_id } = body;
+    if (!project_id) return setResponseStatus(event, 400, 'project_id is required');
+
+    console.log({ project_id, user_id: data.user.id });
+
+    const member = await TeamMemberModel.findOne({ project_id, user_id: data.user.id });
+    if (!member) return setResponseStatus(event, 400, 'member not found');
+
+    member.pending = false;
+    await member.save();
+
+    return { ok: true };
+
+});

dashboard/server/api/project/members/add.post.ts

@@ -1,28 +1,76 @@
 
 import { TeamMemberModel } from "@schema/TeamMemberSchema";
 import { UserModel } from "@schema/UserSchema";
+import { EmailServiceHelper } from "~/server/services/EmailServiceHelper";
+import { EmailService } from "~/shared/services/EmailService";
 
 export default defineEventHandler(async event => {
 
-
-    const data = await getRequestDataOld(event, { requireSchema: false, allowGuests: false, allowLitlyx: false });
+    const data = await getRequestData(event, [], ['OWNER']);
     if (!data) return;
 
-    const { project_id } = data;
+    const { project_id, project, user } = data;
 
     const { email } = await readBody(event);
 
     const targetUser = await UserModel.findOne({ email });
-    if (!targetUser) return setResponseStatus(event, 400, 'No user with this email');
+
+    if (targetUser && targetUser._id.toString() === project.owner.toString()) {
+        return setResponseStatus(event, 400, 'You cannot invite yourself');
+    }
 
 
-    await TeamMemberModel.create({
-        project_id,
-        user_id: targetUser.id,
-        pending: true,
-        role: 'GUEST'
-    });
+    const link = `http://127.0.0.1:3000/accept_invite?project_id=${project_id.toString()}`;
+
+    if (!targetUser) {
+
+        const exist = await TeamMemberModel.exists({ project_id, email });
+        if (exist) return setResponseStatus(event, 400, 'Member already invited');
+
+        await TeamMemberModel.create({
+            project_id,
+            email,
+            pending: true,
+            role: 'GUEST'
+        });
+
+        setImmediate(() => {
+            const emailData = EmailService.getEmailServerInfo('invite_project_noaccount', {
+                target: email,
+                projectName: project.name,
+                link
+            });
+            EmailServiceHelper.sendEmail(emailData);
+        });
+
+        return { ok: true };
+
+    } else {
+
+        const exist = await TeamMemberModel.exists({ project_id, user_id: targetUser.id });
+        if (exist) return setResponseStatus(event, 400, 'Member already invited');
+
+        await TeamMemberModel.create({
+            project_id,
+            user_id: targetUser.id,
+            pending: true,
+            role: 'GUEST'
+        });
+
+        setImmediate(() => {
+            const emailData = EmailService.getEmailServerInfo('invite_project', {
+
+                target: email,
+                projectName: project.name,
+                link
+            });
+            EmailServiceHelper.sendEmail(emailData);
+        });
+
+        return { ok: true };
+
+    }
+
 
-    return { ok: true };
 
 });

dashboard/server/api/project/members/decline.post.ts

@@ -0,0 +1,18 @@
+import { TeamMemberModel } from "~/shared/schema/TeamMemberSchema";
+
+export default defineEventHandler(async event => {
+
+    const data = await getRequestData(event, [], []);
+    if (!data) return [];
+
+    const body = await readBody(event);
+
+    const { project_id } = body;
+    if (!project_id) return setResponseStatus(event, 400, 'project_id is required');
+
+    const member = await TeamMemberModel.deleteOne({ project_id, user_id: data.user.id });
+    if (!member) return setResponseStatus(event, 400, 'member not found');
+
+    return { ok: true };
+
+});

dashboard/server/api/project/members/edit.post.ts

@@ -0,0 +1,25 @@
+import { TeamMemberModel } from "~/shared/schema/TeamMemberSchema";
+
+export default defineEventHandler(async event => {
+
+    const data = await getRequestData(event, [], ['OWNER']);
+    if (!data) return [];
+
+    const body = await readBody(event);
+
+    const { member_id, webAnalytics, events, ai, domains } = body;
+
+    if (!member_id) return setResponseStatus(event, 400, 'permission_id is required');
+
+    const edited = await TeamMemberModel.updateOne({ _id: member_id }, {
+        permission: {
+            webAnalytics,
+            events,
+            ai,
+            domains
+        }
+    });
+
+    return { ok: edited.modifiedCount == 1 }
+
+});

dashboard/server/api/project/members/get.ts

@@ -0,0 +1,23 @@
+
+import { TeamMemberModel, TPermission, TTeamMember } from "@schema/TeamMemberSchema";
+
+export default defineEventHandler(async event => {
+    const data = await getRequestData(event, []);
+    if (!data) return;
+    const { member_id } = getQuery(event);
+    const member = await TeamMemberModel.findById(member_id);
+    if (!member) return setResponseStatus(event, 400, 'Cannot get member');
+
+    const resultPermission: TPermission = {
+        ai: false,
+        domains: [],
+        events: false,
+        webAnalytics: false
+    }
+
+    return {
+        permission: resultPermission,
+        ...member.toJSON() as any
+    } as TTeamMember
+
+});

dashboard/server/api/project/members/kick.post.ts

@@ -5,7 +5,7 @@ import { UserModel } from "@schema/UserSchema";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestDataOld(event, { requireSchema: false, allowGuests: false, allowLitlyx: false });
+    const data = await getRequestData(event, [], ['OWNER']);
     if (!data) return;
 
     const { project_id } = data;

dashboard/server/api/project/members/leave.ts

@@ -4,7 +4,7 @@ import { TeamMemberModel } from "@schema/TeamMemberSchema";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestDataOld(event, { requireSchema: false, allowGuests: false, allowLitlyx: false });
+    const data = await getRequestData(event, [], []);
     if (!data) return;
 
     const { project_id, user } = data;

dashboard/server/api/project/members/list.ts

@@ -1,11 +1,20 @@
 import { ProjectModel } from "@schema/project/ProjectSchema";
-import { TeamMemberModel } from "@schema/TeamMemberSchema";
+import { TeamMemberModel, TeamMemberRole, TPermission, TTeamMember } from "@schema/TeamMemberSchema";
 import { UserModel } from "@schema/UserSchema";
 
+export type MemberWithPermissions = {
+    id: string | null,
+    email: string,
+    name: string,
+    role: TeamMemberRole,
+    pending: boolean,
+    me: boolean,
+    permission: TPermission
+}
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestDataOld(event, { requireSchema: false });
+    const data = await getRequestData(event, [], ['OWNER']);
     if (!data) return;
 
     const { project_id, project, user } = data;
@@ -15,25 +24,42 @@ export default defineEventHandler(async event => {
 
     const members = await TeamMemberModel.find({ project_id });
 
-    const result: { email: string, name: string, role: string, pending: boolean, me: boolean }[] = [];
+    const result: MemberWithPermissions[] = [];
 
     result.push({
+        id: null,
         email: owner.email,
         name: owner.name,
         role: 'OWNER',
         pending: false,
-        me: user.id === owner.id
+        me: user.id === owner.id,
+        permission: {
+            webAnalytics: true,
+            events: true,
+            ai: true,
+            domains: ['All domains']
+        }
     })
 
     for (const member of members) {
         const userMember = await UserModel.findById(member.user_id);
         if (!userMember) continue;
+
+        const permission: TPermission = {
+            webAnalytics: member.permission?.webAnalytics || false,
+            events: member.permission?.events || false,
+            ai: member.permission?.ai || false,
+            domains: member.permission?.domains || []
+        }
+
         result.push({
+            id: member.id,
             email: userMember.email,
             name: userMember.name,
             role: member.role,
             pending: member.pending,
-            me: user.id === userMember.id
+            me: user.id === userMember.id,
+            permission
         })
     }
 

dashboard/server/api/project/members/me.ts

@@ -0,0 +1,39 @@
+import { ProjectModel } from "@schema/project/ProjectSchema";
+import { TeamMemberModel, TeamMemberRole, TPermission, TTeamMember } from "@schema/TeamMemberSchema";
+import { UserModel } from "@schema/UserSchema";
+
+
+export default defineEventHandler(async event => {
+
+    const data = await getRequestData(event, []);
+    if (!data) return;
+
+    const { project_id, project, user } = data;
+
+    const owner = await UserModel.findById(project.owner, { _id: 1 });
+
+    if (owner && owner._id.toString() === user.id) return {
+        ai: true,
+        domains: ['All domains'],
+        events: true,
+        webAnalytics: true
+    }
+
+    const member = await TeamMemberModel.findOne({ project_id, user_id: user.id });
+
+    if (!member) return {
+        ai: true,
+        domains: ['All domains'],
+        events: true,
+        webAnalytics: true
+    }
+
+    return {
+        ai: false,
+        domains: [],
+        events: false,
+        webAnalytics: false,
+        ...(member.permission as any),
+    } as TPermission
+
+});

dashboard/server/api/project/members/pending.ts

@@ -0,0 +1,44 @@
+
+import { TeamMemberModel } from "@schema/TeamMemberSchema";
+import { Types } from "mongoose";
+
+
+export default defineEventHandler(async event => {
+
+    const data = await getRequestData(event);
+    if (!data) return;
+
+    const members = await TeamMemberModel.aggregate([
+        {
+            $match:
+            {
+                $or: [
+                    { user_id: new Types.ObjectId(data.user.id) },
+                    { email: data.user.user.email }
+                ],
+                pending: true
+            }
+        },
+        {
+            $lookup: {
+                from: 'projects',
+                as: 'project',
+                foreignField: '_id',
+                localField: 'project_id',
+            }
+        },
+        {
+            $addFields: {
+                project_name: { $arrayElemAt: ["$project.name", 0] }
+            }
+        },
+        {
+            $project: {
+                project: 0
+            }
+        }
+    ]);
+    
+    return members;
+
+});

dashboard/server/api/snapshot/create.post.ts

@@ -11,7 +11,7 @@ export default defineEventHandler(async event => {
     const { name: newSnapshotName, from, to, color: snapshotColor } = body;
 
     if (!newSnapshotName) return setResponseStatus(event, 400, 'SnapshotName too short');
-    if (newSnapshotName.length == 0) return setResponseStatus(event, 400, 'SnapshotName too short');
+    if (newSnapshotName.trim().length == 0) return setResponseStatus(event, 400, 'SnapshotName too short');
 
     if (!from) return setResponseStatus(event, 400, 'from is required');
     if (!to) return setResponseStatus(event, 400, 'to is required');
@@ -26,7 +26,7 @@ export default defineEventHandler(async event => {
 
 
     const newSnapshot = await ProjectSnapshotModel.create({
-        name: newSnapshotName,
+        name: newSnapshotName.trim(),
         from: new Date(from),
         to: new Date(to),
         color: snapshotColor,

dashboard/server/api/timeline/bouncing_rate.ts

@@ -9,16 +9,16 @@ import { checkSliceValidity } from "~/server/services/TimelineService";
 export default defineEventHandler(async event => {
 
 
-    const data = await getRequestDataOld(event, { requireSchema: false, requireSlice: true });
+    const data = await getRequestData(event, ['SLICE', 'RANGE', 'DOMAIN'], ['WEB']);
     if (!data) return;
 
-    const { pid, from, to, slice, project_id } = data;
+    const { pid, from, to, slice, project_id, domain } = data;
 
 
     const cacheKey = `timeline:bouncing_rate:${pid}:${slice}:${from}:${to}`;
     const cacheExp = 60 * 60; //1 hour
 
-    return await Redis.useCacheV2(cacheKey, cacheExp, async (noStore, updateExp) => {
+    return await Redis.useCacheV2(cacheKey, cacheExp, async () => {
 
         const [sliceValid, errorOrDays] = checkSliceValidity(from, to, slice);
         if (!sliceValid) throw Error(errorOrDays);
@@ -36,7 +36,8 @@ export default defineEventHandler(async event => {
                         created_at: {
                             $gte: DateService.startOfSlice(date, slice),
                             $lte: DateService.endOfSlice(date, slice)
-                        }
+                        },
+                        website: domain
                     },
                 },
                 { $group: { _id: "$session", count: { $sum: 1, } } },

dashboard/server/api/timeline/events.ts

@@ -4,7 +4,7 @@ import { executeTimelineAggregation } from "~/server/services/TimelineService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['SLICE', 'GUEST', 'DOMAIN', 'RANGE', 'OFFSET']);
+    const data = await getRequestData(event, ['SLICE', 'DOMAIN', 'RANGE', 'OFFSET'], ['EVENTS']);
     if (!data) return;
 
     const { pid, from, to, slice, project_id, timeOffset, domain } = data;

dashboard/server/api/timeline/events_stacked.ts

@@ -4,7 +4,7 @@ import { executeAdvancedTimelineAggregation } from "~/server/services/TimelineSe
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['GUEST', 'RANGE', 'SLICE', 'DOMAIN']);
+    const data = await getRequestData(event, ['RANGE', 'SLICE', 'DOMAIN'], ['EVENTS']);
     if (!data) return;
 
     const { from, to, slice, project_id, timeOffset, domain } = data;

dashboard/server/api/timeline/sessions.ts

@@ -4,7 +4,7 @@ import { executeTimelineAggregation } from "~/server/services/TimelineService";
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['SLICE', 'GUEST', 'DOMAIN', 'RANGE', 'OFFSET']);
+    const data = await getRequestData(event, ['SLICE', 'DOMAIN', 'RANGE', 'OFFSET'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, slice, project_id, timeOffset, domain } = data;

dashboard/server/api/timeline/sessions_duration.ts

@@ -4,10 +4,10 @@ import { executeAdvancedTimelineAggregation, fillAndMergeTimelineAggregationV2 }
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['SLICE', 'GUEST', 'DOMAIN', 'RANGE']);
+    const data = await getRequestData(event, ['SLICE', 'DOMAIN', 'RANGE'], ['WEB']);
     if (!data) return;
 
-    const { pid, from, to, slice, project_id, timeOffset, domain } = data;
+    const { pid, from, to, slice, project_id, domain } = data;
 
     const cacheKey = `timeline:sessions_duration:${pid}:${slice}:${from}:${to}:${domain}`;
     const cacheExp = 60;

dashboard/server/api/timeline/visits.ts

@@ -4,7 +4,7 @@ import { executeAdvancedTimelineAggregation } from "~/server/services/TimelineSe
 
 export default defineEventHandler(async event => {
 
-    const data = await getRequestData(event, ['SLICE', 'GUEST', 'DOMAIN', 'RANGE', 'OFFSET']);
+    const data = await getRequestData(event, ['SLICE', 'DOMAIN', 'RANGE', 'OFFSET'], ['WEB']);
     if (!data) return;
 
     const { pid, from, to, slice, project_id, timeOffset, domain } = data;

dashboard/server/services/TimelineService.ts

@@ -80,10 +80,11 @@ export async function executeAdvancedTimelineAggregation<T = {}>(options: Advanc
                 range: {
                     step: 1,
                     unit: granularity,
-                    bounds: [
-                        new Date(new Date(options.from).getTime() - (timeOffset * 1000 * 60)),
-                        new Date(new Date(options.to).getTime() - (timeOffset * 1000 * 60) + 1),
-                    ]
+                    bounds: 'full'
+                    // [
+                    //     new Date(new Date(options.from).getTime() - (timeOffset * 1000 * 60)),
+                    //     new Date(new Date(options.to).getTime() - (timeOffset * 1000 * 60) + 1),
+                    // ]
                 }
             }
         },

dashboard/server/utils/getRequestData.ts

@@ -3,7 +3,7 @@ import type { EventHandlerRequest, H3Event } from 'h3'
 import { allowedModels, TModelName } from "../services/DataService";
 import { ProjectModel, TProject } from "@schema/project/ProjectSchema";
 import { Model, Types } from "mongoose";
-import { TeamMemberModel } from "@schema/TeamMemberSchema";
+import { TeamMemberModel, TPermission } from "@schema/TeamMemberSchema";
 import { Slice } from "@services/DateService";
 import { ADMIN_EMAILS } from "~/shared/data/ADMINS";
 
@@ -32,7 +32,22 @@ export type GetRequestDataOptions = {
     /** @default false */ requireOffset?: boolean,
 }
 
-export type RequestDataScope = 'GUEST' | 'SCHEMA' | 'ANON' | 'SLICE' | 'RANGE' | 'OFFSET' | 'DOMAIN';
+export type RequestDataScope = 'SCHEMA' | 'ANON' | 'SLICE' | 'RANGE' | 'OFFSET' | 'DOMAIN';
+export type RequestDataPermissions = 'WEB' | 'EVENTS' | 'AI' | 'OWNER';
+
+async function getAccessPermission(user_id: string, project: TProject): Promise<TPermission> {
+    if (!project) return { ai: false, domains: [], events: false, webAnalytics: false }
+
+    //TODO: Create table with admins
+    if (user_id === '66520c90f381ec1e9284938b') return { ai: true, domains: ['All domains'], events: true, webAnalytics: true }
+
+    const owner = project.owner.toString();
+    const project_id = project._id;
+    if (owner === user_id) return { ai: true, domains: ['All domains'], events: true, webAnalytics: true }
+    const member = await TeamMemberModel.findOne({ project_id, user_id }, { permission: 1 });
+    if (!member) return { ai: false, domains: [], events: false, webAnalytics: false }
+    return { ai: false, domains: [], events: false, webAnalytics: false, ...member.permission as any }
+}
 
 async function hasAccessToProject(user_id: string, project: TProject) {
     if (!project) return [false, 'NONE'];
@@ -48,10 +63,9 @@ async function hasAccessToProject(user_id: string, project: TProject) {
     return [false, 'NONE'];
 }
 
-export async function getRequestData(event: H3Event<EventHandlerRequest>, required_scopes: RequestDataScope[] = []) {
+export async function getRequestData(event: H3Event<EventHandlerRequest>, required_scopes: RequestDataScope[] = [], required_permissions: RequestDataPermissions[] = []) {
 
     const requireSchema = required_scopes.includes('SCHEMA');
-    const allowGuests = required_scopes.includes('GUEST');
     const allowAnon = required_scopes.includes('ANON');
     const requireSlice = required_scopes.includes('SLICE');
     const requireRange = required_scopes.includes('RANGE');
@@ -61,7 +75,10 @@ export async function getRequestData(event: H3Event<EventHandlerRequest>, requir
     const pid = getHeader(event, 'x-pid');
     if (!pid) return setResponseStatus(event, 400, 'x-pid is required');
 
-    let domain: any = getHeader(event, 'x-domain');
+    const originalDomain = getHeader(event, 'x-domain')?.toString();
+
+    let domain: any = originalDomain;
+
     if (requireDomain) {
         if (domain == null || domain == undefined || domain.length == 0) return setResponseStatus(event, 400, 'x-domain is required');
     }
@@ -108,16 +125,40 @@ export async function getRequestData(event: H3Event<EventHandlerRequest>, requir
     const project = await ProjectModel.findById(project_id);
     if (!project) return setResponseStatus(event, 400, 'project not found');
 
-    if (!allowAnon) {
-        const [hasAccess, role] = await hasAccessToProject(user.id, project);
-        if (!hasAccess) return setResponseStatus(event, 400, 'no access to project');
-        if (role === 'GUEST' && !allowGuests) return setResponseStatus(event, 403, 'only owner can access this');
+
+    if (user.id != project.owner.toString()) {
+        if (required_permissions.includes('OWNER')) return setResponseStatus(event, 403, 'ADMIN permission required');
+        const hasAccess = await TeamMemberModel.findOne({ project_id, user_id: user.id });
+        if (!hasAccess) return setResponseStatus(event, 403, 'No permissions');
+    }
+
+
+    if (required_permissions.length > 0 || requireDomain) {
+
+        const permission = await getAccessPermission(user.id, project);
+
+        if (required_permissions.includes('WEB') && permission.webAnalytics === false) {
+            return setResponseStatus(event, 403, 'WEB permission required');
+        }
+        if (required_permissions.includes('EVENTS') && permission.events === false) {
+            return setResponseStatus(event, 403, 'EVENTS permission required');
+        }
+        if (required_permissions.includes('AI') && permission.ai === false) {
+            return setResponseStatus(event, 403, 'AI permission required');
+        }
+        if (requireDomain && originalDomain) {
+            if (!permission.domains.includes('All domains') && !permission.domains.includes(originalDomain)) {
+                return setResponseStatus(event, 403, 'DOMAIN permission required');
+            }
+        }
+
     }
 
     return {
         from: from as string,
         to: to as string,
         domain: domain as string,
+        originalDomain: originalDomain as string,
         pid, project_id, project, user, limit, slice, schemaName, model, timeOffset: offset
     }
 }

email/package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "compile": "tsc"
+    "compile": "tsc",
+    "workspace:deploy": "ts-node ../scripts/email/deploy.ts"
   },
   "keywords": [],
   "author": "Emily",

email/src/services/email.ts

@@ -1,12 +1,64 @@
-import { TransactionalEmailsApi, SendSmtpEmail } from '@getbrevo/brevo';
+import { TransactionalEmailsApi, SendSmtpEmail, ContactsApi } from '@getbrevo/brevo';
 import * as TEMPLATE from './templates'
 
 export class EmailService {
 
     private static apiInstance = new TransactionalEmailsApi();
+    private static apiContacts = new ContactsApi();
 
     static init(apiKey: string) {
         this.apiInstance.setApiKey(0, apiKey);
+        this.apiContacts.setApiKey(0, apiKey);
+    }
+
+    static async sendInviteEmail(target: string, projectName: string, link: string) {
+        try {
+            const sendSmtpEmail = new SendSmtpEmail();
+            sendSmtpEmail.subject = "⚡ Invite";
+            sendSmtpEmail.sender = { "name": "Litlyx", "email": "help@litlyx.com" };
+            sendSmtpEmail.to = [{ "email": target }];
+
+            sendSmtpEmail.htmlContent = TEMPLATE.PROJECT_INVITE_EMAIL
+                .replace(/\[Project Name\]/, projectName)
+                .replace(/\[Link\]/, link)
+                .toString();
+
+            await this.apiInstance.sendTransacEmail(sendSmtpEmail);
+            return true;
+        } catch (ex) {
+            console.error('ERROR SENDING EMAIL', ex);
+            return false;
+        }
+    }
+
+    static async sendInviteEmailNoAccount(target: string, projectName: string, link: string) {
+        try {
+            const sendSmtpEmail = new SendSmtpEmail();
+            sendSmtpEmail.subject = "⚡ Invite - No account";
+            sendSmtpEmail.sender = { "name": "Litlyx", "email": "help@litlyx.com" };
+            sendSmtpEmail.to = [{ "email": target }];
+
+            sendSmtpEmail.htmlContent = TEMPLATE.PROJECT_INVITE_EMAIL_NO_ACCOUNT
+                .replace(/\[Project Name\]/, projectName)
+                .replace(/\[Link\]/, link)
+                .toString();
+
+            await this.apiInstance.sendTransacEmail(sendSmtpEmail);
+            return true;
+        } catch (ex) {
+            console.error('ERROR SENDING EMAIL', ex);
+            return false;
+        }
+    }
+
+    static async createContact(email: string) {
+        try {
+            await this.apiContacts.createContact({ email });
+            await this.apiContacts.addContactToList(12, { emails: [email] })
+        } catch (ex) {
+            console.error('ERROR ADDING CONTACT', ex);
+            return false;
+        }
     }
 
     static async sendLimitEmail50(target: string, projectName: string) {

email/src/services/server.ts

@@ -38,6 +38,36 @@ app.use((req, res, next) => {
     next();
 });
 
+app.post('/send/invite', express.json(), async (req, res) => {
+    try {
+        const { target, projectName, link } = req.body;
+        const ok = await EmailService.sendInviteEmail(target, projectName, link);
+        res.json({ ok });
+    } catch (ex) {
+        res.status(500).json({ error: ex.message });
+    }
+});
+
+app.post('/send/invite/noaccount', express.json(), async (req, res) => {
+    try {
+        const { target, projectName, link } = req.body;
+        const ok = await EmailService.sendInviteEmailNoAccount(target, projectName, link);
+        res.json({ ok });
+    } catch (ex) {
+        res.status(500).json({ error: ex.message });
+    }
+});
+
+app.post('/brevolist/add', express.json(), async (req, res) => {
+    try {
+        const { email } = req.body;
+        const ok = await EmailService.createContact(email);
+        res.json({ ok });
+    } catch (ex) {
+        res.status(500).json({ error: ex.message });
+    }
+});
+
 app.post('/send/confirm', express.json(), async (req, res) => {
     try {
         const { target, link } = req.body;
@@ -60,6 +90,8 @@ app.post('/send/welcome', express.json(), async (req, res) => {
 
 app.post('/send/purchase', express.json(), async (req, res) => {
     try {
+        console.log('PURCHASE EMAIL DISABLED')
+        return;
         const { target, projectName } = req.body;
         const ok = await EmailService.sendPurchaseEmail(target, projectName);
         res.json({ ok });

email/src/services/templates.ts

@@ -7,7 +7,8 @@ import { ANOMALY_VISITS_EVENTS_EMAIL } from '../../templates/AnomalyUsageEmail';
 import { ANOMALY_DOMAIN_EMAIL } from '../../templates/AnomalyDomainEmail';
 import { CONFIRM_EMAIL } from '../../templates/ConfirmEmail';
 import { RESET_PASSWORD_EMAIL } from '../../templates/ResetPasswordEmail';
-
+import { PROJECT_INVITE_EMAIL } from '../../templates/ProjectInviteEmail';
+import { PROJECT_INVITE_EMAIL_NO_ACCOUNT } from '../../templates/ProjectInviteEmailNoAccount';
 
 
 export {
@@ -19,5 +20,7 @@ export {
     ANOMALY_VISITS_EVENTS_EMAIL,
     ANOMALY_DOMAIN_EMAIL,
     CONFIRM_EMAIL,
-    RESET_PASSWORD_EMAIL
+    RESET_PASSWORD_EMAIL,
+    PROJECT_INVITE_EMAIL,
+    PROJECT_INVITE_EMAIL_NO_ACCOUNT
 }

email/templates/ProjectInviteEmail.ts

@@ -0,0 +1,21 @@
+export const PROJECT_INVITE_EMAIL = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thank You for Upgrading Your Litlyx Plan!</title>
+</head>
+<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+
+    <!-- Email Content -->
+
+    <p>Invited by <strong>[Project Name]</strong> on <strong>Litlyx</strong></p>
+    
+    <p>Best regards,</p>
+
+    <p>Antonio,</p>
+    <p>CEO @ Litlyx</p>
+
+</body>
+</html>`

email/templates/ProjectInviteEmailNoAccount.ts

@@ -0,0 +1,21 @@
+export const PROJECT_INVITE_EMAIL_NO_ACCOUNT = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thank You for Upgrading Your Litlyx Plan!</title>
+</head>
+<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+
+    <!-- Email Content -->
+
+    <p>Invited by <strong>[Project Name]</strong> on <strong>Litlyx</strong> NO_ACCOUNT</p>
+    
+    <p>Best regards,</p>
+
+    <p>Antonio,</p>
+    <p>CEO @ Litlyx</p>
+
+</body>
+</html>`

scripts/email/deploy.ts

@@ -19,7 +19,7 @@ async function main() {
     if (fs.existsSync(TMP_PATH)) fs.rmSync(TMP_PATH, { force: true, recursive: true });
     fs.ensureDirSync(TMP_PATH);
 
-    console.log('Creting zip file');
+    console.log('Creating zip file');
     const archive = createZip(TMP_PATH + '/' + ZIP_NAME);
     archive.directory(LOCAL_PATH + '/dist', '/dist');
     archive.file(LOCAL_PATH + '/ecosystem.config.js', { name: '/ecosystem.config.js' })

shared_global/schema/TeamMemberSchema.ts

@@ -1,12 +1,22 @@
 import { model, Schema, Types } from 'mongoose';
 
-export type TeamMemberRole = 'ADMIN' | 'GUEST';
+export type TeamMemberRole = 'OWNER' | 'GUEST' | 'MANAGER';
+
+
+export type TPermission = {
+    webAnalytics: boolean,
+    events: boolean,
+    ai: boolean,
+    domains: string[],
+}
 
 export type TTeamMember = {
     _id: Schema.Types.ObjectId,
     project_id: Schema.Types.ObjectId,
-    user_id: Schema.Types.ObjectId,
+    user_id?: Schema.Types.ObjectId,
+    email?: string,
     role: TeamMemberRole,
+    permission: TPermission,
     pending: boolean,
     created_at: Date,
 }
@@ -14,7 +24,9 @@ export type TTeamMember = {
 const TeamMemberSchema = new Schema<TTeamMember>({
     project_id: { type: Types.ObjectId, index: true },
     user_id: { type: Types.ObjectId, index: true },
+    email: { type: String, index: true },
     role: { type: String, required: true },
+    permission: { type: Schema.Types.Mixed },
     pending: { type: Boolean, required: true },
     created_at: { type: Date, required: true, default: () => Date.now() },
 });

shared_global/schema/project/ProjectLinkSchema.ts

@@ -0,0 +1,19 @@
+import { model, Schema, Types } from 'mongoose';
+import { TPermission } from '../TeamMemberSchema';
+
+export type TProjectLink = {
+    _id: Schema.Types.ObjectId,
+    project_id: Schema.Types.ObjectId,
+    link_id: string,
+    password: string,
+    permission: TPermission
+}
+
+const ProjectLinkSchema = new Schema<TProjectLink>({
+    project_id: { type: Types.ObjectId, index: true, unique: true },
+    link_id: { type: String, required: true },
+    password: { type: String },
+    permission: { type: Schema.Types.Mixed },
+});
+
+export const ProjectLinkModel = model<TProjectLink>('project_links', ProjectLinkSchema);

shared_global/services/DateService.ts

@@ -53,17 +53,16 @@ class DateService {
     }
 
     canUseSliceFromDays(days: number, slice: Slice): [false, string] | [true, number] {
-
-        // 3 Days
+        // HOUR - 3 DAYS - 72 SAMPLES
         if (slice === 'hour' && (days > 3)) return [false, 'Date gap too big for this slice'];
-        // 3 Weeks
-        if (slice === 'day' && (days > 31)) return [false, 'Date gap too big for this slice'];
-        // 3 Years
-        if (slice === 'month' && (days > 365 * 3)) return [false, 'Date gap too big for this slice'];
+        // DAY - 2 MONTHS - 62 SAMPLES
+        if (slice === 'day' && (days > 31 * 2)) return [false, 'Date gap too big for this slice'];
+        // MONTH - 4 YEARS - 60 SAMPLES
+        if (slice === 'month' && (days > 365 * 4)) return [false, 'Date gap too big for this slice'];
 
-        // 2 days
+        // DAY - 2 DAYS - 2 SAMPLES
         if (slice === 'day' && (days < 2)) return [false, 'Date gap too small for this slice'];
-        // 2 month
+        // MONTH - 2 MONTHS - 2 SAMPLES
         if (slice === 'month' && (days < 31 * 2)) return [false, 'Date gap too small for this slice'];
 
         return [true, days]

shared_global/services/EmailService.ts

@@ -8,6 +8,8 @@ const templateMap = {
     limit_50: '/limit/50',
     limit_90: '/limit/90',
     limit_max: '/limit/max',
+    invite_project: '/invite',
+    invite_project_noaccount: '/invite/noaccount'
 } as const;
 
 export type EmailTemplate = keyof typeof templateMap;
@@ -22,7 +24,9 @@ type EmailData =
     | { template: 'anomaly_visits_events', data: { target: string, projectName: string, data: any[] } }
     | { template: 'limit_50', data: { target: string, projectName: string } }
     | { template: 'limit_90', data: { target: string, projectName: string } }
-    | { template: 'limit_max', data: { target: string, projectName: string } };
+    | { template: 'limit_max', data: { target: string, projectName: string } }
+    | { template: 'invite_project', data: { target: string, projectName: string, link: string } }
+    | { template: 'invite_project_noaccount', data: { target: string, projectName: string, link: string } }
 
 export class EmailService {
     static getEmailServerInfo<T extends EmailTemplate>(template: T, data: Extract<EmailData, { template: T }>['data']): EmailServerInfo {