add anomaly + fix billing + add emails templates

dashboard/components/CVerticalNavigation.vue

@@ -28,6 +28,7 @@ const route = useRoute();
 const props = defineProps<Props>();
 
 const { isAdmin } = useUserRoles();
+const loggedUser = useLoggedUser()
 
 const debugMode = process.dev;
 
@@ -101,8 +102,15 @@ function onLogout() {
 }
 
 const { projects } = useProjectsList();
+const { data: guestProjects } = useGuestProjectsList()
 const activeProject = useActiveProject();
 
+const selectorProjects = computed(() => {
+    const result: TProject[] = [];
+    if (projects.value) result.push(...projects.value);
+    if (guestProjects.value) result.push(...guestProjects.value);
+    return result;
+});
 
 const { data: maxProjects } = useFetch("/api/user/max_projects", {
     headers: computed(() => {
@@ -121,6 +129,11 @@ const isPremium = computed(() => {
     return activeProject.value?.premium;
 })
 
+function isProjectMine(owner?: string) {
+    if (!owner) return false;
+    if (!loggedUser.value?.logged) return;
+    return loggedUser.value.id == owner;
+}
 
 const pricingDrawer = usePricingDrawer();
 
@@ -152,14 +165,14 @@ const pricingDrawer = usePricingDrawer();
                             base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
                             active: '!bg-lyx-widget-lighter'
                         }
-                    }" class="w-full" v-if="projects" v-model="selected" :options="projects">
+                    }" class="w-full" v-if="selectorProjects" v-model="selected" :options="selectorProjects">
 
                         <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.name }} </div>
+                                <div> {{ option.name }} {{ !isProjectMine(option.owner) ? '(Guest)' : '' }}</div>
                             </div>
                         </template>
 
@@ -168,7 +181,10 @@ const pricingDrawer = usePricingDrawer();
                                 <div>
                                     <img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
                                 </div>
-                                <div> {{ activeProject?.name || '???' }} </div>
+                                <div>
+                                    {{ activeProject?.name || '-' }}
+                                    {{ !isProjectMine(activeProject?.owner?.toString()) ? '(Guest)' : '' }}
+                                </div>
                             </div>
                         </template>
                     </USelectMenu>
@@ -179,6 +195,7 @@ const pricingDrawer = usePricingDrawer();
 
                 </div>
 
+
                 <NuxtLink to="/project_creation" v-if="projects && (projects.length < (maxProjects || 1))"
                     class="flex items-center text-[.8rem] gap-1 justify-end pt-2 pr-2 text-lyx-text-dark hover:text-lyx-text cursor-pointer">
                     <div><i class="fas fa-plus"></i></div>

dashboard/components/dashboard/ActionableChart.vue

@@ -106,11 +106,11 @@ const externalTooltipElement = ref<null | HTMLDivElement>(null);
 function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'line' | 'bar'> }) {
     const { chart, tooltip } = context;
     const tooltipEl = externalTooltipElement.value;
-    
-    currentTooltipData.value.visits = (tooltip.dataPoints.find(e=> e.datasetIndex == 0)?.raw) as number;
-    currentTooltipData.value.sessions = (tooltip.dataPoints.find(e=> e.datasetIndex == 1)?.raw) as number;
-    currentTooltipData.value.events = ((tooltip.dataPoints.find(e=> e.datasetIndex == 2)?.raw) as any)?.r2 as number;
-    
+
+    currentTooltipData.value.visits = (tooltip.dataPoints.find(e => e.datasetIndex == 0)?.raw) as number;
+    currentTooltipData.value.sessions = (tooltip.dataPoints.find(e => e.datasetIndex == 1)?.raw) as number;
+    currentTooltipData.value.events = ((tooltip.dataPoints.find(e => e.datasetIndex == 2)?.raw) as any)?.r2 as number;
+
     currentTooltipData.value.date = new Date(allDatesFull.value[tooltip.dataPoints[0].dataIndex]).toLocaleDateString();
 
     if (!tooltipEl) return;
@@ -118,11 +118,12 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
         tooltipEl.style.opacity = '0';
         return;
     }
-    const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
+    const { left: positionX, top: positionY } = chart.canvas.getBoundingClientRect();
     tooltipEl.style.opacity = '1';
     tooltipEl.style.left = positionX + tooltip.caretX + 'px';
     tooltipEl.style.top = positionY + tooltip.caretY + 'px';
     tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+
 }
 
 

dashboard/components/dashboard/TopSection.vue

@@ -13,6 +13,19 @@ function copyProjectId() {
     navigator.clipboard.writeText((activeProject.value?._id || 0).toString());
     createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
 }
+
+
+function showAnomalyInfoAlert() {
+    createAlert('AI Anomaly Detector info',
+        `Anomaly detector is running. It helps you detect a spike in visits or events, it could mean an
+         attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
+         stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
+         Litlyx will notify you via email with actionable advices`,
+        'far fa-bug',
+        10000
+    )
+
+}
 </script>
 
 
@@ -29,8 +42,10 @@ function copyProjectId() {
 
         <div class="flex md:gap-2 items-center md:justify-start flex-col md:flex-row">
             <div class="poppins font-medium text-lyx-text-darker text-[1.2rem]">Project:</div>
-            <div class="text-lyx-text poppins font-medium text-[1.2rem]"> {{ activeProject?.name || 'Loading...' }} </div>
+            <div class="text-lyx-text poppins font-medium text-[1.2rem]"> {{ activeProject?.name || 'Loading...' }}
+            </div>
         </div>
+
         <div class="flex flex-col md:flex-row md:gap-2 items-center md:justify-start">
             <div class="poppins font-medium text-lyx-text-darker text-[1.2rem]">Project id:</div>
             <div class="flex gap-2">
@@ -38,9 +53,20 @@ function copyProjectId() {
                     {{ activeProject?._id || 'Loading...' }}
                 </div>
                 <div class="flex items-center ml-3">
-                    <i @click="copyProjectId()" class="far fa-copy text-lyx-text hover:text-lyx-primary cursor-pointer text-[1.2rem]"></i>
+                    <i @click="copyProjectId()"
+                        class="far fa-copy text-lyx-text hover:text-lyx-primary cursor-pointer text-[1.2rem]"></i>
                 </div>
             </div>
         </div>
+
+        <div class="flex gap-2 items-center text-text/90 justify-center md:justify-start">
+            <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
+            <div class="poppins font-regular text-[1rem]"> AI Anomaly Detector </div>
+            <div class="flex items-center">
+                <i class="far fa-info-circle text-[.9rem] hover:text-lyx-primary cursor-pointer"
+                    @click="showAnomalyInfoAlert"></i>
+            </div>
+        </div>
+
     </div>
 </template>

dashboard/components/settings/General.vue

@@ -14,7 +14,6 @@ const entries: SettingsTemplateEntry[] = [
 const activeProject = useActiveProject();
 const projectNameInputVal = ref<string>(activeProject.value?.name || '');
 
-
 const apiKeys = ref<TApiSettings[]>([]);
 
 const newApiKeyName = ref<string>('');
@@ -145,13 +144,15 @@ function copyProjectId() {
         <template #pname>
             <div class="flex items-center gap-4">
                 <LyxUiInput class="w-full px-4 py-2" v-model="projectNameInputVal"></LyxUiInput>
-                <LyxUiButton @click="changeProjectName()" :disabled="!canChange" type="primary"> Change </LyxUiButton>
+                <LyxUiButton v-if="!isGuest" @click="changeProjectName()" :disabled="!canChange" type="primary"> Change
+                </LyxUiButton>
             </div>
         </template>
         <template #api>
             <div class="flex items-center gap-4" v-if="apiKeys && apiKeys.length < 5">
                 <LyxUiInput class="grow px-4 py-2" placeholder="ApiKeyName" v-model="newApiKeyName"></LyxUiInput>
-                <LyxUiButton @click="createApiKey()" :disabled="newApiKeyName.length < 3" type="primary">
+                <LyxUiButton v-if="!isGuest" @click="createApiKey()" :disabled="newApiKeyName.length < 3"
+                    type="primary">
                     <i class="far fa-plus"></i>
                 </LyxUiButton>
             </div>
@@ -185,8 +186,8 @@ function copyProjectId() {
                 <div><i class="far fa-copy" @click="copyScript()"></i></div>
             </LyxUiCard>
         </template>
-        <template #pdelete>
-            <div class="flex justify-end">
+        <template #pdelete >
+            <div class="flex justify-end" v-if="!isGuest">
                 <LyxUiButton type="danger" @click="deleteProject()">
                     Delete project
                 </LyxUiButton>