fix admin panel + payment ok page

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,11 +23,19 @@ 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 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>
+                        <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 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>
-                    {{ feedback.text }}
+
                 </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: 'created_at <--', id: '{ "created_at": -1 }' },
+    { label: 'Older', id: '{ "created_at": 1 }' },
+    { label: 'Newer', id: '{ "created_at": -1 }' },
 
-    { label: 'active -->', id: '{ "last_log_at": 1 }' },
-    { label: 'active <--', id: '{ "last_log_at": -1 }' },
+    { label: 'Less active', id: '{ "last_log_at": 1 }' },
+    { label: 'More active', id: '{ "last_log_at": -1 }' },
 
-    { label: 'visits -->', id: '{ "visits": 1 }' },
-    { label: 'visits <--', id: '{ "visits": -1 }' },
+    { label: 'Less usage', id: '{ "limit_total": 1 }' },
+    { label: 'More usage', id: '{ "limit_total": -1 }' },
 
-    { label: 'events -->', id: '{ "events": 1 }' },
-    { label: 'events <--', id: '{ "events": -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 }' },
+    { label: 'Smaller plan', id: '{ "premium_type": 1 }' },
+    { label: 'Bigger 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 { AdminDialogProjectDetails } from '#components';
+import { AdminDialogUserDetails } from '#components';
 
 const { openDialogEx } = useCustomDialog();
 
-function showProjectDetails(pid: string) {
-    openDialogEx(AdminDialogProjectDetails, {
-        params: { pid }
+function showUserDetails(user_id: string) {
+    openDialogEx(AdminDialogUserDetails, {
+        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 @click="showProjectDetails(project._id.toString())" class="font-medium hover:text-lyx-primary cursor-pointer">
-                {{ project.name }}
+        <div class="flex flex-col items-center py-1">
+            <div class="text-center"> {{ project.name }} </div>
+            <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) {
-    openDialogEx(AdminDialogProjectDetails, {
-        params: { pid }
+function showUserDetails(user_id: string) {
+    openDialogEx(AdminDialogUserDetails, {
+        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">