Merge branch 'refactoring'

fix: correct language display in admin dashboard

.gitignore

@@ -1,6 +1,10 @@
 steps
 PROCESS_EVENT
+**/node_modules/
 docker
 dev
 docker-compose.admin.yml
-full_reload.sh
+full_reload.sh
+build-all.sh
+tmp
+ecosystem.config.js

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "files.exclude": {
-        "**/node_modules": true
-    }
-}

Dockerfile

@@ -1,30 +0,0 @@
-FROM node:21-alpine as base
-
-FROM base as build
-
-RUN npm i -g pnpm
-RUN npm i -g pm2
-
-# COPY --link dashboard/package.json dashboard/pnpm-lock.yaml ./
-# RUN npm install --production=false
-
-WORKDIR /home/app
-
-COPY --link dashboard ./dashboard
-COPY --link lyx-ui ./lyx-ui
-COPY --link consumer ./consumer
-COPY --link producer ./producer
-COPY --link shared ./shared
-
-WORKDIR /home/app/producer
-RUN pnpm install
-
-WORKDIR /home/app/consumer
-RUN pnpm install
-
-WORKDIR /home/app/dashboard
-RUN pnpm install
-RUN pnpm run dev
-
-
-# CMD [ "node", "/home/app/.output/server/index.mjs" ]

README.md

@@ -108,12 +108,9 @@ curl -X POST "https://broker.litlyx.com/event" \
 
 To self-host the Litlyx dashboard, first **fork** this repository.
 
-Then run the following command:
-```bash
-docker-compose build
-```
+You can find our Docker images on DockerHub for more.
 
-after the build finishes, run:
+Then run the following command:
 ```bash
 docker-compose up
 ```

consumer/.gitignore

@@ -1,8 +1,10 @@
+
 node_modules
-static
+
 ecosystem.config.cjs
-dist
+ecosystem.config.js
+
 scripts/start_dev.js
-package-lock.json
-build_all.bat
-tests
+scripts/start_dev_prod.js
+dist
+src/shared

consumer/Dockerfile

@@ -1,38 +1,28 @@
-# Start with a minimal Node.js base image
+
 FROM node:21-alpine as base
 
-# Install pnpm globally with caching to avoid reinstalling if nothing has changed
 RUN npm i -g pnpm
 
-# Set the working directory
 WORKDIR /home/app
 
-# Copy only package-related files to leverage caching
+COPY --link ./package.json ./tsconfig.json ./pnpm-lock.yaml ./
 COPY --link ./scripts/package.json ./scripts/pnpm-lock.yaml ./scripts/
-COPY --link ./shared/package.json ./shared/pnpm-lock.yaml ./shared/
 COPY --link ./consumer/package.json ./consumer/pnpm-lock.yaml ./consumer/
 
-# Install dependencies for each package
+RUN pnpm install
+RUN pnpm install --filter consumer
+
 WORKDIR /home/app/scripts
-RUN pnpm install --frozen-lockfile
+RUN pnpm install
 
-WORKDIR /home/app/shared
-RUN pnpm install --frozen-lockfile
-
-WORKDIR /home/app/consumer
-RUN pnpm install --frozen-lockfile
-
-# Now copy the rest of the source files
 WORKDIR /home/app
 
 COPY --link ../scripts ./scripts
 COPY --link ../shared ./shared
 COPY --link ../consumer ./consumer
 
-# Build the consumer
 WORKDIR /home/app/consumer
 
-RUN pnpm run build_all
+RUN pnpm run build
 
-# Start the application
 CMD ["node", "/home/app/consumer/dist/consumer/src/index.js"]

consumer/ecosystem.config.example.cjs

@@ -1,17 +0,0 @@
-module.exports = {
-    apps: [
-        {
-            name: 'consumer',
-            exec_mode: 'fork',
-            script: './dist/consumer/src/index.js',
-            env: {
-                MONGO_CONNECTION_STRING: "",
-                REDIS_URL: "",
-                REDIS_USERNAME: "",
-                REDIS_PASSWORD: "",
-                STREAM_NAME: "",
-                GROUP_NAME: ""
-            }
-        }
-    ]
-}

consumer/package.json

@@ -1,27 +1,31 @@
 {
   "dependencies": {
-    "@getbrevo/brevo": "^2.2.0",
-    "mongoose": "^8.3.2",
-    "redis": "^4.6.14",
+    "axios": "^1.7.9",
+    "express": "^4.19.2",
+    "mongoose": "^8.9.5",
+    "redis": "^4.7.0",
     "ua-parser-js": "^1.0.37"
   },
   "devDependencies": {
+    "@types/express": "^5.0.0",
     "@types/node": "^20.12.13",
     "@types/ua-parser-js": "^0.7.39",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   },
-  "name": "consumer-database",
+  "name": "consumer",
   "version": "1.0.0",
   "main": "dist/index.js",
   "scripts": {
     "dev": "node scripts/start_dev.js",
+    "dev_prod": "node scripts/start_dev_prod.js",
     "compile": "tsc",
-    "build": "node ../scripts/build.js",
+    "build": "npm run compile && npm run create_db",
     "create_db": "cd scripts && ts-node create_database.ts",
-    "build_all": "npm run compile && npm run build && npm run create_db",
     "docker-build": "docker build -t litlyx-consumer -f Dockerfile ../",
-		"docker-inspect": "docker run -it litlyx-consumer sh"
+    "docker-inspect": "docker run -it litlyx-consumer sh",
+    "workspace:shared": "ts-node ../scripts/consumer/shared.ts",
+    "workspace:deploy": "ts-node ../scripts/consumer/deploy.ts"
   },
   "keywords": [],
   "author": "Emily",

consumer/src/EmailController.ts

@@ -1,13 +1,10 @@
-import { ProjectModel } from "@schema/ProjectSchema";
-import { UserModel } from "@schema/UserSchema";
-import { LimitNotifyModel } from "@schema/broker/LimitNotifySchema";
-import EmailService from '@services/EmailService';
-import { requireEnv } from "@utils/requireEnv";
-import { TProjectLimit } from "@schema/ProjectsLimits";
+import { ProjectModel } from "./shared/schema/project/ProjectSchema";
+import { UserModel } from "./shared/schema/UserSchema";
+import { LimitNotifyModel } from "./shared/schema/broker/LimitNotifySchema";
+import { EmailService } from './shared/services/EmailService';
+import { TProjectLimit } from "./shared/schema/project/ProjectsLimits";
+import { EmailServiceHelper } from "./EmailServiceHelper";
 
-if (process.env.EMAIL_SERVICE) {
-    EmailService.init(requireEnv('BREVO_API_KEY'));
-}
 
 export async function checkLimitsForEmail(projectCounts: TProjectLimit) {
 
@@ -27,7 +24,14 @@ export async function checkLimitsForEmail(projectCounts: TProjectLimit) {
         const owner = await UserModel.findById(project.owner);
         if (!owner) return;
 
-        if (process.env.EMAIL_SERVICE) await EmailService.sendLimitEmailMax(owner.email, project.name);
+        setImmediate(() => {
+            const emailData = EmailService.getEmailServerInfo('limit_max', {
+                target: owner.email,
+                projectName: project.name
+            });
+            EmailServiceHelper.sendEmail(emailData);
+        });
+
         await LimitNotifyModel.updateOne({ project_id: projectCounts.project_id }, { limit1: true, limit2: true, limit3: true });
 
     } else if ((projectCounts.visits + projectCounts.events) >= (projectCounts.limit * 0.9)) {
@@ -40,7 +44,14 @@ export async function checkLimitsForEmail(projectCounts: TProjectLimit) {
         const owner = await UserModel.findById(project.owner);
         if (!owner) return;
 
-        if (process.env.EMAIL_SERVICE) await EmailService.sendLimitEmail90(owner.email, project.name);
+        setImmediate(() => {
+            const emailData = EmailService.getEmailServerInfo('limit_90', {
+                target: owner.email,
+                projectName: project.name
+            });
+            EmailServiceHelper.sendEmail(emailData);
+        });
+
         await LimitNotifyModel.updateOne({ project_id: projectCounts.project_id }, { limit1: true, limit2: true, limit3: false });
 
     } else if ((projectCounts.visits + projectCounts.events) >= (projectCounts.limit * 0.5)) {
@@ -53,7 +64,14 @@ export async function checkLimitsForEmail(projectCounts: TProjectLimit) {
         const owner = await UserModel.findById(project.owner);
         if (!owner) return;
 
-        if (process.env.EMAIL_SERVICE) await EmailService.sendLimitEmail50(owner.email, project.name);
+        setImmediate(() => {
+            const emailData = EmailService.getEmailServerInfo('limit_50', {
+                target: owner.email,
+                projectName: project.name
+            });
+            EmailServiceHelper.sendEmail(emailData);
+        });
+        
         await LimitNotifyModel.updateOne({ project_id: projectCounts.project_id }, { limit1: true, limit2: false, limit3: false });
 
     }

consumer/src/EmailServiceHelper.ts

@@ -0,0 +1,19 @@
+
+import { EmailServerInfo } from './shared/services/EmailService'
+import axios from 'axios';
+
+const EMAIL_SECRET = process.env.EMAIL_SECRET;
+
+export class EmailServiceHelper {
+    static async sendEmail(data: EmailServerInfo) {
+        try {
+            await axios(data.url, {
+                method: 'POST',
+                data: data.body,
+                headers: { ...data.headers, 'x-litlyx-token': EMAIL_SECRET }
+            })
+        } catch (ex) {
+            console.error(ex);
+        }
+    }
+}

consumer/src/LimitChecker.ts

@@ -1,7 +1,7 @@
 
 
-import { ProjectLimitModel } from '@schema/ProjectsLimits';
-import { MAX_LOG_LIMIT_PERCENT } from '@data/broker/Limits';
+import { ProjectLimitModel } from './shared/schema/project/ProjectsLimits';
+import { MAX_LOG_LIMIT_PERCENT } from './shared/data/broker/Limits';
 import { checkLimitsForEmail } from './EmailController';
 
 export async function checkLimits(project_id: string) {

consumer/src/Metrics.ts

@@ -0,0 +1,28 @@
+
+import { Router } from 'express';
+import { RedisStreamService } from './shared/services/RedisStreamService';
+import { requireEnv } from './shared/utils/requireEnv';
+
+const stream_name = requireEnv('STREAM_NAME');
+
+export const metricsRouter = Router();
+
+metricsRouter.get('/queue', async (req, res) => {
+    try {
+        const size = await RedisStreamService.getQueueInfo(stream_name);
+        res.json({ size });
+    } catch (ex) {
+        console.error(ex);
+        res.status(500).json({ error: ex.message });
+    }
+})
+
+metricsRouter.get('/durations', async (req, res) => {
+    try {
+        const durations = RedisStreamService.METRICS_get()
+        res.json({ durations });
+    } catch (ex) {
+        console.error(ex);
+        res.status(500).json({ error: ex.message });
+    }
+})

consumer/src/index.ts

@@ -1,21 +1,32 @@
 
-import { requireEnv } from '@utils/requireEnv';
-import { connectDatabase } from '@services/DatabaseService';
-import { RedisStreamService } from '@services/RedisStreamService';
-import { ProjectModel } from "@schema/ProjectSchema";
-import { VisitModel } from "@schema/metrics/VisitSchema";
-import { SessionModel } from "@schema/metrics/SessionSchema";
-import { EventModel } from "@schema/metrics/EventSchema";
+import { requireEnv } from './shared/utils/requireEnv';
+import { connectDatabase } from './shared/services/DatabaseService';
+import { RedisStreamService } from './shared/services/RedisStreamService';
+import { ProjectModel } from "./shared/schema/project/ProjectSchema";
+import { VisitModel } from "./shared/schema/metrics/VisitSchema";
+import { SessionModel } from "./shared/schema/metrics/SessionSchema";
+import { EventModel } from "./shared/schema/metrics/EventSchema";
 import { lookup } from './lookup';
 import { UAParser } from 'ua-parser-js';
 import { checkLimits } from './LimitChecker';
+import express from 'express';
 
-import { ProjectLimitModel } from '@schema/ProjectsLimits';
-import { ProjectCountModel } from '@schema/ProjectsCounts';
+import { ProjectLimitModel } from './shared/schema/project/ProjectsLimits';
+import { ProjectCountModel } from './shared/schema/project/ProjectsCounts';
+import { metricsRouter } from './Metrics';
+
+
+const app = express();
+
+app.use('/metrics', metricsRouter);
+
+app.listen(process.env.PORT, () => console.log(`Listening on port ${process.env.PORT}`));
 
 connectDatabase(requireEnv('MONGO_CONNECTION_STRING'));
 main();
 
+const CONSUMER_NAME = `CONSUMER_${process.env.NODE_APP_INSTANCE || 'DEFAULT'}`
+
 async function main() {
 
     await RedisStreamService.connect();
@@ -24,18 +35,19 @@ async function main() {
     const group_name = requireEnv('GROUP_NAME') as any; // Checks are inside "startReadingLoop"
 
     await RedisStreamService.startReadingLoop({
-        stream_name, group_name, consumer_name: `CONSUMER_${process.env.NODE_APP_INSTANCE || 'DEFAULT'}`
+        stream_name, group_name, consumer_name: CONSUMER_NAME
     }, processStreamEntry);
 
 }
 
 async function processStreamEntry(data: Record<string, string>) {
+
+    const start = Date.now();
+
     try {
 
-        const start = Date.now();
-
         const eventType = data._type;
-        if (!eventType) return;
+        if (!eventType) return console.log('No type');
 
         const { pid, sessionHash } = data;
 
@@ -53,18 +65,19 @@ async function processStreamEntry(data: Record<string, string>) {
             await process_visit(data, sessionHash);
         }
 
-        const duration = Date.now() - start;
-
-        // console.log('Entry processed in', duration, 'ms');
-
     } catch (ex: any) {
         console.error('ERROR PROCESSING STREAM EVENT', ex.message);
     }
+
+    const duration = Date.now() - start;
+
+    RedisStreamService.METRICS_onProcess(CONSUMER_NAME, duration);
+
 }
 
 async function process_visit(data: Record<string, string>, sessionHash: string) {
 
-    const { pid, ip, website, page, referrer, userAgent, flowHash } = data;
+    const { pid, ip, website, page, referrer, userAgent, flowHash, timestamp } = data;
 
     let referrerParsed;
     try {
@@ -89,6 +102,7 @@ async function process_visit(data: Record<string, string>, sessionHash: string)
             flowHash,
             continent: geoLocation[0],
             country: geoLocation[1],
+            created_at: new Date(parseInt(timestamp))
         }),
         ProjectCountModel.updateOne({ project_id: pid }, { $inc: { 'visits': 1 } }, { upsert: true }),
         ProjectLimitModel.updateOne({ project_id: pid }, { $inc: { 'visits': 1 } })
@@ -98,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 } = data;
+    const { pid, instant, flowHash, timestamp } = data;
 
     const existingSession = await SessionModel.findOne({ project_id: pid, session: sessionHash }, { _id: 1 });
     if (!existingSession) {
@@ -123,7 +137,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 } = data;
+    const { name, metadata, pid, flowHash, timestamp } = data;
 
     let metadataObject;
     try {
@@ -133,7 +147,10 @@ async function process_event(data: Record<string, string>, sessionHash: string)
     }
 
     await Promise.all([
-        EventModel.create({ project_id: pid, name, flowHash, metadata: metadataObject, session: sessionHash }),
+        EventModel.create({
+            project_id: pid, name, flowHash, metadata: metadataObject, session: sessionHash,
+            created_at: new Date(parseInt(timestamp))
+        }),
         ProjectCountModel.updateOne({ project_id: pid }, { $inc: { 'events': 1 } }, { upsert: true }),
         ProjectLimitModel.updateOne({ project_id: pid }, { $inc: { 'events': 1 } })
     ]);

consumer/tsconfig.json

@@ -1,27 +1,8 @@
 {
     "compilerOptions": {
-        "baseUrl": ".",
         "module": "NodeNext",
         "target": "ESNext",
-        "esModuleInterop": true,
-        "outDir": "dist",
-        "paths": {
-            "@schema/*": [
-                "../shared/schema/*"
-            ],
-            "@services/*": [
-                "../shared/services/*"
-            ],
-            "@data/*": [
-                "../shared/data/*"
-            ],
-            "@functions/*": [
-                "../shared/functions/*"
-            ],
-            "@utils/*": [
-                "../shared/utils/*"
-            ]
-        }
+        "outDir": "dist"
     },
     "include": [
         "src/**/*.ts"

dashboard/.gitignore

@@ -24,7 +24,6 @@ winston-*.ndjson
 .env.*
 !.env.example
 
-
 # Test reports
 *.report.txt
 
@@ -35,5 +34,10 @@ out.pdf
 tests
 
 # EXPLAINS MONGODB
+explains
 
-explains
+#Ecosystem
+ecosystem.config.cjs
+ecosystem.config.js
+
+shared

dashboard/Dockerfile

@@ -1,50 +1,31 @@
-# Start with a minimal Node.js base image
+
 FROM node:21-alpine AS base
 
-# Create a distinct build environment
 FROM base AS build
 
-# Install pnpm globally with caching to avoid reinstalling if nothing has changed
 RUN npm i -g pnpm
 
-# Set the working directory
 WORKDIR /home/app
 
-# Copy only package-related files to leverage caching
+COPY --link ./package.json ./tsconfig.json ./pnpm-lock.yaml ./
 COPY --link ./dashboard/package.json ./dashboard/pnpm-lock.yaml ./dashboard/
-COPY --link ./lyx-ui/package.json ./lyx-ui/pnpm-lock.yaml ./lyx-ui/
-COPY --link ./shared/package.json ./shared/pnpm-lock.yaml ./shared/
 
-# Install dependencies for each package
-WORKDIR /home/app/lyx-ui
-RUN pnpm install --frozen-lockfile
+RUN pnpm install
+RUN pnpm install --filter dashboard
 
-# WORKDIR /home/app/shared
-# RUN pnpm install --frozen-lockfile
-
-WORKDIR /home/app/dashboard
-RUN pnpm install --frozen-lockfile
-
-# Now copy the rest of the source files
 WORKDIR /home/app
 
 COPY --link ./dashboard ./dashboard
-COPY --link ./lyx-ui ./lyx-ui
 COPY --link ./shared ./shared
 
-# Build the dashboard
 WORKDIR /home/app/dashboard
 
 RUN pnpm run build
 
-# Use a smaller base image for the final production build
 FROM node:21-alpine AS production
 
-# Set the working directory for the production container
 WORKDIR /home/app
 
-# Copy the built application from the build stage
 COPY --from=build /home/app/dashboard/.output /home/app/.output
 
-# Start the application
 CMD ["node", "/home/app/.output/server/index.mjs"]

dashboard/app.vue

@@ -10,24 +10,24 @@ const { alerts, closeAlert } = useAlert();
 
 const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dialogClosable } = useCustomDialog();
 
-const { visible } = usePricingDrawer();
+const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
 
 </script>
 
 <template>
 
-  <div class="w-dvw h-dvh bg-lyx-background-light relative">
+  <div class="w-dvw h-dvh bg-lyx-lightmode-background-light dark:bg-lyx-background-light relative">
 
-    <Transition name="pdrawer">
-      <LazyPricingDrawer @onCloseClick="visible = false"
-        class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="visible">
-      </LazyPricingDrawer>
+    <Transition name="drawer">
+      <LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses"
+        class="bg-lyx-lightmode-background-light dark:bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="drawerVisible">
+      </LazyDrawerGeneric>
     </Transition>
 
 
     <div class="fixed top-4 right-8 z-[999] flex flex-col gap-2" v-if="alerts.length > 0">
       <div v-for="alert of alerts"
-        class="w-[30vw] min-w-[20rem] relative bg-[#151515] overflow-hidden border-solid border-[2px] border-[#262626] rounded-lg p-6 drop-shadow-lg">
+        class="w-[30vw] min-w-[20rem] relative bg-lyx-lightmode-background dark:bg-[#151515] overflow-hidden border-solid border-[2px] border-lyx-lightmode-widget dark:border-[#262626] rounded-lg p-6 drop-shadow-lg">
         <div class="flex items-start gap-4">
           <div> <i :class="alert.icon"></i> </div>
           <div class="grow">
@@ -56,8 +56,8 @@ const { visible } = usePricingDrawer();
     </div>
 
     <div v-if="showDialog"
-      class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] bg-black/50">
-      <div :style="dialogStyle" class="bg-lyx-widget rounded-xl relative outline outline-1 outline-lyx-widget-lighter">
+      class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] dark:bg-black/50">
+      <div :style="dialogStyle" class="bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget dark:bg-lyx-widget dark:outline-lyx-widget-lighter rounded-xl relative outline outline-1">
         <div v-if="dialogClosable" class="flex justify-end absolute z-[100] right-8 top-8">
           <i @click="closeDialog()" class="fas fa-close text-[1.6rem] hover:text-gray-500 cursor-pointer"></i>
         </div>
@@ -67,6 +67,11 @@ const { visible } = usePricingDrawer();
       </div>
     </div>
 
+
+    <UModals />
+
+    <LazyOnboarding> </LazyOnboarding>
+
     <NuxtLayout>
       <NuxtPage></NuxtPage>
     </NuxtLayout>
@@ -75,18 +80,18 @@ const { visible } = usePricingDrawer();
 </template>
 
 <style scoped lang="scss">
-.pdrawer-enter-active,
-.pdrawer-leave-active {
+.drawer-enter-active,
+.drawer-leave-active {
   transition: all .5s ease-in-out;
 }
 
-.pdrawer-enter-from,
-.pdrawer-leave-to {
+.drawer-enter-from,
+.drawer-leave-to {
   transform: translateX(100%)
 }
 
-.pdrawer-enter-to,
-.pdrawer-leave-from {
+.drawer-enter-to,
+.drawer-leave-from {
   transform: translateX(0)
 }
 </style>

dashboard/assets/main.css

@@ -0,0 +1,13 @@
+@import './font-awesome/css/all.css';
+
+@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.cdnfonts.com/css/brockmann');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+
+@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.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

dashboard/assets/scss/main.scss

@@ -1,18 +1,5 @@
-@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.cdnfonts.com/css/brockmann');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
-
-@import '../font-awesome/css/all.css';
-@import './utilities.scss';
-@import './colors.scss';
-
-@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.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
-
+@use './utilities.scss';
+@use './colors.scss';
 
 @font-face {
   font-family: "Geist";

dashboard/components/BarCard/Base.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 
 
-export type IconProvider = (id: string) => ['img' | 'icon', string] | undefined;
+export type IconProvider = (e: { _id: string, count: string } & any) => ['img' | 'icon', string] | undefined;
 
 
 type Props = {
@@ -54,7 +54,7 @@ function openExternalLink(link: string) {
         <div class="flex justify-between mb-3">
             <div class="flex flex-col gap-1">
                 <div class="flex gap-4 items-center">
-                    <div class="poppins font-semibold text-[1.4rem] text-text">
+                    <div class="poppins font-semibold text-[1.4rem] text-lyx-lightmode-text dark:text-lyx-text">
                         {{ label }}
                     </div>
                     <div class="flex items-center">
@@ -63,7 +63,7 @@ function openExternalLink(link: string) {
 
                     </div>
                 </div>
-                <div class="poppins text-[1rem] text-text-sub/90">
+                <div class="poppins text-[1rem] text-lyx-ligtmode-text-darker dark:text-text-sub/90">
                     {{ desc }}
                 </div>
             </div>
@@ -80,8 +80,9 @@ function openExternalLink(link: string) {
             </div>
         </div>
 
-        <div>
-            <div class="flex justify-between font-bold text-text-sub/80 text-[1.1rem] mb-4">
+        <div class="h-full flex flex-col">
+            <div
+                class="flex justify-between font-bold lyx-text-lightmode-text-dark dark:text-text-sub/80 text-[1.1rem] mb-4">
                 <div class="flex items-center gap-2">
                     <div v-if="isDetailView" class="flex items-center justify-center">
                         <i @click="$emit('showGeneral')"
@@ -107,36 +108,40 @@ function openExternalLink(link: string) {
                         <div class="flex gap-1 items-center" @click="showDetails(element._id)"
                             :class="{ 'cursor-pointer line-active': interactive }">
 
-                            <div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
+                            <div class="absolute rounded-sm w-full h-full bg-[#6f829c38] dark:bg-[#92abcf38]"
                                 :style="'width:' + 100 / maxData * element.count + '%;'"></div>
 
                             <div class="flex px-2 py-1 relative items-center gap-4">
-                                <div v-if="iconProvider && iconProvider(element._id) != undefined"
+                                <div v-if="iconProvider && iconProvider(element) != undefined"
                                     class="flex items-center h-[1.3rem]">
 
-                                    <img v-if="iconProvider(element._id)?.[0] == 'img'" class="h-full"
-                                        :style="customIconStyle" :src="iconProvider(element._id)?.[1]">
+                                    <img v-if="iconProvider(element)?.[0] == 'img'" class="h-full"
+                                        :style="customIconStyle" :src="iconProvider(element)?.[1]">
 
-                                    <i v-else :class="iconProvider(element._id)?.[1]"></i>
+                                    <i v-else :class="iconProvider(element)?.[1]"></i>
                                 </div>
-                                <span class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
+                                <span
+                                    class="text-ellipsis line-clamp-1 ui-font z-[19] text-[.95rem] text-lyx-lightmode-text-dark dark:text-text/70">
                                     {{ elementTextTransformer?.(element._id) || element._id }}
                                 </span>
                             </div>
                         </div>
                     </div>
-                    <div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
-                        formatNumberK(element.count) }} </div>
+                    <div
+                        class="text-lyx-lightmode-text dark:text-lyx-text font-semibold text-[.9rem] md:text-[1rem] manrope">
+                        {{
+                            formatNumberK(element.count) }} </div>
                 </div>
                 <div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-light text-[1.1rem]">
                     No data yet
                 </div>
             </div>
-            <div v-if="!hideShowMore" class="flex justify-center mt-4 text-text-sub/90 ">
-                <div @click="$emit('showMore')"
-                    class="poppins hover:bg-black cursor-pointer w-fit px-6 py-1 rounded-lg border-[1px] border-text-sub text-[.9rem]">
+            <div v-if="!hideShowMore" class="flex justify-center mt-4 text-text-sub/90 items-end grow">
+
+                <LyxUiButton type="outline" @click="$emit('showMore')">
                     Show more
-                </div>
+                </LyxUiButton>
+
             </div>
         </div>
 

dashboard/components/BarCard/Browsers.vue

@@ -1,5 +1,34 @@
 <script lang="ts" setup>
 
+import type { IconProvider } from './Base.vue';
+
+function iconProvider(e: { _id: string, flag: string, count: number }): ReturnType<IconProvider> {
+    let name = e._id.toLowerCase().replace(/ /g, '-');
+
+    if (name === 'mobile-safari') name = 'safari';
+    if (name === 'chrome-headless') name = 'chrome'
+    if (name === 'chrome-webview') name = 'chrome'
+
+    if (name === 'duckduckgo') return ['icon', 'far fa-duck']
+    if (name === 'avast-secure-browser') return ['icon', 'far fa-bug']
+    if (name === 'avg-secure-browser') return ['icon', 'far fa-bug']
+    
+    if (name === 'no_browser') return ['icon', 'far fa-question']
+    if (name === 'gsa') return ['icon', 'far fa-question']
+    if (name === 'miui-browser') return ['icon', 'far fa-question']
+    
+    if (name === 'vivo-browser') return ['icon', 'far fa-question']
+    if (name === 'whale') return ['icon', 'far fa-question']
+    
+    if (name === 'twitter') return ['icon', 'fab fa-twitter']
+    if (name === 'linkedin') return ['icon', 'fab fa-linkedin']
+    if (name === 'facebook') return ['icon', 'fab fa-facebook']
+
+    return [
+        'img',
+        `https://github.com/alrra/browser-logos/blob/main/src/${name}/${name}_256x256.png?raw=true`
+    ]
+}
 
 const browsersData = useFetch('/api/data/browsers', {
     headers: useComputedHeaders({ limit: 10, }), lazy: true
@@ -8,7 +37,7 @@ const browsersData = useFetch('/api/data/browsers', {
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
 async function showMore() {
-    dialogBarData.value=[];
+    dialogBarData.value = [];
     showDialog.value = true;
     isDataLoading.value = true;
 
@@ -16,7 +45,9 @@ async function showMore() {
         headers: useComputedHeaders({ limit: 1000 }).value
     });
 
-    dialogBarData.value = res || [];
+    dialogBarData.value = res?.map(e => {
+        return { ...e, icon: iconProvider(e as any) }
+    }) || [];
 
     isDataLoading.value = false;
 
@@ -26,10 +57,10 @@ async function showMore() {
 
 
 <template>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2 h-full">
         <BarCardBase @showMore="showMore()" @dataReload="browsersData.refresh()" :data="browsersData.data.value || []"
-            desc="The browsers most used to search your website." :dataIcons="false"
-            :loading="browsersData.pending.value" label="Top Browsers" sub-label="Browsers">
+            desc="The browsers most used to search your website." :dataIcons="true" :iconProvider="iconProvider"
+            :loading="browsersData.pending.value" label="Browsers" sub-label="Browsers">
         </BarCardBase>
     </div>
 </template>

dashboard/components/BarCard/Devices.vue

@@ -1,9 +1,21 @@
 <script lang="ts" setup>
 
 
+import type { IconProvider } from './Base.vue';
+
+function iconProvider(e: { _id: string, count: number }): ReturnType<IconProvider> {
+    if (e._id === 'desktop') return ['icon','far fa-desktop'];
+    if (e._id === 'tablet') return ['icon','far fa-tablet ml-1'];
+    if (e._id === 'mobile') return ['icon','far fa-mobile ml-1'];
+    if (e._id === 'smarttv') return ['icon','far fa-tv'];
+    if (e._id === 'console') return ['icon','far fa-game-console-handheld'];
+    return ['icon', 'far fa-question ml-1 mr-1']
+}
+
+
 function transform(data: { _id: string, count: number }[]) {
     console.log(data);
-    return data.map(e => ({ ...e, _id: e._id == null ? 'unknown' : e._id }))
+    return data.map(e => ({ ...e, _id: e._id == null ? 'others' : e._id }))
 }
 
 const devicesData = useFetch('/api/data/devices', {
@@ -34,9 +46,9 @@ async function showMore() {
 
 
 <template>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2 h-full">
         <BarCardBase @showMore="showMore()" @dataReload="devicesData.refresh()" :data="devicesData.data.value || []"
-            :dataIcons="false" desc="The devices most used to access your website." :loading="devicesData.pending.value"
-            label="Top Devices" sub-label="Devices"></BarCardBase>
+            :iconProvider="iconProvider" :dataIcons="true" desc="The devices most used to access your website."
+            :loading="devicesData.pending.value" label="Devices" sub-label="Devices"></BarCardBase>
     </div>
 </template>

dashboard/components/BarCard/Geolocations.vue

@@ -2,34 +2,43 @@
 
 import type { IconProvider } from '../BarCard/Base.vue';
 
-function iconProvider(id: string): ReturnType<IconProvider> {
-    if (id === 'self') return ['icon', 'fas fa-link'];
+function iconProvider(e: { _id: string, flag: string, count: number }): ReturnType<IconProvider> {
+    if (!e.flag) return ['icon', 'far fa-question']
     return [
         'img',
-        `https://raw.githubusercontent.com/hampusborgos/country-flags/main/png250px/${id.toLowerCase()}.png`
+        `https://raw.githubusercontent.com/hampusborgos/country-flags/refs/heads/main/svg/${e.flag.toLowerCase()}.svg`
+        // `https://raw.githubusercontent.com/hampusborgos/country-flags/main/png250px/${e.flag.toLowerCase()}.png`
     ]
 }
 
 const customIconStyle = `width: 2rem; padding: 1px;`
 
 const geolocationData = useFetch('/api/data/countries', {
-    headers: useComputedHeaders({ limit: 10, }), lazy: true
+    headers: useComputedHeaders({ limit: 10, }), lazy: true,
+    transform: (e) => {
+        if (!e) return e;
+        return e.map(k => {
+            return { ...k, flag: k._id, _id: getCountryName(k._id) ?? k._id }
+        })
+    }
 });
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
 async function showMore() {
-    dialogBarData.value=[];
+    dialogBarData.value = [];
     showDialog.value = true;
     isDataLoading.value = true;
 
     const res = await $fetch('/api/data/countries', {
-        headers: useComputedHeaders({limit: 1000}).value
+        headers: useComputedHeaders({ limit: 1000 }).value
     });
 
-    dialogBarData.value = res?.map(e => {
-        return { ...e, icon: iconProvider(e._id) }
+    dialogBarData.value = res?.map(k => {
+        return { ...k, flag: k._id, _id: getCountryName(k._id) ?? k._id }
+    }).map(e => {
+        return { ...e, icon: iconProvider(e) }
     }) || [];
 
     isDataLoading.value = false;
@@ -40,10 +49,10 @@ async function showMore() {
 
 
 <template>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2 h-full">
         <BarCardBase @showMore="showMore()" @dataReload="geolocationData.refresh()"
             :data="geolocationData.data.value || []" :dataIcons="false" :loading="geolocationData.pending.value"
-            label="Top Countries" sub-label="Countries" :iconProvider="iconProvider" :customIconStyle="customIconStyle"
+            label="Countries" sub-label="Countries" :iconProvider="iconProvider" :customIconStyle="customIconStyle"
             desc=" Lists the countries where users access your website.">
         </BarCardBase>
     </div>

dashboard/components/BarCard/OperatingSystems.vue

@@ -31,6 +31,6 @@ async function showMore() {
     <div class="flex flex-col gap-2 h-full">
         <BarCardBase @showMore="showMore()" @dataReload="ossData.refresh()" :data="ossData.data.value || []"
             desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
-            :loading="ossData.pending.value" label="Top OS" sub-label="OSs"></BarCardBase>
+            :loading="ossData.pending.value" label="OS" sub-label="OSs"></BarCardBase>
     </div>
 </template>

dashboard/components/BarCard/Pages.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+
+const router = useRouter();
+
+const pagesData = useFetch('/api/data/pages', {
+    headers: useComputedHeaders({
+        limit: 10,
+    }), lazy: true
+});
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+async function showMore() {
+
+    dialogBarData.value = [];
+
+    showDialog.value = true;
+    isDataLoading.value = true;
+
+    const res = await $fetch('/api/data/pages', {
+        headers: useComputedHeaders({ limit: 1000 }).value
+    });
+    
+    dialogBarData.value = (res || []);
+
+    isDataLoading.value = false;
+}
+
+function goToView() {
+    router.push('/dashboard/visits');
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2 h-full">
+        <BarCardBase @showRawData="goToView()" @showMore="showMore()" @dataReload="pagesData.refresh()" :showLink=true
+            :data="pagesData.data.value || []" :interactive="false" desc="Most visited pages."
+            :rawButton="!isLiveDemo"
+            :dataIcons="true" :loading="pagesData.pending.value" label="Top Pages" sub-label="Referrers">
+        </BarCardBase>
+    </div>
+</template>

dashboard/components/BarCard/Referrers.vue

@@ -2,9 +2,9 @@
 
 import type { IconProvider } from './Base.vue';
 
-function iconProvider(id: string): ReturnType<IconProvider> {
-    if (id === 'self') return ['icon', 'fas fa-link'];
-    return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${id}&sz=64`]
+function iconProvider(e: { _id: string, count: number }): ReturnType<IconProvider> {
+    if (e._id === 'self') return ['icon', 'fas fa-link'];
+    return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${e._id}&sz=64`]
 }
 
 function elementTextTransformer(element: string) {
@@ -22,18 +22,18 @@ const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
 async function showMore() {
 
-    dialogBarData.value=[];
-    
+    dialogBarData.value = [];
+
     showDialog.value = true;
     isDataLoading.value = true;
 
     const res = await $fetch('/api/data/referrers', {
-        headers: useComputedHeaders({limit: 1000}).value
+        headers: useComputedHeaders({ limit: 1000 }).value
     });
 
 
     dialogBarData.value = res?.map(e => {
-        return { ...e, icon: iconProvider(e._id) }
+        return { ...e, icon: iconProvider(e as any) }
     }) || [];
 
     isDataLoading.value = false;
@@ -43,11 +43,11 @@ async function showMore() {
 
 
 <template>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2 h-full">
         <BarCardBase @showMore="showMore()" :elementTextTransformer="elementTextTransformer"
             :iconProvider="iconProvider" @dataReload="referrersData.refresh()" :showLink=true
             :data="referrersData.data.value || []" :interactive="false" desc="Where users find your website."
-            :dataIcons="true" :loading="referrersData.pending.value" label="Top Referrers" sub-label="Referrers">
+            :dataIcons="true" :loading="referrersData.pending.value" label="Top Sources" sub-label="Referrers">
         </BarCardBase>
     </div>
 </template>

dashboard/components/CardTitled.vue

@@ -9,10 +9,10 @@ const props = defineProps<{ title: string, sub?: string }>();
         <div class="flex flex-col gap-4 h-full">
             <div class="flex items-center">
                 <div class="flex flex-col grow">
-                    <div class="poppins font-semibold text-[1rem] md:text-[1.3rem] text-text">
+                    <div class="poppins font-semibold text-[1rem] md:text-[1.3rem] text-lyx-lightmode-text-dark dark:text-text">
                         {{ props.title }}
                     </div>
-                    <div v-if="props.sub" class="poppins text-[.7rem] md:text-[1rem] text-text-sub">
+                    <div v-if="props.sub" class="poppins text-[.7rem] md:text-[1rem] text-lyx-lightmode-text-darker dark:text-text-sub">
                         {{ props.sub }}
                     </div>
                 </div>

dashboard/components/CustomTab.vue

@@ -9,13 +9,16 @@ const activeTabIndex = ref<number>(0);
 
 <template>
     <div>
-        <div class="flex">
-            <div v-for="(tab, index) of items" @click="activeTabIndex = index"
-                class="px-6 pb-3 poppins font-medium text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
-                    '!border-[#88A7FF] !text-[#88A7FF]': activeTabIndex === index,
-                    'hover:border-lyx-text-dark hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
-                }">
-                {{ tab.label }}
+        <div class="flex overflow-y-auto hide-scrollbars">
+            <div class="flex">
+                <div v-for="(tab, index) of items" @click="activeTabIndex = index"
+                    class="px-6 pb-3 poppins font-medium text-lyx-lightmode-text dark:text-lyx-text-darker border-b-[1px] border-lyx-text-darker"
+                    :class="{
+                        '!border-[#88A7FF] !text-[#88A7FF]': activeTabIndex === index,
+                        'hover:border-lyx-lightmode-text-dark hover:text-lyx-lightmode-text-dark/60 dark:hover:border-lyx-text-dark dark:hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
+                    }">
+                    {{ tab.label }}
+                </div>
             </div>
             <div class="border-b-[1px] border-lyx-text-darker w-full">
 

dashboard/components/FirstInteraction.vue

@@ -7,6 +7,8 @@ import 'highlight.js/styles/stackoverflow-dark.css';
 import hljs from 'highlight.js';
 import CardTitled from './CardTitled.vue';
 
+import { Lit } from 'litlyx-js';
+
 const props = defineProps<{
     firstInteraction: boolean,
     refreshInteraction: () => any
@@ -19,6 +21,7 @@ onMounted(() => {
 function copyProjectId() {
     if (!navigator.clipboard) alert('You can\'t copy in HTTP');
     navigator.clipboard.writeText(project.value?._id?.toString() || '');
+    Lit.event('no_visit_copy_id');
     createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
 }
 
@@ -36,6 +39,7 @@ function copyScript() {
         ].join('')
     }
 
+    Lit.event('no_visit_copy_script');
     navigator.clipboard.writeText(createScriptText());
     createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
 }
@@ -53,40 +57,41 @@ const scriptText = computed(() => {
 function reloadPage() {
     location.reload();
 }
+
 </script>
 
 <template>
 
     <div v-if="!firstInteraction && project" class="mt-[5vh] flex flex-col">
 
-        <div class="flex gap-4 items-center justify-center">
-            <div class="animate-pulse w-[1.5rem] h-[1.5rem] bg-accent rounded-full"> </div>
-            <div class="text-text/90 poppins text-[1.3rem] font-semibold">
-                Waiting for your first Visit or Event
+        <div class="flex items-center justify-center">
+
+            <div class="mr-4 animate-pulse w-[1rem] h-[1rem] bg-accent rounded-full"> </div>
+            <div class="text-lyx-lightmode-text dark:text-text/90 poppins text-[1.1rem] font-medium">
+                Waiting for your first visit
             </div>
-        </div>
-        <div class="flex justify-center mt-4">
-            <LyxUiButton type="primary" @click="reloadPage()">
+            <LyxUiButton class="ml-6" type="secondary" @click="reloadPage()">
                 <div class="flex items-center gap-2">
                     <i class="far fa-refresh"></i>
-                    <div> Reload </div>
+                    <div> Refresh </div>
                 </div>
             </LyxUiButton>
         </div>
 
+
         <div class="flex items-center justify-center mt-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]" title="Tutorial"
-                            sub="Coming soon. For now enjoy our launch video.">
+                        <CardTitled class="h-full w-full xl:min-w-[500px] 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">
 
                                 <iframe class="w-full h-full min-h-[400px]"
-                                    src="https://www.youtube.com/embed/GntyWMR7jsY?si=YGGkQwrk6-Iqmn8w" title="Litlyx"
+                                    src="https://www.youtube.com/embed/LInFoNLJ-CI?si=a97HVXpXFDgFg2Yp" title="Litlyx"
                                     frameborder="0"
                                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                     referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
@@ -102,7 +107,9 @@ function reloadPage() {
                                 sub="Start tracking web analytics in one line. (works everywhere js is supported)">
                                 <div class="flex flex-col items-end gap-4">
                                     <div class="w-full xl:text-[1rem] text-[.8rem]">
-                                        <pre><code class="language-html">{{ scriptText }}</code></pre>
+                                        <pre>
+                                            <code class="language-html rounded-md">{{ scriptText }}</code>
+                                        </pre>
                                     </div>
                                     <LyxUiButton type="secondary" @click="copyScript()">
                                         Copy
@@ -114,10 +121,13 @@ function reloadPage() {
                         <div class="h-full w-full">
                             <CardTitled class="h-full w-full" title="Project id"
                                 sub="This is the identifier for this project, used to forward data">
-                                <div class="flex flex-col items-end">
-                                    <div class="w-full text-[.9rem] text-[#acacac]"> {{ project?._id }} </div>
+                                <div class="flex items-center justify-between gap-4 mt-6">
+                                    <div class="p-2 bg-lyx-lightmode-widget dark:bg-[#1c1b1b] rounded-md w-full">
+                                        <div class="w-full text-[.9rem] dark:text-[#acacac]"> {{ project?._id }} </div>
+                                    </div>
                                     <LyxUiButton type="secondary" @click="copyProjectId()"> Copy </LyxUiButton>
                                 </div>
+
                             </CardTitled>
                         </div>
 
@@ -125,139 +135,43 @@ function reloadPage() {
                 </div>
                 <div>
                     <div>
-                        <CardTitled class="w-full h-full" title="Documentation"
-                            sub="Learn how to use Litlyx in every tech stack">
-                            <div class="flex flex-col items-end">
-                                <div class="justify-center w-full hidden xl:flex">
-                                    <svg width="680" height="100" viewBox="0 0 680 100" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <mask id="path-1-inside-1_473_1361" fill="white">
-                                            <path
-                                                d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" />
-                                        </mask>
-                                        <path
-                                            d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z"
-                                            fill="#0A0A0A" />
-                                        <path
-                                            d="M0 12C0 4.8203 5.8203 -1 13 -1H87C94.1797 -1 100 4.8203 100 12C100 5.92487 94.6274 1 88 1H12C5.37258 1 0 5.92487 0 12ZM100 100H0H100ZM0 100V0V100ZM100 0V100V0Z"
-                                            fill="#303246" mask="url(#path-1-inside-1_473_1361)" />
-                                        <mask id="path-3-inside-2_473_1361" fill="white">
-                                            <path
-                                                d="M348 12C348 5.37258 353.373 0 360 0H436C442.627 0 448 5.37258 448 12V88C448 94.6274 442.627 100 436 100H360C353.373 100 348 94.6274 348 88V12Z" />
-                                        </mask>
-                                        <path
-                                            d="M348 12C348 5.37258 353.373 0 360 0H436C442.627 0 448 5.37258 448 12V88C448 94.6274 442.627 100 436 100H360C353.373 100 348 94.6274 348 88V12Z"
-                                            fill="#0A0A0A" />
-                                        <path
-                                            d="M348 12C348 4.8203 353.82 -1 361 -1H435C442.18 -1 448 4.8203 448 12C448 5.92487 442.627 1 436 1H360C353.373 1 348 5.92487 348 12ZM448 100H348H448ZM348 100V0V100ZM448 0V100V0Z"
-                                            fill="#303246" mask="url(#path-3-inside-2_473_1361)" />
-                                        <path
-                                            d="M398 80C414.569 80 428 66.5685 428 50C428 33.4315 414.569 20 398 20C381.431 20 368 33.4315 368 50C368 66.5685 381.431 80 398 80Z"
-                                            fill="white" />
-                                        <path
-                                            d="M417.836 72.5068L391.047 38H386V61.99H390.038V43.1278L414.666 74.9484C415.778 74.2045 416.836 73.3884 417.836 72.5068Z"
-                                            fill="url(#paint0_linear_473_1361)" />
-                                        <path d="M410.333 38H406.333V62H410.333V38Z"
-                                            fill="url(#paint1_linear_473_1361)" />
-                                        <mask id="path-8-inside-3_473_1361" fill="white">
-                                            <path
-                                                d="M116 12C116 5.37258 121.373 0 128 0H204C210.627 0 216 5.37258 216 12V88C216 94.6274 210.627 100 204 100H128C121.373 100 116 94.6274 116 88V12Z" />
-                                        </mask>
-                                        <path
-                                            d="M116 12C116 5.37258 121.373 0 128 0H204C210.627 0 216 5.37258 216 12V88C216 94.6274 210.627 100 204 100H128C121.373 100 116 94.6274 116 88V12Z"
-                                            fill="#0A0A0A" />
-                                        <path
-                                            d="M116 12C116 4.8203 121.82 -1 129 -1H203C210.18 -1 216 4.8203 216 12C216 5.92487 210.627 1 204 1H128C121.373 1 116 5.92487 116 12ZM216 100H116H216ZM116 100V0V100ZM216 0V100V0Z"
-                                            fill="#303246" mask="url(#path-8-inside-3_473_1361)" />
-                                        <path d="M182.2 27H193L166 73.575L139 27H159.655L166 37.8L172.21 27H182.2Z"
-                                            fill="#41B883" />
-                                        <path d="M139 27L166 73.575L193 27H182.2L166 54.945L149.665 27H139Z"
-                                            fill="#41B883" />
-                                        <path d="M149.665 27L166 55.08L182.2 27H172.21L166 37.8L159.655 27H149.665Z"
-                                            fill="#35495E" />
-                                        <path
-                                            d="M53.6605 70H75.9651C76.6735 70.0001 77.3695 69.8153 77.983 69.4642C78.5965 69.1131 79.1059 68.6081 79.46 67.9999C79.8141 67.3918 80.0003 66.7019 80 65.9998C79.9997 65.2977 79.8128 64.608 79.4582 64.0002L64.4791 38.2859C64.1251 37.6779 63.6158 37.173 63.0024 36.8219C62.389 36.4709 61.6932 36.2861 60.9849 36.2861C60.2766 36.2861 59.5808 36.4709 58.9674 36.8219C58.354 37.173 57.8447 37.6779 57.4906 38.2859L53.6605 44.8653L46.1721 31.9995C45.8177 31.3916 45.3082 30.8867 44.6946 30.5358C44.0811 30.1848 43.3852 30 42.6767 30C41.9683 30 41.2724 30.1848 40.6588 30.5358C40.0453 30.8867 39.5357 31.3916 39.1814 31.9995L20.5418 64.0002C20.1872 64.608 20.0003 65.2977 20 65.9998C19.9997 66.7019 20.1859 67.3918 20.54 67.9999C20.8941 68.6081 21.4035 69.1131 22.017 69.4642C22.6305 69.8153 23.3265 70.0001 24.0349 70H38.0359C43.5832 70 47.6741 67.585 50.4891 62.8734L57.3233 51.143L60.9838 44.8653L71.9698 63.7222H57.3233L53.6605 70ZM37.8076 63.7158L28.0367 63.7136L42.6833 38.5724L49.9913 51.143L45.0983 59.545C43.2289 62.602 41.1051 63.7158 37.8076 63.7158Z"
-                                            fill="#00DC82" />
-                                        <mask id="path-14-inside-4_473_1361" fill="white">
-                                            <path
-                                                d="M464 12C464 5.37258 469.373 0 476 0H552C558.627 0 564 5.37258 564 12V88C564 94.6274 558.627 100 552 100H476C469.373 100 464 94.6274 464 88V12Z" />
-                                        </mask>
-                                        <path
-                                            d="M464 12C464 5.37258 469.373 0 476 0H552C558.627 0 564 5.37258 564 12V88C564 94.6274 558.627 100 552 100H476C469.373 100 464 94.6274 464 88V12Z"
-                                            fill="#0A0A0A" />
-                                        <path
-                                            d="M464 12C464 4.8203 469.82 -1 477 -1H551C558.18 -1 564 4.8203 564 12C564 5.92487 558.627 1 552 1H476C469.373 1 464 5.92487 464 12ZM564 100H464H564ZM464 100V0V100ZM564 0V100V0Z"
-                                            fill="#303246" mask="url(#path-14-inside-4_473_1361)" />
-                                        <path
-                                            d="M514 55.299C517.088 55.299 519.591 52.7959 519.591 49.7081C519.591 46.6203 517.088 44.1172 514 44.1172C510.912 44.1172 508.409 46.6203 508.409 49.7081C508.409 52.7959 510.912 55.299 514 55.299Z"
-                                            fill="#61DAFB" />
-                                        <path
-                                            d="M514 61.1625C530.569 61.1625 544 56.0341 544 49.708C544 43.3818 530.569 38.2534 514 38.2534C497.431 38.2534 484 43.3818 484 49.708C484 56.0341 497.431 61.1625 514 61.1625Z"
-                                            stroke="#61DAFB" stroke-width="5" />
-                                        <path
-                                            d="M504.08 55.4353C512.364 69.7841 523.521 78.8519 529 75.6888C534.479 72.5257 532.204 58.3295 523.92 43.9808C515.636 29.632 504.479 20.5642 499 23.7273C493.521 26.8904 495.796 41.0865 504.08 55.4353Z"
-                                            stroke="#61DAFB" stroke-width="5" />
-                                        <path
-                                            d="M504.08 43.9808C495.796 58.3296 493.521 72.5258 499 75.6888C504.479 78.8519 515.636 69.7841 523.92 55.4354C532.204 41.0866 534.479 26.8904 529 23.7273C523.521 20.5642 512.364 29.632 504.08 43.9808Z"
-                                            stroke="#61DAFB" stroke-width="5" />
-                                        <mask id="path-20-inside-5_473_1361" fill="white">
-                                            <path
-                                                d="M232 12C232 5.37258 237.373 0 244 0H320C326.627 0 332 5.37258 332 12V88C332 94.6274 326.627 100 320 100H244C237.373 100 232 94.6274 232 88V12Z" />
-                                        </mask>
-                                        <path
-                                            d="M232 12C232 5.37258 237.373 0 244 0H320C326.627 0 332 5.37258 332 12V88C332 94.6274 326.627 100 320 100H244C237.373 100 232 94.6274 232 88V12Z"
-                                            fill="#0A0A0A" />
-                                        <path
-                                            d="M232 12C232 4.8203 237.82 -1 245 -1H319C326.18 -1 332 4.8203 332 12C332 5.92487 326.627 1 320 1H244C237.373 1 232 5.92487 232 12ZM332 100H232H332ZM232 100V0V100ZM332 0V100V0Z"
-                                            fill="#303246" mask="url(#path-20-inside-5_473_1361)" />
-                                        <path
-                                            d="M282 20C298.569 20 312 33.4314 312 50C312 66.5686 298.569 80 282 80C265.431 80 252 66.5686 252 50C252 33.4314 265.431 20 282 20Z"
-                                            fill="black" />
-                                        <path
-                                            d="M281.327 64.6787C280.558 64.4713 279.766 64.9167 279.541 65.6761L279.531 65.7115L277.539 73.0943L277.53 73.1299C277.342 73.8995 277.802 74.6827 278.572 74.8901C279.341 75.0979 280.132 74.6525 280.357 73.8929L280.367 73.8577L282.359 66.4749L282.369 66.4391C282.382 66.3837 282.392 66.3279 282.399 66.2723L282.405 66.2167L282.358 65.9775L282.289 65.6331L282.245 65.4181C282.152 65.2379 282.022 65.0791 281.864 64.9517C281.706 64.8245 281.523 64.7315 281.327 64.6787ZM267.445 57.0757C267.408 57.1481 267.378 57.2245 267.353 57.3043L267.339 57.3525L265.347 64.7353L265.338 64.7711C265.15 65.5407 265.61 66.3237 266.38 66.5313C267.149 66.7389 267.941 66.2937 268.166 65.5341L268.176 65.4987L269.982 58.8045C269.036 58.3035 268.187 57.7255 267.445 57.0757ZM262.694 48.5857C261.925 48.3781 261.133 48.8233 260.908 49.5829L260.898 49.6183L258.906 57.0011L258.897 57.0367C258.709 57.8063 259.169 58.5893 259.939 58.7969C260.708 59.0045 261.499 58.5593 261.725 57.7997L261.734 57.7643L263.727 50.3815L263.736 50.3459C263.923 49.5763 263.463 48.7933 262.694 48.5857ZM307.364 46.9091C306.595 46.7015 305.803 47.1467 305.578 47.9063L305.568 47.9417L303.576 55.3245L303.567 55.3601C303.379 56.1297 303.839 56.9127 304.608 57.1203C305.378 57.3279 306.169 56.8827 306.394 56.1231L306.404 56.0877L308.396 48.7049L308.406 48.6693C308.593 47.8997 308.133 47.1167 307.364 46.9091ZM258.356 37.0504C256.687 40.0887 255.625 43.4223 255.228 46.8657C255.418 47.0823 255.668 47.2379 255.946 47.3125C256.715 47.5203 257.507 47.0749 257.732 46.3153L257.742 46.2801L259.734 38.8972L259.743 38.8616C259.931 38.0919 259.471 37.3088 258.701 37.1013C258.589 37.0708 258.472 37.0538 258.356 37.0504ZM302.318 37.1013C301.549 36.8936 300.757 37.3389 300.532 38.0985L300.522 38.1338L298.53 45.5167L298.521 45.5523C298.333 46.3219 298.793 47.1051 299.563 47.3125C300.332 47.5203 301.123 47.0749 301.349 46.3153L301.358 46.2801L303.351 38.8972L303.36 38.8616C303.547 38.0919 303.087 37.3088 302.318 37.1013Z"
-                                            fill="white" />
-                                        <path
-                                            d="M267.026 30.0813C266.256 29.8736 265.465 30.319 265.24 31.0786L265.23 31.1138L263.238 38.4967L263.229 38.5323C263.041 39.302 263.501 40.085 264.27 40.2926C265.04 40.5002 265.831 40.0548 266.056 39.2953L266.066 39.26L268.058 31.8772L268.067 31.8416C268.255 31.0719 267.795 30.2888 267.026 30.0813ZM292.623 31.4769C291.854 31.2692 291.062 31.7145 290.837 32.4742L290.827 32.5094L289.489 37.47C290.356 37.8983 291.183 38.4025 291.962 38.9768L292.091 39.0729L293.656 33.2728L293.665 33.2372C293.852 32.4675 293.393 31.6844 292.623 31.4769ZM279.594 23.1528C278.659 23.2354 277.729 23.3668 276.809 23.5463L276.613 23.5853L274.756 30.4684L274.747 30.504C274.56 31.2737 275.02 32.0567 275.789 32.2643C276.558 32.4719 277.35 32.0266 277.575 31.267L277.585 31.2317L279.577 23.8489L279.586 23.8133C279.639 23.5966 279.642 23.3707 279.594 23.1528ZM297.925 28.2526L297.534 29.7034L297.525 29.7389C297.337 30.5086 297.797 31.2916 298.566 31.4992C299.336 31.7068 300.127 31.2615 300.352 30.5019L300.362 30.4666L300.405 30.3092C299.672 29.6241 298.902 28.9802 298.098 28.3804L297.925 28.2526ZM286.334 23.3935L285.628 26.0119L285.619 26.0475C285.431 26.8172 285.891 27.6002 286.661 27.8078C287.43 28.0154 288.221 27.5701 288.447 26.8105L288.456 26.7752L289.2 24.0193C288.325 23.7773 287.438 23.58 286.543 23.4281L286.334 23.3935Z"
-                                            fill="white" />
-                                        <path
-                                            d="M271.382 69.2504C271.607 68.4908 272.398 68.0456 273.168 68.253C273.937 68.4604 274.397 69.2436 274.209 70.0134L274.2 70.049L272.774 75.3326L272.575 75.2592C271.717 74.9386 270.875 74.5744 270.054 74.1676L271.372 69.2856L271.382 69.2504Z"
-                                            fill="white" />
-                                        <path
-                                            d="M280.828 36.9814C272.104 36.9814 265.318 42.4734 265.318 49.3032C265.318 55.7536 271.562 59.8722 281.242 59.666C282.065 59.6484 282.303 60.2014 282.571 60.9466C282.839 61.6918 283.559 65.6192 284.133 68.6232C284.647 71.3118 285.168 74.0102 285.567 76.719C291.888 75.8834 297.733 72.7612 302.015 68.052L297.447 51.0174C296.309 46.9034 294.978 43.1126 291.457 40.3586C288.624 38.1431 285.024 36.9814 280.828 36.9814Z"
-                                            fill="white" />
-                                        <path
-                                            d="M282.703 41.9141C283.739 41.9141 284.578 42.7535 284.578 43.7891C284.578 44.8247 283.739 45.6641 282.703 45.6641C281.668 45.6641 280.828 44.8247 280.828 43.7891C280.828 42.7535 281.668 41.9141 282.703 41.9141Z"
-                                            fill="black" />
-                                        <mask id="path-28-inside-6_473_1361" fill="white">
-                                            <path
-                                                d="M580 12C580 5.37258 585.373 0 592 0H668C674.627 0 680 5.37258 680 12V88C680 94.6274 674.627 100 668 100H592C585.373 100 580 94.6274 580 88V12Z" />
-                                        </mask>
-                                        <path
-                                            d="M580 12C580 5.37258 585.373 0 592 0H668C674.627 0 680 5.37258 680 12V88C680 94.6274 674.627 100 668 100H592C585.373 100 580 94.6274 580 88V12Z"
-                                            fill="#0A0A0A" />
-                                        <path
-                                            d="M580 12C580 4.8203 585.82 -1 593 -1H667C674.18 -1 680 4.8203 680 12C680 5.92487 674.627 1 668 1H592C585.373 1 580 5.92487 580 12ZM680 100H580H680ZM580 100V0V100ZM680 0V100V0Z"
-                                            fill="#303246" mask="url(#path-28-inside-6_473_1361)" />
-                                        <path d="M655 25H605V75H655V25Z" fill="#F7DF1E" />
-                                        <path
-                                            d="M638.587 64.0625C639.594 65.7069 640.905 66.9156 643.222 66.9156C645.169 66.9156 646.413 65.9426 646.413 64.5982C646.413 62.9871 645.135 62.4164 642.992 61.4791L641.817 60.9752C638.427 59.5307 636.175 57.7212 636.175 53.8958C636.175 50.372 638.859 47.6895 643.056 47.6895C646.043 47.6895 648.19 48.7291 649.738 51.4514L646.079 53.8006C645.274 52.3561 644.405 51.7871 643.056 51.7871C641.679 51.7871 640.807 52.6601 640.807 53.8006C640.807 55.2101 641.68 55.7807 643.696 56.6537L644.871 57.1569C648.863 58.8688 651.117 60.6141 651.117 64.5379C651.117 68.768 647.794 71.0855 643.331 71.0855C638.967 71.0855 636.148 69.0061 634.769 66.2807L638.587 64.0625ZM621.99 64.4696C622.728 65.7791 623.399 66.8863 625.013 66.8863C626.557 66.8863 627.531 66.2823 627.531 63.9339V47.9577H632.229V63.9974C632.229 68.8625 629.377 71.0768 625.213 71.0768C621.452 71.0768 619.273 69.1299 618.165 66.7851L621.99 64.4696Z"
-                                            fill="black" />
-                                        <defs>
-                                            <linearGradient id="paint0_linear_473_1361" x1="404.333" y1="58.8334"
-                                                x2="416.167" y2="73.5" gradientUnits="userSpaceOnUse">
-                                                <stop />
-                                                <stop offset="1" stop-color="white" stop-opacity="0" />
-                                            </linearGradient>
-                                            <linearGradient id="paint1_linear_473_1361" x1="408.334" y1="38"
-                                                x2="408.267" y2="55.6251" gradientUnits="userSpaceOnUse">
-                                                <stop />
-                                                <stop offset="1" stop-color="white" stop-opacity="0" />
-                                            </linearGradient>
-                                        </defs>
-                                    </svg>
-                                </div>
-                                <LyxUiButton type="secondary" to="https://docs.litlyx.com"> Visit documentation
+                        <CardTitled class="w-full h-full" title="Modules"
+                            sub="Get started with your favorite framework.">
+                            <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="https://docs.litlyx.com/techs/js" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/js.png'" alt="Litlyx-Javascript-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/nuxt" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/nuxt.png'" alt="Litlyx-Nuxt-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/next" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/next.png'" alt="Litlyx-Next-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/react" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/react.png'" alt="Litlyx-React-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/vue" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/vue.png'" alt="Litlyx-Vue-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/angular" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/angular.png'" alt="Litlyx-Angular-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/python" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/py.png'" alt="Litlyx-Python-Analytics">
+                                    </a>
+                                    <a href="https://docs.litlyx.com/techs/serverless" target="_blank">
+                                    <img class="cursor-pointer" :src="'tech-icons/serverless.png'" alt="Litlyx-Serverless-Analytics">
+                                    </a>
+                                </div>
+
                             </div>
                         </CardTitled>
                     </div>

dashboard/components/LyxUi/Button.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+
+export type ButtonType = 'primary' | 'secondary' | 'outline' | 'outlined' | 'danger';
+
+const props = defineProps<{ type: ButtonType, link?: string, target?: string, disabled?: boolean }>();
+
+</script>
+
+<template>
+    <NuxtLink tag="div" :to="disabled ? '' : link" :target="target"
+        class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-lyx-lightmode-text dark:text-lyx-text"
+        :class="{
+
+            'bg-[#85a3ff] hover:bg-[#9db5fc] outline-lyx-lightmode-widget-light dark:bg-lyx-primary-dark dark:outline-lyx-primary dark:hover:bg-lyx-primary-hover': type === 'primary',
+
+            'bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget dark:bg-lyx-widget-lighter hover:bg-lyx-lightmode-widget dark:outline-lyx-widget-lighter dark:hover:bg-lyx-widget-light': type === 'secondary',
+
+            'bg-lyx-transparent outline-lyx-lightmode-widget hover:bg-lyx-lightmode-widget-light dark:outline-lyx-widget-lighter dark:hover:bg-lyx-widget-light': (type === 'outline' || type === 'outlined'),
+
+            'bg-[#fcd1cb] hover:bg-[#f8c5be] dark:bg-lyx-danger-dark outline-lyx-danger dark:hover:bg-lyx-danger': type === 'danger',
+
+            'text-lyx-text !bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true,
+        }">
+        <slot></slot>
+    </NuxtLink>
+</template>

dashboard/components/LyxUi/Card.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+
+</script>
+
+<template>
+    <div class="w-fit h-fit rounded-md bg-lyx-lightmode-background outline-lyx-lightmode-widget dark:bg-lyx-widget dark:outline-lyx-background-lighter p-4 outline outline-[1px] ">
+        <slot></slot>
+    </div>
+</template>

dashboard/components/LyxUi/Input.vue

@@ -19,6 +19,6 @@ const handleChange = (event: Event) => {
 
 <template>
     <input
-        class="bg-lyx-widget-light text-lyx-text-dark poppins rounded-md outline outline-[1px] outline-lyx-widget-lighter"
+        class="bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget text-lyx-lightmode-text dark:bg-lyx-widget-light dark:text-lyx-text-dark poppins rounded-md outline outline-[1px] dark:outline-lyx-widget-lighter"
         :type="props.type ?? 'text'" :placeholder="props.placeholder" :value="props.modelValue" @input="handleChange">
 </template>

dashboard/components/Onboarding.vue

@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+
+const { data: needsOnboarding } = useFetch("/api/onboarding/exist", {
+    headers: useComputedHeaders({ useSnapshotDates: false, useTimeOffset: false })
+});
+
+const route = useRoute();
+
+const analyticsList = [
+    "I have no prior analytics tool",
+    "Google Analytics 4",
+    "Plausible",
+    "Umami",
+    "MixPanel",
+    "Simple Analytics",
+    "Matomo",
+    "Fathom",
+    "Adobe Analytics",
+    "Other"
+]
+
+const jobsList = [
+    "Developer",
+    "Marketing",
+    "Product",
+    "Startup founder",
+    "Indie hacker",
+    "Other",
+]
+
+const selectedIndex = ref<number>(-1);
+const otherFieldVisisble = ref<boolean>(false);
+const otherText = ref<string>('');
+function selectIndex(index: number) {
+    selectedIndex.value = index;
+    otherFieldVisisble.value = index == analyticsList.length - 1;
+}
+
+const selectedIndex2 = ref<number>(-1);
+const otherFieldVisisble2 = ref<boolean>(false);
+const otherText2 = ref<string>('');
+function selectIndex2(index: number) {
+    selectedIndex2.value = index;
+    otherFieldVisisble2.value = index == jobsList.length - 1;
+}
+
+const page = ref<number>(0);
+
+function onNextPage() {
+    if (selectedIndex.value == -1) return;
+    saveAnalyticsType();
+    page.value = 1;
+}
+
+function onFinish(skipped?: boolean) {
+    if (skipped) return location.reload();
+    if (selectedIndex2.value == -1) return;
+    saveJobTitle();
+    page.value = 2;
+    location.reload();
+}
+
+async function saveAnalyticsType() {
+    await $fetch('/api/onboarding/add', {
+        headers: useComputedHeaders({
+            useSnapshotDates: false, useTimeOffset: false,
+            custom: { 'Content-Type': 'application/json' }
+        }).value,
+        method: 'POST',
+        body: JSON.stringify({
+            analytics:
+                selectedIndex.value == analyticsList.length - 1 ?
+                    otherText.value :
+                    analyticsList[selectedIndex.value]
+        })
+    })
+}
+
+async function saveJobTitle() {
+
+    await $fetch('/api/onboarding/add', {
+        headers: useComputedHeaders({
+            useSnapshotDates: false, useTimeOffset: false,
+            custom: { 'Content-Type': 'application/json' }
+        }).value,
+        method: 'POST',
+        body: JSON.stringify({
+            job:
+                selectedIndex2.value == jobsList.length - 1 ?
+                    otherText2.value :
+                    jobsList[selectedIndex2.value]
+        })
+    })
+}
+
+
+
+const showOnboarding = computed(() => {
+    if (route.path === '/login') return false;
+    if (route.path === '/register') return false;
+    if (needsOnboarding.value?.exist === false) return true;
+})
+
+</script>
+
+
+<template>
+    <div v-if="showOnboarding" class="absolute top-0 left-0 w-full h-full z-[30] bg-black/80 flex justify-center">
+
+
+
+        <div v-if="page == 0" class="bg-lyx-lightmode-background-light dark:bg-lyx-background-light mt-[10vh] w-[50vw] min-w-[400px] h-fit p-8 rounded-md">
+
+            <div class="text-lyx-lightmode-text dark:text-lyx-text text-[1.4rem] text-center font-medium"> Getting Started </div>
+
+            <div class="text-lyx-lightmode-text dark:text-lyx-text mt-4">
+                For the current project do you already have other Analytics tools implemented (e.g. GA4) or Litlyx is
+                going to be your first/main analytics?
+            </div>
+
+            <div class="grid grid-cols-2 gap-3 mt-8">
+                <div v-for="(e, i) of analyticsList">
+                    <div @click="selectIndex(i)"
+                        :class="{ 'outline outline-[1px] outline-[#5680f8]': selectedIndex == i }"
+                        class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light text-center p-2 rounded-md cursor-pointer">
+                        {{ e }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-8">
+                <LyxUiInput v-if="otherFieldVisisble" class="w-full !rounded-md py-2 px-2" placeholder="Please specify"
+                    v-model="otherText"></LyxUiInput>
+            </div>
+
+            <div class="mt-6 flex justify-center flex-col items-center">
+                <LyxUiButton @click="onNextPage()" class="px-[8rem] py-2" :disabled="selectedIndex == -1"
+                    type="primary"> Next </LyxUiButton>
+                <!-- <div class="mt-2 text-lyx-text-darker cursor-pointer"> Skip </div> -->
+            </div>
+
+        </div>
+        <div v-if="page == 1" class="bg-lyx-lightmode-background-light dark:bg-lyx-background-light mt-[10vh] w-[50vw] min-w-[400px] h-fit p-8 rounded-md">
+
+            <div class="text-lyx-lightmode-text dark:text-lyx-text text-[1.4rem] text-center font-medium"> Getting Started </div>
+
+            <div class="text-lyx-lightmode-text dark:text-lyx-text mt-4">
+                What is your job title ?
+            </div>
+
+            <div class="grid grid-cols-2 gap-3 mt-8">
+                <div v-for="(e, i) of jobsList">
+                    <div @click="selectIndex2(i)"
+                        :class="{ 'outline outline-[1px] outline-[#5680f8]': selectedIndex2 == i }"
+                        class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light text-center p-2 rounded-md cursor-pointer">
+                        {{ e }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-8">
+                <LyxUiInput v-if="otherFieldVisisble2" class="w-full !rounded-md py-2 px-2" placeholder="Please specify"
+                    v-model="otherText2"></LyxUiInput>
+            </div>
+
+            <div class="mt-6 flex justify-center flex-col items-center">
+                <LyxUiButton @click="onFinish()" class="px-[8rem] py-2" :disabled="selectedIndex2 == -1" type="primary">
+                    Finish </LyxUiButton>
+                <div @click="onFinish(true)" class="mt-2 text-lyx-text-darker cursor-pointer"> Skip </div>
+            </div>
+
+        </div>
+
+    </div>
+</template>

dashboard/components/SelectButton.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 
 type Props = {
-    options: { label: string }[],
+    options: { label: string, disabled?: boolean }[],
     currentIndex: number
 }
 
@@ -16,10 +16,13 @@ const emits = defineEmits<{
 
 <template>
 
-    <div class="flex gap-2 border-[1px] border-lyx-widget-lighter p-1 md:p-2 rounded-xl bg-lyx-widget">
-        <div @click="$emit('changeIndex', index)" v-for="(opt, index) of options"
-            class="hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
-            :class="{ 'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index }">
+    <div class="flex gap-2 border-[1px] p-1 md:p-2 rounded-xl bg-lyx-lightmode-widget-light border-lyx-lightmode-widget dark:bg-lyx-widget dark:border-lyx-widget-lighter">
+        <div @click="opt.disabled ? ()=>{}: $emit('changeIndex', index)" v-for="(opt, index) of options"
+            class="hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
+            :class="{
+                'bg-lyx-lightmode-widget hover:!bg-lyx-lightmode-widget dark:bg-lyx-widget-lighter dark:hover:!bg-lyx-widget-lighter': currentIndex == index && !opt.disabled,
+                'hover:!bg-lyx-lightmode-widget-light text-lyx-lightmode-widget dark:hover:!bg-lyx-widget !cursor-not-allowed dark:!text-lyx-widget-lighter': opt.disabled
+            }">
             {{ opt.label }}
         </div>
     </div>

dashboard/components/banner/LimitsInfo.vue

@@ -5,10 +5,10 @@ const limitsInfo = await useFetch("/api/project/limits_info", {
     lazy: true, headers: useComputedHeaders({ useSnapshotDates: false })
 });
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 
 </script>

dashboard/components/banner/Offer.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 
 const { project } = useProject()
@@ -20,7 +20,8 @@ const isPremium = computed(() => {
     <div v-if="!isPremium" class="w-full bg-[#5680f822] p-4 rounded-lg text-[.9rem] flex items-center">
         <div class="flex flex-col grow">
             <div class="poppins font-semibold text-lyx-primary">
-                Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout
+                Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at
+                checkout
                 from Acceleration Plan and beyond.
             </div>
             <!-- <div class="poppins text-lyx-primary">

dashboard/components/dashboard/ActionableChart.vue

@@ -1,11 +1,27 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue';
 import DateService, { type Slice } from '@services/DateService';
 import type { ChartData, ChartOptions, TooltipModel } from 'chart.js';
 import { useLineChart, LineChart } from 'vue-chart-3';
 
 const errorData = ref<{ errored: boolean, text: string }>({ errored: false, text: '' })
 
+
+function createGradient(startColor: string) {
+    const c = document.createElement('canvas');
+    const ctx = c.getContext("2d");
+    let gradient: any = `${startColor}22`;
+    if (ctx) {
+        gradient = ctx.createLinearGradient(0, 25, 0, 300);
+        gradient.addColorStop(0, `${startColor}99`);
+        gradient.addColorStop(0.35, `${startColor}66`);
+        gradient.addColorStop(1, `${startColor}22`);
+    } else {
+        console.warn('Cannot get context for gradient');
+    }
+
+    return gradient;
+}
+
 const chartOptions = ref<ChartOptions<'line'>>({
     responsive: true,
     maintainAspectRatio: false,
@@ -24,9 +40,12 @@ const chartOptions = ref<ChartOptions<'line'>>({
                 color: '#CCCCCC22',
                 // borderDash: [5, 10]
             },
+            beginAtZero: true,
         },
         x: {
             ticks: { display: true },
+            stacked: false,
+            offset: false,
             grid: {
                 display: true,
                 drawBorder: false,
@@ -65,15 +84,35 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
             borderColor: '#5655d7',
             borderWidth: 4,
             fill: true,
-            tension: 0.45,
+            tension: 0.35,
             pointRadius: 0,
             pointHoverRadius: 10,
             hoverBackgroundColor: '#5655d7',
             hoverBorderColor: 'white',
             hoverBorderWidth: 2,
+            segment: {
+                borderColor(ctx, options) {
+                    const todayIndex = visitsData.data.value?.todayIndex;
+                    if (!todayIndex || todayIndex == -1) return '#5655d7';
+                    if (ctx.p1DataIndex >= todayIndex) return '#5655d700';
+                    return '#5655d7'
+                },
+                borderDash(ctx, options) {
+                    const todayIndex = visitsData.data.value?.todayIndex;
+                    if (!todayIndex || todayIndex == -1) return undefined;
+                    if (ctx.p1DataIndex == todayIndex - 1) return [3, 5];
+                    return undefined;
+                },
+                backgroundColor(ctx, options) {
+                    const todayIndex = visitsData.data.value?.todayIndex;
+                    if (!todayIndex || todayIndex == -1) return createGradient('#5655d7');
+                    if (ctx.p1DataIndex >= todayIndex) return '#5655d700';
+                    return createGradient('#5655d7');
+                },
+            },
         },
         {
-            label: 'Unique sessions',
+            label: 'Unique visitors',
             data: [],
             backgroundColor: ['#4abde8'],
             borderColor: '#4abde8',
@@ -81,19 +120,21 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
             hoverBackgroundColor: '#4abde8',
             hoverBorderColor: '#4abde8',
             hoverBorderWidth: 2,
-            type: 'bar'
+            type: 'bar',
+            // barThickness: 20,
+            borderSkipped: ['bottom']
         },
         {
             label: 'Events',
             data: [],
             backgroundColor: ['#fbbf24'],
-            borderColor: '#fbbf24',
             borderWidth: 2,
             hoverBackgroundColor: '#fbbf24',
             hoverBorderColor: '#fbbf24',
             hoverBorderWidth: 2,
             type: 'bubble',
-            stack: 'combined'
+            stack: 'combined',
+            borderColor: ["#fbbf24"]
         },
     ],
 });
@@ -106,6 +147,17 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
     const { chart, tooltip } = context;
     const tooltipEl = externalTooltipElement.value;
 
+    const currentIndex = tooltip.dataPoints[0].parsed.x;
+
+    const todayIndex = visitsData.data.value?.todayIndex;
+    if (todayIndex && todayIndex >= 0) {
+        if (currentIndex > todayIndex - 1) {
+            if (!tooltipEl) return;
+            return tooltipEl.style.opacity = '0';
+        }
+    }
+
+
     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;
@@ -130,13 +182,29 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
     tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
 
 }
+
+const { snapshotDuration } = useSnapshot();
+
 const selectLabels: { label: string, value: Slice }[] = [
     { label: 'Hour', value: 'hour' },
     { label: 'Day', value: 'day' },
     { label: 'Month', value: 'month' },
 ];
 
-const selectedSlice = computed(() => selectLabels[selectedLabelIndex.value].value);
+const selectLabelsAvailable = computed<{ label: string, value: Slice, disabled: boolean }[]>(() => {
+    return selectLabels.map(e => {
+        return { ...e, disabled: !DateService.canUseSliceFromDays(snapshotDuration.value, e.value)[0] }
+    });
+})
+
+const selectedSlice = computed<Slice>(() => {
+    const targetValue = selectLabelsAvailable.value[selectedLabelIndex.value];
+    if (!targetValue) return 'day';
+    if (targetValue.disabled) {
+        selectedLabelIndex.value = selectLabelsAvailable.value.findIndex(e => !e.disabled);
+    }
+    return selectLabelsAvailable.value[selectedLabelIndex.value].value
+});
 
 const selectedLabelIndex = ref<number>(1);
 const allDatesFull = ref<string[]>([]);
@@ -144,13 +212,18 @@ const allDatesFull = ref<string[]>([]);
 
 function transformResponse(input: { _id: string, count: number }[]) {
     const data = input.map(e => e.count);
-    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, selectLabels[selectedLabelIndex.value].value));
-    allDatesFull.value = input.map(e => e._id.toString());
-    return { data, labels }
+    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));
+
+    return { data, labels, todayIndex }
 }
 
 function onResponseError(e: any) {
-    errorData.value = { errored: true, text: e.response._data.message ?? 'Generic error' }
+    let message = e.response._data.message ?? 'Generic error';
+    if (message == 'internal server error') message = 'Please change slice';
+    errorData.value = { errored: true, text: message }
 }
 
 function onResponse(e: any) {
@@ -180,22 +253,6 @@ watch(readyToDisplay, () => {
 })
 
 
-function createGradient(startColor: string) {
-    const c = document.createElement('canvas');
-    const ctx = c.getContext("2d");
-    let gradient: any = `${startColor}22`;
-    if (ctx) {
-        gradient = ctx.createLinearGradient(0, 25, 0, 300);
-        gradient.addColorStop(0, `${startColor}99`);
-        gradient.addColorStop(0.35, `${startColor}66`);
-        gradient.addColorStop(1, `${startColor}22`);
-    } else {
-        console.warn('Cannot get context for gradient');
-    }
-
-    return gradient;
-}
-
 function onDataReady() {
     if (!visitsData.data.value) return;
     if (!eventsData.data.value) return;
@@ -208,15 +265,33 @@ function onDataReady() {
 
     chartData.value.datasets[0].data = visitsData.data.value.data;
     chartData.value.datasets[1].data = sessionsData.data.value.data;
+
     chartData.value.datasets[2].data = eventsData.data.value.data.map(e => {
-        const rValue = 25 / maxEventSize * e;
-        return { x: 0, y: maxChartY + 70, r: isNaN(rValue) ? 0 : rValue, r2: e }
+        const rValue = 20 / maxEventSize * e;
+        return { x: 0, y: maxChartY + 20, r: isNaN(rValue) ? 0 : rValue, r2: e }
     });
 
+
     chartData.value.datasets[0].backgroundColor = [createGradient('#5655d7')];
     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;
+        return 'bottom';
+    });
+
+    chartData.value.datasets[2].borderColor = eventsData.data.value.data.map((e, i) => {
+        const todayIndex = eventsData.data.value?.todayIndex || 0;
+        if (i == todayIndex - 1) return '#fbbf2400';
+        return '#fbbf24';
+    });
+
+
+
+
     updateChart();
 }
 
@@ -230,7 +305,8 @@ const currentTooltipData = ref<{ visits: number, events: number, sessions: numbe
 const tooltipNameIndex = ['visits', 'sessions', 'events'];
 
 function onLegendChange(dataset: any, index: number, checked: any) {
-    dataset.hidden = !checked;
+    const newValue = !checked;
+    dataset.hidden = newValue;
 }
 
 const legendColors = ref<string[]>(['#5655d7', '#4abde8', '#fbbf24'])
@@ -247,15 +323,15 @@ const legendClasses = ref<string[]>([
     <CardTitled title="Trend chart" sub="Easily match Visits, Unique sessions and Events trends." class="w-full">
         <template #header>
             <SelectButton class="w-fit" @changeIndex="selectedLabelIndex = $event" :currentIndex="selectedLabelIndex"
-                :options="selectLabels">
+                :options="selectLabelsAvailable">
             </SelectButton>
         </template>
 
         <div class="flex gap-6 w-full justify-between lg:flex-row flex-col">
             <LyxUiButton type="secondary" :to="isLiveDemo ? '#' : '/analyst'" :disabled="isLiveDemo">
                 <div class="flex items-center gap-2 px-10">
-                    <i class="far fa-sparkles text-yellow-400"></i>
-                    <div class="poppins text-lyx-text"> Ask AI </div>
+                    <i class="far fa-sparkles text-yellow-600 dark:text-yellow-400"></i>
+                    <div class="poppins text-lyx-lightmode-text dark:text-lyx-text"> Ask AI </div>
                 </div>
             </LyxUiButton>
             <div class="flex gap-6">
@@ -273,7 +349,7 @@ const legendClasses = ref<string[]>([
 
 
         <div id='external-tooltip' ref="externalTooltipElement" class="z-[400]">
-            <LyxUiCard>
+            <LyxUiCard class="text-lyx-lightmode-text dark:text-lyx-text">
                 <div class="flex gap-2 items-center">
                     <div> Date: </div>
                     <div v-if="currentTooltipData"> {{ currentTooltipData.date }}</div>

dashboard/components/dashboard/CountCard.vue

@@ -5,23 +5,18 @@ const props = defineProps<{
     value: string,
     text: string,
     avg?: string,
-    trend?: number,
     color: string,
     data?: number[],
     labels?: string[],
     ready?: boolean,
-    slow?: boolean
+    slow?: boolean,
+    todayIndex: number,
+    tooltipText: string
 }>();
 
 const { snapshotDuration } = useSnapshot()
 
-const uTooltipText = computed(() => {
-    const duration = snapshotDuration.value;
-    if (!duration) return '';
-    if (duration > 25) return 'Monthly trend';
-    if (duration > 7) return 'Weekly trend';
-    return 'Daily trend';
-})
+const { showDrawer } = useDrawer();
 
 </script>
 
@@ -34,37 +29,30 @@ const uTooltipText = computed(() => {
             </div>
             <div class="flex flex-col grow">
                 <div class="flex items-center gap-2">
-                    <div class="brockmann text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]"> 
+                    <div class="brockmann text-lyx-lightmode-text-dark dark:text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]">
                         {{ value }}
-                     </div>
-                    <div class="poppins text-text-sub text-[.65rem] 2xl:text-[.8rem]"> {{ avg }} </div>
-                </div>
-                <div class="poppins text-text-sub text-[.9rem] 2xl:text-[1rem]"> {{ text }} </div>
-            </div>
-            <div v-if="trend" class="flex flex-col items-center gap-1">
-                <UTooltip :text="uTooltipText">
-                    <div class="flex items-center gap-3 rounded-md px-2 py-1"
-                        :style="`background-color: ${props.color}33`">
-                        <i :class="trend > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'"
-                            class="far text-[.9rem] 2xl:text-[1rem]" :style="`color: ${props.color}`"></i>
-                        <div :style="`color: ${props.color}`" class="font-semibold text-[.75rem] 2xl:text-[.875rem]">
-                            {{ trend.toFixed(0) }} %
-                        </div>
                     </div>
+                    <div class="poppins text-lyx-lightmode-darker dark:text-text-sub text-[.65rem] 2xl:text-[.8rem]"> {{ avg }} </div>
+                </div>
+                <div class="poppins text-lyx-lightmode-darker dark:text-text-sub text-[.9rem] 2xl:text-[1rem]"> {{ text }} </div>
+            </div>
+
+            <div class="flex flex-col items-center gap-1">
+                <UTooltip :text="props.tooltipText">
+                    <i class="far fa-info-circle text-lyx-text-darker text-[1rem]"></i>
                 </UTooltip>
-                <!-- <div class="poppins text-text-sub text-[.7rem]"> Trend </div> -->
             </div>
 
         </div>
         <div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end"
             v-if="((props.data?.length || 0) > 0) && ready">
-            <DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []"
-                :color="props.color">
+            <DashboardEmbedChartCard v-if="ready" :todayIndex="todayIndex" :data="props.data || []"
+                :labels="props.labels || []" :color="props.color">
             </DashboardEmbedChartCard>
         </div>
         <div v-if="!ready" class="flex justify-center items-center w-full h-full flex-col gap-2">
             <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
-            <div v-if="props.slow"> Can be very slow on large snapshots </div>
+            <div v-if="props.slow"> Can be very slow on large timeframes </div>
         </div>
     </LyxUiCard>
 

dashboard/components/dashboard/CountCardOld.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-
-const props = defineProps<{
-    icon: string,
-    title: string,
-    text: string,
-    sub: string,
-    color: string
-}>();
-
-</script>
-
-<template>
-
-    <div class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full lg:w-[20rem] relative pb-2 lg:pb-4">
-
-        <!-- <div class="absolute flex items-center justify-center right-4 top-4 cursor-pointer hover:text-blue-400">
-            <i class="fal fa-info-circle text-[.9rem] lg:text-[1.4rem]"></i>
-        </div> -->
-
-        <div class="gap-4 flex flex-row items-center lg:items-start lg:gap-2 lg:flex-col">
-            <div class="w-[2.5rem] h-[2.5rem] lg:w-[3.5rem] lg:h-[3.5rem] flex items-center justify-center rounded-lg"
-                :style="`background: ${props.color}`">
-                <i :class="icon" class="text-[1rem] lg:text-[1.5rem]"></i>
-            </div>
-            <div class="text-[1rem] lg:text-[1.3rem] text-text-sub/90 poppins">
-                {{ title }}
-            </div>
-        </div>
-        <div class="flex gap-2 items-center lg:items-end">
-            <div class="brockmann text-text text-[2rem] lg:text-[2.8rem] grow">
-                {{ text }}
-            </div>
-            <div class="poppins text-text-sub/90 text-[.9rem] lg:text-[1rem]"> {{ sub }} </div>
-        </div>
-
-
-    </div>
-
-</template>

dashboard/components/dashboard/DialogBarCard.vue

@@ -13,8 +13,8 @@ const columns = [
 
 <template>
 
-    <div class="w-full h-full bg-bg rounded-xl p-8">
-        <div class="full h-full overflow-y-auto">
+    <div class="w-full h-full bg-lyx-lightmode-background dark:bg-lyx-background-light rounded-xl p-8">
+        <div class="full h-full overflow-y-auto text-lyx-lightmode-text dark:text-lyx-text">
             <UTable :columns="columns" :rows="dialogBarData" :loading="isDataLoading" v-if="dialogBarData">
                 <template #count-data="{ row }">
                     <div class="font-bold"> {{ formatNumberK(row.count) }} </div>

dashboard/components/dashboard/EmbedChartCard.vue

@@ -7,8 +7,10 @@ const props = defineProps<{
     data: any[],
     labels: string[]
     color: string,
+    todayIndex: number
 }>();
 
+
 const chartOptions = ref<ChartOptions<'line'>>({
     responsive: true,
     maintainAspectRatio: false,
@@ -48,10 +50,22 @@ const chartData = ref<ChartData<'line'>>({
             data: props.data,
             backgroundColor: [props.color + '77'],
             borderColor: props.color,
-            borderWidth: 4,
-            fill: true,
-            tension: 0.45,
-            pointRadius: 0
+            borderWidth: 2,
+            fill: false,
+            tension: 0.35,
+            pointRadius: 0,
+            segment: {
+                borderColor(ctx, options) {
+                    if (!props.todayIndex || props.todayIndex == -1) return props.color;
+                    if (ctx.p1DataIndex >= props.todayIndex) return props.color + '00';
+                    return props.color;
+                },
+                borderDash(ctx, options) {
+                    if (!props.todayIndex || props.todayIndex == -1) return undefined;
+                    if (ctx.p1DataIndex == props.todayIndex -1) return [2, 4];
+                    return undefined;
+                },
+            },
         },
     ],
 });

dashboard/components/dashboard/EventsChart.vue

@@ -27,7 +27,6 @@ const chartOptions = ref<ChartOptions<'doughnut'>>({
             position: 'top',
             align: 'center',
             labels: {
-                color: 'white',
                 font: {
                     family: 'Poppins',
                     size: 16

dashboard/components/dashboard/SessionsLineChart.vue

@@ -10,7 +10,7 @@ const { safeSnapshotDates } = useSnapshot()
 
 function transformResponse(input: { _id: string, count: number }[]) {
     const data = input.map(e => e.count);
-    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+    const labels = input.map(e => DateService.getChartLabelFromISO(e._id,  new Date().getTimezoneOffset(), props.slice));
     return { data, labels }
 }
 

dashboard/components/dashboard/TopCards.vue

@@ -1,70 +1,59 @@
 <script lang="ts" setup>
 
-import DateService from '@services/DateService';
-import type { Slice } from '@services/DateService';
+import DateService, { type Slice } from '../../shared/services/DateService';
 
-const { snapshot, safeSnapshotDates } = useSnapshot()
 
-const snapshotDays = computed(() => {
-    const to = new Date(safeSnapshotDates.value.to).getTime();
-    const from = new Date(safeSnapshotDates.value.from).getTime();
-    return (to - from) / 1000 / 60 / 60 / 24;
-});
+const { snapshot, safeSnapshotDates, snapshotDuration } = useSnapshot()
+
 
 const chartSlice = computed(() => {
-    const snapshotSizeMs = new Date(snapshot.value.to).getTime() - new Date(snapshot.value.from).getTime();
-    if (snapshotSizeMs < 1000 * 60 * 60 * 24 * 6) return 'hour' as Slice;
-    if (snapshotSizeMs < 1000 * 60 * 60 * 24 * 30) return 'day' as Slice;
-    if (snapshotSizeMs < 1000 * 60 * 60 * 24 * 90) return 'day' as Slice;
+    if (snapshotDuration.value <= 3) return 'hour' as Slice;
+    if (snapshotDuration.value <= 32) return 'day' as Slice;
     return 'month' as Slice;
 });
 
 
+function findFirstZeroOrNullIndex(arr: (number | null)[]) {
+    for (let i = 0; i < arr.length; i++) {
+        if (arr.slice(i).every(val => val === 0 || val === null)) return i;
+    }
+    return -1;
+}
+
 function transformResponse(input: { _id: string, count: number }[]) {
 
     const data = input.map(e => e.count || 0);
+    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, new Date().getTimezoneOffset(), chartSlice.value));
 
-    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, chartSlice.value));
-
-    const pool = [...input.map(e => e.count || 0)];
-
-    const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
-
-    const targets = input.slice(Math.floor(input.length / 4 * 3));
-    const targetAvg = targets.reduce((a, e) => a + e.count, 0) / targets.length;
-
-    const diffPercent: number = (100 / avg * (targetAvg)) - 100;
-
-    const trend = Math.max(Math.min(diffPercent, 99), -99);
-
-    return { data, labels, trend }
+    return { data, labels, input }
 
 }
 
 const visitsData = useFetch('/api/timeline/visits', {
-    headers: useComputedHeaders({ slice: chartSlice.value }), lazy: true, transform: transformResponse
+    headers: useComputedHeaders({ slice: chartSlice }), lazy: true, transform: transformResponse
 });
+
 const sessionsData = useFetch('/api/timeline/sessions', {
-    headers: useComputedHeaders({ slice: chartSlice.value }), lazy: true, transform: transformResponse
+    headers: useComputedHeaders({ slice: chartSlice }), lazy: true, transform: transformResponse
 });
 const sessionsDurationData = useFetch('/api/timeline/sessions_duration', {
-    headers: useComputedHeaders({ slice: chartSlice.value }), lazy: true, transform: transformResponse
+    headers: useComputedHeaders({ slice: chartSlice }), lazy: true, transform: transformResponse
 });
 const bouncingRateData = useFetch('/api/timeline/bouncing_rate', {
-    headers: useComputedHeaders({ slice: chartSlice.value }), lazy: true, transform: transformResponse
+    headers: useComputedHeaders({ slice: chartSlice }), lazy: true, transform: transformResponse
 });
 
 const avgVisitDay = computed(() => {
     if (!visitsData.data.value) return '0.00';
     const counts = visitsData.data.value.data.reduce((a, e) => e + a, 0);
-    const avg = counts / Math.max(snapshotDays.value, 1);
+    const avg = counts / Math.max(snapshotDuration.value, 1);
     return avg.toFixed(2);
 });
 
 const avgSessionsDay = computed(() => {
     if (!sessionsData.data.value) return '0.00';
     const counts = sessionsData.data.value.data.reduce((a, e) => e + a, 0);
-    const avg = counts / Math.max(snapshotDays.value, 1);
+    const avg = counts / Math.max(snapshotDuration.value, 1);
     return avg.toFixed(2);
 });
 
@@ -86,7 +75,7 @@ const avgSessionDuration = computed(() => {
         .filter(e => e > 0)
         .reduce((a, e) => e + a, 0);
 
-    const avg = counts / Math.max(sessionsDurationData.data.value.data.filter(e => e > 0).length, 1);
+    const avg = counts / (Math.max(sessionsDurationData.data.value.data.filter(e => e > 0).length, 1)) / 5;
 
     let hours = 0;
     let minutes = 0;
@@ -97,6 +86,11 @@ const avgSessionDuration = computed(() => {
     return `${hours > 0 ? hours + 'h ' : ''}${minutes}m ${seconds.toFixed()}s`
 });
 
+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));
+})
+
 
 </script>
 
@@ -104,28 +98,31 @@ const avgSessionDuration = computed(() => {
 <template>
     <div class="gap-6 px-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 m-cards-wrap:grid-cols-4">
 
-        <DashboardCountCard :ready="!visitsData.pending.value" icon="far fa-earth" text="Total page visits"
-            :value="formatNumberK(visitsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
-            :avg="formatNumberK(avgVisitDay) + '/day'" :trend="visitsData.data.value?.trend"
-            :data="visitsData.data.value?.data" :labels="visitsData.data.value?.labels" color="#5655d7">
+        <DashboardCountCard :todayIndex="todayIndex" :ready="!visitsData.pending.value" icon="far fa-earth"
+            text="Total visits" :value="formatNumberK(visitsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
+            :avg="formatNumberK(avgVisitDay) + '/day'" :data="visitsData.data.value?.data"
+            tooltipText="Sum of all page views on your website." :labels="visitsData.data.value?.labels"
+            color="#5655d7">
         </DashboardCountCard>
 
-        <DashboardCountCard :ready="!bouncingRateData.pending.value" icon="far fa-chart-user" text="Bouncing rate"
-            :value="avgBouncingRate" :trend="bouncingRateData.data.value?.trend" :slow="true"
-            :data="bouncingRateData.data.value?.data" :labels="bouncingRateData.data.value?.labels" color="#1e9b86">
+        <DashboardCountCard :todayIndex="todayIndex" :ready="!bouncingRateData.pending.value" icon="far fa-chart-user"
+            text="Bouncing rate" :value="avgBouncingRate" :slow="true" :data="bouncingRateData.data.value?.data"
+            tooltipText="Percentage of users who leave quickly (lower is better)."
+            :labels="bouncingRateData.data.value?.labels" color="#1e9b86">
         </DashboardCountCard>
 
 
-        <DashboardCountCard :ready="!sessionsData.pending.value" icon="far fa-user" text="Unique visits sessions"
+        <DashboardCountCard :todayIndex="todayIndex" :ready="!sessionsData.pending.value" icon="far fa-user"
+            text="Unique visitors"
             :value="formatNumberK(sessionsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
-            :avg="formatNumberK(avgSessionsDay) + '/day'" :trend="sessionsData.data.value?.trend"
+            tooltipText="Count of distinct users visiting your website." :avg="formatNumberK(avgSessionsDay) + '/day'"
             :data="sessionsData.data.value?.data" :labels="sessionsData.data.value?.labels" color="#4abde8">
         </DashboardCountCard>
 
 
-        <DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer"
-            text="Total avg session time" :value="avgSessionDuration" :trend="sessionsDurationData.data.value?.trend"
-            :data="sessionsDurationData.data.value?.data" :labels="sessionsDurationData.data.value?.labels"
+        <DashboardCountCard :todayIndex="todayIndex" :ready="!sessionsDurationData.pending.value" icon="far fa-timer"
+            text="Visit duration" :value="avgSessionDuration" :data="sessionsDurationData.data.value?.data"
+            tooltipText="Average time users spend on your website." :labels="sessionsDurationData.data.value?.labels"
             color="#f56523">
         </DashboardCountCard>
 

dashboard/components/dashboard/TopSection.vue

@@ -7,6 +7,7 @@ const { onlineUsers, stopWatching, startWatching } = useOnlineUsers();
 onMounted(() => startWatching());
 onUnmounted(() => stopWatching());
 
+const selfhosted = useSelfhosted();
 
 const { createAlert } = useAlert();
 
@@ -17,27 +18,15 @@ function copyProjectId() {
     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-shield',
-        10000
-    )
-
-}
 </script>
 
 
 <template>
-    <div
-        class="w-full px-6 pb-2 lg:pb-6 font-bold text-text-sub/40 flex flex-col xl:flex-row text-lg gap-2 xl:gap-12 lg:text-2xl">
+    <div class="w-full px-6 pb-2 lg:pb-6 font-bold flex flex-col xl:flex-row text-lg gap-2 xl:gap-12 lg:text-2xl">
 
-        <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="flex gap-2 items-center text-lyx-lightmode-text/90 dark:text-lyx-text/90 justify-center md:justify-start">
+            <div class="animate-pulse w-[.8rem] h-[.8rem] bg-green-400 rounded-full"> </div>
             <div class="poppins font-medium text-[.9rem]"> {{ onlineUsers.data }} Online users</div>
         </div>
 
@@ -61,15 +50,16 @@ function showAnomalyInfoAlert() {
                 </div>
             </div>
         </div> -->
-
-        <div class="flex gap-2 items-center text-text/90 justify-center md:justify-start">
+<!-- 
+        <div v-if="!selfhosted"
+            class="flex gap-2 items-center text-lyx-lightmode-text/90 dark:text-lyx-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-[.9rem]"> 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> -->
 
     </div>
 </template>

dashboard/components/dashboard/VisitsLineChart.vue

@@ -10,7 +10,7 @@ const { safeSnapshotDates } = useSnapshot()
 
 function transformResponse(input: { _id: string, count: number }[]) {
     const data = input.map(e => e.count);
-    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+    const labels = input.map(e => DateService.getChartLabelFromISO(e._id,  new Date().getTimezoneOffset(), props.slice));
     return { data, labels }
 }
 

dashboard/components/dialog/CreateSnapshot.vue

@@ -2,7 +2,7 @@
 
 const { closeDialog } = useCustomDialog();
 
-import { sub, format, isSameDay, type Duration } from 'date-fns'
+import { sub, format, isSameDay, type Duration, startOfDay, endOfDay } from 'date-fns'
 
 const ranges = [
     { label: 'Last 7 days', duration: { days: 7 } },
@@ -36,24 +36,27 @@ function onColorChange() {
 
 const snapshotName = ref<string>("");
 
-const { updateSnapshots } = useSnapshot();
+const { updateSnapshots, snapshot, snapshots } = useSnapshot();
 const { createAlert } = useAlert()
 
 async function confirmSnapshot() {
     await $fetch("/api/snapshot/create", {
         method: 'POST',
-        ...signHeaders({ 'Content-Type': 'application/json' }),
+        headers: useComputedHeaders({ useSnapshotDates: false }).value,
         body: JSON.stringify({
             name: snapshotName.value,
             color: currentColor.value,
-            from: selected.value.start.toISOString(),
-            to: selected.value.end.toISOString()
+            from: startOfDay(selected.value.start),
+            to: endOfDay(selected.value.end)
         })
     });
 
     await updateSnapshots();
     closeDialog();
-    createAlert('Snapshot created','Snapshot created successfully', 'far fa-circle-check', 5000);
+    createAlert('Timeframe created', 'Timeframe created successfully', 'far fa-circle-check', 5000);
+    const newSnapshot = snapshots.value.at(-1);
+    if (newSnapshot) snapshot.value = newSnapshot;
+
 }
 
 </script>
@@ -61,8 +64,8 @@ async function confirmSnapshot() {
 <template>
     <div class="w-full h-full flex flex-col">
 
-        <div class="poppins text-center">
-            Create a snapshot
+        <div class="poppins text-center text-lyx-lightmode-text dark:text-lyx-text">
+            Create a timeframe
         </div>
 
         <div class="mt-10 flex items-center gap-2">
@@ -71,7 +74,7 @@ async function confirmSnapshot() {
                 <input @input="onColorChange" ref="colorpicker" class="relative w-0 h-0 z-[-100]" type="color">
             </div>
             <div class="grow">
-                <LyxUiInput placeholder="Snapshot name" v-model="snapshotName" class="px-4 py-1 w-full"></LyxUiInput>
+                <LyxUiInput placeholder="Timeframe name" v-model="snapshotName" class="px-4 py-1 w-full"></LyxUiInput>
             </div>
         </div>
 

dashboard/components/dialog/DeleteDomainData.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { ButtonType } from '../LyxUi/Button.vue';
+
+const emit = defineEmits(['success', 'cancel'])
+
+const props = defineProps<{
+    buttonType: ButtonType,
+    message: string,
+    deleteData: { isAll: boolean, visits: boolean, sessions: boolean, events: boolean, domain: string }
+}>();
+
+const isDone = ref<boolean>(false);
+const canDelete = ref<boolean>(false);
+
+async function deleteData() {
+
+    try {
+        if (props.deleteData.isAll) {
+            await $fetch('/api/settings/delete_all', {
+                method: 'DELETE',
+                headers: useComputedHeaders({ useSnapshotDates: false }).value,
+            })
+        } else {
+            await $fetch('/api/settings/delete_domain', {
+                method: 'DELETE',
+                headers: useComputedHeaders({ useSnapshotDates: false, custom: { 'Content-Type': 'application/json' } }).value,
+                body: JSON.stringify({
+                    domain: props.deleteData.domain,
+                    visits: props.deleteData.visits,
+                    sessions: props.deleteData.sessions,
+                    events: props.deleteData.events,
+                })
+            })
+        }
+    } catch (ex) {
+        alert('Something went wrong');
+        console.error(ex);
+    }
+
+    isDone.value = true;
+}
+
+</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="h-full flex flex-col gap-2 p-4">
+
+            <div class="font-semibold text-[1.2rem]"> {{ isDone ? "Data Deletion Scheduled" : "Are you sure ?" }}</div>
+
+            <div v-if="!isDone">
+                {{ message }}
+            </div>
+
+            <div v-if="isDone">
+                Your data deletion request is being processed and will be reflected in your project dashboard within a
+                few minutes.
+            </div>
+
+            <div class="grow"></div>
+
+            <div v-if="!isDone">
+                <UCheckbox v-model="canDelete" label="Confirm data delete"></UCheckbox>
+            </div>
+
+            <div v-if="!isDone" class="flex justify-end gap-2">
+                <LyxUiButton type="secondary" @click="emit('cancel')"> Cancel </LyxUiButton>
+                <LyxUiButton :disabled="!canDelete" @click="canDelete ? deleteData() : () => { }" :type="buttonType">
+                    Confirm </LyxUiButton>
+            </div>
+
+            <div v-if="isDone" class="flex justify-end w-full">
+                <LyxUiButton type="secondary" @click="emit('success')"> Dismiss </LyxUiButton>
+            </div>
+        </div>
+    </UModal>
+</template>

dashboard/components/dialog/Feedback.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+
+const { createAlert } = useAlert();
+const { close } = useModal()
+
+const text = ref<string>("");
+
+async function sendFeedback() {
+    if (text.value.length < 5) return;
+    try {
+
+        const res = await $fetch('/api/feedback/add', {
+            headers: useComputedHeaders({
+                useSnapshotDates: false,
+                custom: { 'Content-Type': 'application/json' }
+            }).value,
+            method:'POST',
+            body: JSON.stringify({ text: text.value })
+        });
+
+        createAlert('Success', 'Feedback sent successfully.', 'far fa-circle-check', 5000);
+
+        close();
+    } catch (ex) {
+        console.error(ex);
+        createAlert('Error', 'Error sending feedback. Please try again later', 'far fa-triangle-exclamation', 5000);
+    }
+}
+
+</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> Share everything with us. </div>
+                <textarea v-model="text" placeholder="Leave your feedback"
+                    class="p-2 w-full h-[8rem] dark:bg-lyx-widget bg-lyx-lightmode-widget-light resize-none rounded-md outline outline-[2px] outline-[#3a3f47]"></textarea>
+                <div class="flex justify-between items-center">
+                    <div>Need help ? Check the docs <a href="https://docs.litlyx.com" target="_blank"
+                            class="text-blue-500">here</a> </div>
+                    <LyxUiButton :disabled="text.length < 5" @click="sendFeedback()" type="primary"> Send </LyxUiButton>
+                </div>
+            </div>
+        </div>
+    </UModal>
+
+</template>

dashboard/components/dialog/Help.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+
+const { createAlert } = useAlert();
+const { close } = useModal()
+
+function copyEmail() {
+    if (!navigator.clipboard) alert('You can\'t copy in HTTP');
+    navigator.clipboard.writeText('help@litlyx.com');
+    createAlert('Success', 'Email copied successfully.', 'far fa-circle-check', 5000);
+}
+
+</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">
+                    Contact Support
+                </div>
+
+                <div class="dark:text-lyx-text-dark">
+                    Contact Support for any questions or issues you have.
+                </div>
+
+                <div class="dark:bg-lyx-widget-lighter bg-lyx-lightmode-widget h-[1px]"></div>
+
+                <div class="flex items-center justify-between gap-4">
+                    <div class="p-2 bg-lyx-lightmode-widget dark:bg-[#1c1b1b] rounded-md w-full">
+                        <div class="w-full text-[.9rem] dark:text-[#acacac]"> help@litlyx.com </div>
+                    </div>
+                    <LyxUiButton type="secondary" @click="copyEmail()"> Copy </LyxUiButton>
+                    <LyxUiButton type="secondary" to="mailto:help@litlyx.com"> Send </LyxUiButton>
+                </div>
+
+                <div class="dark:text-lyx-text-dark mt-2">
+                    or text us on Discord, we will reply to you personally.
+                </div>
+
+                <LyxUiButton to="https://discord.gg/9cQykjsmWX" target="_blank" type="secondary">
+                    Discord Support
+                </LyxUiButton>
+
+            </div>
+
+        </div>
+    </UModal>
+
+</template>

dashboard/components/drawer/Docs.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+const emits = defineEmits<{
+    (evt: 'onCloseClick'): void
+}>();
+
+</script>
+
+<template>
+    <div class="w-full h-full">
+        <iframe class="w-full h-full" src="https://docs.litlyx.com/introduction" frameborder="0"></iframe>
+    </div>
+</template>

dashboard/components/drawer/Generic.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+
+const emits = defineEmits<{ (evt: 'onCloseClick'): void }>();
+
+const { drawerComponent } = useDrawer();
+
+</script>
+
+<template>
+    <div class="p-8 overflow-y-auto">
+
+        <div @click="$emit('onCloseClick')"
+            class="cursor-pointer fixed top-4 right-4 rounded-full dark:bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
+            <i class="fas fa-close text-[1.6rem]"></i>
+        </div>
+
+        <Component v-if="drawerComponent" :is="drawerComponent"></Component>
+
+    </div>
+</template>

dashboard/components/drawer/Pricing.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { PricingCardProp } from './PricingCardGeneric.vue';
-
+import type { PricingCardProp } from '../pricing/PricingCardGeneric.vue';
 
 
 const { data: planData, refresh: refreshPlanData } = useFetch('/api/project/plan', {
@@ -182,35 +181,11 @@ function getPricingsData() {
     return { freePricing, customPricing, slidePricings }
 }
 
-const { projectId } = useProject();
-
-const emits = defineEmits<{
-    (evt: 'onCloseClick'): void
-}>();
-
-async function onLifetimeUpgradeClick() {
-    const res = await $fetch<string>(`/api/pay/create-onetime`, {
-        ...signHeaders({
-            'content-type': 'application/json',
-            'x-pid': projectId.value ?? ''
-        }),
-        method: 'POST',
-        body: JSON.stringify({ planId: 2001 })
-    })
-    if (!res) alert('Something went wrong');
-    window.open(res);
-}
-
 </script>
 
 <template>
     <div class="p-8 overflow-y-auto">
 
-        <div @click="$emit('onCloseClick')"
-            class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
-            <i class="fas fa-close text-[1.6rem]"></i>
-        </div>
-
         <div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
             <PricingCardGeneric class="flex-1" :datas="getPricingsData().freePricing"></PricingCardGeneric>
             <PricingCardGeneric class="flex-1" :datas="getPricingsData().slidePricings" :default-index="2">
@@ -218,71 +193,31 @@ async function onLifetimeUpgradeClick() {
             <PricingCardGeneric class="flex-1" :datas="getPricingsData().customPricing"></PricingCardGeneric>
         </div>
 
-        <!-- <LyxUiCard class="w-full mt-6">
-            <div class="flex">
-                <div class="flex flex-col gap-3">
-                    <div>
-                        <span class="text-lyx-primary font-semibold text-[1.4rem]">
-                            LIFETIME DEAL
-                        </span>
-                        <span class="text-lyx-text-dark text-[.8rem]"> (Growth plan) </span>
-                    </div>
-                    <div class="text-[2rem]"> € 2.399,00 </div>
-                    <div> Up to 500.000 visits/events per month </div>
-                    <LyxUiButton type="primary" @click="onLifetimeUpgradeClick()"> Purchase </LyxUiButton>
-                </div>
-                <div class="flex justify-evenly grow">
-                    <div class="flex flex-col justify-evenly">
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Slack support </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Unlimited domanis </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Unlimited reports </div>
-                        </div>
-                    </div>
-                    <div class="flex flex-col justify-evenly">
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> AI Tokens: 3.000 / month </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Server type: SHARED </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Data retention: 5 Years </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </LyxUiCard> -->
-
         <div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
             <div class="flex flex-col gap-2">
+                <div class="poppins text-[1.1rem] text-lyx-lightmode-text dark:text-yellow-400 mb-2">
+                    *Plan upgrades are applicable exclusively to this project(workspace).
+                </div>
                 <div class="poppins text-[2rem] font-semibold">
                     Do you need help ?
                 </div>
-                <div class="poppins text-[1.2rem] text-text/90">
+                <div class="poppins text-[1.2rem]">
                     We respond in max. 1-2 days
                 </div>
             </div>
-            <div class="mt-2">
-                <div class="rounded-lg px-10 py-3 bg-[#151515]">
-                    <a href="mailto:help@litlyx.com" class="poppins text-[1.3rem]">
+            <div class="flex flex-col gap-2">
+                <LyxUiButton type="secondary">
+                    <a href="mailto:help@litlyx.com" class="poppins text-[1.1rem]">
                         help@litlyx.com
                     </a>
-                </div>
+                </LyxUiButton>
+                <LyxUiButton type="secondary">
+                    <a href="https://discord.com/invite/9cQykjsmWX" class="poppins text-[1.1rem]">
+                        Discord support
+                    </a>
+                </LyxUiButton>
             </div>
         </div>
 
-
-
     </div>
 </template>

dashboard/components/events/EventsMetadataAnalyzer.vue

@@ -81,11 +81,11 @@ const canSearch = computed(() => {
                 <div class="flex-[2]">
                     <div class="flex flex-col gap-2">
                         <USelectMenu :uiMenu="{
-                            select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                            base: '!bg-lyx-widget',
+                            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',
                             option: {
-                                base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                                active: '!bg-lyx-widget-lighter'
+                                base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                                active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                             }
                         }" searchable searchable-placeholder="Search an event..." class="w-full"
                             placeholder="Select an event" :options="eventNames.data.value || []"
@@ -93,11 +93,11 @@ const canSearch = computed(() => {
                         </USelectMenu>
 
                         <USelectMenu :uiMenu="{
-                            select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                            base: '!bg-lyx-widget',
+                            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',
                             option: {
-                                base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                                active: '!bg-lyx-widget-lighter'
+                                base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                                active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                             }
                         }" searchable searchable-placeholder="Search a field..." class="w-full"
                             placeholder="Select a field" :options="metadataFields" v-model="selectedMetadataField">
@@ -110,7 +110,7 @@ const canSearch = computed(() => {
                         </div>
                         <div v-if="canSearch" class="h-full flex items-center text-[1.2rem]">
 
-                            <div class="bg-lyx-widget-light flex items-center rounded-md pl-4">
+                            <div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light flex items-center rounded-md pl-4">
                                 <div><i class="far fa-search"></i></div>
                                 <input class="bg-transparent px-4 py-2 text-[1rem] outline-none" type="text"
                                     placeholder="Filter by metadata name" v-model="currentSearchText">
@@ -121,7 +121,7 @@ const canSearch = computed(() => {
 
                     <div class="flex flex-wrap gap-2 lg:mt-4 mt-10">
 
-                        <div class="bg-lyx-widget-light text-lyx-text-dark px-3 py-2 rounded-md w-fit"
+                        <div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light text-lyx-lightmode-text dark:text-lyx-text-dark px-3 py-2 rounded-md w-fit"
                             v-for="item of metadataFieldGroupedFiltered">
                             <div class="flex gap-2 items-center">
                                 <div> {{ item._id || 'OLD_EVENTS' }} </div>

dashboard/components/events/EventsStackedBarChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 
-import DateService, { type Slice } from '@services/DateService';
+import { type Slice } from '@services/DateService';
 
 const props = defineProps<{ slice: Slice }>();
 const slice = computed(() => props.slice);
@@ -10,45 +10,23 @@ const { safeSnapshotDates } = useSnapshot()
 
 function transformResponse(input: { _id: string, name: string, count: number }[]) {
 
-    const fixed = fixMetrics({
-        data: input,
-        from: input[0]._id,
-        to: safeSnapshotDates.value.to
-    },
+    const fixed = fixMetrics(
+        { data: input, from: input[0]._id, to: safeSnapshotDates.value.to },
         slice.value,
-        { advanced: true, advancedGroupKey: 'name' });
+        { advanced: true, advancedGroupKey: 'name' }
+    );
 
     const parsedDatasets: any[] = [];
 
     const colors = [
-        "#5655d0",
-        "#6bbbe3",
-        "#a6d5cb",
-        "#fae0b9",
-        "#f28e8e",
-        "#e3a7e4",
-        "#c4a8e1",
-        "#8cc1d8",
-        "#f9c2cd",
-        "#b4e3b2",
-        "#ffdfba",
-        "#e9c3b5",
-        "#d5b8d6",
-        "#add7f6",
-        "#ffd1dc",
-        "#ffe7a1",
-        "#a8e6cf",
-        "#d4a5a5",
-        "#f3d6e4",
-        "#c3aed6"
+        "#5655d0", "#6bbbe3", "#a6d5cb", "#fae0b9", "#f28e8e",
+        "#e3a7e4", "#c4a8e1", "#8cc1d8", "#f9c2cd", "#b4e3b2",
+        "#ffdfba", "#e9c3b5", "#d5b8d6", "#add7f6", "#ffd1dc",
+        "#ffe7a1", "#a8e6cf", "#d4a5a5", "#f3d6e4", "#c3aed6"
     ];
 
     for (let i = 0; i < fixed.allKeys.length; i++) {
-        const line: any = {
-            data: [],
-            color: colors[i] || '#FF0000',
-            label: fixed.allKeys[i]
-        };
+        const line: any = { data: [], color: colors[i] || '#FF0000', label: fixed.allKeys[i] };
         parsedDatasets.push(line)
         fixed.data.forEach((e: { key: string, value: number }[]) => {
             const target = e.find(e => e.key == fixed.allKeys[i]);
@@ -56,12 +34,7 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
             line.data.push(target.value);
         });
     }
-
-    return {
-        datasets: parsedDatasets,
-        labels: fixed.labels
-    }
-
+    return { datasets: parsedDatasets, labels: fixed.labels }
 }
 
 const errorData = ref<{ errored: boolean, text: string }>({
@@ -88,7 +61,6 @@ const eventsStackedData = useFetch(`/api/timeline/events_stacked`, {
     onResponse
 });
 
-
 onMounted(async () => {
     eventsStackedData.execute();
 });

dashboard/components/events/EventsUserFlow.vue

@@ -46,12 +46,12 @@ async function analyzeEvent() {
 
             <div class="py-2 flex items-center gap-3">
                 <USelectMenu :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
-                    option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
-                    }
+                    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',
+                        option: {
+                            base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                            active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
+                        }
                 }" searchable searchable-placeholder="Search an event..." class="w-full" placeholder="Select an event"
                     :options="eventNames.data.value || []" v-model="selectedEventName">
                 </USelectMenu>
@@ -71,7 +71,7 @@ async function analyzeEvent() {
             </div>
 
             <div class="flex flex-col gap-2" v-if="userFlowData">
-                <div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-widget-light rounded-lg"
+                <div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-lightmode-widget dark:bg-lyx-widget-light rounded-lg"
                     v-for="(count, referrer) in userFlowData">
                     <div class="w-5 h-5 flex items-center justify-center">
                         <img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`"

dashboard/components/home/BgGrid.vue

@@ -22,86 +22,27 @@ const widthHeight = computed(() => {
     return 9 + props.size * props.spacing;
 });
 
+
+
+const colorMode = useColorMode();
+
+
 </script>
 
 
 <template>
     <div class="w-fit h-fit">
 
+
         <svg xmlns="http://www.w3.org/2000/svg" :width="widthHeight" :height="widthHeight" :style="`opacity: ${props.opacity};`"
             fill="none">
 
             <template v-for="(p, x) of sizeArr">
                 <template v-for="(p, y) of sizeArr">
-                    <circle :cx="9 + (spacing * x)" :cy="9 + (spacing * y)" r="1" fill="#fff"
+                    <circle :cx="9 + (spacing * x)" :cy="9 + (spacing * y)" r="1" :fill="colorMode.value === 'light' ? '#000' : '#FFF'"
                         :fill-opacity="calculateOpacity(x, y)" />
                 </template>
             </template>
-
-            <!-- <circle cx="27" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            -->
         </svg>
 
     </div>

dashboard/components/integrations/SupabaseChartDialog.vue

@@ -1,157 +0,0 @@
-<script lang="ts" setup>
-
-import { sub, isSameDay, type Duration } from 'date-fns'
-
-type ChartType = 'bar' | 'line';
-const chartTypeOptions: { value: ChartType, label: string }[] = [
-    { value: 'bar', label: 'Bar chart' },
-    { value: 'line', label: 'Line chart' },
-]
-
-type yAxisMode = 'count';
-const yAxisModeOptions: { value: yAxisMode, label: string }[] = [
-    { value: 'count', label: 'Count fields' },
-]
-
-type Slice = 'day' | 'month';
-const sliceOptions: Slice[] = ['day', 'month'];
-
-const chartType = ref<ChartType>('line');
-const tableName = ref<string>('');
-const xAxis = ref<string>('');
-const yAxisMode = ref<yAxisMode>('count');
-const slice = ref<Slice>('day');
-const visualizationName = ref<string>('');
-
-
-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 timeframe = ref<{ start: Date, end: Date }>({ start: sub(new Date(), { days: 14 }), end: new Date() })
-
-function isRangeSelected(duration: Duration) {
-    return isSameDay(timeframe.value.start, sub(new Date(), duration)) && isSameDay(timeframe.value.end, new Date())
-}
-
-function selectRange(duration: Duration) {
-    timeframe.value = { start: sub(new Date(), duration), end: new Date() }
-}
-
-const { createAlert } = useAlert();
-const { closeDialog } = useCustomDialog();
-const activeProjectId = useActiveProjectId();
-
-const { integrationsCredentials,testConnection } = useSupabase();
-
-async function generate() {
-    const credentials = integrationsCredentials.data.value;
-    if (!credentials?.supabase) return createAlert('Credentials not found', 'Please add supabase credentials on the integration page', 'far fa-error', 5000);
-    const connectionStatus = await testConnection();
-    if (!connectionStatus) return createAlert('Invalid supabase credentials', 'Please check your supabase credentials on the integration page', 'far fa-error', 5000);
-
-    try {
-        const creation = await $fetch('/api/integrations/supabase/add', {
-            ...signHeaders({
-                'x-pid': activeProjectId.data.value || '',
-                'Content-Type': 'application/json'
-            }),
-            method: 'POST',
-            body: JSON.stringify({
-                name: visualizationName.value,
-                chart_type: chartType.value,
-                table_name: tableName.value,
-                xField: xAxis.value,
-                yMode: yAxisMode.value,
-                from: timeframe.value.start,
-                to: timeframe.value.end,
-                slice: slice.value
-            })
-        })
-
-        createAlert('Integration generated', 'Integration generated successfully', 'far fa-check-circle', 5000);
-        closeDialog();
-    } catch (ex: any) {
-        createAlert('Error generating integrations', ex.response._data.message.toString(), 'far fa-error', 5000);
-    }
-
-}
-
-</script>
-
-<template>
-    <div class="flex flex-col gap-4">
-        <div>
-            <div> Visualization name </div>
-            <div>
-                <LyxUiInput class="w-full px-2 py-1" v-model="visualizationName"></LyxUiInput>
-            </div>
-        </div>
-        <div>
-            <div> Chart type </div>
-            <USelect v-model="chartType" :options="chartTypeOptions" />
-        </div>
-        <div>
-            <div> Table name </div>
-            <div>
-                <LyxUiInput class="w-full px-2 py-1" v-model="tableName"></LyxUiInput>
-            </div>
-        </div>
-
-        <div>
-            <div> X axis field </div>
-            <div>
-                <LyxUiInput class="w-full px-2 py-1" v-model="xAxis"></LyxUiInput>
-            </div>
-        </div>
-
-        <div>
-            <div> Y axis mode </div>
-            <div>
-                <USelect v-model="yAxisMode" :options="yAxisModeOptions" />
-            </div>
-        </div>
-
-        <div>
-            <div> Timeframe </div>
-            <div>
-                <UPopover class="w-full" :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>
-                            {{ timeframe.start.toLocaleDateString() }} - {{ timeframe.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="timeframe" @close="close" />
-                        </div>
-                    </template>
-                </UPopover>
-            </div>
-        </div>
-
-        <div>
-            <div> View mode </div>
-            <div>
-                <USelect v-model="slice" :options="sliceOptions" />
-            </div>
-        </div>
-
-        <LyxUiButton type="primary" @click="generate()">
-            Generate
-        </LyxUiButton>
-
-    </div>
-</template>

dashboard/components/integrations/SupabaseLineChart.vue

@@ -1,170 +0,0 @@
-<script setup lang="ts">
-import type { TSupabaseIntegration } from '@schema/integrations/SupabaseIntegrationSchema';
-import type { ChartData, ChartOptions } from 'chart.js';
-import { useLineChart, LineChart } from 'vue-chart-3';
-
-const props = defineProps<{ integration_id: string }>();
-
-const activeProjectId = useActiveProjectId();
-
-const supabaseData = ref<{ labels: string[], data: number[] }>();
-const supabaseError = ref<string | undefined>(undefined);
-const supabaseFetching = ref<boolean>(false);
-
-const { getRemoteData } = useSupabase();
-
-function createGradient() {
-
-    const c = document.createElement('canvas');
-    const ctx = c.getContext("2d");
-    let gradient: any = `#34B67C22`;
-    if (ctx) {
-        gradient = ctx.createLinearGradient(0, 25, 0, 300);
-        gradient.addColorStop(0, `#34B67C99`);
-        gradient.addColorStop(0.35, `#34B67C66`);
-        gradient.addColorStop(1, `#34B67C22`);
-    } else {
-        console.warn('Cannot get context for gradient');
-    }
-
-    chartData.value.datasets[0].backgroundColor = [gradient];
-}
-
-
-
-const chartOptions = ref<ChartOptions<'line'>>({
-    responsive: true,
-    maintainAspectRatio: false,
-    interaction: {
-        intersect: false,
-        mode: 'nearest',
-        axis: 'x',
-        includeInvisible: true
-    },
-    scales: {
-        y: {
-            ticks: { display: true },
-            grid: {
-                display: true,
-                drawBorder: false,
-                color: '#CCCCCC22',
-                // borderDash: [5, 10]
-            },
-        },
-        x: {
-            ticks: { display: true },
-            grid: {
-                display: true,
-                drawBorder: false,
-                color: '#CCCCCC22',
-            }
-        }
-    },
-    plugins: {
-        legend: { display: false },
-        title: { display: false },
-        tooltip: {
-            enabled: true,
-            backgroundColor: 'rgba(0, 0, 0, 0.8)',
-            titleFont: { size: 16, weight: 'bold' },
-            bodyFont: { size: 14 },
-            padding: 10,
-            cornerRadius: 4,
-            boxPadding: 10,
-            caretPadding: 20,
-            yAlign: 'bottom',
-            xAlign: 'center',
-        }
-    },
-});
-
-
-const chartData = ref<ChartData<'line'>>({
-    labels: [],
-    datasets: [
-        {
-            data: [],
-            backgroundColor: ['#34B67C' + '77'],
-            borderColor: '#34B67C',
-            borderWidth: 4,
-            fill: true,
-            tension: 0.45,
-            pointRadius: 0,
-            pointHoverRadius: 10,
-            hoverBackgroundColor: '#34B67C',
-            hoverBorderColor: 'white',
-            hoverBorderWidth: 2,
-        },
-    ],
-});
-
-
-onMounted(async () => {
-
-supabaseFetching.value = true;
-supabaseError.value = undefined;
-
-const integrationData = await $fetch<TSupabaseIntegration>('/api/integrations/supabase/get', {
-    ...signHeaders({
-        'x-pid': activeProjectId.data.value || '',
-        'x-integration': props.integration_id
-    })
-});
-
-if (!integrationData) {
-    supabaseError.value = 'Cannot get integration data';
-    supabaseFetching.value = false;
-    return;
-}
-try {
-    const data = await getRemoteData(
-        integrationData.table_name,
-        integrationData.xField,
-        integrationData.yMode,
-        integrationData.from.toString(),
-        integrationData.to.toString(),
-        integrationData.slice,
-    );
-    if (data.error) {
-        supabaseError.value = data.error;
-        supabaseFetching.value = false;
-        return;
-    }
-    supabaseFetching.value = false;
-    supabaseData.value = data.result;
-
-    chartData.value.labels = data.result?.labels || [];
-    chartData.value.datasets[0].data = data.result?.data || [];
-
-    console.log(data.result);
-    createGradient();
-} catch (ex: any) {
-    if (!ex.response._data) {
-        supabaseError.value = ex.message.toString();
-        supabaseFetching.value = false;
-    } else {
-        supabaseError.value = ex.response._data.message.toString();
-        supabaseFetching.value = false;
-    }
-
-}
-});
-
-
-const { lineChartProps, lineChartRef } = useLineChart({ chartData: chartData, options: chartOptions });
-
-
-</script>
-
-
-<template>
-    <div v-if="!supabaseFetching">
-        <div v-if="!supabaseError">
-            <LineChart ref="lineChartRef" v-bind="lineChartProps"> </LineChart>
-        </div>
-        <div v-if="supabaseError"> {{ supabaseError }} </div>
-    </div>
-    <div v-if="supabaseFetching">
-        Getting remote data...
-    </div>
-</template>

dashboard/components/layout/TopNavigation.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+
+import { DialogFeedback, DialogHelp } from '#components';
+
+const modal = useModal();
+const selfhosted = useSelfhosted();
+
+
+const colorMode = useColorMode()
+const isDark = computed({
+    get() {
+        return colorMode.value === 'dark'
+    },
+    set() {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+
+</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]">
+
+        <div class="flex items-center px-6">
+            <SelectorDomainSelector></SelectorDomainSelector>
+        </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">
+                <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>
+</template>

dashboard/components/layout/VerticalNavigation.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 
-import CreateSnapshot from './dialog/CreateSnapshot.vue';
+import CreateSnapshot from '../dialog/CreateSnapshot.vue';
 
 export type Entry = {
     label: string,
@@ -23,6 +23,7 @@ type Props = {
     sections: Section[]
 }
 
+
 const route = useRoute();
 const props = defineProps<Props>();
 
@@ -56,7 +57,7 @@ const { createAlert } = useAlert()
 async function deleteSnapshot(close: () => any) {
     await $fetch("/api/snapshot/delete", {
         method: 'DELETE',
-        ...signHeaders({ 'Content-Type': 'application/json' }),
+        headers: useComputedHeaders({ useSnapshotDates: false }).value,
         body: JSON.stringify({
             id: snapshot.value._id.toString(),
         })
@@ -71,11 +72,7 @@ async function generatePDF() {
 
     try {
         const res = await $fetch<Blob>('/api/project/generate_pdf', {
-            ...signHeaders({
-                'x-snapshot-name': snapshot.value.name,
-                'x-from': snapshot.value.from.toISOString(),
-                'x-to': snapshot.value.to.toISOString(),
-            }),
+            headers: useComputedHeaders({ useSnapshotDates: false, custom: { 'x-snapshot-name': snapshot.value.name } }).value,
             responseType: 'blob'
         });
 
@@ -109,12 +106,10 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
 });
 
 
-const pricingDrawer = usePricingDrawer();
-
 </script>
 
 <template>
-    <div class="CVerticalNavigation border-solid border-[#202020] border-r-[1px] h-full w-[20rem] bg-lyx-background flex shadow-[1px_0_10px_#000000] rounded-r-lg"
+    <div class="CVerticalNavigation border-solid border-[#D9D9E0] dark:border-[#202020] border-r-[1px] h-full w-[20rem] bg-lyx-lightmode-background dark:bg-lyx-background flex shadow-[1px_0_10px_#000000]"
         :class="{
             'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen,
             'hidden lg:flex': !isOpen
@@ -132,7 +127,7 @@ const pricingDrawer = usePricingDrawer();
 
                 <div class="flex items-center gap-2 w-full">
 
-                    <ProjectSelector></ProjectSelector>
+                    <SelectorProjectSelector></SelectorProjectSelector>
 
                     <div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
                         <i @click="close()" class="fas fa-close"></i>
@@ -144,13 +139,13 @@ const pricingDrawer = usePricingDrawer();
                 <LyxUiButton to="/project_creation" v-if="projectList && (projectList.length < (maxProjects || 1))"
                     type="outlined" class="w-full py-1 mt-2 text-[.8rem]">
                     <div class="flex items-center gap-2 justify-center">
-                        <div><i class="fas fa-plus"></i></div>
-                        <div> Create new project </div>
+                        <div><i class="fas fa-plus text-[.7rem]"></i></div>
+                        <div class="poppins"> New Project </div>
                     </div>
                 </LyxUiButton>
 
-                <LyxUiButton v-if="projectList && (projectList.length >= (maxProjects || 1))"
-                    type="outlined" class="w-full py-1 mt-2 text-[.7rem]">
+                <LyxUiButton v-if="projectList && (projectList.length >= (maxProjects || 1))" type="outlined"
+                    class="w-full py-1 mt-2 text-[.7rem]">
                     <div class="flex items-center gap-2 justify-center">
                         <div><i class="text-lyx-text-darker far fa-lock"></i></div>
                         <div class="text-lyx-text-darker"> Projects limit reached </div>
@@ -163,20 +158,20 @@ const pricingDrawer = usePricingDrawer();
 
             <div class="w-full flex-col px-2">
 
-                <div class="flex mb-2 items-center justify-between">
+                <div class="flex mb-2 items-center justify-between text-lyx-lightmode-text dark:text-lyx-text">
                     <div class="poppins text-[.8rem]">
-                        Snapshots
+                        Timeframes
                     </div>
 
                     <div class="flex gap-2">
-                        <UTooltip text="Download report">
+                        <!-- <UTooltip text="Download report">
                             <LyxUiButton @click="generatePDF()" type="outlined" class="!px-3 !py-1">
                                 <div><i class="far fa-download text-[.8rem]"></i></div>
                             </LyxUiButton>
-                        </UTooltip>
-                        <UTooltip text="Create new snapshot">
+                        </UTooltip> -->
+                        <UTooltip text="Create new timeframe">
                             <LyxUiButton @click="openSnapshotDialog()" type="outlined" class="!px-3 !py-1">
-                                <div><i class="fas fa-plus text-[.9rem]"></i></div>
+                                <div><i class="fas fa-plus text-[.8rem]"></i></div>
                             </LyxUiButton>
                         </UTooltip>
                     </div>
@@ -185,11 +180,11 @@ const pricingDrawer = usePricingDrawer();
 
                 <div class="flex items-center gap-2">
                     <USelectMenu :uiMenu="{
-                        select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                        base: '!bg-lyx-widget',
+                        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',
                         option: {
-                            base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                            active: '!bg-lyx-widget-lighter'
+                            base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                            active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                         }
                     }" class="w-full" v-model="snapshot" :options="snapshotsItems">
                         <template #label>
@@ -210,10 +205,10 @@ const pricingDrawer = usePricingDrawer();
                 </div>
 
                 <div v-if="snapshot" class="flex flex-col text-[.7rem] mt-2">
-                    <div class="flex gap-1 items-center justify-center text-lyx-text-dark">
+                    <div
+                        class="flex gap-1 items-center justify-center text-lyx-lightmode-text-dark dark:text-lyx-text-dark">
                         <div class="poppins">
-                            {{ new Date(snapshot.from).toLocaleString().split(',')[0].trim()
-                            }}
+                            {{ new Date(snapshot.from).toLocaleString().split(',')[0].trim() }}
                         </div>
                         <div class="poppins"> to </div>
                         <div class="poppins">
@@ -221,7 +216,7 @@ const pricingDrawer = usePricingDrawer();
                         </div>
                     </div>
 
-                    <div class="mt-2" v-if="snapshot._id.toString().startsWith('default') === false">
+                    <div class="mt-2" v-if="('default' in snapshot == false)">
                         <UPopover placement="bottom">
                             <LyxUiButton type="danger" class="w-full text-center">
                                 Delete current snapshot
@@ -242,9 +237,16 @@ const pricingDrawer = usePricingDrawer();
 
                     </div>
                 </div>
+
+                <div class="w-full flex mt-4">
+                    <LyxUiButton @click="generatePDF()" type="outline" class="w-full text-center text-[.8rem]">
+                        Export report
+                    </LyxUiButton>
+                </div>
+
             </div>
 
-            <div class="bg-[#202020] h-[1px] w-full"></div>
+            <div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full"></div>
 
             <div class="flex flex-col h-full">
 
@@ -253,11 +255,11 @@ const pricingDrawer = usePricingDrawer();
                     <div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
 
                         <div v-if="(!entry.adminOnly || (userRoles.isAdmin.value && !isAdminHidden))"
-                            class="bg-lyx-background w-full cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
+                            class="bg-lyx-lightmode-background text-lyx-lightmode-text-dark dark:bg-lyx-background dark:text-lyx-text-dark w-full cursor-pointer py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
                             :class="{
                                 '!text-lyx-text-darker pointer-events-none': entry.disabled,
-                                'bg-lyx-background-lighter !text-lyx-text/90': route.path == (entry.to || '#'),
-                                'hover:bg-lyx-background-light hover:!text-lyx-text/90': route.path != (entry.to || '#'),
+                                'bg-lyx-lightmode-background-light !text-lyx-lightmode-text dark:bg-lyx-background-lighter dark:!text-lyx-text': route.path == (entry.to || '#'),
+                                'hover:bg-lyx-lightmode-background-light hover:!text-lyx-lightmode-text dark:hover:bg-lyx-background-light dark:hover:!text-lyx-text': route.path != (entry.to || '#'),
                             }">
 
                             <NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
@@ -281,36 +283,20 @@ const pricingDrawer = usePricingDrawer();
 
                 <div class="grow"></div>
 
-                <div class="bg-[#202020] h-[1px] w-full px-4  mb-3"></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">
 
                     <div class="grow flex gap-3">
-                        <!-- <NuxtLink to="https://github.com/litlyx/litlyx" target="_blank"
-                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
-                            <i class="fab fa-github"></i>
-                        </NuxtLink> -->
-                        <!-- <NuxtLink to="https://discord.gg/9cQykjsmWX" target="_blank"
-                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
-                            <i class="fab fa-discord"></i>
-                        </NuxtLink> -->
-                        <NuxtLink to="https://x.com/litlyx" target="_blank"
-                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
-                            <i class="fab fa-x-twitter"></i>
-                        </NuxtLink>
-                        <!-- <NuxtLink to="https://dev.to/litlyx-org" target="_blank"
-                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
-                            <i class="fab fa-dev"></i>
-                        </NuxtLink> -->
 
                         <NuxtLink to="/admin" v-if="userRoles.isAdmin.value"
-                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
-                            <i class="fas fa-cat"></i>
+                            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-cat"></i>
                         </NuxtLink>
                     </div>
 
                     <UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">
-                        <div @click="onLogout()" class="cursor-pointer hover:text-lyx-text 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/pricing/PricingCardGeneric.vue

@@ -15,8 +15,6 @@ export type PricingCardProp = {
 
 const props = defineProps<{ datas: PricingCardProp[], defaultIndex?: number }>();
 
-const { project } = useProject();
-
 const currentIndex = ref<number>(props.defaultIndex || 0);
 
 const data = computed(() => {
@@ -43,7 +41,7 @@ async function onUpgradeClick() {
 
 <template>
     <div
-        class="relative bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
+        class="relative bg-lyx-lightmode-widget-light dark:bg-[#151515] outline outline-[1px] outline-lyx-lightmode-widget dark:outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
 
         <div class="flex flex-col gap-3 text-center pt-3">
             <div v-if="data.active"
@@ -58,7 +56,7 @@ async function onUpgradeClick() {
             <div class="poppins text-4xl font-medium"> {{ data.price }} </div>
         </div>
 
-        <div class="sep bg-[#262626] h-[1px] my-8"></div>
+        <div class="sep bg-lyx-lightmode-widget dark:bg-[#262626] h-[1px] my-8"></div>
 
         <div class="flex flex-col text-center h-[6rem] justify-center gap-2">
             <div v-if="datas.length > 1">
@@ -78,7 +76,7 @@ async function onUpgradeClick() {
             </div>
         </div>
 
-        <div class="sep bg-[#262626] h-[1px] my-8"></div>
+        <div class="sep bg-lyx-lightmode-widget dark:bg-[#262626] h-[1px] my-8"></div>
 
         <div class="flex flex-col gap-2">
             <div class="flex gap-2" v-for="feature of data.features">

dashboard/components/selector/DomainSelector.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+
+const { domainList, domain, setActiveDomain, refreshDomains, refreshingDomains } = useDomain();
+
+function onChange(e: string) {
+    setActiveDomain(e);
+}
+</script>
+
+<template>
+    <div class="flex gap-2 absolute">
+        <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',
+            option: {
+                base: 'z-[990] hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
+            },
+            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">
+
+            <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>
+                        {{ domain || '-' }}
+                    </div>
+                </div>
+            </template>
+        </USelectMenu>
+        <div @click="refreshDomains" v-if="!refreshingDomains"
+            class="flex items-center hover:rotate-[60deg] transition-all duration-200 ease-in-out cursor-pointer">
+            <i class="far fa-refresh"></i>
+        </div>
+    </div>
+</template>

dashboard/components/selector/ProjectSelector.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 
-import type { TProject } from '@schema/ProjectSchema';
+import type { TProject } from '@schema/project/ProjectSchema';
 
 const { user } = useLoggedUser()
 
-const { projectList, guestProjectList,allProjectList, actions, project } = useProject();
-
+const { projectList, guestProjectList, allProjectList, actions, project } = useProject();
+const { setActiveDomain } = useDomain();
 
 function isProjectMine(owner?: string) {
     if (!owner) return false;
@@ -16,17 +16,18 @@ function isProjectMine(owner?: string) {
 
 function onChange(e: TProject) {
     actions.setActiveProject(e._id.toString());
+    setActiveDomain('ALL DOMAINS');
 }
 </script>
 
 <template>
 
     <USelectMenu :uiMenu="{
-        select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-        base: '!bg-lyx-widget',
+        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',
         option: {
-            base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-            active: '!bg-lyx-widget-lighter'
+            base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+            active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
         }
     }" class="w-full" v-if="allProjectList" @change="onChange" :value="project" :options="allProjectList">
 

dashboard/components/settings/Account.vue

@@ -2,12 +2,18 @@
 import type { SettingsTemplateEntry } from './Template.vue';
 
 const entries: SettingsTemplateEntry[] = [
+    { id: 'change_pass', title: 'Change password', text: 'Change your password' },
     { id: 'delete', title: 'Delete account', text: 'Delete your account' },
 ]
 
 
+const { user } = useLoggedUser();
 const { setToken } = useAccessToken();
 
+const canChangePassword = useFetch('/api/user/password/can_change', {
+    headers: useComputedHeaders({ useSnapshotDates: false })
+});
+
 async function deleteAccount() {
     const sure = confirm("Are you sure you want to delete this account ?");
     if (!sure) return;
@@ -20,17 +26,63 @@ async function deleteAccount() {
     location.href = "/login"
 }
 
+const old_password = ref<string>("");
+const new_password = ref<string>("");
+
+const { createAlert } = useAlert()
+
+async function changePassword() {
+
+
+    try {
+        const res = await $fetch("/api/user/password/change", {
+            ...signHeaders({ 'Content-Type': 'application/json' }),
+            method: "POST",
+            body: JSON.stringify({ old_password: old_password.value, new_password: new_password.value })
+        })
+
+        if (!res) throw Error('No response');
+
+        if (res.error) return createAlert('Error', res.message, 'far fa-triangle-exclamation', 5000);
+
+
+        old_password.value = '';
+        new_password.value = '';
+
+        return createAlert('Success', 'Password changed successfully', 'far fa-circle-check', 5000);
+
+    } catch (ex) {
+        console.error(ex);
+        createAlert('Error', 'Internal error', 'far fa-triangle-exclamation', 5000);
+    }
+
+}
+
+
+
 </script>
 
 
 <template>
     <SettingsTemplate :entries="entries">
+        <template #change_pass>
+            <div v-if="canChangePassword.data.value?.can_change">
+                <div class="flex flex-col gap-4">
+                    <LyxUiInput type="password" class="py-1 px-2" v-model="old_password" placeholder="Current password"></LyxUiInput>
+                    <LyxUiInput type="password" class="py-1 px-2" v-model="new_password" placeholder="New password"></LyxUiInput>
+                    <LyxUiButton type="primary" @click="changePassword()"> Change password </LyxUiButton>
+                </div>
+            </div>
+            <div v-if="!canChangePassword.data.value?.can_change">
+                You cannot change the password for accounts created using social login options.
+            </div>
+        </template>
         <template #delete>
             <div
-                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
+                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-lyx-lightmode-widget-light dark:bg-[#1e1412]">
                 <div class="poppins font-semibold"> Deleting this account will also remove its projects </div>
                 <div @click="deleteAccount()"
-                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
+                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-lyx-lightmode-widget-light dark:bg-[#291415]">
                     Delete account
                 </div>
             </div>

dashboard/components/settings/Codes.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { TApiSettings } from '@schema/ApiSettingsSchema';
+import type { SettingsTemplateEntry } from './Template.vue';
+
+const { project, isGuest } = useProject();
+
+const entries: SettingsTemplateEntry[] = [
+    { id: 'acodes', title: 'Appsumo codes', text: 'Redeem appsumo codes' },
+]
+
+const { createAlert } = useAlert()
+
+const currentCode = ref<string>("");
+const redeeming = ref<boolean>(false);
+
+const valid_codes = useFetch('/api/pay/valid_codes', signHeaders({ 'x-pid': project.value?._id.toString() ?? '' }));
+
+async function redeemCode() {
+    redeeming.value = true;
+    try {
+        const res = await $fetch<TApiSettings>('/api/pay/redeem_appsumo_code', {
+            method: 'POST', ...signHeaders({
+                'Content-Type': 'application/json',
+                'x-pid': project.value?._id.toString() ?? ''
+            }),
+            body: JSON.stringify({ code: currentCode.value })
+        });
+        createAlert('Success', 'Code redeem success.', 'far fa-check', 5000);
+        valid_codes.refresh();
+    } catch (ex: any) {
+        createAlert('Error', ex?.response?.statusText || 'Unexpected error. Contact support.', 'far fa-error', 5000);
+    } finally {
+        currentCode.value = '';
+    }
+    redeeming.value = false;
+}
+
+</script>
+
+
+<template>
+    <SettingsTemplate v-if="!isGuest" :entries="entries" :key="project?.name || 'NONE'">
+        <template #acodes>
+            <div class="flex items-center gap-4">
+                <LyxUiInput class="w-full px-4 py-2" placeholder="Appsumo code" v-model="currentCode"></LyxUiInput>
+                <LyxUiButton v-if="!redeeming" :disabled="currentCode.length == 0" @click="redeemCode()" type="primary">
+                    Redeem
+                </LyxUiButton>
+                <div v-if="redeeming">
+                    Redeeming...
+                </div>
+            </div>
+            <div class="text-lyx-text-darker mt-1 text-[.9rem] poppins">
+                Redeemed codes: {{ valid_codes.data.value?.count || '0' }}
+            </div>
+            <div class="poppins text-[1.1rem] text-lyx-lightmode-text dark:text-yellow-400 mb-2">
+                *Plan upgrades are applicable exclusively to this project(workspace).
+            </div>
+        </template>
+    </SettingsTemplate>
+
+    <div v-if="isGuest" class="text-lyx-text-darker flex w-full h-full justify-center mt-20">
+        Guests cannot view billing
+    </div>
+
+</template>

dashboard/components/settings/Data.vue

@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import DeleteDomainData from '../dialog/DeleteDomainData.vue';
+import type { SettingsTemplateEntry } from './Template.vue';
+
+
+const { isGuest } = useProject();
+
+const entries: SettingsTemplateEntry[] = [
+    { id: 'delete_dns', title: 'Delete domain data', text: 'Delete data of a specific domain from this project' },
+    { id: 'delete_data', title: 'Delete project data', text: 'Delete all data from this project' },
+]
+
+const domains = useFetch('/api/settings/domains', {
+    headers: useComputedHeaders({ useSnapshotDates: false }),
+    transform: (e) => {
+        if (!e) return [];
+        return e.sort((a, b) => {
+            return a.count - b.count;
+        }).map(e => {
+            return { id: e._id, label: `${e._id} - ${e.count} visits` }
+        })
+    }
+})
+
+const selectedDomain = ref<{ id: string, label: string }>();
+const selectedVisits = ref<boolean>(true);
+const selectedSessions = ref<boolean>(true);
+const selectedEvents = ref<boolean>(true);
+
+
+const domainCounts = useFetch(() => `/api/settings/domain_counts?domain=${selectedDomain.value?.id}`, {
+    headers: useComputedHeaders({ useSnapshotDates: false }),
+})
+
+
+const { setToken } = useAccessToken();
+
+
+const modal = useModal();
+
+function openDeleteDomainDataDialog() {
+    modal.open(DeleteDomainData, {
+        preventClose: true,
+        deleteData: {
+            isAll: false,
+            domain: selectedDomain.value?.id as string,
+            visits: selectedVisits.value,
+            sessions: selectedSessions.value,
+            events: selectedEvents.value,
+        },
+        buttonType: 'primary',
+        message: 'This action is irreversable and will wipe all the data from the selected domain.',
+        onSuccess: () => {
+            modal.close()
+        },
+        onCancel: () => {
+            modal.close()
+        },
+    });
+}
+
+function openDeleteAllDomainDataDialog() {
+    modal.open(DeleteDomainData, {
+        preventClose: true,
+        deleteData: {
+            isAll: true,
+            domain: '',
+            visits: false,
+            sessions: false,
+            events: false,
+        },
+        buttonType: 'danger',
+        message: 'This action is irreversable and will wipe all the data from the entire project.',
+        onSuccess: () => {
+            modal.close()
+        },
+        onCancel: () => {
+            modal.close()
+        },
+    });
+}
+
+
+const visitsLabel = computed(() => {
+    if (domainCounts.pending.value === true) return 'Visits loading...';
+    if (domainCounts.data.value?.error === true) return 'Visits (too many to compute)';
+    return 'Visits ' + (domainCounts.data.value?.visits ?? '');
+})
+
+const eventsLabel = computed(() => {
+    if (domainCounts.pending.value === true) return 'Events loading...';
+    if (domainCounts.data.value?.error === true) return 'Events (too many to compute)';
+    return 'Events ' + (domainCounts.data.value?.events ?? '');
+})
+
+const sessionsLabel = computed(() => {
+    if (domainCounts.pending.value === true) return 'Sessions loading...';
+    if (domainCounts.data.value?.error === true) return 'Sessions (too many to compute)';
+    return 'Sessions ' + (domainCounts.data.value?.sessions ?? '');
+})
+
+</script>
+
+
+<template>
+    <SettingsTemplate :entries="entries">
+        <template #delete_dns>
+            <div class="flex flex-col">
+
+                <!-- <div class="text-[.9rem] text-lyx-text-darker"> Select a domain </div> -->
+                <USelectMenu v-if="!isGuest" placeholder="Select a domain" :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',
+                    option: {
+                        base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
+                    }
+                }" :options="domains.data.value ?? []" v-model="selectedDomain"></USelectMenu>
+
+                <div v-if="isGuest" class="text-lyx-text-darker"> Guests cannot delete data</div>
+
+                <div v-if="selectedDomain" class="flex flex-col gap-2 mt-4">
+                    <div class="text-[.9rem] text-lyx-text-dark"> Select data to delete </div>
+
+                    <div class="flex flex-col gap-1">
+
+
+                        <UCheckbox :ui="{ color: 'actionable-visits-color-checkbox' }" v-model="selectedVisits"
+                            :label="visitsLabel" />
+                        <UCheckbox :ui="{ color: 'actionable-sessions-color-checkbox' }" v-model="selectedSessions"
+                            :label="sessionsLabel" />
+                        <UCheckbox :ui="{ color: 'actionable-events-color-checkbox' }" v-model="selectedEvents"
+                            :label="eventsLabel" />
+
+                    </div>
+
+                    <LyxUiButton class="mt-2" v-if="selectedVisits || selectedSessions || selectedEvents"
+                        @click="openDeleteDomainDataDialog()" type="outline">
+                        Delete data
+                    </LyxUiButton>
+                    <div class="text-lyx-text-dark">
+                        This action will delete all data from the project creation date.
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #delete_data>
+
+            <div v-if="!isGuest"
+                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-lyx-lightmode-widget-light dark:bg-[#1e1412]">
+                <div class="poppins font-semibold"> This operation will reset this project to it's initial state (0
+                    visits 0 events 0 sessions) </div>
+                <div @click="openDeleteAllDomainDataDialog()"
+                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-lyx-lightmode-widget-light dark:bg-[#291415]">
+                    Delete all data
+                </div>
+            </div>
+
+            <div v-if="isGuest" class="text-lyx-text-darker"> Guests cannot delete data</div>
+        </template>
+    </SettingsTemplate>
+</template>

dashboard/components/settings/General.vue

@@ -156,20 +156,28 @@ function copyProjectId() {
 <template>
     <SettingsTemplate :entries="entries" :key="project?.name || 'NONE'">
         <template #pname>
-            <div class="flex items-center gap-4">
-                <LyxUiInput class="w-full px-4 py-2" :disabled="isGuest" v-model="projectNameInputVal"></LyxUiInput>
-                <LyxUiButton v-if="!isGuest" @click="changeProjectName()" :disabled="!canChange" type="primary"> Change
-                </LyxUiButton>
+            <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-4">
+                    <LyxUiInput class="w-full px-4 py-2" :disabled="isGuest" v-model="projectNameInputVal"></LyxUiInput>
+                    <LyxUiButton v-if="!isGuest" @click="changeProjectName()" :disabled="!canChange" type="primary">
+                        Change
+                    </LyxUiButton>
+                </div>
+                <div v-if="isGuest" class="text-lyx-text-darker"> *Guests cannot change project name </div>
             </div>
         </template>
         <template #api>
-            <div class="flex items-center gap-4" v-if="apiKeys && apiKeys.length < 5">
-                <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"
-                    type="primary">
-                    <i class="far fa-plus"></i>
-                </LyxUiButton>
+            <div class="flex flex-col gap-2" v-if="apiKeys && apiKeys.length < 5">
+                <div class="flex items-center gap-4">
+                    <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"
+                        type="primary">
+                        <i class="far fa-plus"></i>
+                    </LyxUiButton>
+                </div>
+                <div v-if="isGuest" class="text-lyx-text-darker"> *Guests cannot manage api keys </div>
             </div>
             <LyxUiCard v-if="apiKeys && apiKeys.length > 0" class="w-full flex flex-col gap-4 items-center mt-4">
                 <div v-for="apiKey of apiKeys" class="flex flex-col w-full">
@@ -201,10 +209,10 @@ function copyProjectId() {
                 <div class="hidden lg:flex"><i class="far fa-copy" @click="copyScript()"></i></div>
             </LyxUiCard>
             <div class="flex justify-end w-full">
-            <LyxUiButton type="outline" class="flex lg:hidden mt-4">
-                Copy script
-            </LyxUiButton>
-        </div>
+                <LyxUiButton type="outline" class="flex lg:hidden mt-4">
+                    Copy script
+                </LyxUiButton>
+            </div>
         </template>
         <template #pdelete>
             <div class="flex lg:justify-end" v-if="!isGuest">
@@ -212,6 +220,7 @@ function copyProjectId() {
                     Delete project
                 </LyxUiButton>
             </div>
+            <div v-if="isGuest"> *Guests cannot delete project </div>
         </template>
     </SettingsTemplate>
 </template>

dashboard/components/settings/Template.vue

@@ -20,10 +20,10 @@ const props = defineProps<SettingsTemplateProp>();
         <div v-for="(entry, index) of props.entries" class="flex flex-col">
             <div class="flex xl:flex-row flex-col gap-4 xl:gap-0">
                 <div class="xl:flex-[2]">
-                    <div class="poppins font-medium text-lyx-text">
+                    <div class="poppins font-medium text-lyx-lightmode-text dark:text-lyx-text">
                         {{ entry.title }}
                     </div>
-                    <div class="poppins font-regular text-lyx-text-dark whitespace-pre-wrap">
+                    <div class="poppins font-regular text-lyx-lightmode-text-dark dark:text-lyx-text-dark whitespace-pre-wrap">
                         {{ entry.text }}
                     </div>
                 </div>
@@ -31,7 +31,7 @@ const props = defineProps<SettingsTemplateProp>();
                     <slot :name="entry.id"></slot>
                 </div>
             </div>
-            <div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-widget-lighter w-full my-10"></div>
+            <div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-lightmode-widget dark:bg-lyx-widget-lighter w-full my-10"></div>
         </div>
     </div>
 </template>

dashboard/components/settings/billing.vue

@@ -68,7 +68,7 @@ function getPremiumPrice(type: number) {
 }
 
 const entries: SettingsTemplateEntry[] = [
-    { id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
+    { id: 'plan', title: 'Current plan', text: 'Manage current plan for this project' },
     { id: 'usage', title: 'Usage', text: 'Show usage of current project' },
     { id: 'info', title: 'Billing address', text: 'This will be reflected in every upcoming invoice,\npast invoices are not affected' },
     { id: 'invoices', title: 'Invoices', text: 'Manage invoices of current project' },
@@ -111,8 +111,7 @@ async function saveBillingInfo() {
 
 }
 
-
-const { visible } = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 </script>
 
@@ -124,26 +123,30 @@ const { visible } = usePricingDrawer();
             <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
         </div>
 
-        <SettingsTemplate v-if="!invoicesPending && !planPending" :entries="entries">
+        <SettingsTemplate v-if="!invoicesPending && !planPending && !isGuest" :entries="entries">
             <template #info>
                 <div v-if="!isGuest">
                     <div class="flex flex-col gap-4">
-                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1" v-model="currentBillingInfo.line1">
+                        <LyxUiInput class="px-2 py-2 dark:!bg-[#161616]" placeholder="Address line 1"
+                            v-model="currentBillingInfo.line1">
                         </LyxUiInput>
-                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2" v-model="currentBillingInfo.line2">
+                        <LyxUiInput class="px-2 py-2 dark:!bg-[#161616]" placeholder="Address line 2"
+                            v-model="currentBillingInfo.line2">
                         </LyxUiInput>
                         <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Country"
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="Country"
                                 v-model="currentBillingInfo.country">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Postal code"
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="Postal code"
                                 v-model="currentBillingInfo.postal_code">
                             </LyxUiInput>
                         </div>
                         <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City" v-model="currentBillingInfo.city">
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="City"
+                                v-model="currentBillingInfo.city">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State" v-model="currentBillingInfo.state">
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="State"
+                                v-model="currentBillingInfo.state">
                             </LyxUiInput>
                         </div>
                     </div>
@@ -172,7 +175,8 @@ const { visible } = usePricingDrawer();
                             <div class="flex items-center gap-1">
                                 <div class="poppins font-semibold text-[2rem]"> €
                                     {{ getPremiumPrice(planData.premium_type) }} </div>
-                                <div class="poppins text-text-sub mt-2"> per month </div>
+                                <div class="poppins text-lyx-lightmode-text-dark dark:text-text-sub mt-2"> per month
+                                </div>
                             </div>
                         </div>
                         <div class="flex flex-col">
@@ -191,11 +195,11 @@ const { visible } = usePricingDrawer();
                     <div class="my-4 w-full bg-gray-400/30 h-[1px]">
                     </div>
                     <div class="flex justify-between px-8 flex-col lg:flex-row gap-2 lg:gap-0 items-center">
-                        <div class="flex gap-2 text-text-sub text-[.9rem]">
+                        <div class="flex gap-2 text-lyx-lightmode-text-dark dark:text-text-sub text-[.9rem]">
                             <div class="poppins"> Expire date:</div>
                             <div> {{ prettyExpireDate }}</div>
                         </div>
-                        <LyxUiButton v-if="!isGuest" @click="visible = true" type="primary">
+                        <LyxUiButton v-if="!isGuest" @click="showDrawer('PRICING')" type="primary">
                             Upgrade plan
                         </LyxUiButton>
                     </div>
@@ -209,7 +213,7 @@ const { visible } = usePricingDrawer();
                                 <div class="poppins font-semibold text-[1.1rem]">
                                     Usage
                                 </div>
-                                <div class="poppins text-text-sub text-[.9rem]">
+                                <div class="poppins text-lyx-lightmode-text-dark dark:text-text-sub text-[.9rem]">
                                     Check the usage limits of your project.
                                 </div>
                             </div>
@@ -237,7 +241,7 @@ const { visible } = usePricingDrawer();
 
                     <div class="flex flex-col gap-2">
 
-                        <div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg"
+                        <div class="flex justify-between items-center outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none bg-lyx-lightmode-widget-light dark:bg-[#161616] p-4 rounded-lg"
                             v-for="invoice of invoices">
 
                             <div> <i class="fal fa-file-invoice"></i> </div>
@@ -263,6 +267,10 @@ const { visible } = usePricingDrawer();
                 </CardTitled>
             </template>
         </SettingsTemplate>
+
+        <div v-if="isGuest" class="text-lyx-text-darker flex w-full h-full justify-center mt-20">
+            Guests cannot view billing
+        </div>
     </div>
 
 

dashboard/components/settings/members.vue

@@ -98,6 +98,7 @@ const entries: SettingsTemplateEntry[] = [
                     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>
 

dashboard/composables/snapshots/BaseSnapshots.ts

@@ -0,0 +1,91 @@
+
+import type { TProjectSnapshot } from "@schema/project/ProjectSnapshot";
+
+import * as fns from 'date-fns';
+
+export type DefaultSnapshot = TProjectSnapshot & { default: true }
+export type GenericSnapshot = TProjectSnapshot | DefaultSnapshot;
+
+export function getDefaultSnapshots(project_id: TProjectSnapshot['project_id'], project_created_at: Date | string) {
+
+    const today: DefaultSnapshot = {
+        project_id,
+        _id: '___today' as any,
+        name: 'Today',
+        from: fns.startOfDay(Date.now()),
+        to: fns.endOfDay(Date.now()),
+        color: '#FFA600',
+        default: true
+    }
+
+    const lastDay: DefaultSnapshot = {
+        project_id,
+        _id: '___lastDay' as any,
+        name: 'Yesterday',
+        from: fns.startOfDay(fns.subDays(Date.now(), 1)),
+        to: fns.endOfDay(fns.subDays(Date.now(), 1)),
+        color: '#FF8531',
+        default: true
+    }
+
+
+    const lastMonth: DefaultSnapshot = {
+        project_id,
+        _id: '___lastMonth' as any,
+        name: 'Last Month',
+        from: fns.startOfMonth(fns.subMonths(Date.now(), 1)),
+        to: fns.endOfMonth(fns.subMonths(Date.now(), 1)),
+        color: '#BC5090',
+        default: true
+    }
+    const currentMonth: DefaultSnapshot = {
+        project_id,
+        _id: '___currentMonth' as any,
+        name: 'Current Month',
+        from: fns.startOfMonth(Date.now()),
+        to: fns.endOfMonth(Date.now()),
+        color: '#58508D',
+        default: true
+    }
+
+
+    const lastWeek: DefaultSnapshot = {
+        project_id,
+        _id: '___lastWeek' as any,
+        name: 'Last Week',
+        from: fns.startOfWeek(fns.subWeeks(Date.now(), 1)),
+        to: fns.endOfWeek(fns.subWeeks(Date.now(), 1)),
+        color: '#3E909D',
+        default: true
+    }
+
+
+    const currentWeek: DefaultSnapshot = {
+        project_id,
+        _id: '___currentWeek' as any,
+        name: 'Current Week',
+        from: fns.startOfWeek(Date.now()),
+        to: fns.endOfWeek(Date.now()),
+        color: '#007896',
+        default: true
+    }
+
+
+
+    const allTime: DefaultSnapshot = {
+        project_id,
+        _id: '___allTime' as any,
+        name: 'All Time',
+        from: fns.addMinutes(fns.startOfMonth(new Date(project_created_at.toString())), 0),
+        to: new Date(Date.now()),
+        color: '#9362FF',
+        default: true
+    }
+
+
+
+    const snapshotList = [lastDay, today, lastMonth, currentMonth, lastWeek, currentWeek, allTime]
+
+    return snapshotList;
+
+}

dashboard/composables/useCountryName.ts

@@ -0,0 +1,42 @@
+const countryMap: Record<string, string> = {
+    RW: "Rwanda", SO: "Somalia", YE: "Yemen", IQ: "Iraq", SA: "Saudi Arabia", IR: "Iran", CY: "Cyprus", TZ: "Tanzania",
+    SY: "Syria", AM: "Armenia", KE: "Kenya", CD: "Congo", DJ: "Djibouti", UG: "Uganda", CF: "Central African Republic",
+    SC: "Seychelles", JO: "Jordan", LB: "Lebanon", KW: "Kuwait", OM: "Oman", QA: "Qatar", BH: "Bahrain", AE: "United Arab Emirates",
+    IL: "Israel", TR: "Türkiye", ET: "Ethiopia", ER: "Eritrea", EG: "Egypt", SD: "Sudan", GR: "Greece", BI: "Burundi",
+    EE: "Estonia", LV: "Latvia", AZ: "Azerbaijan", LT: "Lithuania", SJ: "Svalbard and Jan Mayen", GE: "Georgia", MD: "Moldova",
+    BY: "Belarus", FI: "Finland", AX: "Åland Islands", UA: "Ukraine", MK: "North Macedonia", HU: "Hungary", BG: "Bulgaria",
+    AL: "Albania", PL: "Poland", RO: "Romania", XK: "Kosovo", ZW: "Zimbabwe", ZM: "Zambia", KM: "Comoros", MW: "Malawi",
+    LS: "Lesotho", BW: "Botswana", MU: "Mauritius", SZ: "Eswatini", RE: "Réunion", ZA: "South Africa", YT: "Mayotte",
+    MZ: "Mozambique", MG: "Madagascar", AF: "Afghanistan", PK: "Pakistan", BD: "Bangladesh", TM: "Turkmenistan", TJ: "Tajikistan",
+    LK: "Sri Lanka", BT: "Bhutan", IN: "India", MV: "Maldives", IO: "British Indian Ocean Territory", NP: "Nepal", MM: "Myanmar",
+    UZ: "Uzbekistan", KZ: "Kazakhstan", KG: "Kyrgyzstan", TF: "French Southern Territories", HM: "Heard and McDonald Islands",
+    CC: "Cocos (Keeling) Islands", PW: "Palau", VN: "Vietnam", TH: "Thailand", ID: "Indonesia", LA: "Laos", TW: "Taiwan",
+    PH: "Philippines", MY: "Malaysia", CN: "China", HK: "Hong Kong", BN: "Brunei", MO: "Macao", KH: "Cambodia", KR: "South Korea",
+    JP: "Japan", KP: "North Korea", SG: "Singapore", CK: "Cook Islands", TL: "Timor-Leste", RU: "Russia", MN: "Mongolia",
+    AU: "Australia", CX: "Christmas Island", MH: "Marshall Islands", FM: "Federated States of Micronesia", PG: "Papua New Guinea",
+    SB: "Solomon Islands", TV: "Tuvalu", NR: "Nauru", VU: "Vanuatu", NC: "New Caledonia", NF: "Norfolk Island", NZ: "New Zealand",
+    FJ: "Fiji", LY: "Libya", CM: "Cameroon", SN: "Senegal", CG: "Congo Republic", PT: "Portugal", LR: "Liberia", CI: "Ivory Coast", GH: "Ghana",
+    GQ: "Equatorial Guinea", NG: "Nigeria", BF: "Burkina Faso", TG: "Togo", GW: "Guinea-Bissau", MR: "Mauritania", BJ: "Benin", GA: "Gabon",
+    SL: "Sierra Leone", ST: "São Tomé and Príncipe", GI: "Gibraltar", GM: "Gambia", GN: "Guinea", TD: "Chad", NE: "Niger", ML: "Mali",
+    EH: "Western Sahara", TN: "Tunisia", ES: "Spain", MA: "Morocco", MT: "Malta", DZ: "Algeria", FO: "Faroe Islands", DK: "Denmark",
+    IS: "Iceland", GB: "United Kingdom", CH: "Switzerland", SE: "Sweden", NL: "The Netherlands", AT: "Austria", BE: "Belgium",
+    DE: "Germany", LU: "Luxembourg", IE: "Ireland", MC: "Monaco", FR: "France", AD: "Andorra", LI: "Liechtenstein", JE: "Jersey",
+    IM: "Isle of Man", GG: "Guernsey", SK: "Slovakia", CZ: "Czechia", NO: "Norway", VA: "Vatican City", SM: "San Marino",
+    IT: "Italy", SI: "Slovenia", ME: "Montenegro", HR: "Croatia", BA: "Bosnia and Herzegovina", AO: "Angola", NA: "Namibia",
+    SH: "Saint Helena", BV: "Bouvet Island", BB: "Barbados", CV: "Cabo Verde", GY: "Guyana", GF: "French Guiana", SR: "Suriname",
+    PM: "Saint Pierre and Miquelon", GL: "Greenland", PY: "Paraguay", UY: "Uruguay", BR: "Brazil", FK: "Falkland Islands",
+    GS: "South Georgia and the South Sandwich Islands", JM: "Jamaica", DO: "Dominican Republic", CU: "Cuba", MQ: "Martinique",
+    BS: "Bahamas", BM: "Bermuda", AI: "Anguilla", TT: "Trinidad and Tobago", KN: "St Kitts and Nevis", DM: "Dominica",
+    AG: "Antigua and Barbuda", LC: "Saint Lucia", TC: "Turks and Caicos Islands", AW: "Aruba", VG: "British Virgin Islands",
+    VC: "St Vincent and Grenadines", MS: "Montserrat", MF: "Saint Martin", BL: "Saint Barthélemy", GP: "Guadeloupe",
+    GD: "Grenada", KY: "Cayman Islands", BZ: "Belize", SV: "El Salvador", GT: "Guatemala", HN: "Honduras", NI: "Nicaragua",
+    CR: "Costa Rica", VE: "Venezuela", EC: "Ecuador", CO: "Colombia", PA: "Panama", HT: "Haiti", AR: "Argentina", CL: "Chile",
+    BO: "Bolivia", PE: "Peru", MX: "Mexico", PF: "French Polynesia", PN: "Pitcairn Islands", KI: "Kiribati", TK: "Tokelau",
+    TO: "Tonga", WF: "Wallis and Futuna", WS: "Samoa", NU: "Niue", MP: "Northern Mariana Islands", GU: "Guam", PR: "Puerto Rico",
+    VI: "U.S. Virgin Islands", UM: "U.S. Outlying Islands", AS: "American Samoa", CA: "Canada", US: "United States",
+    PS: "Palestine", RS: "Serbia", AQ: "Antarctica", SX: "Sint Maarten", CW: "Curaçao", BQ: "Bonaire", SS: "South Sudan"
+}
+
+export function getCountryName(iso: string) {
+    return countryMap[iso] as string | undefined;
+}

dashboard/composables/useCustomDialog.ts

@@ -16,7 +16,7 @@ export type CustomDialogOptions = {
     params?: any,
     width?: string,
     height?: string,
-    closable?: boolean
+    closable?: boolean,
 }
 
 function openDialogEx(component: Component, options?: CustomDialogOptions) {

dashboard/composables/useCustomFetch.ts

@@ -1,18 +1,20 @@
-import type { StringExpressionOperator } from "mongoose";
 
 type RefOrPrimitive<T> = T | Ref<T> | ComputedRef<T>
 
 export type CustomOptions = {
     useSnapshotDates?: boolean,
+    useActiveDomain?: boolean,
     useActivePid?: boolean,
+    useTimeOffset?: boolean,
     slice?: RefOrPrimitive<string>,
     limit?: RefOrPrimitive<number | string>,
-    custom?: Record<string, RefOrPrimitive<string>>
+    custom?: Record<string, RefOrPrimitive<string>>,
 }
 
 const { token } = useAccessToken();
 const { projectId } = useProject();
 const { safeSnapshotDates } = useSnapshot()
+const { domain } = useDomain();
 
 function getValueFromRefOrPrimitive<T>(data?: T | Ref<T> | ComputedRef<T>) {
     if (!data) return;
@@ -23,9 +25,11 @@ function getValueFromRefOrPrimitive<T>(data?: T | Ref<T> | ComputedRef<T>) {
 export function useComputedHeaders(customOptions?: CustomOptions) {
     const useSnapshotDates = customOptions?.useSnapshotDates || true;
     const useActivePid = customOptions?.useActivePid || true;
+    const useTimeOffset = customOptions?.useTimeOffset || true;
+    const useActiveDomain = customOptions?.useActiveDomain || true;
 
     const headers = computed<Record<string, string>>(() => {
-
+        // console.trace('Computed recalculated');
         const parsedCustom: Record<string, string> = {}
         const customKeys = Object.keys(customOptions?.custom || {});
         for (const key of customKeys) {
@@ -37,11 +41,15 @@ export function useComputedHeaders(customOptions?: CustomOptions) {
             'x-pid': useActivePid ? (projectId.value ?? '') : '',
             'x-from': useSnapshotDates ? (safeSnapshotDates.value.from ?? '') : '',
             'x-to': useSnapshotDates ? (safeSnapshotDates.value.to ?? '') : '',
+            'x-time-offset': useTimeOffset ? (new Date().getTimezoneOffset().toString()) : '',
             'x-slice': getValueFromRefOrPrimitive(customOptions?.slice) ?? '',
             'x-limit': getValueFromRefOrPrimitive(customOptions?.limit)?.toString() ?? '',
+            'x-domain': useActiveDomain ? (domain.value ?? '') : '',
             ...parsedCustom
         }
     })
 
+
+
     return headers;
 }

dashboard/composables/useDomain.ts

@@ -0,0 +1,47 @@
+
+
+const { token } = useAccessToken();
+const { projectId } = useProject();
+
+const domainsRequest = useFetch<{ _id: string, visits: number }[]>('/api/domains/list', {
+    headers: computed(() => {
+        return {
+            'Authorization': `Bearer ${token.value}`,
+            'x-pid': projectId.value || ''
+        }
+    })
+});
+
+function refreshDomains() {
+    domainsRequest.refresh();
+}
+
+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) || [])
+    ]
+})
+
+
+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;
+})
+
+function setActiveDomain(domain: string) {
+    activeDomain.value = domain;
+}
+
+export function useDomain() {
+    return { domainList, domain, setActiveDomain, refreshDomains, refreshingDomains }
+}

dashboard/composables/useDrawer.ts

@@ -0,0 +1,34 @@
+
+const drawerVisible = ref<boolean>(false);
+const drawerComponent = ref<Component>();
+
+const drawerClasses = ref<string>('')
+
+type ComponentType = "DOCS" | "PRICING";
+
+async function loadComponent(component: ComponentType): Promise<Component> {
+    switch (component) {
+        case "DOCS":
+            const DrawerDocs = await import("../components/drawer/Docs.vue");
+            return DrawerDocs.default;
+        case "PRICING":
+            const DrawerPricing = await import("../components/drawer/Pricing.vue");
+            return DrawerPricing.default;
+        default:
+            throw new Error("Unknown component type");
+    }
+}
+
+async function showDrawer(component: ComponentType, classes: string = "") {
+    drawerComponent.value = await loadComponent(component);
+    drawerVisible.value = true;
+    drawerClasses.value = classes;
+}
+
+function hideDrawer() {
+    drawerVisible.value = false;
+}
+
+export function useDrawer() {
+    return { drawerClasses, drawerVisible, drawerComponent, showDrawer, hideDrawer };
+}

dashboard/composables/usePricingDrawer.ts

@@ -1,9 +0,0 @@
-
-
-
-const pricingDrawerVisible = ref<boolean>(false);
-
-
-export function usePricingDrawer() {
-    return { visible: pricingDrawerVisible };
-}

dashboard/composables/useProject.ts

@@ -1,7 +1,7 @@
 
 
-import type { TProject } from "@schema/ProjectSchema";
-import { ProjectSnapshotModel } from "@schema/ProjectSnapshot";
+import type { TProject } from "@schema/project/ProjectSchema";
+import { ProjectSnapshotModel } from "@schema/project/ProjectSnapshot";
 
 const { token } = useAccessToken();
 

dashboard/composables/useSelfhosted.ts

@@ -0,0 +1,7 @@
+
+
+const app = useRuntimeConfig();
+
+export function useSelfhosted() {
+    return app.public.SELFHOSTED.toString() === 'TRUE' || app.public.SELFHOSTED.toString() === 'true';
+}

dashboard/composables/useSnapshot.ts

@@ -1,5 +1,6 @@
-import type { TProjectSnapshot } from "@schema/ProjectSnapshot";
-
+import type { TProjectSnapshot } from "@schema/project/ProjectSnapshot";
+import { getDefaultSnapshots, type GenericSnapshot } from "./snapshots/BaseSnapshots";
+import * as fns from 'date-fns';
 
 const { projectId, project } = useProject();
 
@@ -9,59 +10,20 @@ const headers = computed(() => {
         'x-pid': projectId.value ?? ''
     }
 });
-const remoteSnapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', {
-    headers
-});
+
+const remoteSnapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', { headers });
 
 watch(project, async () => {
     await remoteSnapshots.refresh();
-    snapshot.value = isLiveDemo.value ? snapshots.value[0] : snapshots.value[1];
+    snapshot.value = isLiveDemo.value ? snapshots.value[3] : snapshots.value[3];
 });
 
-const snapshots = computed(() => {
-
-    const getDefaultSnapshots: () => TProjectSnapshot[] = () => [
-        {
-            project_id: project.value?._id as any,
-            _id: 'default0' as any,
-            name: 'All',
-            from: new Date(project.value?.created_at || 0),
-            to: new Date(Date.now()),
-            color: '#CCCCCC'
-        },
-        {
-            project_id: project.value?._id as any,
-            _id: 'default1' as any,
-            name: 'Last month',
-            from: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30),
-            to: new Date(Date.now()),
-            color: '#00CC00'
-        },
-        {
-            project_id: project.value?._id as any,
-            _id: 'default2' as any,
-            name: 'Last week',
-            from: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
-            to: new Date(Date.now()),
-            color: '#0F02D2'
-        },
-        {
-            project_id: project.value?._id as any,
-            _id: 'default3' as any,
-            name: 'Last day',
-            from: new Date(Date.now() - 1000 * 60 * 60 * 24),
-            to: new Date(Date.now()),
-            color: '#CC11CC'
-        }
-    ]
-
-    return [
-        ...getDefaultSnapshots(),
-        ...(remoteSnapshots.data.value || [])
-    ];
+const snapshots = computed<GenericSnapshot[]>(() => {
+    const defaultSnapshots: GenericSnapshot[] = project.value?._id ? getDefaultSnapshots(project.value._id as any, project.value.created_at) : [];
+    return [...defaultSnapshots, ...(remoteSnapshots.data.value || [])];
 })
 
-const snapshot = ref<TProjectSnapshot>(isLiveDemo.value ? snapshots.value[0] : snapshots.value[1]);
+const snapshot = ref<GenericSnapshot>(snapshots.value[3]);
 
 const safeSnapshotDates = computed(() => {
     const from = new Date(snapshot.value?.from || 0).toISOString();
@@ -75,8 +37,8 @@ async function updateSnapshots() {
 
 const snapshotDuration = computed(() => {
     const from = new Date(snapshot.value?.from || 0).getTime();
-    const to = new Date(snapshot.value?.to || 0).getTime();
-    return (to - from) / (1000 * 60 * 60 * 24);
+    const to = new Date(snapshot.value?.to || 0).getTime() + 1000;
+    return fns.differenceInDays(to, from);
 });
 
 export function useSnapshot() {

dashboard/composables/useSupabase.ts

@@ -1,125 +0,0 @@
-
-
-import type { TSupabaseIntegration } from "@schema/integrations/SupabaseIntegrationSchema";
-import { createClient, SupabaseClient } from "@supabase/supabase-js";
-
-import { format } from 'date-fns';
-
-const activeProjectId = useActiveProjectId();
-
-
-const computedHeaders = computed<Record<string, string>>(() => {
-    const signedHeaders = signHeaders();
-    return {
-        'x-pid': activeProjectId.data.value || '',
-        'Authorization': signedHeaders.headers.Authorization
-    }
-})
-
-const integrationsCredentials = useFetch(`/api/integrations/credentials/get`, {
-    headers: computedHeaders,
-    onResponse: (e) => {
-        supabaseUrl.value = e.response._data.supabase.url || '';
-        supabaseAnonKey.value = e.response._data.supabase.anon_key || '';
-        supabaseServiceRoleKey.value = e.response._data.supabase.service_role_key || '';
-    }
-});
-
-const supabaseUrl = ref<string>('');
-const supabaseAnonKey = ref<string>('');
-const supabaseServiceRoleKey = ref<string>('');
-
-const supabaseIntegrations = useFetch<TSupabaseIntegration[]>('/api/integrations/supabase/list', { headers: computedHeaders })
-
-
-const subabaseClientData: { client: SupabaseClient | undefined } = {
-    client: undefined
-}
-
-async function updateIntegrationsCredentails(data: { supabase_url: string, supabase_anon_key: string, supabase_service_role_key: string }) {
-    try {
-        await $fetch(`/api/integrations/credentials/${activeProjectId.data.value}/update`, {
-            ...signHeaders({ 'Content-Type': 'application/json' }),
-            method: 'POST',
-            body: JSON.stringify({
-                supabase_url: data.supabase_url,
-                supabase_anon_key: data.supabase_anon_key,
-                supabase_service_role_key: data.supabase_service_role_key
-            }),
-        });
-        integrationsCredentials.refresh();
-        return { ok: true, error: '' }
-    } catch (ex: any) {
-        return { ok: false, error: ex.message.toString() };
-    }
-
-}
-
-function createSupabaseUrl(supabaseUrl: string) {
-    let result = supabaseUrl;
-    if (!result.includes('https://')) result = `https://${result}`;
-    if (!result.endsWith('.supabase.co')) result = `${result}.supabase.co`;
-    return result;
-}
-
-
-async function testConnection() {
-    const url = createSupabaseUrl(supabaseUrl.value);    
-    subabaseClientData.client = createClient(url, supabaseAnonKey.value);
-    const res = await subabaseClientData.client.from('_t_e_s_t_').select('*').limit(1);
-    if (res.error?.message.startsWith('TypeError')) return false;
-    return true;
-}
-
-
-
-type GroupBy = 'day' | 'month';
-
-const groupByDate = (data: string[], groupBy: GroupBy) => {
-    return data.reduce((acc, item) => {
-        const date = new Date(item);
-        const dateKey = groupBy === 'day'
-            ? format(date, 'yyyy-MM-dd') // Group by day
-            : format(date, 'yyyy-MM');    // Group by month
-
-        if (!acc[dateKey]) { acc[dateKey] = []; }
-
-        acc[dateKey].push(item);
-        return acc;
-    }, {} as Record<string, string[]>);
-}
-
-async function getRemoteData(table: string, xField: string, yMode: string, from: string, to: string, slice: string) {
-    const url = createSupabaseUrl(supabaseUrl.value);
-    subabaseClientData.client = createClient(url, supabaseAnonKey.value);
-    const res = await subabaseClientData.client.from(table).select(xField)
-        .filter(xField, 'gte', from)
-        .filter(xField, 'lte', to);
-
-    if (res.error) return { error: res.error.message };
-
-    const grouped = groupByDate(res.data.map((e: any) => e.created_at) || [], slice as any);
-
-    const result: { labels: string[], data: number[] } = { labels: [], data: [] }
-
-    for (const key in grouped) {
-        result.labels.push(key);
-        result.data.push(grouped[key].length);
-    }
-
-
-    return { result };
-}
-
-export function useSupabase() {
-
-    return {
-        getRemoteData,
-        testConnection,
-        supabaseIntegrations, integrationsCredentials,
-        supabaseUrl, supabaseAnonKey,
-        supabaseServiceRoleKey,
-        updateIntegrationsCredentails
-    }
-
-}

dashboard/composables/useTextType.ts

@@ -0,0 +1,36 @@
+
+
+
+
+export function useTextType(options: { ms: number, increase: number }, onTickAction?: () => any) {
+
+    let interval: any;
+    const index = ref<number>(0);
+
+    function onTick() {
+        index.value += options.increase;
+        onTickAction?.();
+    }
+
+    function pause() {
+        if (interval) clearInterval(interval);
+    }
+
+    function resume() {
+        if (interval) clearInterval(interval);
+        interval = setInterval(() => onTick(), options.ms);
+    }
+
+    function stop() {
+        if (interval) clearTimeout(interval);
+    }
+
+    function start() {
+        index.value = 0;
+        if (interval) clearInterval(interval);
+        interval = setInterval(() => onTick(), options.ms);
+    }
+
+    return { start, stop, resume, pause, index, interval }
+
+}

dashboard/ecosystem.config.cjs

@@ -1,10 +0,0 @@
-module.exports = {
-    apps: [
-        {
-            name: 'Dashboard',
-            port: '3010',
-            exec_mode: 'fork',
-            script: './.output/server/index.mjs',
-        }
-    ]
-}

dashboard/layouts/dashboard.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 
-import type { Section } from '~/components/CVerticalNavigation.vue';
+import type { Section } from '~/components/layout/VerticalNavigation.vue';
 
 import { Lit } from 'litlyx-js';
+import { DialogFeedback } from '#components';
 
 const { userRoles, isLogged } = useLoggedUser();
 const { project } = useProject();
 
-const pricingDrawer = usePricingDrawer();
+const modal = useModal();
+
+const selfhosted = useSelfhosted();
 
 const sections: Section[] = [
     {
@@ -15,22 +18,33 @@ const sections: Section[] = [
         entries: [
             { label: 'Web Analytics', to: '/', icon: 'fal fa-table-layout' },
             { label: 'Custom Events', to: '/events', icon: 'fal fa-square-bolt' },
-            { label: 'AI Analyst', to: '/analyst', icon: 'fal fa-sparkles' },
-            { label: 'Security', to: '/security', icon: 'fal fa-shield' },
+            { label: 'Ask AI', to: '/analyst', icon: 'fal fa-sparkles' },
+
+            // { label: 'Security', to: '/security', icon: 'fal fa-shield', disabled: selfhosted },
             // { label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
             // { label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
             // { label: 'Integrations (soon)', to: '/integrations', icon: 'fal fa-cube', disabled: true },
-            { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
-            {
-                grow: true,
-                label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
-                action() { Lit.event('docs_clicked') },
-            },
-            {
-                label: 'Discord support', icon: 'fab fa-discord',
-                to: 'https://discord.gg/9cQykjsmWX',
-                external: true,
-            },
+
+            { grow: true, label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
+            // {
+            //     grow: true,
+            //     label: 'Leave a Feedback', icon: 'fal fa-message',
+            //     action() {
+            //         modal.open(DialogFeedback, {});
+            //     },
+            //     disabled: selfhosted
+            // },
+            // {
+            //     grow: true,
+            //     label: 'Documentation', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
+            //     action() { Lit.event('docs_clicked') },
+            // },
+            // {
+            //     grow: true,
+            //     label: 'Discord support', icon: 'fab fa-discord',
+            //     to: 'https://discord.gg/9cQykjsmWX',
+            //     external: true,
+            // },
             // {
             //     label: 'Slack support', icon: 'fab fa-slack',
             //     to: '#',
@@ -62,11 +76,11 @@ const { isOpen, close, open } = useMenu();
 
 
         <div
-            class="px-6 py-3 flex items-center justify-center shadow-[0_0_10px_#000000CC] z-[20] rounded-xl mx-2 my-2 lg:hidden">
+            class="px-6 py-3 flex items-center justify-center dark:bg-lyx-background-light z-[20] rounded-xl mx-2 my-2 lg:hidden">
             <i @click="open()" class="fas fa-bars text-[1.2rem] absolute left-6"></i>
-            <div class="nunito font-semibold text-[1.2rem]">
+            <!-- <div class="nunito font-semibold text-[1.2rem]">
                 Litlyx
-            </div>
+            </div> -->
         </div>
 
         <div class="flex h-full">
@@ -77,15 +91,15 @@ const { isOpen, close, open } = useMenu();
             </div>
 
 
-            <CVerticalNavigation :sections="sections">
-            </CVerticalNavigation>
+            <LayoutVerticalNavigation :sections="sections">
+            </LayoutVerticalNavigation>
 
 
-            <div class="overflow-hidden w-full bg-lyx-background relative h-full">
+            <div class="overflow-hidden w-full bg-lyx-lightmode-background dark:bg-lyx-background relative h-full">
 
                 <div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]">
                     <i
-                        class="z-[40] absolute right-12 top-8 fas fa-times text-text-sub text-[1.8rem] lg:text-[3rem]"></i>
+                        class="z-[40] absolute right-12 top-8 fas fa-times text-lyx-lightmode-text-dark dark:text-text-sub text-[1.8rem] lg:text-[3rem]"></i>
                 </div>
 
                 <div @click="closeDialog()" class="w-full h-full z-[35] absolute top-0 left-0 px-4 lg:px-60 py-20"
@@ -93,7 +107,12 @@ const { isOpen, close, open } = useMenu();
                     <DashboardDialogBarCard @click.stop="null" class="z-[36]"></DashboardDialogBarCard>
                 </div>
 
-                <slot></slot>
+                <LayoutTopNavigation class="flex"></LayoutTopNavigation>
+
+                <div class="h-full pb-[3rem]">
+                    <slot></slot>
+                </div>
+
             </div>
         </div>
 

dashboard/layouts/header.vue

@@ -23,12 +23,6 @@ const entries = [
 const loggedUser = useLoggedUser();
 const { setToken } = useAccessToken();
 
-function logout() {
-    loggedUser.value = { logged: false }
-    setToken('');
-    location.reload();
-}
-
 </script>
 
 

dashboard/middleware/01.client_auth.global.ts

@@ -45,7 +45,8 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
             to.path != '/login' &&
             to.path != '/register' &&
             to.path != '/live_demo' &&
-            to.path != '/jwt_login'
+            to.path != '/jwt_login' &&
+            to.path != '/forgot_password'
         ) {
             console.log('REDIRECT TO LOGIN', to.path);
             return '/login';

dashboard/nuxt.config.ts

@@ -15,20 +15,26 @@ export default defineNuxtConfig({
       autoprefixer: {},
     }
   },
+
   colorMode: {
     preference: 'dark',
   },
+
   devtools: {
     enabled: false
   },
+
   pages: true,
   ssr: false,
-  css: ['~/assets/scss/main.scss'],
+  css: [
+    '~/assets/main.css',
+    '~/assets/scss/main.scss',
+  ],
   alias: {
-    '@schema': fileURLToPath(new URL('../shared/schema', import.meta.url)),
-    '@services': fileURLToPath(new URL('../shared/services', import.meta.url)),
-    '@data': fileURLToPath(new URL('../shared/data', import.meta.url)),
-    '@functions': fileURLToPath(new URL('../shared/functions', import.meta.url)),
+    '@schema': fileURLToPath(new URL('./shared/schema', import.meta.url)),
+    '@services': fileURLToPath(new URL('./shared/services', import.meta.url)),
+    '@data': fileURLToPath(new URL('./shared/data', import.meta.url)),
+    '@functions': fileURLToPath(new URL('./shared/functions', import.meta.url)),
   },
   runtimeConfig: {
     MONGO_CONNECTION_STRING: process.env.MONGO_CONNECTION_STRING,
@@ -38,8 +44,7 @@ export default defineNuxtConfig({
     AI_ORG: process.env.AI_ORG,
     AI_PROJECT: process.env.AI_PROJECT,
     AI_KEY: process.env.AI_KEY,
-    EMAIL_SERVICE: process.env.EMAIL_SERVICE,
-    BREVO_API_KEY: process.env.BREVO_API_KEY,
+    EMAIL_SECRET: process.env.EMAIL_SECRET,
     AUTH_JWT_SECRET: process.env.AUTH_JWT_SECRET,
     GOOGLE_AUTH_CLIENT_ID: process.env.GOOGLE_AUTH_CLIENT_ID,
     GOOGLE_AUTH_CLIENT_SECRET: process.env.GOOGLE_AUTH_CLIENT_SECRET,
@@ -51,23 +56,31 @@ export default defineNuxtConfig({
     STRIPE_WH_SECRET_TEST: process.env.STRIPE_WH_SECRET_TEST,
     NOAUTH_USER_EMAIL: process.env.NOAUTH_USER_EMAIL,
     NOAUTH_USER_NAME: process.env.NOAUTH_USER_NAME,
+    MODE: process.env.MODE || 'NONE',
+    SELFHOSTED: process.env.SELFHOSTED || 'FALSE',
     public: {
       AUTH_MODE: process.env.AUTH_MODE,
-      GITHUB_CLIENT_ID: process.env.GITHUB_AUTH_CLIENT_ID || 'NONE'
+      GITHUB_CLIENT_ID: process.env.GITHUB_AUTH_CLIENT_ID || 'NONE',
+      SELFHOSTED: process.env.SELFHOSTED || 'FALSE',
     }
 
   },
+
   nitro: {
     plugins: ['~/server/init.ts']
   },
+
   plugins: [
     { src: '~/plugins/chartjs.ts', mode: 'client' }
   ],
+
   ...gooleSignInConfig,
   modules: ['@nuxt/ui', 'nuxt-vue3-google-signin'],
+
   devServer: {
     host: '0.0.0.0',
   },
+
   components: true,
-  extends: ['../lyx-ui']
-})
+  compatibilityDate: '2024-11-16'
+})

dashboard/package.json

@@ -1,58 +1,59 @@
 {
-  "name": "nuxt-app",
+  "name": "dashboard",
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
+    "build": "npm run workspace:shared && nuxt build --dotenv .env.testmode",
+    "build:prod": "npm run workspace:shared && nuxt build --dotenv .env.prod",
+    "dev": "npm run workspace:shared && nuxt dev --dotenv .env.testmode",
+    "dev:prod": "npm run workspace:shared && nuxi dev --dotenv .env.prod",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test": "vitest",
     "docker-build": "docker build -t litlyx-dashboard -f Dockerfile ../",
     "docker-inspect": "docker run -it litlyx-dashboard sh",
-    "docker-run": "docker run -p 3000:3000 litlyx-dashboard"
+    "docker-run": "docker run -p 3000:3000 litlyx-dashboard",
+    "workspace:shared": "ts-node ../scripts/dashboard/shared.ts",
+    "workspace:deploy": "ts-node ../scripts/dashboard/deploy.ts"
   },
   "dependencies": {
-    "@getbrevo/brevo": "^2.2.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
-    "@supabase/supabase-js": "^2.45.4",
     "chart.js": "^3.9.1",
     "chartjs-chart-funnel": "^4.2.1",
     "chartjs-plugin-annotation": "^2.2.1",
-    "date-fns": "^3.6.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "google-auth-library": "^9.10.0",
     "googleapis": "^144.0.0",
     "highlight.js": "^11.10.0",
     "jsonwebtoken": "^9.0.2",
-    "litlyx-js": "^1.0.2",
-    "mongoose": "^8.3.2",
-    "nodemailer": "^6.9.13",
+    "litlyx-js": "^1.0.3",
+    "mongoose": "^8.9.5",
     "nuxt": "^3.11.2",
     "nuxt-vue3-google-signin": "^0.0.11",
     "openai": "^4.61.0",
     "pdfkit": "^0.15.0",
     "primevue": "^3.52.0",
-    "redis": "^4.6.13",
-    "sass": "^1.75.0",
-    "stripe": "^15.8.0",
+    "redis": "^4.7.0",
+    "sass": "^1.83.4",
+    "stripe": "^17.3.1",
     "v-calendar": "^3.1.2",
     "vue": "^3.4.21",
     "vue-chart-3": "^3.1.8",
     "vue-markdown-render": "^2.2.1",
     "vue-router": "^4.3.0",
-    "winston": "^3.14.2"
+    "winston": "^3.14.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@nuxt/components": "^2.2.1",
+    "@nuxt/types": "^2.18.1",
+    "@nuxt/typescript-build": "^3.0.2",
     "@nuxt/ui": "^2.15.2",
     "@types/jsonwebtoken": "^9.0.6",
-    "@types/markdown-it": "^14.1.2",
-    "@types/nodemailer": "^6.4.15",
     "@types/pdfkit": "^0.13.4",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "vitest": "^1.6.0"
+    "tailwindcss": "^3.4.3"
   }
-}
+}

dashboard/pages/admin/index.vue

@@ -4,109 +4,133 @@ import type { AdminProjectsList } from '~/server/api/admin/projects';
 
 definePageMeta({ layout: 'dashboard' });
 
-const { data: projects } = await useFetch<AdminProjectsList[]>('/api/admin/projects', signHeaders());
-const { data: counts } = await useFetch('/api/admin/counts', signHeaders());
+
+const filterPremium = ref<boolean>(false);
+const filterAppsumo = ref<boolean>(false);
 
 
-type TProjectsGrouped = {
-    user: {
-        name: string,
-        email: string,
-        given_name: string,
-        picture: string,
-        created_at: Date
-    },
-    projects: {
-        _id: string,
-        premium: boolean,
-        premium_type: number,
-        created_at: Date,
-        project_name: string,
-        total_visits: number,
-        total_events: number,
-        total_sessions: number
-    }[]
+
+const timeRange = ref<number>(9);
+
+function setTimeRange(n: number) {
+    timeRange.value = n;
 }
 
-const projectsGrouped = computed(() => {
-
-    if (!projects.value) return [];
-
-    const result: TProjectsGrouped[] = [];
-
-    for (const project of projects.value) {
-
-        if (!project.user) continue;
+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 target = result.find(e => e.user.email == project.user.email);
+const { data: projectsAggregatedResponseData } = await useFetch<AdminProjectsList[]>('/api/admin/projects', signHeaders());
+const { data: counts } = await useFetch(() => `/api/admin/counts?from=${timeRangeTimestamp.value}`, signHeaders());
 
-        if (target) {
 
-            target.projects.push({
-                _id: project._id,
-                created_at: project.created_at,
-                premium_type: project.premium_type,
-                premium: project.premium,
-                project_name: project.project_name,
-                total_events: project.total_events,
-                total_visits: project.total_visits,
-                total_sessions: project.total_sessions
-            });
-
-        } else {
-
-            const item: TProjectsGrouped = {
-                user: project.user,
-                projects: [{
-                    _id: project._id,
-                    created_at: project.created_at,
-                    premium: project.premium,
-                    premium_type: project.premium_type,
-                    project_name: project.project_name,
-                    total_events: project.total_events,
-                    total_visits: project.total_visits,
-                    total_sessions: project.total_sessions
-                }]
-            }
-
-            result.push(item);
-
-        }
-
-    }
-
-    result.sort((sa, sb) => {
-        const ca = sa.projects.reduce((a, e) => a + (e.total_visits + e.total_events), 0);
-        const cb = sb.projects.reduce((a, e) => a + (e.total_visits + e.total_events), 0);
-        return cb - ca;
-    })
-
-    return result;
-
-});
 
 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;
-    projects.value?.forEach(e => {
-        if (e.premium) premiums++;
+    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 projects.value?.reduce((a, e) => a + e.total_visits, 0) || 0;
+    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 projects.value?.reduce((a, e) => a + e.total_events, 0) || 0;
+    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) {
@@ -118,6 +142,29 @@ 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'
+    }
+
+}
+
+
 </script>
 
 
@@ -138,13 +185,26 @@ async function resetCount(project_id: string) {
         <div @click="onHideClicked()" v-if="!isAdminHidden"
             class="bg-menu hover:bg-menu/70 cursor-pointer flex gap-2 rounded-lg w-fit px-6 py-4 text-text-sub">
             <div class="text-text-sub/90"> <i class="far fa-eye"></i> </div>
-            <div> Hide </div>
+            <div> Hide from the bar </div>
         </div>
 
 
+
+        <Card class="p-2 flex gap-10 items-center justify-center">
+            <div :class="{ 'text-red-200': timeRange == 1 }" @click="setTimeRange(1)"> Last day </div>
+            <div :class="{ 'text-red-200': timeRange == 2 }" @click="setTimeRange(2)"> Last week </div>
+            <div :class="{ 'text-red-200': timeRange == 3 }" @click="setTimeRange(3)"> Last month </div>
+            <div :class="{ 'text-red-200': timeRange == 9 }" @click="setTimeRange(9)"> All </div>
+        </Card>
+
+        <Card class="p-2 flex gap-10 items-center justify-center">
+            <UCheckbox v-model="filterPremium" label="Filter Premium"></UCheckbox>
+            <UCheckbox v-model="filterAppsumo" label="Filter Appsumo"></UCheckbox>
+        </Card>
+
         <Card class="p-4">
 
-            <div class="grid grid-cols-2">
+            <div class="grid grid-cols-2 gap-1">
                 <div>
                     Users: {{ counts?.users }}
                 </div>
@@ -154,6 +214,10 @@ async function resetCount(project_id: string) {
                 <div>
                     Total visits: {{ formatNumberK(totalVisits) }}
                 </div>
+                <div>
+                    Active: {{ activeProjects }} |
+                    Dead: {{ (counts?.projects || 0) - activeProjects }}
+                </div>
                 <div>
                     Total events: {{ formatNumberK(totalEvents) }}
                 </div>
@@ -162,33 +226,44 @@ async function resetCount(project_id: string) {
         </Card>
 
 
-        <div v-for="item of projectsGrouped" class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full relative">
+        <div v-for="item of projectsAggregated || []"
+            class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full relative">
             <div class="flex flex-col gap-6">
 
                 <div class="flex flex-col gap-1">
-                    <div> {{ item.user.email }} </div>
-                    <div> {{ item.user.name }} </div>
+                    <div> {{ item.email }} </div>
+                    <div> {{ item.name }} </div>
                 </div>
 
-                <div class="flex justify-evenly flex-col lg:flex-row gap-2 lg:gap-0">
-                    <div v-for="project of item.projects"
-                        class="lg:w-[30%] flex flex-col items-center bg-bg p-6 rounded-xl">
+                <div class="flex justify-evenly flex-col lg:grid lg:grid-cols-3 gap-2 lg:gap-4">
+
+                    <div v-for="project of item.projects" :class="{
+                        'outline outline-[2px] outline-yellow-400': isAppsumoType(project.premium_type)
+                    }" class="flex relative flex-col items-center bg-bg p-6 rounded-xl">
+
+                        <div class="absolute left-2 top-2 flex items-center gap-2">
+                            <div :class="getLogBg(project?.counts?.updated_at)" class="h-3 w-3 rounded-full"> </div>
+                            <div> {{ dateDiffDays(project?.counts?.updated_at || '0').toFixed(0) }} days </div>
+                        </div>
+
                         <div class="flex gap-4">
-                            <div class="font-bold"> {{ project.premium ? 'PREMIUM' : 'FREE' }} </div>
+                            <div class="font-bold">
+                                {{ project.premium ? 'PREMIUM' : 'FREE' }}
+                            </div>
                             <div class="text-text-sub/90">
                                 {{ new Date(project.created_at).toLocaleDateString('it-IT') }}
                             </div>
                         </div>
 
 
-                        <div class="text-ellipsis line-clamp-1"> {{ project.project_name }} </div>
+                        <div class="text-ellipsis line-clamp-1"> {{ project.name }} </div>
                         <div class="flex gap-2">
                             <div> Visits: </div>
-                            <div> {{ project.total_visits }} </div>
+                            <div> {{ formatNumberK(project.counts?.visits || 0) }} </div>
                             <div> Events: </div>
-                            <div> {{ project.total_events }} </div>
+                            <div> {{ formatNumberK(project.counts?.events || 0) }} </div>
                             <div> Sessions: </div>
-                            <div> {{ project.total_sessions }} </div>
+                            <div> {{ formatNumberK(project.counts?.sessions || 0) }} </div>
                         </div>
 
                         <div class="flex gap-4 items-center mt-4">

dashboard/pages/analyst.vue

@@ -4,13 +4,18 @@ import VueMarkdown from 'vue-markdown-render';
 
 definePageMeta({ layout: 'dashboard' });
 
+const selfhosted = useSelfhosted();
+
+const debugModeAi = ref<boolean>(false);
+
+const { userRoles } = useLoggedUser();
+
 const { project } = useProject();
 
 const { data: chatsList, refresh: reloadChatsList } = useFetch(`/api/ai/chats_list`, {
     headers: useComputedHeaders({ useSnapshotDates: false })
 });
 
-
 const viewChatsList = computed(() => (chatsList.value || []).toReversed());
 
 const { data: chatsRemaining, refresh: reloadChatsRemaining } = useFetch(`/api/ai/chats_remaining`, {
@@ -19,20 +24,87 @@ const { data: chatsRemaining, refresh: reloadChatsRemaining } = useFetch(`/api/a
 
 const currentText = ref<string>("");
 const loading = ref<boolean>(false);
+const canSend = ref<boolean>(true);
 
 const currentChatId = ref<string>("");
-const currentChatMessages = ref<{ role: string, content: string, charts?: any[] }[]>([]);
+const currentChatMessages = ref<{ role: string, content: string, charts?: any[], tool_calls?: any }[]>([]);
+const currentChatMessageDelta = ref<string>("");
+
+
+const typer = useTextType({ ms: 10, increase: 2 }, () => {
+    const cleanMessage = currentChatMessageDelta.value.replace(/\[(data:(.*?))\]/g, '');
+    if (typer.index.value >= cleanMessage.length) typer.pause();
+});
+
+onUnmounted(() => {
+    typer.stop();
+})
+
+const currentChatMessageDeltaTextVisible = computed(() => {
+    const cleanMessage = currentChatMessageDelta.value.replace(/\[(data:(.*?))\]/g, '');
+    const textVisible = cleanMessage.substring(0, typer.index.value);
+    setTimeout(() => scrollToBottom(), 1);
+    return textVisible;
+});
+
+const currentChatMessageDeltaShowLoader = computed(() => {
+    const lastData = currentChatMessageDelta.value.match(/\[(data:(.*?))\]$/);
+    return lastData != null;
+});
 
 const scroller = ref<HTMLDivElement | null>(null);
 
+
+async function pollSendMessageStatus(chat_id: string, times: number, updateStatus: (status: string) => any) {
+
+    if (times > 100) return;
+
+    const res = await $fetch(`/api/ai/${chat_id}/status`, {
+        headers: useComputedHeaders({
+            useSnapshotDates: false,
+        }).value
+    });
+    if (!res) throw Error('Error during status request');
+
+    updateStatus(res.status);
+
+
+    typer.resume();
+
+
+    if (res.completed === false) {
+        setTimeout(() => pollSendMessageStatus(chat_id, times + 1, updateStatus), (times > 10 ? 2000 : 1000));
+    } else {
+
+        canSend.value = true;
+
+        typer.stop();
+
+        const messages = await $fetch(`/api/ai/${chat_id}/get_messages`, {
+            headers: useComputedHeaders({ useSnapshotDates: false }).value
+        });
+        if (!messages) return;
+
+        currentChatMessages.value = messages.map(e => ({ ...e, charts: e.charts.map(k => JSON.parse(k)) })) as any;
+        currentChatMessageDelta.value = '';
+
+        loading.value = false;
+    }
+
+}
+
 async function sendMessage() {
 
+    if (canSend.value === false) return;
+
     if (loading.value) return;
     if (!project.value) return;
 
+    if (currentText.value.length == 0) return;
+
     loading.value = true;
 
-    const body: any = { text: currentText.value }
+    const body: any = { text: currentText.value, timeOffset: new Date().getTimezoneOffset() }
     if (currentChatId.value) body.chat_id = currentChatId.value
 
     currentChatMessages.value.push({ role: 'user', content: currentText.value });
@@ -43,45 +115,63 @@ async function sendMessage() {
 
     try {
 
-        const res = await $fetch(`/api/ai/send_message`, {
-            method: 'POST',
-            body: JSON.stringify(body),
-            headers: useComputedHeaders({
-                useSnapshotDates: false,
-                custom: { 'Content-Type': 'application/json' }
-            }).value
-        });
+        canSend.value = false;
 
-        currentChatMessages.value.push({ role: 'assistant', content: res.content || 'nocontent', charts: res.charts.map(e => JSON.parse(e)) });
+        const res = await $fetch<{ chat_id: string }>(`/api/ai/send_message`, { method: 'POST', body: JSON.stringify(body), headers: useComputedHeaders({ useSnapshotDates: false, custom: { 'Content-Type': 'application/json' } }).value });
+        currentChatId.value = res.chat_id;
 
         await reloadChatsRemaining();
         await reloadChatsList();
-        currentChatId.value = chatsList.value?.at(-1)?._id.toString() || '';
+
+        await new Promise(e => setTimeout(e, 200));
+
+
+        typer.start();
+
+        await pollSendMessageStatus(res.chat_id, 0, status => {
+            if (!status) return;
+            if (status.length > 0) loading.value = false;
+            currentChatMessageDelta.value = status;
+        });
+
 
 
     } catch (ex: any) {
+
         if (ex.message.includes('CHAT_LIMIT_REACHED')) {
             currentChatMessages.value.push({
                 role: 'assistant',
-                content: 'You have reached your current tier chat limit.\n Upgrade to an higher tier. <a style="color: blue; text-decoration: underline;" href="/plans"> Upgrade now. </a>',
+                content: `Chat limit reached.
+                Upgrade your plan to continue chatting.`
             });
+        } else if (ex.message.includes('Unauthorized')) {
+            currentChatMessages.value.push({
+                role: 'assistant',
+                content: 'To use AI you need to provide AI_ORG, AI_PROJECT and AI_KEY in docker compose',
+            });
+        } else {
+            currentChatMessages.value.push({ role: 'assistant', content: ex.message, });
         }
+        loading.value = false;
+
+        canSend.value = true;
+
     }
 
 
     setTimeout(() => scrollToBottom(), 1);
 
-
-    loading.value = false;
-
-
 }
 
 async function openChat(chat_id?: string) {
     menuOpen.value = false;
     if (!project.value) return;
 
+    typer.stop();
+
+    canSend.value = true;
     currentChatMessages.value = [];
+    currentChatMessageDelta.value = '';
 
     if (!chat_id) {
         currentChatId.value = '';
@@ -89,7 +179,7 @@ async function openChat(chat_id?: string) {
     }
     currentChatId.value = chat_id;
     const messages = await $fetch(`/api/ai/${chat_id}/get_messages`, {
-        headers: useComputedHeaders({useSnapshotDates:false}).value
+        headers: useComputedHeaders({ useSnapshotDates: false }).value
     });
     if (!messages) return;
 
@@ -117,10 +207,10 @@ function onKeyDown(e: KeyboardEvent) {
 const menuOpen = ref<boolean>(false);
 
 const defaultPrompts = [
-    "Create a line chart with this data: \n[100, 200, 30, 300, 500, 40]",
-    "Create a chart with Events (bar) and Visits (line) data from last week.",
+    "What can you do and how can you help me ?",
+    "Show me an example line chart with random data",
     "How many visits did I get last week?",
-    "Create a line chart of last week's visits."
+    "Create a line chart of last week's visits"
 ]
 
 async function deleteChat(chat_id: string) {
@@ -130,14 +220,35 @@ async function deleteChat(chat_id: string) {
     if (currentChatId.value === chat_id) {
         currentChatId.value = "";
         currentChatMessages.value = [];
+        currentChatMessageDelta.value = '';
     }
     await $fetch(`/api/ai/${chat_id}/delete`, {
-        headers: useComputedHeaders({useSnapshotDates:false}).value
+        headers: useComputedHeaders({ useSnapshotDates: false }).value
     });
     await reloadChatsList();
 }
 
-const { visible: pricingDrawerVisible } = usePricingDrawer()
+const { showDrawer } = useDrawer();
+
+
+async function clearAllChats() {
+    const sure = confirm(`Are you sure to delete all ${(chatsList.value?.length || 0)} chats ?`);
+    if (!sure) return;
+    await $fetch(`/api/ai/delete_all_chats`, {
+        headers: useComputedHeaders({ useSnapshotDates: false }).value
+    });
+    await reloadChatsList();
+
+    menuOpen.value = false;
+    typer.stop();
+    canSend.value = true;
+    currentChatMessages.value = [];
+    currentChatMessageDelta.value = '';
+    currentChatId.value = '';
+
+
+}
+
 
 </script>
 
@@ -148,6 +259,7 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
             <div class="flex-[5] py-8 flex h-full flex-col items-center relative overflow-y-hidden">
 
+
                 <div class="flex flex-col items-center xl:mt-[20vh] px-8 xl:px-28"
                     v-if="currentChatMessages.length == 0">
                     <div class="w-[7rem] xl:w-[10rem]">
@@ -158,35 +270,55 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
                     </div>
                     <div class="flex flex-col xl:grid xl:grid-cols-2 gap-4 mt-6">
                         <div v-for="prompt of defaultPrompts" @click="currentText = prompt"
-                            class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
+                            class="
+                            bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none
+                            cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
                             {{ prompt }}
                         </div>
                     </div>
                 </div>
 
+
                 <div ref="scroller" class="flex flex-col w-full gap-6 px-6 xl:px-28 overflow-y-auto pb-20">
 
-                    <div class="flex w-full flex-col" v-for="message of currentChatMessages">
+                    <div class="flex w-full flex-col" v-for="(message, messageIndex) of currentChatMessages">
 
-                        <div class="flex justify-end w-full poppins text-[1.1rem]" v-if="message.role === 'user'">
-                            <div class="bg-lyx-widget-light px-5 py-3 rounded-lg">
+                        <div v-if="message.role === 'user'" class="flex justify-end w-full poppins text-[1.1rem]">
+                            <div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light px-5 py-3 rounded-lg">
                                 {{ message.content }}
                             </div>
                         </div>
-                        <div class="flex items-center gap-3 justify-start w-full poppins text-[1.1rem]"
-                            v-if="message.role === 'assistant' && message.content">
+
+                        <div v-if="message.role === 'assistant' && (debugModeAi ? true : message.content)"
+                            class="flex items-center gap-3 justify-start w-full poppins text-[1.1rem]">
                             <div class="flex items-center justify-center shrink-0">
                                 <img class="h-[3.5rem] w-auto" :src="'analyst.png'">
                             </div>
-                            <div class="max-w-[70%] text-text/90 ai-message">
-                                <vue-markdown :source="message.content" :options="{
+                            <div class="max-w-[70%] text-lyx-lightmode-text dark:text-text/90 ai-message">
+
+                                <vue-markdown v-if="message.content" :source="message.content" :options="{
                                     html: true,
                                     breaks: true,
                                 }" />
-                            </div>
 
+
+                                <div v-if="debugModeAi && !message.content">
+                                    <div class="flex flex-col"
+                                        v-if="message.tool_calls && message.tool_calls.length > 0">
+                                        <div> {{ message.tool_calls[0].function.name }}</div>
+                                        <div> {{ message.tool_calls[0].function.arguments }} </div>
+                                    </div>
+                                </div>
+
+                                <div v-if="debugModeAi && !message.content"
+                                    class="text-[.8rem] flex gap-1 items-center w-fit hover:text-[#CCCCCC] cursor-pointer">
+                                    <i class="fas fa-info text-[.7rem]"></i>
+                                    <div class="mt-1">Debug</div>
+                                </div>
+                            </div>
                         </div>
 
+
                         <div v-if="message.charts && message.charts.length > 0"
                             class="flex items-center gap-3 justify-start w-full poppins text-[1.1rem] flex-col mt-4">
                             <div v-for="chart of message.charts" class="w-full">
@@ -198,6 +330,32 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
                     </div>
 
+
+
+                    <div class="flex items-center gap-3 justify-start w-full poppins text-[1.1rem]"
+                        v-if="currentChatMessageDelta">
+
+                        <div class="flex items-center justify-center shrink-0">
+                            <img class="h-[3.5rem] w-auto" :src="'analyst.png'">
+                        </div>
+
+                        <div class="max-w-[70%] text-text/90 ai-message">
+                            <div v-if="currentChatMessageDeltaShowLoader" class="flex items-center gap-1">
+                                <i class="fas fa-loader animate-spin"></i>
+                                <div> Loading </div>
+                            </div>
+                            <vue-markdown :source="currentChatMessageDeltaTextVisible" :options="{
+                                html: true,
+                                breaks: true,
+                            }" />
+                        </div>
+
+                    </div>
+
+
+
+
+
                     <div v-if="loading"
                         class="flex items-center mt-10 gap-3 justify-center w-full poppins text-[1.1rem]">
                         <div class="flex items-center justify-center">
@@ -210,9 +368,10 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
                 <div class="flex gap-2 items-center md:absolute fixed bottom-8 left-0 w-full px-10 xl:px-28">
                     <input @keydown="onKeyDown" v-model="currentText"
-                        class="bg-lyx-widget-light w-full focus:outline-none px-4 py-2 rounded-lg" type="text">
+                        class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light w-full dark:focus:outline-none px-4 py-2 rounded-lg outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none"
+                        type="text">
                     <div @click="sendMessage()"
-                        class="bg-lyx-widget-light hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
+                        class="bg-lyx-lightmode-widget-light hover:bg-lyx-lightmode-widget dark:bg-lyx-widget-light dark:hover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
                         <i class="far fa-arrow-up"></i>
                     </div>
                     <div @click="menuOpen = !menuOpen"
@@ -227,7 +386,8 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
             <div :class="{
                 'absolute top-0 left-0 w-full': menuOpen,
                 'hidden xl:flex': !menuOpen
-            }" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
+            }"
+                class="flex-[2] bg-lyx-lightmode-background border-l-[1px] dark:border-l-0 dark:bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
 
                 <div class="gap-2 flex flex-col">
                     <div class="xl:hidden absolute right-6 top-2 text-[1.5rem]">
@@ -235,23 +395,38 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
                     </div>
                 </div>
 
-                <div class="flex justify-between items-center pt-3">
+                <div :class="{ '!text-green-500': debugModeAi }" class="cursor-pointer text-red-500 w-fit"
+                    v-if="userRoles.isAdmin.value" @click="debugModeAi = !debugModeAi"> Debug mode </div>
+
+                <div class="flex pt-3 px-4">
                     <div class="flex items-center gap-2">
-                        <div class="bg-accent w-5 h-5 rounded-full animate-pulse">
-                        </div>
-                        <div class="manrope font-semibold text-text-dirty"> {{ chatsRemaining }} remaining requests
+                        <!-- <div class="bg-accent w-4 h-4 rounded-full animate-pulse">
+                        </div> -->
+                        <div class="manrope font-semibold text-lyx-lightmode-text dark:text-text-dirty">
+                            {{ chatsRemaining }} messages left
                         </div>
                     </div>
-                    <LyxUiButton type="primary" class="text-[.9rem] text-center " @click="pricingDrawerVisible = true">
+                    <div class="grow"></div>
+                    <LyxUiButton v-if="!selfhosted" type="primary" class="text-[.9rem] text-center "
+                        @click="showDrawer('PRICING')">
                         Upgrade
                     </LyxUiButton>
                 </div>
 
-                <div class="poppins font-semibold text-[1.1rem]"> History </div>
+                <div class="dark:bg-lyx-widget-light bg-lyx-lightmode-widget-light h-[1px]"></div>
+
+                <div class="flex items-center gap-4 px-4 mt-4">
+                    <div class="poppins font-semibold text-[1.1rem]"> History </div>
+                    <div class="grow"></div>
+                    <LyxUiButton v-if="chatsList && chatsList.length > 0" @click="clearAllChats()" type="secondary"
+                        class="text-center text-[.8rem]">
+                        Clear all chats
+                    </LyxUiButton>
+                </div>
 
                 <div class="px-2">
                     <div @click="openChat()"
-                        class="bg-lyx-widget-light cursor-pointer hover:bg-lyx-widget rounded-lg px-4 py-3 poppins flex gap-4 items-center">
+                        class="bg-lyx-lightmode-widget-light hover:bg-lyx-lightmode-widget dark:bg-lyx-widget-light cursor-pointer dark:hover:bg-lyx-widget rounded-lg px-4 py-3 poppins flex gap-4 items-center outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none">
                         <div> <i class="fas fa-plus"></i> </div>
                         <div> New chat </div>
                     </div>
@@ -261,7 +436,7 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
                 <div class="overflow-y-auto">
                     <div class="flex flex-col gap-2 px-2">
                         <div :class="{ '!bg-accent/60': chat._id.toString() === currentChatId }"
-                            class="flex text-lyx-text-dark text-[.9rem] font-light rounded-lg items-center gap-4 w-full px-4 bg-lyx-widget-light hover:bg-lyx-widget"
+                            class="flex text-lyx-lightmode-text-dark dark:text-lyx-text-dark text-[.9rem] font-light rounded-lg items-center gap-4 w-full px-4 bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none"
                             v-for="chat of viewChatsList">
                             <i @click="deleteChat(chat._id.toString())"
                                 class="far fa-trash hover:text-gray-300 cursor-pointer"></i>
@@ -295,9 +470,11 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
         font-weight: bold;
         margin-top: 1.5em;
         margin-bottom: 0.5em;
-        color: white;
     }
 
+    p:last-of-type {
+        margin-bottom: 0;
+    }
 
     p {
         line-height: 1.8;

dashboard/pages/dashboard/events.vue

@@ -7,6 +7,11 @@ definePageMeta({ layout: 'dashboard' });
 const { project } = useProject();
 
 const isPremium = computed(() => (project.value?.premium_type || 0) > 0);
+const selfhosted = useSelfhosted();
+const canDownload = computed(() => {
+    if (selfhosted) return true;
+    return isPremium.value;
+});
 
 const metricsInfo = ref<number>(0);
 
@@ -65,10 +70,10 @@ const showWarning = computed(() => {
 })
 
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 </script>
 
@@ -81,7 +86,7 @@ function goToUpgrade() {
     <div class="w-full h-dvh flex flex-col">
 
         <div v-if="creatingCsv"
-            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-black/60 backdrop-blur-[4px]">
+            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-lyx-lightmode-background-light dark:bg-black/60 backdrop-blur-[4px]">
             <div class="poppins text-[2rem]">
                 Creating csv...
             </div>
@@ -96,21 +101,21 @@ function goToUpgrade() {
             </div>
             <div class="w-[15rem] flex flex-col gap-0">
                 <USelectMenu :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
+                    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',
                     option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
+                        base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                     }
                 }" v-model="selectedTimeFrom" :options="options"></USelectMenu>
             </div>
 
-            <div v-if="isPremium" @click="downloadCSV()"
+            <div v-if="canDownload" @click="downloadCSV()"
                 class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-1 rounded-lg">
                 Download CSV
             </div>
 
-            <div v-if="!isPremium" @click="goToUpgrade()"
+            <div v-if="!canDownload" @click="goToUpgrade()"
                 class="bg-[#57c78f46] hover:bg-[#57c78f42] flex gap-4 items-center cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
                 <i class="far fa-lock"></i>
                 Upgrade plan for CSV
@@ -120,14 +125,14 @@ function goToUpgrade() {
 
 
         <UTable v-if="tableData" class="utable px-8" :ui="{
-            wrapper: 'overflow-auto w-full h-full',
-            thead: 'sticky top-0 bg-menu',
+             wrapper: 'overflow-auto w-full h-full',
+            thead: 'sticky top-0 bg-lyx-lightmode-background-light dark:bg-menu',
             td: {
-                color: 'text-[#ffffffb3]',
-                base: 'border-r border-l border-gray-300/20'
+                color: 'text-lyx-lightmode-text dark:text-[#ffffffb3]',
+                base: 'border-r border-l border-lyx-lightmode-widget dark:border-gray-300/20'
             },
-            th: { color: 'text-text-sub' },
-            tbody: 'divide-y divide-gray-300/20',
+            th: { color: 'text-lyx-lightmode-text dark:text-text-sub' },
+            tbody: 'divide-y divide-lyx-lightmode-widget dark:divide-gray-300/20',
             divide: '',
         }" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">
 

dashboard/pages/dashboard/visits.vue

@@ -7,11 +7,16 @@ definePageMeta({ layout: 'dashboard' });
 const { project } = useProject();
 
 const isPremium = computed(() => (project.value?.premium_type || 0) > 0);
+const selfhosted = useSelfhosted();
+const canDownload = computed(() => {
+    if (selfhosted) return true;
+    return isPremium.value;
+});
 
 const metricsInfo = ref<number>(0);
 
 const columns = [
-    { key: 'website', label: 'Website', sortable: true },
+    { key: 'website', label: 'Domain', sortable: true },
     { key: 'page', label: 'Page', sortable: true },
     { key: 'referrer', label: 'Referrer', sortable: true },
     { key: 'browser', label: 'Browser', sortable: true },
@@ -72,10 +77,10 @@ const showWarning = computed(() => {
     return options.indexOf(selectedTimeFrom.value) > 1
 })
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 
 </script>
@@ -86,7 +91,7 @@ function goToUpgrade() {
     <div class="w-full h-dvh flex flex-col">
 
         <div v-if="creatingCsv"
-            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-black/60 backdrop-blur-[4px]">
+            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-lyx-lightmode-background-light dark:bg-black/60 backdrop-blur-[4px]">
             <div class="poppins text-[2rem]">
                 Creating csv...
             </div>
@@ -101,21 +106,21 @@ function goToUpgrade() {
             </div>
             <div class="w-[15rem] flex flex-col gap-0">
                 <USelectMenu :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
+                    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',
                     option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
+                        base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                     }
                 }" v-model="selectedTimeFrom" :options="options"></USelectMenu>
             </div>
 
-            <div v-if="isPremium" @click="downloadCSV()"
+            <div v-if="canDownload" @click="downloadCSV()"
                 class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-1 rounded-lg">
                 Download CSV
             </div>
 
-            <div v-if="!isPremium" @click="goToUpgrade()"
+            <div v-if="!canDownload" @click="goToUpgrade()"
                 class="bg-[#57c78f46] hover:bg-[#57c78f42] flex gap-4 items-center cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
                 <i class="far fa-lock"></i>
                 Upgrade plan for CSV
@@ -126,13 +131,13 @@ function goToUpgrade() {
 
         <UTable v-if="tableData" class="utable px-8" :ui="{
             wrapper: 'overflow-auto w-full h-full',
-            thead: 'sticky top-0 bg-menu',
+            thead: 'sticky top-0 bg-lyx-lightmode-background-light dark:bg-menu',
             td: {
-                color: 'text-[#ffffffb3]',
-                base: 'border-r border-l border-gray-300/20'
+                color: 'text-lyx-lightmode-text dark:text-[#ffffffb3]',
+                base: 'border-r border-l border-lyx-lightmode-widget dark:border-gray-300/20'
             },
-            th: { color: 'text-text-sub' },
-            tbody: 'divide-y divide-gray-300/20',
+            th: { color: 'text-lyx-lightmode-text dark:text-text-sub' },
+            tbody: 'divide-y divide-lyx-lightmode-widget dark:divide-gray-300/20',
             divide: '',
         }" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">
 

dashboard/pages/events.vue

@@ -1,16 +1,30 @@
 <script lang="ts" setup>
 import EventsFunnelChart from '~/components/events/EventsFunnelChart.vue';
-
+import DateService, { type Slice } from '@services/DateService';
 
 definePageMeta({ layout: 'dashboard' });
 
-const selectLabelsEvents = [
+
+const { snapshotDuration } = useSnapshot();
+
+const selectedLabelIndex = ref<number>(1);
+
+const selectLabels: { label: string, value: Slice }[] = [
+    { label: 'Hour', value: 'hour' },
     { label: 'Day', value: 'day' },
     { label: 'Month', value: 'month' },
 ];
-const eventsStackedSelectIndex = ref<number>(0);
 
-const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeaders({ custom: { 'x-schema': 'events' } }), lazy: true });
+const selectLabelsAvailable = computed<{ label: string, value: Slice, disabled: boolean }[]>(() => {
+    return selectLabels.map(e => {
+        return { ...e, disabled: !DateService.canUseSliceFromDays(snapshotDuration.value, e.value)[0] }
+    });
+})
+
+const eventsData = await useFetch(`/api/data/count`, {
+    headers: useComputedHeaders({ custom: { 'x-schema': 'events' } }),
+    lazy: true
+});
 
 </script>
 
@@ -24,9 +38,6 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
                 <div>
                     Total events: {{ eventsData.data.value?.[0]?.count || '0' }}
                 </div>
-                <div v-if="(eventsData.data.value?.[0]?.count || 0) === 0">
-                    Waiting for your first event...
-                </div>
             </div>
             <div>
                 <LyxUiButton type="secondary" target="_blank" to="https://docs.litlyx.com/custom-events">
@@ -45,12 +56,14 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
             <CardTitled :key="refreshKey" class="p-4 xl:flex-[4] w-full h-full" title="Events"
                 sub="Events stacked bar chart.">
                 <template #header>
-                    <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
-                        :currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
+
+                    <SelectButton class="w-fit" @changeIndex="selectedLabelIndex = $event"
+                        :currentIndex="selectedLabelIndex" :options="selectLabelsAvailable">
                     </SelectButton>
+
                 </template>
                 <div class="h-full">
-                    <EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
+                    <EventsStackedBarChart :slice="(selectLabelsAvailable[selectedLabelIndex].value as any)">
                     </EventsStackedBarChart>
                 </div>
             </CardTitled>

dashboard/pages/forgot_password.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+
+definePageMeta({ layout: 'none' });
+
+const email = ref<string>("");
+
+const emailSended = ref<boolean>(false);
+
+const { createAlert } = useAlert();
+
+async function resetPassword() {
+
+    try {
+        const res = await $fetch('/api/user/password/reset', {
+            headers: { 'Content-Type': 'application/json' },
+            method: 'POST',
+            body: JSON.stringify({ email: email.value })
+        })
+
+        if (!res) throw Error('No response');
+
+        if (res.error) return createAlert('Error', res.message, 'far fa-triangle-exclamation', 5000);
+        emailSended.value = true;
+        return createAlert('Success', 'Email sent', 'far fa-circle-check', 5000);
+
+    } catch (ex) {
+        console.error(ex);
+        createAlert('Error', 'Internal error', 'far fa-triangle-exclamation', 5000);
+    }
+
+
+
+}
+
+</script>
+
+
+<template>
+
+    <div class="home w-full h-full">
+
+        <div class="flex h-full">
+
+            <div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]">
+
+                <div class="rotating-thing absolute top-0"></div>
+
+                <div class="mb-8 bg-black rounded-xl">
+                    <img class="w-[5rem]" :src="'logo.png'">
+                </div>
+
+                <div class="text-lyx-lightmode-text dark:text-lyx-text text-[2.2rem] font-bold poppins">
+                    Reset password
+                </div>
+
+                <div class="text-lyx-lightmode-text dark:text-lyx-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
+                    Enter your user account's verified email address and we will send you a temporary password.
+                </div>
+
+                <div class="mt-12">
+
+                    <div v-if="!emailSended" class="flex flex-col gap-2 z-[110]">
+
+
+                        <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>
+                        </div>
+
+                        <div class="flex justify-center mt-4">
+                            <LyxUiButton @click="resetPassword()" class="text-center z-[110]" type="primary">
+                                Reset password
+                            </LyxUiButton>
+                        </div>
+
+                        <NuxtLink to="/login"
+                            class="mt-4 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[110]">
+                            Go back
+                        </NuxtLink>
+
+
+                    </div>
+
+
+                    <div v-if="emailSended" class="mt-12 flex flex-col text-center text-[1.1rem] z-[100]">
+                        <div>
+                            Check your email inbox.
+                        </div>
+                        <RouterLink tag="div" to="/login"
+                            class="mt-6 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[110]">
+                            Go back
+                        </RouterLink>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="grow flex-1 items-center justify-center hidden lg:flex">
+
+                <!-- <GlobeSvg></GlobeSvg> -->
+
+                <img :src="'image-bg.png'" class="h-full py-6">
+
+            </div>
+        </div>
+
+
+        <!-- <div class="flex flex-col items-center justify-center mt-40 gap-20">
+            <div class="google-login text-gray-700" :class="{ disabled: !isReady }" @click="login">
+                <div class="icon">
+                    <i class="fab fa-google"></i>
+                </div>
+                <div> Continua con Google </div>
+            </div>
+        </div> -->
+
+    </div>
+
+</template>
+
+
+
+<style scoped lang="scss">
+.rotating-thing {
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    opacity: 0.15;
+    background: radial-gradient(51.24% 31.29% at 50% 50%, rgb(51, 58, 232) 0%, rgba(51, 58, 232, 0) 100%);
+    animation: 12s linear 0s infinite normal none running spin;
+}
+
+.google-login {
+    cursor: pointer;
+    font-weight: bold;
+    background-color: #fcefed;
+    padding: 1rem 2rem;
+    border-radius: 1rem;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    &.disabled {
+        filter: brightness(50%);
+    }
+
+    i {
+        font-size: 1.5rem;
+    }
+}
+</style>

dashboard/pages/index.vue

@@ -18,7 +18,6 @@ onMounted(async () => {
         const user = await $fetch<any>('/api/user/me', { headers: { 'Authorization': 'Bearer ' + token.value } })
         const loggedUser = useLoggedUser();
         loggedUser.user = user;
-        // setTimeout(() => {            location.reload();        }, 100);
     }
 
     if (justLogged.value) { setTimeout(() => { location.href = '/' }, 500) }
@@ -31,50 +30,43 @@ const firstInteraction = useFetch<boolean>('/api/project/first_interaction', {
 
 const showDashboard = computed(() => project.value && firstInteraction.data.value);
 
+const selfhosted = useSelfhosted();
+
 </script>
 
 <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="showDashboard">
 
-            <div class="w-full px-4 py-2 gap-2 flex flex-col">
-                <BannerLimitsInfo :key="refreshKey"></BannerLimitsInfo>
-                <BannerOffer :key="refreshKey"></BannerOffer>
+        <div v-if="showDashboard">
+             <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>
+            </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">
-                        <BarCardWebsites :key="refreshKey"></BarCardWebsites>
-                    </div>
                     <div class="flex-1">
                         <BarCardReferrers :key="refreshKey"></BarCardReferrers>
                     </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">
-                        <BarCardBrowsers :key="refreshKey"></BarCardBrowsers>
-                    </div>
-                    <div class="flex-1">
-                        <BarCardOperatingSystems :key="refreshKey"></BarCardOperatingSystems>
+                        <BarCardPages :key="refreshKey"></BarCardPages>
                     </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">
@@ -84,7 +76,19 @@ const showDashboard = computed(() => project.value && firstInteraction.data.valu
                         <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">
+                        <BarCardBrowsers :key="refreshKey"></BarCardBrowsers>
+                    </div>
+                    <div class="flex-1">
+                        <BarCardOperatingSystems :key="refreshKey"></BarCardOperatingSystems>
+                    </div>
+                </div>
+            </div> 
 
         </div>