update admin panel

dashboard/components/admin/Overview.vue

@@ -4,13 +4,16 @@ import type { TAdminProject } from '~/server/api/admin/projects';
 import { PREMIUM_PLAN, getPlanFromId } from '@data/PREMIUM'
 import { useSelectMenuStyle } from '~/composables/ui/useSelectMenuStyle';
 
-const page = ref<number>(0);
-const limit = ref<number>(20);
+
+const page = ref<number>(1);
 
 const ordersList = [
     { label: 'created_at -->', id: '{ "created_at": 1 }' },
     { label: 'created_at <--', id: '{ "created_at": -1 }' },
 
+    { label: 'active -->', id: '{ "last_log_at": 1 }' },
+    { label: 'active <--', id: '{ "last_log_at": -1 }' },
+
     { label: 'visits -->', id: '{ "visits": 1 }' },
     { label: 'visits <--', id: '{ "visits": -1 }' },
 
@@ -39,9 +42,34 @@ const ordersList = [
 
 const order = ref<string>('{ "created_at": -1 }');
 
+const limitList = [
+    { label: '10', id: 10 },
+    { label: '20', id: 20 },
+    { label: '50', id: 50 },
+    { label: '100', id: 100 },
+]
 
-const { data: projects, pending: pendingProjects } = await useFetch<TAdminProject[]>(
-    () => `/api/admin/projects?page=${page.value}&limit=${limit.value}&sortQuery=${order.value}`,
+const limit = ref<number>(20);
+
+const filterList = [
+    { label: 'ALL', id: '{}' },
+    { label: 'PREMIUM', id: '{ "premium_type": { "$gt": 0, "$lt": 1000 } }' },
+    { label: 'APPSUMO', id: '{ "premium_type": { "$gt": 6000, "$lt": 7000 } }' },
+    { label: 'PREMIUM+APPSUMO', id: '{ "premium_type": { "$gt": 0, "$lt": 7000 } }' },
+    { label: 'FREE', id: '{ "premium_type": 0' },
+]
+
+onMounted(() => {
+    for (const key in PREMIUM_PLAN) {
+        filterList.push({ label: key, id: `{"premium_type": ${(PREMIUM_PLAN as any)[key].ID}}` });
+    }
+})
+
+const filter = ref<string>('{}');
+
+
+const { data: projectsInfo, pending: pendingProjects } = await useFetch<{ count: number, projects: TAdminProject[] }>(
+    () => `/api/admin/projects?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}`,
     signHeaders()
 );
 
@@ -64,30 +92,28 @@ const { uiMenu } = useSelectMenuStyle();
                 </USelectMenu>
             </div>
 
-            <!-- TODO: Move to metrics tab -->
-            <!-- TODO: Add project details button -->
-            <!-- TODO: Add project utilities -->
             <div class="flex gap-2 items-center">
-                <div> Projects: </div>
-                <div> 123 </div>
-                <div> Premium: </div>
-                <div> 123 </div>
-                <div> Active: </div>
-                <div> 123 </div>
-                <div> Dead: </div>
-                <div> 123 </div>
+                <div>Limit:</div>
+                <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Limit" :options="limitList"
+                    value-attribute="id" option-attribute="label" v-model="limit">
+                </USelectMenu>
             </div>
 
             <div class="flex gap-2 items-center">
-                <div> Users: </div>
-                <div> 123 </div>
+                <div>Filter:</div>
+                <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Filter" :options="filterList"
+                    value-attribute="id" option-attribute="label" v-model="filter">
+                </USelectMenu>
             </div>
 
             <div class="flex gap-2 items-center">
-                <div> Total Visits: </div>
-                <div> 123 </div>
-                <div> Total Events: </div>
-                <div> 123 </div>
+                <div>Page {{ page }} </div>
+                <div> {{ Math.min(limit, projectsInfo?.count || 0) }} of {{ projectsInfo?.count || 0
+                    }}</div>
+            </div>
+
+            <div>
+                <UPagination v-model="page" :page-count="limit" :total="projectsInfo?.count || 0" />
             </div>
 
         </div>
@@ -98,7 +124,7 @@ const { uiMenu } = useSelectMenuStyle();
             class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
 
             <AdminOverviewProjectCard v-if="!pendingProjects" :key="project._id.toString()" :project="project"
-                class="w-[26rem]" v-for="project of projects" />
+                class="w-[26rem]" v-for="project of projectsInfo?.projects" />
 
             <div v-if="pendingProjects"> Loading...</div>
 

dashboard/components/admin/Users.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+
+import { useSelectMenuStyle } from '~/composables/ui/useSelectMenuStyle';
+import type { TAdminUser } from '~/server/api/admin/users';
+
+
+const filterText = ref<string>('');
+
+watch(filterText,()=>{
+    page.value = 1;
+})
+
+const filter = computed(() => {
+    return JSON.stringify({
+        $or: [
+            { given_name: { $regex: `.*${filterText.value}.*`, $options: "i" } },
+            { email: { $regex: `.*${filterText.value}.*`, $options: "i" } }
+        ]
+    })
+})
+
+const page = ref<number>(1);
+
+const ordersList = [
+    { label: 'created_at -->', id: '{ "created_at": 1 }' },
+    { label: 'created_at <--', id: '{ "created_at": -1 }' },
+]
+
+const order = ref<string>('{ "created_at": -1 }');
+
+
+const limitList = [
+    { label: '10', id: 10 },
+    { label: '20', id: 20 },
+    { label: '50', id: 50 },
+    { label: '100', id: 100 },
+]
+
+const limit = ref<number>(20);
+
+const { data: usersInfo, pending: pendingUsers } = await useFetch<{ count: number, users: TAdminUser[] }>(
+    () => `/api/admin/users?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}`,
+    signHeaders()
+);
+
+const { uiMenu } = useSelectMenuStyle();
+
+</script>
+
+<template>
+    <div class="mt-6 h-full">
+
+
+        <div class="flex items-center gap-10 px-10">
+
+            <div class="flex gap-2 items-center">
+                <div>Order:</div>
+                <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Order" :options="ordersList"
+                    value-attribute="id" option-attribute="label" v-model="order">
+                </USelectMenu>
+            </div>
+
+
+            <div class="flex gap-2 items-center">
+                <div>Limit:</div>
+                <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Limit" :options="limitList"
+                    value-attribute="id" option-attribute="label" v-model="limit">
+                </USelectMenu>
+            </div>
+
+            <div class="flex gap-2 items-center">
+                <LyxUiInput placeholder="Search user" class="px-2 py-1" v-model="filterText"></LyxUiInput>
+            </div>
+
+            <div class="flex gap-2 items-center">
+                <div>Page {{ page }} </div>
+                <div>
+                    {{ Math.min(limit, usersInfo?.count || 0) }}
+                    of
+                    {{ usersInfo?.count || 0 }}
+                </div>
+            </div>
+
+            <div>
+                <UPagination v-model="page" :page-count="limit" :total="usersInfo?.count || 0" />
+            </div>
+
+        </div>
+
+
+
+        <div
+            class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
+
+            <AdminUsersUserCard v-if="!pendingUsers" :key="user._id.toString()" :user="user" class="w-[26rem]"
+                v-for="user of usersInfo?.users" />
+
+            <div v-if="pendingUsers"> Loading...</div>
+
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

dashboard/components/admin/dialog/ProjectDetails.vue

@@ -0,0 +1,48 @@
+<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/overview/ProjectCard.vue

@@ -3,9 +3,44 @@
 import type { TAdminProject } from '~/server/api/admin/projects';
 import { getPlanFromId } from '~/shared/data/PREMIUM';
 
+
+import { AdminDialogProjectDetails } from '#components';
+
+const { openDialogEx } = useCustomDialog();
+
+function showProjectDetails(pid: string) {
+    openDialogEx(AdminDialogProjectDetails, {
+        params: { pid }
+    })
+}
+
 const props = defineProps<{ project: TAdminProject }>();
 
 
+const logBg = computed(() => {
+
+    const day = 1000 * 60 * 60 * 24;
+    const week = 1000 * 60 * 60 * 24 * 7;
+
+    const lastLoggedAtDate = new Date(props.project.last_log_at || 0);
+
+    if (lastLoggedAtDate.getTime() > Date.now() - day) {
+        return 'bg-green-500'
+    } else if (lastLoggedAtDate.getTime() > Date.now() - week) {
+        return 'bg-yellow-500'
+    } else {
+        return 'bg-red-500'
+    }
+
+});
+
+
+const dateDiffDays = computed(() => {
+    const res = (Date.now() - new Date(props.project.last_log_at || 0).getTime()) / (1000 * 60 * 60 * 24)
+    if (res > -1 && res < 1) return 0;
+    return res;
+});
+
 const usageLabel = computed(() => {
     return formatNumberK(props.project.limit_total) + ' / ' + formatNumberK(props.project.limit_max)
 });
@@ -26,12 +61,17 @@ const usageAiLabel = computed(() => {
 </script>
 
 <template>
-    <div class="poppins outline outline-[1px] outline-lyx-widget-lighter p-3 rounded-md">
+    <div class="poppins outline outline-[1px] outline-lyx-widget-lighter p-3 rounded-md relative h-fit">
 
-        <div class="flex gap-4 justify-center">
+        <div class="absolute top-1 left-2 text-[.8rem] text-lyx-text-dark flex items-center gap-2">
+            <div :class="logBg" class="h-3 w-3 rounded-full"> </div>
+            <div class="mt-1"> {{ dateDiffDays.toFixed(0) }} days </div>
+        </div>
+
+        <div class="flex gap-4 justify-center  text-[.9rem]">
             <UTooltip :text="`PRICE_ID: ${project.premium_type}`">
-                <div class="font-medium">
-                    {{ getPlanFromId(project.premium_type)?.TAG ?? 'ERROR' }}
+                <div class="font-medium text-lyx-text-dark">
+                    {{ getPlanFromId(project.premium_type)?.TAG?.replace('APPSUMO', 'AS') ?? 'ERROR' }}
                 </div>
             </UTooltip>
             <div class="text-lyx-text-darker">
@@ -40,12 +80,12 @@ const usageAiLabel = computed(() => {
         </div>
 
         <div class="flex gap-5 justify-center">
-            <div class="font-medium">
+            <div @click="showProjectDetails(project._id.toString())" class="font-medium hover:text-lyx-primary cursor-pointer">
                 {{ project.name }}
             </div>
         </div>
 
-        <div class="flex flex-col items-center mt-4">
+        <div class="flex flex-col items-center mt-2">
             <div class="flex gap-4">
                 <div class="flex gap-2">
                     <div class="text-right"> Visits:</div>

dashboard/components/admin/users/UserCard.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+
+import type { TAdminProject } from '~/server/api/admin/projects';
+import type { TAdminUser } from '~/server/api/admin/users';
+import { getPlanFromId } from '~/shared/data/PREMIUM';
+
+import { AdminDialogProjectDetails } from '#components';
+
+const { openDialogEx } = useCustomDialog();
+
+function showProjectDetails(pid: string) {
+    openDialogEx(AdminDialogProjectDetails, {
+        params: { pid }
+    })
+}
+
+const props = defineProps<{ user: TAdminUser }>();
+
+</script>
+
+<template>
+
+    <div class="poppins outline outline-[1px] outline-lyx-widget-lighter p-3 rounded-md relative max-h-[15rem]">
+        <div class="flex gap-4 justify-center  text-[.9rem]">
+            <div class="font-medium text-lyx-text-dark">
+                {{ user.name ?? user.given_name }}
+            </div>
+            <div class="text-lyx-text-darker">
+                {{ new Date(user.created_at).toLocaleDateString('it-IT') }}
+            </div>
+        </div>
+
+        <div class="flex gap-5 justify-center">
+            <div class="font-medium">
+                {{ 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">
+
+        <div class="absolute top-1 left-2 text-[.8rem] text-lyx-text-dark flex items-center gap-2">
+            <div :class="logBg" class="h-3 w-3 rounded-full"> </div>
+            <div class="mt-1"> {{ dateDiffDays.toFixed(0) }} days </div>
+        </div>
+
+        <div class="flex gap-4 justify-center  text-[.9rem]">
+            <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 class="text-lyx-text-darker">
+                {{ new Date(project.created_at).toLocaleDateString('it-IT') }}
+            </div>
+        </div>
+
+        <div class="flex gap-5 justify-center">
+            <div class="font-medium">
+                {{ project.name }}
+            </div>
+        </div>
+
+        <div class="flex flex-col items-center mt-2">
+            <div class="flex gap-4">
+                <div class="flex gap-2">
+                    <div class="text-right"> Visits:</div>
+                    <div>{{ formatNumberK(project.visits || 0) }}</div>
+                </div>
+                <div class="flex gap-2">
+                    <div class="text-right"> Events:</div>
+                    <div>{{ formatNumberK(project.events || 0) }}</div>
+                </div>
+                <div class="flex gap-2">
+                    <div class="text-right"> Sessions:</div>
+                    <div>{{ formatNumberK(project.sessions || 0) }}</div>
+                </div>
+            </div>
+        </div>
+
+        <LyxUiSeparator class="my-2" />
+
+        <div class="mb-2">
+            <UProgress :value="project.limit_visits + project.limit_events" :max="project.limit_max"></UProgress>
+        </div>
+
+        <div class="flex gap-6 justify-around">
+            <div class="flex gap-1">
+                <div>
+                    {{ usageLabel }}
+                </div>
+                <div class="text-lyx-text-dark">
+                    {{ usagePercentLabel }}
+                </div>
+            </div>
+            <div class="flex gap-2">
+                <div>
+                    {{ usageAiLabel }}
+                </div>
+                <div class="text-lyx-text-dark">
+                    {{ usageAiPercentLabel }}
+                </div>
+            </div>
+
+        </div>
+
+    </div> -->
+
+</template>
+
+<style scoped lang="scss"></style>

dashboard/pages/admin/index.vue

@@ -167,7 +167,7 @@ function getLogBg(last_logged_at?: string) {
 
 const tabs: CItem[] = [
     { label: 'Overview', slot: 'overview' },
-    { label: 'Premiums', slot: 'premiums' },
+    { label: 'Users', slot: 'users' },
     { label: 'Feedbacks', slot: 'feedbacks' },
     { label: 'OnBoarding', slot: 'onboarding' },
     { label: 'Backend', slot: 'backend' }
@@ -183,6 +183,9 @@ const tabs: CItem[] = [
             <template #overview>
                 <AdminOverview></AdminOverview>
             </template>
+            <template #users>
+                <AdminUsers></AdminUsers>
+            </template>
         </CustomTab>
 
     </div>

dashboard/server/api/admin/project_info.ts

@@ -0,0 +1,89 @@
+import { ProjectModel, TProject } from "@schema/project/ProjectSchema";
+import { TProjectLimit } from "~/shared/schema/project/ProjectsLimits";
+import { TAdminProject } from "./projects";
+import { Types } from "mongoose";
+import { VisitModel } from "~/shared/schema/metrics/VisitSchema";
+
+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);
+    if (!userData?.logged) return;
+    if (!userData.user.roles.includes('ADMIN')) return;
+
+    const { pid } = getQuery(event);
+
+    const projects = await ProjectModel.aggregate([
+        {
+            $match: { _id: new Types.ObjectId(pid as string) }
+        },
+        {
+            $lookup: {
+                from: "project_limits",
+                localField: "_id",
+                foreignField: "project_id",
+                as: "limits"
+            }
+        },
+        {
+            $lookup: {
+                from: "project_counts",
+                localField: "_id",
+                foreignField: "project_id",
+                as: "counts"
+            }
+        },
+        {
+            $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' },
+    ]);
+
+    const domains = await VisitModel.aggregate([
+        {
+            $match: { project_id: new Types.ObjectId(pid as string) }
+        },
+        {
+            $group: {
+                _id: '$website',
+            }
+        }
+    ])
+
+    return { domains, project: (projects[0] as TAdminProject) };
+
+});

dashboard/server/api/admin/projects.ts

@@ -16,7 +16,8 @@ type ExtendedProject = {
     limit_max: number,
     limit_ai_messages: number,
     limit_ai_max: number,
-    limit_total: number
+    limit_total: number,
+    last_log_at: string
 }
 
 export type TAdminProject = TProject & ExtendedProject;
@@ -37,12 +38,17 @@ export default defineEventHandler(async event => {
     if (!userData?.logged) return;
     if (!userData.user.roles.includes('ADMIN')) return;
 
-    const { page, limit, sortQuery } = getQuery(event);
+    const { page, limit, sortQuery, filterQuery } = getQuery(event);
 
     const pageNumber = parseInt(page as string);
     const limitNumber = parseInt(limit as string);
 
+    const count = await ProjectModel.countDocuments(JSON.parse(filterQuery as string));
+
     const projects = await ProjectModel.aggregate([
+        {
+            $match: JSON.parse(filterQuery as string)
+        },
         {
             $lookup: {
                 from: "project_limits",
@@ -64,6 +70,7 @@ export default defineEventHandler(async event => {
                 { 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' },
             ]),
         },
         {
@@ -92,6 +99,9 @@ export default defineEventHandler(async event => {
         { $limit: limitNumber }
     ]);
 
-    return projects as TAdminProject[];
+    return {
+        count,
+        projects: projects as TAdminProject[]
+    };
 
 });

dashboard/server/api/admin/users.ts

@@ -0,0 +1,37 @@
+import { TProject } from "@schema/project/ProjectSchema";
+import { TUser, UserModel } from "@schema/UserSchema";
+
+export type TAdminUser = TUser & { _id: string, projects: TProject[] };
+
+export default defineEventHandler(async event => {
+    const userData = getRequestUser(event);
+    if (!userData?.logged) return;
+    if (!userData.user.roles.includes('ADMIN')) return;
+
+    const { page, limit, sortQuery, filterQuery } = getQuery(event);
+
+    const pageNumber = parseInt(page as string);
+    const limitNumber = parseInt(limit as string);
+
+    const count = await UserModel.countDocuments(JSON.parse(filterQuery as string));
+
+    const users = await UserModel.aggregate([
+        {
+            $match: JSON.parse(filterQuery as string)
+        },
+        {
+            $lookup: {
+                from: "projects",
+                localField: "_id",
+                foreignField: "owner",
+                as: "projects"
+            }
+        },
+        { $sort: JSON.parse(sortQuery as string) },
+        { $skip: pageNumber * limitNumber },
+        { $limit: limitNumber }
+    ]);
+
+    return { count, users: users as TAdminUser[] }
+
+});