update ui

dashboard/components/admin/Backend.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+
+
+
+const { data: backendData, pending: backendPending, refresh: refreshBackend } = useFetch<any>(() => `/api/admin/backend`, signHeaders());
+
+const avgDuration = computed(() => {
+    if (!backendData?.value?.durations) return -1;
+    return (backendData.value.durations.durations.reduce((a: any, e: any) => a + parseInt(e[1]), 0) / backendData.value.durations.durations.length);
+})
+
+const labels = new Array(650).fill('-');
+
+const durationsDatasets = computed(() => {
+    if (!backendData?.value?.durations) return [];
+
+    const colors = ['#2200DD', '#CC0022', '#0022CC', '#FF0000', '#00FF00', '#0000FF'];
+
+    const datasets = [];
+
+    const uniqueConsumers: string[] = Array.from(new Set(backendData.value.durations.durations.map((e: any) => e[0])));
+
+    for (let i = 0; i < uniqueConsumers.length; i++) {
+
+        const consumerDurations = backendData.value.durations.durations.filter((e: any) => e[0] == uniqueConsumers[i]);
+
+        datasets.push({
+            points: consumerDurations.map((e: any) => {
+                return 1000 /  parseInt(e[1])
+            }),
+            color: colors[i],
+            chartType: 'line',
+            name: uniqueConsumers[i]
+        })
+    }
+
+    return datasets;
+
+})
+
+</script>
+
+<template>
+    <div class="mt-6 h-full">
+
+        <div class="cursor-default flex justify-center w-full">
+
+            <div v-if="backendData" class="flex flex-col mt-8 gap-6 px-20 items-center w-full">
+
+                <div class="flex gap-8">
+                    <div> Queue size: {{ backendData.queue?.size || 'ERROR' }} </div>
+                    <div> Avg consumer time: {{ avgDuration.toFixed(1) }} ms </div>
+                    <div> Avg processed/s: {{ (1000 / avgDuration).toFixed(1) }} </div>
+                </div>
+
+                <div class="w-full">
+                    <AdminBackendLineChart :labels="labels" title="Avg Processed/s" :datasets="durationsDatasets">
+                    </AdminBackendLineChart>
+                </div>
+
+                <div @click="refreshBackend()"> Refresh </div>
+            </div>
+
+            <div v-if="backendPending">
+                Loading...
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

dashboard/components/admin/Feedbacks.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+
+const { data: feedbacks, pending: pendingFeedbacks } = useFetch<any[]>(() => `/api/admin/feedbacks`, signHeaders());
+
+</script>
+
+<template>
+    <div class="mt-6 h-full">
+
+        <div
+            class="cursor-default flex justify-center flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
+
+            <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 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>
+                    {{ feedback.text }}
+                </div>
+            </div>
+
+
+            <div v-if="pendingFeedbacks"> Loading...</div>
+
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

dashboard/components/admin/Onboardings.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+
+const { data: onboardings, pending: pendingOnboardings } = useFetch<any>(() => `/api/admin/onboardings`, signHeaders());
+
+</script>
+
+<template>
+    <div class="mt-6 h-full">
+
+        <div class="cursor-default flex flex-wrap gap-6 mb-[4rem] mt-4 overflow-auto h-full pt-6 pb-[8rem]">
+
+            <div v-if="onboardings" class="flex gap-40 px-20">
+
+                <div class="flex flex-col gap-4">
+                    <div class="text-lyx-primary"> Anaytics </div>
+                    <div class="flex items-center gap-2"
+                        v-for="e of onboardings.analytics.sort((a: any, b: any) => b.count - a.count)">
+                        <div>{{ e._id }}</div>
+                        <div>{{ e.count }}</div>
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-4">
+                    <div class="text-lyx-primary"> Jobs </div>
+                    <div class="flex items-center gap-2"
+                        v-for="e of onboardings.jobs.sort((a: any, b: any) => b.count - a.count)">
+                        <div>{{ e._id }}</div>
+                        <div>{{ e.count }}</div>
+                    </div>
+                </div>
+
+                <div v-if="onboardings" class="flex flex-col gap-8">
+                    <AdminOnboardingPieChart :data="onboardings.analytics" title="Analytics"></AdminOnboardingPieChart>
+                    <AdminOnboardingPieChart :data="onboardings.jobs" title="Jobs"></AdminOnboardingPieChart>
+                </div>
+            </div>
+
+
+            <div v-if="pendingOnboardings"> Loading...</div>
+
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

dashboard/components/admin/Overview.vue

@@ -4,6 +4,8 @@ import type { TAdminProject } from '~/server/api/admin/projects';
 import { PREMIUM_PLAN, getPlanFromId } from '@data/PREMIUM'
 import { useSelectMenuStyle } from '~/composables/ui/useSelectMenuStyle';
 
+import { sub, format, isSameDay, type Duration, startOfDay, endOfDay } from 'date-fns'
+
 
 const page = ref<number>(1);
 
@@ -56,9 +58,28 @@ const filterList = [
     { 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' },
 ]
 
+
+function isRangeSelected(duration: Duration) {
+    return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
+}
+
+function selectRange(duration: Duration) {
+    selected.value = { start: sub(new Date(), duration), end: new Date() }
+}
+
+const ranges = [
+    { label: 'Last 7 days', duration: { days: 7 } },
+    { label: 'Last 14 days', duration: { days: 14 } },
+    { label: 'Last 30 days', duration: { days: 30 } },
+    { label: 'Last 3 months', duration: { months: 3 } },
+    { label: 'Last 6 months', duration: { months: 6 } },
+    { label: 'Last year', duration: { years: 1 } }
+]
+const selected = ref<{ start: Date, end: Date }>({ start: sub(new Date(), { days: 14 }), end: new Date() })
+
+
 onMounted(() => {
     for (const key in PREMIUM_PLAN) {
         filterList.push({ label: key, id: `{"premium_type": ${(PREMIUM_PLAN as any)[key].ID}}` });
@@ -67,9 +88,8 @@ onMounted(() => {
 
 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}`,
+    () => `/api/admin/projects?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}&filterFrom=${selected.value.start.toISOString()}&filterTo=${selected.value.end.toISOString()}`,
     signHeaders()
 );
 
@@ -77,43 +97,72 @@ const { data: projectsInfo, pending: pendingProjects } = await useFetch<{ count:
 
 const { uiMenu } = useSelectMenuStyle();
 
+
+
 </script>
 
 <template>
     <div class="mt-6 h-full">
 
 
-        <div class="flex items-center gap-10 px-10">
+        <div class="flex flex-col items-center gap-8">
+
+            <div class="flex items-center gap-10 px-10">
+                <div class="flex gap-2 items-center">
+                    <div>Order:</div>
+                    <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Order" :options="ordersList"
+                        value-attribute="id" option-attribute="label" v-model="order">
+                    </USelectMenu>
+                </div>
+
+                <div class="flex gap-2 items-center">
+                    <div>Limit:</div>
+                    <USelectMenu :uiMenu="uiMenu" class="w-[12rem]" placeholder="Limit" :options="limitList"
+                        value-attribute="id" option-attribute="label" v-model="limit">
+                    </USelectMenu>
+                </div>
+
+                <div class="flex gap-2 items-center">
+                    <div>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>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 items-center gap-10 justify-center px-10 w-full">
 
-            <div class="flex gap-2 items-center">
-                <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 shrink-0">
+                    <div>Page {{ page }} </div>
+                    <div> {{ Math.min(limit, projectsInfo?.count || 0) }} of {{ projectsInfo?.count || 0
+                        }}</div>
+                </div>
 
-            <div class="flex gap-2 items-center">
-                <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>
-                <UPagination v-model="page" :page-count="limit" :total="projectsInfo?.count || 0" />
+                <UPopover class="w-[20rem]" :popper="{ placement: 'bottom' }">
+                    <UButton class="w-full" color="primary" variant="solid">
+                        <div class="flex items-center justify-center w-full gap-2">
+                            <i class="i-heroicons-calendar-days-20-solid"></i>
+                            {{ selected.start.toLocaleDateString() }} - {{ selected.end.toLocaleDateString() }}
+                        </div>
+                    </UButton>
+                    <template #panel="{ close }">
+                        <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
+                            <div class="hidden sm:flex flex-col py-4">
+                                <UButton v-for="(range, index) in ranges" :key="index" :label="range.label" color="gray"
+                                    variant="ghost" class="rounded-none px-6"
+                                    :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
+                                    truncate @click="selectRange(range.duration)" />
+                            </div>
+
+                            <DatePicker v-model="selected" @close="close" />
+                        </div>
+                    </template>
+                </UPopover>
             </div>
 
         </div>

dashboard/components/admin/OverviewOld.vue

@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-import type { TAdminUserProjectInfo } from '~/server/api/admin/users_projects';
-
-
-import { PREMIUM_PLAN, getPlanFromId } from '@data/PREMIUM'
-
-const page = ref<number>(0);
-const limit = ref<number>(10);
-
-const sortQuery = computed(() => {
-    return JSON.stringify({ created_at: 1 })
-})
-
-const { data: usersWithProjects } = await useFetch<TAdminUserProjectInfo[]>(
-    () => `/api/admin/users_projects?page=${page.value}&limit=${limit.value}&sortQuery=${sortQuery.value}`,
-    signHeaders()
-);
-
-</script>
-
-<template>
-    <div class="px-2 cursor-default">
-        <div v-for="user of usersWithProjects" class="py-6">
-
-            {{ user.email }}
-
-            <div class="flex flex-wrap gap-4">
-                <div class="w-[22rem] outline outline-[1px] outline-lyx-widget-lighter p-3 rounded-md"
-                    v-for="project of user.projects">
-
-                    <div class="flex gap-4 justify-center">
-                        <UTooltip :text="`PRICE_ID: ${project.premium_type.toString()}`">
-                            <div class="font-medium">
-                                {{ getPlanFromId(project.premium_type)?.TAG ?? '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-4">
-                        <div class="flex gap-4">
-                            <div class="flex gap-2">
-                                <div class="text-right"> Visits:</div>
-                                <div>{{ formatNumberK(project.visits) }}</div>
-                            </div>
-                            <div class="flex gap-2">
-                                <div class="text-right"> Events:</div>
-                                <div>{{ formatNumberK(project.events) }}</div>
-                            </div>
-                            <div class="flex gap-2">
-                                <div class="text-right"> Sessions:</div>
-                                <div>{{ formatNumberK(project.sessions) }}</div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <LyxUiSeparator class="my-2" />
-
-                    <AdminMiniChart :pid="project._id.toString()"></AdminMiniChart>
-
-                    <LyxUiSeparator class="my-2" />
-
-
-                    <div class="flex gap-6 justify-around">
-                        <div class="flex gap-1">
-                            <div>
-                                {{ formatNumberK(project.limits[0].visits + project.limits[0].events) }}
-                                / {{ formatNumberK(project.limits[0].limit) }}
-                            </div>
-                            <div class="text-lyx-text-dark">
-                                ~ {{
-                                    (100 / project.limits[0].limit * (project.limits[0].visits +
-                                        project.limits[0].events)).toFixed(1)
-                                }}%
-                            </div>
-                        </div>
-                        <div class="flex gap-2">
-                            <div>
-                                {{ formatNumberK(project.limits[0].ai_messages) }}
-                                / {{ formatNumberK(project.limits[0].ai_limit) }}
-                            </div>
-                            <div class="text-lyx-text-dark">
-                                ~ {{(100 / project.limits[0].ai_limit * project.limits[0].ai_messages).toFixed(1) }}%
-                            </div>
-                        </div>
-
-                    </div>
-
-                </div>
-            </div>
-        </div>
-
-    </div>
-</template>
-
-<style scoped lang="scss"></style>

dashboard/components/admin/backend/LineChart.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { ChartData, ChartOptions } from 'chart.js';
+import { useLineChart, LineChart } from 'vue-chart-3';
+import * as datefns from 'date-fns';
+
+const errored = ref<boolean>(false);
+
+const props = defineProps<{
+    labels: string[],
+    title: string,
+    datasets: {
+        points: number[],
+        color: string,
+        name: string
+    }[]
+}>();
+
+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: true },
+        title: {
+            display: true,
+            text: props.title
+        },
+        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: props.labels.map(e => {
+        try {
+            return datefns.format(new Date(e), 'dd/MM');
+        } catch (ex) {
+            return e;
+        }
+    }),
+    datasets: props.datasets.map(e => ({
+        data: e.points,
+        label: e.name,
+        backgroundColor: [e.color + '00'],
+        borderColor: e.color,
+        borderWidth: 2,
+        fill: true,
+        tension: 0.45,
+        pointRadius: 0,
+        pointHoverRadius: 10,
+        type: 'line'
+    } as any))
+});
+
+
+const { lineChartProps, lineChartRef } = useLineChart({ chartData: chartData, options: chartOptions });
+
+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;
+}
+
+onMounted(async () => {
+    try {
+        // chartData.value.datasets.forEach(dataset => {
+        //     if (dataset.borderColor && dataset.borderColor.toString().startsWith('#')) {
+        //         dataset.backgroundColor = [createGradient(dataset.borderColor as string)]
+        //     } else {
+        //         dataset.backgroundColor = [createGradient('#3d59a4')]
+        //     }
+        // });
+    } catch (ex) {
+        errored.value = true;
+        console.error(ex);
+    }
+
+});
+
+</script>
+
+
+<template>
+    <div>
+        <div v-if="errored"> ERROR CREATING CHART </div>
+        <LineChart v-if="!errored" ref="lineChartRef" v-bind="lineChartProps"> </LineChart>
+    </div>
+</template>

dashboard/components/admin/onboarding/PieChart.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+
+import { type ChartData, type ChartOptions } from 'chart.js';
+import { PieChart, usePieChart } from 'vue-chart-3';
+
+const props = defineProps<{ data: { _id: string, count: number }[], title:string }>();
+
+const eventsTimelineOptions = ref<ChartOptions<'pie'>>({
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false
+        },
+        title: {
+            display: true,
+            text: props.title,
+            color: '#EEECF6',
+        },
+    },
+});
+
+const eventsTimelineData = computed<ChartData<'pie'>>(() => ({
+    labels: props.data.map(e => e._id),
+    datasets: [
+        {
+            data: props.data.map(e => e.count),
+            backgroundColor: [
+                "#295270",
+                "#304F71",
+                "#374C72",
+                "#3E4A73",
+                "#444773",
+                "#4B4474",
+                "#524175",
+            ],
+            borderColor: '#222222'
+        },
+    ],
+}));
+
+
+const { pieChartProps } = usePieChart({ chartData: eventsTimelineData, options: eventsTimelineOptions });
+
+
+</script>
+
+
+
+<template>
+
+    <div>
+
+
+        <div class="graph">
+            <PieChart v-bind="pieChartProps">
+            </PieChart>
+        </div>
+
+    </div>
+
+</template>