fix admin panel + payment ok page

dashboard/assets/scss/main.scss

@@ -111,3 +111,11 @@ body {
 * {
   font-family: 'Nunito', var(--font-sans);
 }
+
+.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;
+}

dashboard/components/admin/Feedbacks.vue

@@ -1,6 +1,16 @@
 <script lang="ts" setup>
 
-const { data: feedbacks, pending: pendingFeedbacks } = useFetch<any[]>(() => `/api/admin/feedbacks`, signHeaders());
+const { data: feedbacks, pending: pendingFeedbacks, refresh } = useFetch<any[]>(() => `/api/admin/feedbacks`, signHeaders());
+
+
+async function deleteFeedback(id: string) {
+    await $fetch('/api/admin/delete_feedback', {
+        method: 'DELETE',
+        headers: useComputedHeaders({ custom: { 'Content-Type': 'application/json' } }).value,
+        body: JSON.stringify({ id })
+    });
+    refresh();
+}
 
 </script>
 
@@ -13,12 +23,20 @@ const { data: feedbacks, pending: pendingFeedbacks } = useFetch<any[]>(() => `/a
             <div v-if="feedbacks" class="flex flex-col-reverse gap-4 px-20">
                 <div class="flex flex-col text-center outline outline-[1px] outline-lyx-widget-lighter p-4 gap-2"
                     v-for="feedback of feedbacks">
-                    <div class="flex flex-col gap-1">
+                    <div>
+                        <div class="flex flex-col gap-1 items-center">
                             <div class="text-lyx-text-dark"> {{ feedback.user[0]?.email || 'DELETED USER' }} </div>
-                        <div class="text-lyx-text-dark"> {{ feedback.project[0]?.name || 'DELETED PROJECT' }} </div>
+                            <div class="text-lyx-text-dark flex gap-2 items-center">
+                                <div>{{ feedback.project[0]?.name || 'DELETED PROJECT' }}</div>
+                                <div @click="deleteFeedback(feedback._id.toString())" class="hover:text-red-200"><i
+                                        class="fas fa-trash"></i></div>
+                            </div>
+
                         </div>
                         {{ feedback.text }}
                     </div>
+
+                </div>
             </div>
 
 

dashboard/components/admin/Overview.vue

@@ -10,35 +10,17 @@ import { sub, format, isSameDay, type Duration, startOfDay, endOfDay } from 'dat
 const page = ref<number>(1);
 
 const ordersList = [
-    { label: 'created_at -->', id: '{ "created_at": 1 }' },
+    { label: 'Older', id: '{ "created_at": 1 }' },
-    { label: 'created_at <--', id: '{ "created_at": -1 }' },
+    { label: 'Newer', id: '{ "created_at": -1 }' },
 
-    { label: 'active -->', id: '{ "last_log_at": 1 }' },
+    { label: 'Less active', id: '{ "last_log_at": 1 }' },
-    { label: 'active <--', id: '{ "last_log_at": -1 }' },
+    { label: 'More active', id: '{ "last_log_at": -1 }' },
 
-    { label: 'visits -->', id: '{ "visits": 1 }' },
+    { label: 'Less usage', id: '{ "limit_total": 1 }' },
-    { label: 'visits <--', id: '{ "visits": -1 }' },
+    { label: 'More usage', id: '{ "limit_total": -1 }' },
 
-    { label: 'events -->', id: '{ "events": 1 }' },
+    { label: 'Smaller plan', id: '{ "premium_type": 1 }' },
-    { label: 'events <--', id: '{ "events": -1 }' },
+    { label: 'Bigger plan', id: '{ "premium_type": -1 }' },
-
-    { label: 'sessions -->', id: '{ "sessions": 1 }' },
-    { label: 'sessions <--', id: '{ "sessions": -1 }' },
-
-    { label: 'usage total -->', id: '{ "limit_total": 1 }' },
-    { label: 'usage total <--', id: '{ "limit_total": -1 }' },
-
-    { label: 'usage visits -->', id: '{ "limit_visits": 1 }' },
-    { label: 'usage visits <--', id: '{ "limit_visits": -1 }' },
-
-    { label: 'usage events -->', id: '{ "limit_events": 1 }' },
-    { label: 'usage events <--', id: '{ "limit_events": -1 }' },
-
-    { label: 'usage ai -->', id: '{ "limit_ai_messages": 1 }' },
-    { label: 'usage ai <--', id: '{ "limit_ai_messages": -1 }' },
-
-    { label: 'plan -->', id: '{ "premium_type": 1 }' },
-    { label: 'plan <--', id: '{ "premium_type": -1 }' },
 
 ]
 
@@ -190,7 +172,7 @@ const { uiMenu } = useSelectMenuStyle();
 
 
         <div
-            class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
+            class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[20rem]">
 
             <AdminOverviewProjectCard v-if="!pendingProjects" :key="project._id.toString()" :project="project"
                 class="w-[26rem]" v-for="project of projectsInfo?.projects" />

dashboard/components/admin/Users.vue

@@ -137,7 +137,7 @@ const { uiMenu } = useSelectMenuStyle();
 
 
         <div
-            class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
+            class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[16rem]">
 
             <AdminUsersUserCard v-if="!pendingUsers" :key="user._id.toString()" :user="user" class="w-[26rem]"
                 v-for="user of usersInfo?.users" />

dashboard/components/admin/dialog/ProjectDetails.vue

@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-import type { TAdminProject } from '~/server/api/admin/projects';
-
-const props = defineProps<{ pid: string }>();
-
-const { data: projectInfo, refresh, pending } = useFetch<{ domains: { _id: string }[], project: TAdminProject }>(
-    () => `/api/admin/project_info?pid=${props.pid}`,
-    signHeaders(),
-);
-</script>
-
-<template>
-
-    <div class="mt-6 h-full flex flex-col gap-10 w-full" v-if="!pending">
-
-        <div>
-            <LyxUiButton type="secondary" @click="refresh"> Refresh </LyxUiButton>
-        </div>
-
-        <div class="flex justify-center gap-10" v-if="projectInfo">
-
-            <AdminOverviewProjectCard :project="projectInfo.project" class="w-[30rem] shrink-0" />
-
-            <AdminMiniChart class="max-w-[40rem]" :pid="pid"></AdminMiniChart>
-        </div>
-
-        <div v-if="projectInfo" class="flex flex-col">
-
-            <div>Domains:</div>
-
-            <div class="flex flex-wrap gap-8 mt-8">
-
-                <div v-for="domain of projectInfo.domains">
-                    {{ domain._id }}
-                </div>
-
-            </div>
-
-        </div>
-
-    </div>
-
-    <div v-if="pending">
-        Loading...
-    </div>
-</template>
-
-<style scoped lang="scss"></style>

dashboard/components/admin/dialog/UserDetails.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { TAdminUserInfo } from '~/server/api/admin/user_info';
+
+
+const props = defineProps<{ user_id: string }>();
+
+const { data: userInfo, refresh, pending } = useFetch<{ projects: TAdminUserInfo }>(
+    () => `/api/admin/user_info?user_id=${props.user_id}`,
+    signHeaders(),
+);
+</script>
+
+<template>
+
+    <div class="mt-6 h-full flex flex-col gap-10 w-full overflow-y-auto pb-[10rem]" v-if="!pending">
+
+        <div>
+            <LyxUiButton type="secondary" @click="refresh"> Refresh </LyxUiButton>
+        </div>
+
+        <div class="flex justify-center gap-10 flex-wrap" v-if="userInfo">
+
+            <AdminOverviewProjectCard v-for="project of userInfo.projects" :project="project as any"
+                class="w-[30rem] shrink-0" />
+
+        </div>
+
+    </div>
+
+    <div v-if="pending">
+        Loading...
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

dashboard/components/admin/overview/ProjectCard.vue

@@ -3,18 +3,17 @@
 import type { TAdminProject } from '~/server/api/admin/projects';
 import { getPlanFromId } from '~/shared/data/PLANS';
 
-
+import { AdminDialogUserDetails } from '#components';
-import { AdminDialogProjectDetails } from '#components';
 
 const { openDialogEx } = useCustomDialog();
 
-function showProjectDetails(pid: string) {
+function showUserDetails(user_id: string) {
-    openDialogEx(AdminDialogProjectDetails, {
+    openDialogEx(AdminDialogUserDetails, {
-        params: { pid }
+        params: { user_id }
     })
 }
 
-const props = defineProps<{ project: TAdminProject }>();
+const props = defineProps<{ project: TAdminProject & { domains?: string[] } }>();
 
 
 const logBg = computed(() => {
@@ -69,9 +68,9 @@ const usageAiLabel = computed(() => {
         </div>
 
         <div class="flex gap-4 justify-center  text-[.9rem]">
-            <UTooltip :text="`PRICE_ID: ${project.premium_type}`">
+            <UTooltip :text="`PRICE_ID: ${project.premium[0].premium_type}`">
                 <div class="font-medium text-lyx-text-dark">
-                    {{ getPlanFromId(project.premium_type)?.TAG?.replace('APPSUMO', 'AS') ?? 'ERROR' }}
+                    {{ getPlanFromId(project.premium[0].premium_type)?.TAG?.replace('APPSUMO', 'AS') ?? 'ERROR' }}
                 </div>
             </UTooltip>
             <div class="text-lyx-text-darker">
@@ -79,9 +78,11 @@ const usageAiLabel = computed(() => {
             </div>
         </div>
 
-        <div class="flex gap-5 justify-center">
+        <div class="flex flex-col items-center py-1">
-            <div @click="showProjectDetails(project._id.toString())" class="font-medium hover:text-lyx-primary cursor-pointer">
+            <div class="text-center"> {{ project.name }} </div>
-                {{ project.name }}
+            <div v-if="project.user" @click="showUserDetails(project.premium[0].user_id.toString())"
+                class="font-medium hover:text-lyx-primary cursor-pointer text-center">
+                {{ project.user[0].email }}
             </div>
         </div>
 
@@ -128,6 +129,13 @@ const usageAiLabel = computed(() => {
 
         </div>
 
+        <LyxUiSeparator class="my-2" />
+
+        <div v-if="project.domains" class="flex flex-wrap gap-4">
+            <div v-for="domain of project.domains" class="hover:text-gray-200 cursor-pointer">
+                {{ domain }}
+            </div>
+        </div>
     </div>
 </template>
 

dashboard/components/admin/users/UserCard.vue

@@ -4,13 +4,13 @@ import type { TAdminProject } from '~/server/api/admin/projects';
 import type { TAdminUser } from '~/server/api/admin/users';
 import { getPlanFromId } from '~/shared/data/PLANS';
 
-import { AdminDialogProjectDetails } from '#components';
+import { AdminDialogUserDetails } from '#components';
 
 const { openDialogEx } = useCustomDialog();
 
-function showProjectDetails(pid: string) {
+function showUserDetails(user_id: string) {
-    openDialogEx(AdminDialogProjectDetails, {
+    openDialogEx(AdminDialogUserDetails, {
-        params: { pid }
+        params: { user_id }
     })
 }
 
@@ -31,34 +31,11 @@ const props = defineProps<{ user: TAdminUser }>();
         </div>
 
         <div class="flex gap-5 justify-center">
-            <div class="font-medium">
+            <div class="font-medium hover:text-blue-400 cursor-pointer" @click="showUserDetails(user._id.toString())">
                 {{ user.email }}
             </div>
         </div>
 
-        <LyxUiSeparator class="my-2" />
-
-        <div class="flex flex-col text-[.9rem]">
-            <div class="flex gap-2" v-for="project of user.projects">
-                <div class="text-lyx-text-darker">
-                    {{ new Date(project.created_at).toLocaleDateString('it-IT') }}
-                </div>
-                <UTooltip :text="`PRICE_ID: ${project.premium_type}`">
-                    <div class="font-medium text-lyx-text-dark">
-                        {{ getPlanFromId(project.premium_type)?.TAG?.replace('APPSUMO', 'AS') ?? 'ERROR' }}
-                    </div>
-                </UTooltip>
-
-                <div @click="showProjectDetails(project._id.toString())"
-                    class="ml-1 hover:text-lyx-primary cursor-pointer">
-                    {{ project.name }}
-                </div>
-
-            </div>
-
-        </div>
-
-
     </div>
 
     <!-- <div class="poppins outline outline-[1px] outline-lyx-widget-lighter p-3 rounded-md relative">

dashboard/components/dashboard/TopCards.vue

@@ -8,7 +8,7 @@ const { snapshot, safeSnapshotDates, snapshotDuration } = useSnapshot()
 
 const chartSlice = computed(() => {
     if (snapshotDuration.value <= 3) return 'hour' as Slice;
-    if (snapshotDuration.value <= 31 * 3) return 'day' as Slice;
+    if (snapshotDuration.value <= 31 * 2) return 'day' as Slice;
     return 'month' as Slice;
 });
 

dashboard/components/layout/VerticalBottomMenu.vue

@@ -79,6 +79,7 @@ const items = computed(() => {
             {
                 label: 'Admin',
                 icon: 'far fa-cat',
+                to: '/admin'
             },
             {
                 label: 'Logout',

dashboard/pages/payment_ok.vue

@@ -2,29 +2,43 @@
 
 definePageMeta({ layout: 'none' });
 
+const colorMode = useColorMode();
+
 </script>
 
 
 <template>
 
-    <div class="w-full h-full">
+    <div
+        class="w-full h-full flex flex-col items-center pt-[35vh] dark:bg-lyx-background bg-lyx-lightmode-background">
 
-
+        <div>
-        <div class="flex items-center h-full flex-col gap-4">
+            <img v-if="colorMode.value === 'dark'" class="w-[9rem]" :src="'logo-white.png'">
-
+            <img v-if="colorMode.value === 'light'" class="w-[9rem]" :src="'logo-black.png'">
-            <div class="text-accent mt-[20vh] poppins font-semibold text-[1.5rem]">
-                Payment success
         </div>
+        <div class="poppins text-[1.2rem] text-center font-semibold mt-10">
+            Payment successful
+        </div>
+        <div class="mt-2 dark:text-lyx-text-dark text-lyx-lightmode-text-dark">
+            Thanks for choosing Litlyx. You're ready to go!
+        </div>
+        <LyxUiButton type="primary" class="mt-10 py-2" to="/?just_logged=true">
+            Go back to dashboard
+        </LyxUiButton>
 
-            <div class="poppins">
+        <!-- <div class="flex items-center h-full flex-col gap-4"> -->
+
+
+        <!-- <div class="poppins">
                 We hope Litlyx can help you make better metrics-driven decision to help your business.
             </div>
 
-            <NuxtLink to="/?just_logged=true" class="text-accent mt-10 bg-menu px-6 py-2 rounded-lg hover:bg-black font-semibold poppins cursor-pointer">
+            <NuxtLink to="/?just_logged=true"
+                class="text-accent mt-10 bg-menu px-6 py-2 rounded-lg hover:bg-black font-semibold poppins cursor-pointer">
                 Go back to dashboard
-            </NuxtLink>
+            </NuxtLink> -->
 
-        </div>
+        <!-- </div> -->
 
 
     </div>

dashboard/server/api/admin/delete_feedback.delete.ts

@@ -0,0 +1,15 @@
+
+import { FeedbackModel } from '@schema/FeedbackSchema';
+
+export default defineEventHandler(async event => {
+
+    const userData = getRequestUser(event);
+    if (!userData?.logged) return;
+    if (!userData.user.roles.includes('ADMIN')) return;
+
+    const { id } = await readBody(event);
+
+    await FeedbackModel.deleteOne({ _id: id });
+
+
+});

dashboard/server/api/admin/metrics.ts

@@ -2,6 +2,18 @@ import { ProjectModel } from "@schema/project/ProjectSchema";
 import { UserModel } from "@schema/UserSchema";
 import { EventModel } from "@schema/metrics/EventSchema";
 import { VisitModel } from "@schema/metrics/VisitSchema";
+import { PremiumModel } from "~/shared/schema/PremiumSchema";
+
+
+function addFieldsFromArray(data: { fieldName: string, projectedName: string, arrayName: string }[]) {
+    const content: Record<string, any> = {};
+    data.forEach(e => {
+        content[e.projectedName] = {
+            "$ifNull": [{ "$getField": { "field": e.fieldName, "input": { "$arrayElemAt": [`$${e.arrayName}`, 0] } } }, 0]
+        }
+    });
+    return content;
+}
 
 export default defineEventHandler(async event => {
     const userData = getRequestUser(event);
@@ -19,9 +31,33 @@ export default defineEventHandler(async event => {
     }
 
     const totalProjects = await ProjectModel.countDocuments({ ...matchQuery });
-    const premiumProjects = await ProjectModel.countDocuments({ ...matchQuery, premium: true });
+    const premiumProjects = await PremiumModel.countDocuments({ ...matchQuery, premium_type: { $ne: 0 } });
 
-    const deadProjects = await ProjectModel.countDocuments({ ...matchQuery });
+    const deadProjects = await ProjectModel.aggregate([
+        { $match: matchQuery },
+        {
+            $lookup: {
+                from: 'project_counts',
+                localField: '_id',
+                foreignField: 'project_id',
+                as: 'counts'
+            }
+        },
+        {
+            $addFields: addFieldsFromArray([
+                { arrayName: 'counts', fieldName: 'counts', projectedName: 'counts' },
+                { arrayName: 'counts', fieldName: 'updated_at', projectedName: 'updated_at' },
+            ])
+        },
+        {
+            $match: {
+                updated_at: {
+                    $lte: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7)
+                }
+            }
+        },
+        { $count: 'count' }
+    ])
 
     const totalUsers = await UserModel.countDocuments({ ...matchQuery });
 
@@ -30,7 +66,11 @@ export default defineEventHandler(async event => {
     const totalEvents = await EventModel.countDocuments({ ...matchQuery });
 
 
-    return { totalProjects, premiumProjects, deadProjects, totalUsers, totalVisits, totalEvents }
+    return {
+        totalProjects, premiumProjects,
+        deadProjects: (deadProjects && deadProjects.length > 0 ? deadProjects[0].count : 0) as number,
+        totalUsers, totalVisits, totalEvents
+    }
 
 
 });

dashboard/server/api/admin/projects.ts

@@ -1,8 +1,11 @@
 import { ProjectModel, TProject } from "@schema/project/ProjectSchema";
-import { TProjectLimit } from "~/shared/schema/project/ProjectsLimits";
+import { TPremium } from "~/shared/schema/PremiumSchema";
+import { TUser } from "~/shared/schema/UserSchema";
+
 
 type ExtendedProject = {
-    limits: TProjectLimit[],
+    user: [TUser],
+    premium: [TPremium],
     counts: [{
         events: number,
         visits: number,
@@ -59,9 +62,9 @@ export default defineEventHandler(async event => {
         },
         {
             $lookup: {
-                from: "project_limits",
+                from: "user_limits",
-                localField: "_id",
+                localField: "owner",
-                foreignField: "project_id",
+                foreignField: "user_id",
                 as: "limits"
             }
         },
@@ -73,6 +76,22 @@ export default defineEventHandler(async event => {
                 as: "counts"
             }
         },
+        {
+            $lookup: {
+                from: "users",
+                localField: "owner",
+                foreignField: "_id",
+                as: "user"
+            }
+        },
+        {
+            $lookup: {
+                from: "premiums",
+                localField: "owner",
+                foreignField: "user_id",
+                as: "premium"
+            }
+        },
         {
             $addFields: addFieldsFromArray([
                 { arrayName: 'counts', fieldName: 'visits', projectedName: 'visits' },

dashboard/server/api/admin/user_info.ts

@@ -0,0 +1,121 @@
+import { ProjectModel, TProject } from "@schema/project/ProjectSchema";
+import { VisitModel } from "~/shared/schema/metrics/VisitSchema";
+import { TUser, UserModel } from "~/shared/schema/UserSchema";
+import { TPremium } from "~/shared/schema/PremiumSchema";
+import { Types } from "mongoose";
+import { TAdminProject } from "./projects";
+
+export type TAdminUserInfo = {
+    user: TUser,
+    projects: (TAdminProject & { domains: string[] })[],
+    premium: TPremium
+}
+
+
+async function getProjects(user_id: string) {
+
+    function addFieldsFromArray(data: { fieldName: string, projectedName: string, arrayName: string }[]) {
+        const content: Record<string, any> = {};
+        data.forEach(e => {
+            content[e.projectedName] = {
+                "$ifNull": [{ "$getField": { "field": e.fieldName, "input": { "$arrayElemAt": [`$${e.arrayName}`, 0] } } }, 0]
+            }
+        });
+        return content;
+    }
+
+
+    const projects = await ProjectModel.aggregate([
+        {
+            $match: { owner: new Types.ObjectId(user_id) }
+        },
+        {
+            $lookup: {
+                from: "user_limits",
+                localField: "owner",
+                foreignField: "user_id",
+                as: "limits"
+            }
+        },
+        {
+            $lookup: {
+                from: "project_counts",
+                localField: "_id",
+                foreignField: "project_id",
+                as: "counts"
+            }
+        },
+        {
+            $lookup: {
+                from: "premiums",
+                localField: "owner",
+                foreignField: "user_id",
+                as: "premium"
+            }
+        },
+        {
+            $addFields: addFieldsFromArray([
+                { arrayName: 'counts', fieldName: 'visits', projectedName: 'visits' },
+                { arrayName: 'counts', fieldName: 'events', projectedName: 'events' },
+                { arrayName: 'counts', fieldName: 'session', projectedName: 'session' },
+                { arrayName: 'counts', fieldName: 'updated_at', projectedName: 'last_log_at' },
+            ]),
+        },
+        {
+            $addFields: addFieldsFromArray([
+                { arrayName: 'limits', fieldName: 'visits', projectedName: 'limit_visits' },
+                { arrayName: 'limits', fieldName: 'events', projectedName: 'limit_events' },
+                { arrayName: 'limits', fieldName: 'limit', projectedName: 'limit_max' },
+                { arrayName: 'limits', fieldName: 'ai_messages', projectedName: 'limit_ai_messages' },
+                { arrayName: 'limits', fieldName: 'ai_limit', projectedName: 'limit_ai_max' },
+            ]),
+        },
+        {
+            $addFields: {
+                limit_total: {
+                    $add: [
+                        { $ifNull: ["$limit_visits", 0] },
+                        { $ifNull: ["$limit_events", 0] }
+                    ]
+                },
+            }
+        },
+        { $unset: 'counts' },
+        { $unset: 'limits' },
+    ]);
+
+    return projects as TAdminProject[];
+}
+
+export default defineEventHandler(async event => {
+
+    const userData = getRequestUser(event);
+    if (!userData?.logged) return;
+    if (!userData.user.roles.includes('ADMIN')) return;
+
+    const { user_id } = getQuery(event);
+
+    const result: any = {}
+
+    result.user = await UserModel.findOne({ _id: user_id });
+    result.projects = await getProjects(user_id as string);
+
+
+    const promises: any[] = [];
+
+    for (const project of result.projects) {
+        promises.push(new Promise<void>(async resolve => {
+            const domains = await VisitModel.aggregate([
+                { $match: { project_id: (project as TAdminProject)._id } },
+                { $group: { _id: '$website', } }
+            ]);
+            project.domains = domains.map(e => e._id);
+            resolve();
+        }));
+    }
+
+    await Promise.all(promises);
+
+    return result as TAdminUserInfo;
+
+});