implementing snapshots

dashboard/components/CVerticalNavigation.vue

@@ -9,7 +9,8 @@ export type Entry = {
     icon?: string,
     action?: () => any,
     adminOnly?: boolean,
-    external?: boolean
+    external?: boolean,
+    grow?: boolean
 }
 
 export type Section = {
@@ -66,24 +67,35 @@ async function deleteSnapshot(close: () => any) {
 
 async function generatePDF() {
 
-try {
-    const res = await $fetch<Blob>('/api/project/generate_pdf', {
-        ...signHeaders(),
-        responseType: 'blob'
-    });
+    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);
+        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);
+    }
 }
+
+const { setToken } = useAccessToken();
+const router = useRouter();
+
+function onLogout() {
+    console.log('LOGOUT')
+    setToken('');
+    setLoggedUser(undefined);
+    router.push('/login');
 }
 
 
+
 </script>
 
 <template>
@@ -95,10 +107,14 @@ try {
         <div class="p-4 gap-6 flex flex-col w-full">
 
             <div class="flex items-center gap-2 ml-2">
-                <div class="bg-black h-[2.4rem] aspect-[1/1] flex items-center justify-center rounded-lg">
+                
+                <!-- <div class="bg-black h-[2.4rem] aspect-[1/1] flex items-center justify-center rounded-lg">
                     <img class="h-[2rem]" :src="'/logo.png'">
-                </div>
-                <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div>
+                </div> -->
+                
+                <!-- <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div> -->
+
+                <div class="text-center w-full"> PROJECT SELECTOR </div>
 
                 <div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
                     <i @click="close()" class="fas fa-close"></i>
@@ -175,7 +191,7 @@ try {
                 </div>
             </div>
 
-            <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-4 h-full">
 
                 <div v-for="section of sections" class="flex flex-col gap-1">
 
@@ -185,7 +201,7 @@ try {
                             class="bg-lyx-background text-gray-300 py-2 px-4 rounded-lg" :class="{
                                 'text-gray-700 pointer-events-none': entry.disabled,
                                 'bg-lyx-background-lighter': route.path == (entry.to || '#'),
-                                'hover:bg-lyx-background-light': route.path != (entry.to || '#')
+                                'hover:bg-lyx-background-light': route.path != (entry.to || '#'),
                             }">
 
                             <NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
@@ -204,6 +220,18 @@ try {
 
                 </div>
 
+                <div class="grow"></div>
+                <div class="bg-lyx-background hover:bg-lyx-background-light text-gray-300 py-2 px-4 rounded-lg">
+                    <div @click="onLogout()" class="flex cursor-pointer">
+                        <div class="flex items-center w-[1.8rem] justify-start">
+                            <i class="far fa-arrow-right-from-bracket"></i>
+                        </div>
+                        <div class="manrope">
+                            Logout
+                        </div>
+                    </div>
+                </div>
+
             </div>
         </div>
     </div>

dashboard/components/dashboard/EventsChart.vue

@@ -55,7 +55,7 @@ const chartData = ref<ChartData<'doughnut'>>({
         {
             rotation: 1,
             data: [],
-            backgroundColor: ['#6bbbe3','#5655d0', '#a6d5cb', '#fae0b9'],
+            backgroundColor: ['#6bbbe3', '#5655d0', '#a6d5cb', '#fae0b9'],
             borderColor: ['#1d1d1f'],
             borderWidth: 2
         },
@@ -65,27 +65,45 @@ const chartData = ref<ChartData<'doughnut'>>({
 
 const { doughnutChartProps, doughnutChartRef } = useDoughnutChart({ chartData: chartData, options: chartOptions });
 
+
+const res = useEventsData();
+
 onMounted(async () => {
 
-    const activeProject = useActiveProject()
+    res.onResponse(resData => {
+        if (!resData.value) return;
 
-    const eventsData = await $fetch<EventsPie[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders());
-    chartData.value.labels = eventsData.map(e => {
-        return `${e._id}`;
-    });
-    chartData.value.datasets[0].data = eventsData.map(e => e.count);
-    doughnutChartRef.value?.update();
+        chartData.value.labels = resData.value.map(e => {
+            return `${e._id}`;
+        });
 
-    if (window.innerWidth < 800) {
-        if (chartOptions.value?.plugins?.legend?.display) {
-            chartOptions.value.plugins.legend.display = false;
+        chartData.value.datasets[0].data = resData.value.map(e => e.count);
+        doughnutChartRef.value?.update();
+
+        if (window.innerWidth < 800) {
+            if (chartOptions.value?.plugins?.legend?.display) {
+                chartOptions.value.plugins.legend.display = false;
+            }
         }
-    }
+
+    });
+})
+
+
+const chartVisible = computed(() => {
+    if (res.pending.value) return false;
+    if (!res.data.value) return false;
+    return true;
 })
 
 </script>
 
 
 <template>
-    <DoughnutChart v-bind="doughnutChartProps"> </DoughnutChart>
+    <div>
+        <div v-if="!chartVisible" class="flex justify-center py-40">
+            <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
+        </div>
+        <DoughnutChart v-if="chartVisible" v-bind="doughnutChartProps"> </DoughnutChart>
+    </div>
 </template>

dashboard/components/events/EventsStackedBarChart.vue

@@ -1,52 +1,74 @@
 <script lang="ts" setup>
+import type { Slice } from '@services/DateService';
 import { onMounted } from 'vue';
 
 const datasets = ref<any[]>([]);
 const labels = ref<string[]>([]);
 const ready = ref<boolean>(false);
+const props = defineProps<{ slice: Slice }>();
 
-const props = defineProps<{ slice: SliceName }>();
+const slice = computed(() => props.slice);
 
-async function loadData() {
-    const response = await useTimelineDataRaw('events_stacked', props.slice);
-    if (!response) return;
+const res = useEventsStackedTimeline(slice);
 
-    const fixed = fixMetrics(response, props.slice, { advanced: true, advancedGroupKey: 'name' });
-
-    const parsedDatasets: any[] = [];
-    const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
-
-    for (let i = 0; i < fixed.allKeys.length; i++) {
-        const line: any = {
-            data: [],
-            color: colors[i] || '#FF0000',
-            label: fixed.allKeys[i]
-        };
-        parsedDatasets.push(line)
-        fixed.data.forEach((e: { key: string, value: number }[]) => {
-            const target = e.find(e => e.key == fixed.allKeys[i]);
-            if (!target) return;
-            line.data.push(target.value);
-        });
-
-    }
-
-    datasets.value = parsedDatasets;
-    labels.value = fixed.labels;
-    ready.value = true;
-
-}
+const { safeSnapshotDates } = useSnapshot()
 
 onMounted(async () => {
-    await loadData();
-    watch(props, async () => { await loadData(); });
+
+    res.execute();
+
+    res.onResponse(resData => {
+
+        if (!resData.value) return;
+
+        const fixed = fixMetrics({
+           data:resData.value,
+           from: safeSnapshotDates.value.from,
+           to: safeSnapshotDates.value.to
+        }, slice.value, {
+            advanced: true,
+            advancedGroupKey: 'name'
+        });
+
+        const parsedDatasets: any[] = [];
+        const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
+
+        for (let i = 0; i < fixed.allKeys.length; i++) {
+            const line: any = {
+                data: [],
+                color: colors[i] || '#FF0000',
+                label: fixed.allKeys[i]
+            };
+            parsedDatasets.push(line)
+            fixed.data.forEach((e: { key: string, value: number }[]) => {
+                const target = e.find(e => e.key == fixed.allKeys[i]);
+                if (!target) return;
+                line.data.push(target.value);
+            });
+        }
+
+        datasets.value = parsedDatasets;
+        labels.value = fixed.labels;
+        ready.value = true;
+    });
+
+})
+
+
+const chartVisible = computed(() => {
+    if (res.pending.value) return false;
+    if (!res.data.value) return false;
+    return true;
 })
 
 </script>
 
 <template>
     <div>
-        <AdvancedStackedBarChart v-if="ready" :datasets="datasets" :labels="labels">
+        <div v-if="!chartVisible" class="flex justify-center py-40">
+            <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
+        </div>
+        <AdvancedStackedBarChart v-if="chartVisible" :datasets="datasets" :labels="labels">
         </AdvancedStackedBarChart>
     </div>
 </template>

dashboard/components/settings/billing.vue

@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+
+const activeProject = useActiveProject();
+
+definePageMeta({ layout: 'dashboard' });
+
+const { data: planData } = useFetch('/api/project/plan', signHeaders());
+
+const percent = computed(() => {
+    if (!planData.value) return '-';
+    return (100 / planData.value.limit * planData.value.count).toFixed(2) + '%';
+});
+
+const color = computed(() => {
+    if (!planData.value) return 'blue';
+    if (planData.value.count >= planData.value.limit) return 'red';
+    return 'blue';
+});
+
+const daysLeft = computed(() => {
+    if (!planData.value) return '-';
+    return (-dayjs().diff(planData.value.billing_expire_at, 'days')).toString();
+});
+
+const leftPercent = computed(() => {
+    if (!planData.value) return 0;
+    const left = dayjs().diff(planData.value.billing_expire_at, 'days');
+    const total = dayjs(planData.value.billing_start_at).diff(planData.value.billing_expire_at, 'days');
+    const percent = 100 - (100 / total * left);
+    return percent;
+});
+
+const prettyExpireDate = computed(() => {
+    if (!planData.value) return '';
+    return dayjs(planData.value.billing_expire_at).format('DD/MM/YYYY');
+});
+
+
+const { data: invoices } = await useFetch(`/api/pay/${activeProject.value?._id.toString()}/invoices`, signHeaders())
+
+const showPricingDrawer = ref<boolean>(false);
+function onPlanUpgradeClick() {
+    showPricingDrawer.value = true;
+}
+
+function openInvoice(link: string) {
+    window.open(link, '_blank');
+}
+
+function getPremiumName(type: number) {
+    if (type === 0) return 'FREE';
+    if (type === 1) return 'ACCELERATION';
+    if (type === 2) return 'EXPANSION';
+    return 'CUSTOM';
+
+}
+
+</script>
+
+<template>
+
+    <div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
+
+        <Transition name="pdrawer">
+            <PricingDrawer @onCloseClick="showPricingDrawer = false" :currentSub="planData?.premium_type || 0"
+                class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]"
+                v-if=showPricingDrawer>
+            </PricingDrawer>
+        </Transition>
+
+        <div @click="showPricingDrawer = false" v-if="showPricingDrawer"
+            class="barrier absolute left-0 top-0 w-full h-full z-[19] bg-black/40 backdrop-blur-[1px]">
+        </div>
+
+        <div class="poppins font-semibold text-[1.8rem]">
+            Billing
+        </div>
+
+        <div class="poppins text-[1.3rem] text-text-sub">
+            Manage your billing cycle for the project
+            <span class="font-bold">
+                {{ activeProject?.name || '' }}
+            </span>
+        </div>
+
+        <div class="my-4 mb-10 w-full bg-gray-400/30 h-[1px]">
+        </div>
+
+        <div class="flex flex-wrap justify-start gap-8">
+            <Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
+                <div class="flex flex-col gap-6 px-8 grow">
+                    <div class="flex justify-between flex-col sm:flex-row">
+                        <div class="flex flex-col">
+                            <div class="flex gap-3 items-center">
+                                <div class="poppins font-semibold text-[1.1rem]">
+                                    {{ planData.premium ? 'Premium plan' : 'Basic plan' }}
+                                </div>
+                                <div
+                                    class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
+                                    {{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
+                                </div>
+                            </div>
+                            <div class="poppins text-text-sub text-[.9rem]">
+                                Our free plan for testing the product.
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-1">
+                            <div class="poppins font-semibold text-[2rem]"> $0 </div>
+                            <div class="poppins text-text-sub mt-2"> per month </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="poppins"> Billing period:</div>
+                        <div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
+                            <div class="grow w-full md:w-auto">
+                                <UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
+                            </div>
+                            <div class="poppins"> {{ daysLeft }} days left </div>
+                        </div>
+                        <div class="flex justify-center">
+                            Subscription: {{ planData.subscription_status }}
+                        </div>
+                    </div>
+                </div>
+                <div class="my-4 w-full bg-gray-400/30 h-[1px]">
+                </div>
+                <div class="flex justify-between px-8 flex-col sm:flex-row">
+                    <div class="flex gap-2 text-text-sub text-[.9rem]">
+                        <div class="poppins"> Expire date:</div>
+                        <div> {{ prettyExpireDate }}</div>
+                    </div>
+                    <div v-if="!isGuest" @click="onPlanUpgradeClick()"
+                        class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
+                        <div class="poppins"> Upgrade plan </div>
+                        <i class="fas fa-arrow-up-right"></i>
+                    </div>
+                </div>
+            </Card>
+
+            <Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
+                <div class="flex flex-col gap-6 px-8">
+                    <div class="flex justify-between">
+                        <div class="flex flex-col">
+                            <div class="poppins font-semibold text-[1.1rem]">
+                                Usage
+                            </div>
+                            <div class="poppins text-text-sub text-[.9rem]">
+                                Check the usage limits of your project.
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="poppins"> Usage:</div>
+                        <div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
+                            <div class="grow w-full md:w-auto">
+                                <UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
+                                </UProgress>
+                            </div>
+                            <div class="poppins"> {{ percent }}</div>
+                        </div>
+                        <div class="flex justify-center">
+                            {{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
+                        </div>
+                    </div>
+                </div>
+            </Card>
+        </div>
+
+
+        <CardTitled v-if="!isGuest" title="Invoices" :sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''"
+            class="p-4 mt-8 max-w-[72rem]">
+
+            <div class="flex flex-col gap-2">
+
+                <div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg" v-for="invoice of invoices">
+
+                    <div> <i class="fal fa-file-invoice"></i> </div>
+
+                    <div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
+                        <div> {{ new Date(invoice.date).toLocaleString() }} </div>
+                        <div> € {{ invoice.cost / 100 }} </div>
+                        <div> {{ invoice.id }} </div>
+                        <div
+                            class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
+                            {{ invoice.status }}
+                        </div>
+                    </div>
+
+                    <div>
+                        <i @click="openInvoice(invoice.link)"
+                            class="far fa-download cursor-pointer hover:text-white/80"></i>
+                    </div>
+                </div>
+
+            </div>
+
+        </CardTitled>
+
+    </div>
+
+</template>
+
+<style scoped lang="scss">
+.pdrawer-enter-active,
+.pdrawer-leave-active {
+    transition: all .5s ease-in-out;
+}
+
+.pdrawer-enter-from,
+.pdrawer-leave-to {
+    transform: translateX(100%)
+}
+
+.pdrawer-enter-to,
+.pdrawer-leave-from {
+    transform: translateX(0)
+}
+</style>

dashboard/components/settings/members.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+
+definePageMeta({ layout: 'dashboard' });
+
+const activeProject = useActiveProject();
+
+const columns = [
+    { key: 'me', label: '' },
+    { key: 'email', label: 'Email' },
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' },
+    { key: 'action', label: 'Actions' },
+    // { key: 'pending', label: 'Pending' },
+]
+
+const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', signHeaders());
+
+const showAddMember = ref<boolean>(false);
+
+const addMemberEmail = ref<string>("");
+
+async function kickMember(email: string) {
+
+    const sure = confirm('Are you sure to kick ' + email + ' ?');
+    if (!sure) return;
+
+    try {
+
+        await $fetch('/api/project/members/kick', {
+            method: 'POST',
+            ...signHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ email }),
+            onResponseError({ request, response, options }) {
+                alert(response.statusText);
+            }
+        });
+
+        refreshMembers();
+
+    } catch (ex: any) { }
+
+
+
+}
+
+async function addMember() {
+
+    if (addMemberEmail.value.length === 0) return;
+
+    try {
+
+        showAddMember.value = false;
+
+        await $fetch('/api/project/members/add', {
+            method: 'POST',
+            ...signHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ email: addMemberEmail.value }),
+            onResponseError({ request, response, options }) {
+                alert(response.statusText);
+            }
+        });
+
+        addMemberEmail.value = '';
+
+        refreshMembers();
+
+    } catch (ex: any) { }
+
+
+
+}
+
+</script>
+
+
+<template>
+
+    <div class="home w-full h-full px-10 lg:px-6 overflow-y-auto pb-[12rem] md:pb-0 py-2">
+
+
+        <div class="flex flex-col gap-4">
+
+            <div v-if="!isGuest" @click="showAddMember = !showAddMember;"
+                class="flex items-center gap-2 bg-menu w-fit px-3 py-2 rounded-lg hover:bg-menu/80 cursor-pointer">
+                <i class="fas fa-plus"></i>
+                <div> Add member </div>
+            </div>
+
+            <div v-if="showAddMember" class="flex gap-4 items-center">
+                <input v-model="addMemberEmail" class="focus:outline-none bg-menu px-4 py-1 rounded-lg" type="text"
+                    placeholder="user email">
+                <div @click="addMember" class="bg-menu w-fit py-1 px-4 rounded-lg hover:bg-menu/80 cursor-pointer">
+                    Add
+                </div>
+            </div>
+
+            <UTable :rows="members || []" :columns="columns">
+                <template #me-data="e">
+                    <i v-if="e.row.me" class="far fa-user"></i>
+                    <i v-if="!e.row.me"></i>
+                </template>
+
+                <template #action-data="e" v-if="!isGuest">
+                    <div @click="kickMember(e.row.email)" v-if="e.row.role != 'OWNER'"
+                        class="text-red-500 hover:bg-black/20 cursor-pointer outline outline-[1px] outline-red-500 px-3 py-1 rounded-lg text-center">
+                        Kick
+                    </div>
+                </template>
+
+            </UTable>
+
+        </div>
+
+    </div>
+
+</template>