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

update

Browse Source
This commit is contained in:
Emily
2025-04-24 17:36:23 +02:00
parent a9bbc58ad1
commit eb954cac6c
17 changed files with 358 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dashboard/pages/events.vue
View File

@@ -53,8 +53,17 @@ const eventsData = await useFetch(`/api/data/count`, {
</LyxUiCard>
<div>
<BarCardEvents :key="refreshKey"></BarCardEvents>
<div class="flex gap-6 flex-col xl:flex-row xl:h-full">
<BarCardEvents class="xl:flex-[4]" :key="refreshKey"></BarCardEvents>
<CardTitled :key="refreshKey" class="p-4 xl:flex-[2] w-full h-full" title="Top events"
sub="Displays key events.">
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</CardTitled>
</div>
<div class="flex gap-6 flex-col xl:flex-row xl:h-full">
@@ -74,11 +83,6 @@ const eventsData = await useFetch(`/api/data/count`, {
</div>
</CardTitled>
<CardTitled :key="refreshKey" class="p-4 xl:flex-[2] w-full h-full" title="Top events"
sub="Displays key events.">
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</CardTitled>
</div>

93
dashboard/pages/report.vue
View File

@@ -1,93 +0,0 @@
<script setup lang="ts">
definePageMeta({ layout: 'dashboard' });
const activeProject = useActiveProject();
async function generatePDF() {
try {
const res = await $fetch<Blob>('/api/project/generate_pdf', {
...signHeaders(),
responseType: 'blob'
});
const url = URL.createObjectURL(res);
const a = document.createElement('a');
a.href = url;
a.download = `Report.pdf`;
a.click();
URL.revokeObjectURL(url);
} catch (ex: any) {
alert(ex.message);
}
}
</script>
<template>
<div class="home w-full h-full px-10 lg:px-0 overflow-y-auto pb-[12rem] md:pb-0">
<DialogCreateSnapshot></DialogCreateSnapshot>
<!-- <div class="flex flex-col items-center justify-center mt-20 gap-20">
<div class="flex flex-col items-center justify-center gap-10">
<div class="poppins text-[2.4rem] font-bold text-text">
Project Report
</div>
<div class="poppins text-[1.4rem] text-center lg:text-[1.8rem] text-text-sub/90">
One-Click, Comprehensive KPI PDF for Your Investors or Team.
</div>
<div v-if="activeProject" class="flex md:gap-2 flex-col md:flex-row">
<div class="poppins text-[1.4rem] font-semibold text-text-sub/90">
Relative to:
</div>
<div class="poppins text-[1.4rem] font-semibold text-text">
{{ activeProject.name }}
</div>
</div>
</div>
<div>
<div @click="generatePDF()"
class="flex flex-col rounded-xl overflow-hidden hover:shadow-[0_0_50px_#2969f1] hover:outline hover:outline-[2px] hover:outline-accent cursor-pointer">
<div class="h-[14rem] aspect-[9/7] bg-[#2f2a64] flex relative">
<img class="object-cover" :src="'/report/card_image.png'">
<div
class="absolute px-4 py-1 rounded-lg poppins left-2 flex gap-2 bottom-2 bg-orange-500/80 items-center">
<div class="flex items-center"> <i class="far fa-fire text-[1.1rem]"></i></div>
<div class="poppins text-[1rem] font-semibold"> Popular </div>
</div>
</div>
<div class="bg-[#444444cc] p-4 h-[7rem] relative">
<div class="poppins text-[1.2rem] font-bold text-text">
Generate
</div>
<div class="poppins text-[1rem] text-text-sub/90">
Create your report now
</div>
<div class="absolute right-4 bottom-3">
<i class="fas fa-arrow-right text-[1.2rem]"></i>
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>

108
dashboard/pages/reports.vue Normal file
View File

@@ -0,0 +1,108 @@
<script lang="ts" setup>
definePageMeta({ layout: 'dashboard' });
const customization = ref<any>();
const { snapshot } = useSnapshot();
onMounted(async () => {
const res = await $fetch('/api/report/customization', {
headers: useComputedHeaders().value
})
customization.value = res;
})
async function updateCustomization() {
await $fetch('/api/report/update_customization', {
method: 'POST',
headers: useComputedHeaders({
custom: {
'Content-Type': 'application/json'
}
}).value,
body: JSON.stringify(customization.value)
})
}
async function generateReport(type: number) {
try {
const res = await $fetch<Blob>(`/api/project/generate_pdf?type=${type}`, {
headers: useComputedHeaders({
useSnapshotDates: false, custom: {
'x-snapshot-name': snapshot.value.name
}
}).value,
responseType: 'blob'
});
const url = URL.createObjectURL(res);
const a = document.createElement('a');
a.href = url;
a.download = `Report.pdf`;
a.click();
URL.revokeObjectURL(url);
} catch (ex: any) {
alert(ex.message);
}
}
function selectColor(color: string) {
customization.value.bg = color;
updateCustomization();
}
function onFileSelected(e: string) {
customization.value.logo = e;
updateCustomization();
}
</script>
<template>
<div class="p-6">
<div class="flex flex-col gap-4">
<CardTitled class="w-full h-full" title="Choose a report" sub="Select a report type">
<div style="height: 18rem;" class="w-full flex gap-4">
<LyxUiCard>
<div @click="generateReport(1)" class="cursor-pointer hover:text-lyx-text-darker">
Easy report
</div>
</LyxUiCard>
<LyxUiCard>
<div @click="generateReport(1)" class="cursor-pointer hover:text-lyx-text-darker">
Product report
</div>
</LyxUiCard>
</div>
</CardTitled>
<div class="flex gap-4">
<CardTitled class="w-full h-full" title="Customize theme" sub="Choose the report colors">
<div v-if="customization" style="height: 18rem;" class="w-full flex gap-2">
<div @click="selectColor('white')"
class="flex items-center justify-center rounded-lg bg-white border-solid border-[1px] border-gray-200 cursor-pointer w-[4rem] h-[2rem]">
<i v-if="customization.bg == 'white'" class="fas fa-check text-blue-600"></i>
</div>
<div @click="selectColor('black')"
class="flex items-center justify-center rounded-lg bg-black border-solid border-[1px] border-gray-200 cursor-pointer w-[4rem] h-[2rem]">
<i v-if="customization.bg == 'black'" class="fas fa-check text-blue-600"></i>
</div>
</div>
</CardTitled>
<CardTitled class="w-full h-full" title="Customize logo" sub="Upload your logo">
<div v-if="customization" style="height: 18rem;" class="w-full flex gap-4">
<img v-if="customization.logo" :src="customization.logo" class="w-[256px] h-[256px]">
<div class="flex h-[10rem]">
<SelectorImageSelector class="w-fit" @file_selected="onFileSelected">
</SelectorImageSelector>
</div>
</div>
</CardTitled>
</div>
</div>
</div>
</template>