Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 15:58:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix admin panel + payment ok page

Browse Source
This commit is contained in:
Emily
2025-04-28 18:52:38 +02:00
parent b709ad285a
commit 1917b74c32
20 changed files with 332 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/assets/scss/main.scss
View File

@@ -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;
}

28
dashboard/components/admin/Feedbacks.vue
View File

@@ -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>

36
dashboard/components/admin/Overview.vue
View File

@@ -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" />

2
dashboard/components/admin/Users.vue
View File

@@ -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" />

48
dashboard/components/admin/dialog/ProjectDetails.vue
View File

@@ -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>

35
dashboard/components/admin/dialog/UserDetails.vue Normal file
View File

@@ -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>

30
dashboard/components/admin/overview/ProjectCard.vue
View File

@@ -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>

33
dashboard/components/admin/users/UserCard.vue
View File

@@ -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">

2
dashboard/components/dashboard/TopCards.vue
View File

@@ -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;
});

1
dashboard/components/layout/VerticalBottomMenu.vue
View File

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

36
dashboard/pages/payment_ok.vue
View File

@@ -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>
<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>
<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="flex items-center h-full flex-col gap-4"> -->
<div class="flex items-center h-full flex-col gap-4">
<div class="text-accent mt-[20vh] poppins font-semibold text-[1.5rem]">
Payment success
</div>
<div class="poppins">
<!-- <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>

BIN
dashboard/public/flamy-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
dashboard/public/flamy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
dashboard/public/lit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
dashboard/public/logo-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
dashboard/public/logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

15
dashboard/server/api/admin/delete_feedback.delete.ts Normal file
View File

@@ -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 });
});

46
dashboard/server/api/admin/metrics.ts
View File

@@ -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
}
});

33
dashboard/server/api/admin/projects.ts
View File

@@ -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,
@@ -54,14 +57,14 @@ export default defineEventHandler(async event => {
const count = await ProjectModel.countDocuments(matchQuery);
const projects = await ProjectModel.aggregate([
{
{
$match: matchQuery
},
},
{
$lookup: {
from: "project_limits",
localField: "_id",
foreignField: "project_id",
from: "user_limits",
localField: "owner",
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' },

121
dashboard/server/api/admin/user_info.ts Normal file
View File

@@ -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;
});