diff --git a/dashboard/components/admin/Overview.vue b/dashboard/components/admin/Overview.vue index 228fe47..d3a342a 100644 --- a/dashboard/components/admin/Overview.vue +++ b/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(0); -const limit = ref(20); + +const page = ref(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('{ "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( - () => `/api/admin/projects?page=${page.value}&limit=${limit.value}&sortQuery=${order.value}`, +const limit = ref(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('{}'); + + +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(); - - -
-
Projects:
-
123
-
Premium:
-
123
-
Active:
-
123
-
Dead:
-
123
+
Limit:
+ +
-
Users:
-
123
+
Filter:
+ +
-
Total Visits:
-
123
-
Total Events:
-
123
+
Page {{ page }}
+
{{ Math.min(limit, projectsInfo?.count || 0) }} of {{ projectsInfo?.count || 0 + }}
+
+ +
+
@@ -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]"> + class="w-[26rem]" v-for="project of projectsInfo?.projects" />
Loading...
diff --git a/dashboard/components/admin/Users.vue b/dashboard/components/admin/Users.vue new file mode 100644 index 0000000..ce77622 --- /dev/null +++ b/dashboard/components/admin/Users.vue @@ -0,0 +1,104 @@ + + + + + \ No newline at end of file diff --git a/dashboard/components/admin/dialog/ProjectDetails.vue b/dashboard/components/admin/dialog/ProjectDetails.vue new file mode 100644 index 0000000..7f7667c --- /dev/null +++ b/dashboard/components/admin/dialog/ProjectDetails.vue @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/dashboard/components/admin/overview/ProjectCard.vue b/dashboard/components/admin/overview/ProjectCard.vue index a8421de..1dc826b 100644 --- a/dashboard/components/admin/overview/ProjectCard.vue +++ b/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(() => {