updating ui

dashboard/components/CVerticalNavigation.vue

@@ -120,7 +120,14 @@ watch(selected, () => {
 
                 <!-- <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div> -->
 
-                <USelectMenu class="w-full" v-if="projects" v-model="selected" :options="projects">
+                <USelectMenu :uiMenu="{
+                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
+                    base: '!bg-lyx-widget',
+                    option: {
+                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-widget-lighter'
+                    }
+                }" class="w-full" v-if="projects" v-model="selected" :options="projects">
 
                     <template #option="{ option, active, selected }">
                         <div class="flex items-center gap-2">
@@ -152,7 +159,7 @@ watch(selected, () => {
 
             </div>
 
-            <div class="px-4 w-full flex-col">
+            <div class="px-2 w-full flex-col">
 
                 <div class="flex mb-2 px-2 items-center justify-between">
                     <div class="poppins text-[.8rem]">
@@ -165,7 +172,14 @@ watch(selected, () => {
                     </div>
                 </div>
 
-                <USelectMenu class="w-full" v-model="snapshot" :options="snapshotsItems">
+                <USelectMenu :uiMenu="{
+                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
+                    base: '!bg-lyx-widget',
+                    option: {
+                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-widget-lighter'
+                    }
+                }" class="w-full" v-model="snapshot" :options="snapshotsItems">
                     <template #label>
                         <div class="flex items-center gap-2">
                             <div :style="'background-color:' + snapshot?.color" class="w-2 h-2 rounded-full">
@@ -194,7 +208,7 @@ watch(selected, () => {
                         </div>
                     </div>
 
-                    <LyxUiButton @click="generatePDF()" type="primary" class="w-full text-center mt-4">
+                    <LyxUiButton @click="generatePDF()" type="secondary" class="w-full text-center mt-4">
                         Download report
                     </LyxUiButton>
 
@@ -236,7 +250,7 @@ watch(selected, () => {
                             }">
 
                             <NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
-                                tag="div" class="flex items-center" :to="entry.to || '/'">
+                                tag="div" class="w-full flex items-center" :to="entry.to || '/'">
                                 <div class="flex items-center w-[1.4rem] mr-2 text-[1.1rem] justify-center">
                                     <i :class="entry.icon"></i>
                                 </div>
@@ -267,6 +281,18 @@ watch(selected, () => {
                             class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
                             <i class="fab fa-discord"></i>
                         </NuxtLink>
+                        <NuxtLink to="https://x.com/litlyx" target="_blank"
+                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
+                            <i class="fab fa-x-twitter"></i>
+                        </NuxtLink>
+                        <NuxtLink to="https://dev.to/litlyx-org" target="_blank"
+                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
+                            <i class="fab fa-dev"></i>
+                        </NuxtLink>
+                        <NuxtLink to="/admin" v-if="isAdmin"
+                            class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
+                            <i class="fas fa-cat"></i>
+                        </NuxtLink>
                     </div>
 
                     <UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">

dashboard/components/CustomTab.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+
+type CItem = { label: string, slot: string }
+const props = defineProps<{ items: CItem[] }>();
+
+const activeTabIndex = ref<number>(0);
+
+</script>
+
+<template>
+    <div>
+        <div class="flex">
+            <div v-for="(tab, index) of items" @click="activeTabIndex = index"
+                class="px-6 pb-3 poppins font-medium text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
+                    '!border-[#88A7FF] text-[#88A7FF]': activeTabIndex === index,
+                    'hover:border-lyx-text-dark hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
+                }">
+                {{ tab.label }}
+            </div>
+            <div class="border-b-[1px] border-lyx-text-darker w-full">
+
+            </div>
+        </div>
+        <div>
+            <slot :name="props.items[activeTabIndex].slot"></slot>
+        </div>
+    </div>
+</template>

dashboard/components/lyx-ui/Button.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-
-export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
-
-const props = defineProps<{ type: ButtonType, disabled?: boolean }>();
-
-</script>
-
-<template>
-    <div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
-        'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
-        'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
-        'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
-        'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
-        'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-lighter !cursor-not-allowed !text-lyx-text-darker': disabled === true
-    }">
-        <slot></slot>
-    </div>
-</template>

dashboard/components/lyx-ui/Card.vue

@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-
-
-</script>
-
-<template>
-    <div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
-        <slot></slot>
-    </div>
-</template>

dashboard/components/lyx-ui/Icon.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-
-const props = defineProps<{ icon: string }>();
-
-</script>
-
-<template>
-    <span class="material-symbols-outlined">
-        {{ props.icon }}
-    </span>
-</template>

dashboard/components/lyx-ui/ProjectSelector.vue

@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-
-
-</script>
-
-<template>
-    <LyxUiCard>
-        <div class="flex items-center">
-            <div class="grow">
-                PROJECT_NAME
-            </div>
-            <div>
-                Active
-            </div>
-            <LyxUiIcon icon="drag_indicator"></LyxUiIcon>
-        </div>
-        <div class="flex items-center">
-            <LyxUiButton type="primary">
-                CURRENT_SUBSCRIPTION
-            </LyxUiButton>
-            <div class="poppins font-light text-lyx-text-dark">
-                next billing: NEXT_BILLING_DATE
-            </div>
-        </div>
-    </LyxUiCard>
-</template>

dashboard/components/settings/Account.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { SettingsTemplateEntry } from './Template.vue';
+
+const entries: SettingsTemplateEntry[] = [
+    { id: 'delete', title: 'Delete account', text: 'Delete your account' },
+]
+
+
+const { setToken } = useAccessToken();
+
+async function deleteAccount() {
+    const sure = confirm("Are you sure you want to delete this account ?");
+    if (!sure) return;
+    await $fetch("/api/user/delete_account", {
+        ...signHeaders(),
+        method: "DELETE"
+    })
+
+    setToken('');
+    location.href = "/login"
+}
+
+</script>
+
+
+<template>
+    <SettingsTemplate :entries="entries">
+        <template #delete>
+            <div
+                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
+                <div class="poppins font-semibold"> Deleting this account will also remove its projects </div>
+                <div @click="deleteAccount()"
+                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
+                    Delete account
+                </div>
+            </div>
+        </template>
+    </SettingsTemplate>
+</template>

dashboard/components/settings/General.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { SettingsTemplateEntry } from './Template.vue';
+
+
+const entries: SettingsTemplateEntry[] = [
+    { id: 'pname', title: 'Name', text: 'Project name' },
+    { id: 'pid', title: 'Id', text: 'Project id' },
+    { id: 'pscript', title: 'Script', text: 'Universal javascript integration' },
+    { id: 'pdelete', title: 'Delete', text: 'Delete current project' },
+]
+
+const activeProject = useActiveProject();
+const projectNameInputVal = ref<string>(activeProject.value?.name || '');
+
+const canChange = computed(() => {
+    if (activeProject.value?.name == projectNameInputVal.value) return false;
+    if (projectNameInputVal.value.length === 0) return false;
+    return true;
+});
+
+
+</script>
+
+
+<template>
+    <SettingsTemplate :entries="entries">
+        <template #pname>
+            <div class="flex items-center gap-4">
+                <LyxUiInput class="w-full px-4 py-2" v-model="projectNameInputVal"></LyxUiInput>
+                <LyxUiButton :disabled="!canChange" type="primary"> Change </LyxUiButton>
+            </div>
+        </template>
+        <template #pid>
+            <LyxUiCard class="w-full flex items-center">
+                <div class="grow">{{ activeProject?._id.toString() }}</div>
+                <div><i class="far fa-copy"></i></div>
+            </LyxUiCard>
+        </template>
+        <template #pscript>
+            <LyxUiCard class="w-full flex items-center">
+                <div class="grow">
+                    {{ `
+                    <script defer data-project="${activeProject?._id}"
+                        src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }}
+                </div>
+                <div><i class="far fa-copy"></i></div>
+            </LyxUiCard>
+        </template>
+        <template #pdelete>
+            <div class="flex justify-end">
+                <LyxUiButton type="danger">
+                    Delete project
+                </LyxUiButton>
+            </div>
+        </template>
+    </SettingsTemplate>
+</template>

dashboard/components/settings/Template.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+
+export type SettingsTemplateEntry = {
+    title: string,
+    text: string,
+    id: string
+}
+
+type SettingsTemplateProp = {
+    entries: SettingsTemplateEntry[]
+}
+
+const props = defineProps<SettingsTemplateProp>();
+
+</script>
+
+
+<template>
+    <div class="mt-10 px-4">
+        <div v-for="(entry, index) of props.entries" class="flex flex-col">
+            <div class="flex">
+                <div class="flex-[2]">
+                    <div class="poppins font-medium text-lyx-text">
+                        {{ entry.title }}
+                    </div>
+                    <div class="poppins font-regular text-lyx-text-dark">
+                        {{ entry.text }}
+                    </div>
+                </div>
+                <div class="flex-[3]">
+                    <slot :name="entry.id"></slot>
+                </div>
+            </div>
+            <div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-widget-lighter w-full my-10"></div>
+        </div>
+    </div>
+</template>

dashboard/components/settings/billing.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs';
+import type { SettingsTemplateEntry } from './Template.vue';
 
 const activeProject = useActiveProject();
 
@@ -56,11 +57,18 @@ function getPremiumName(type: number) {
 
 }
 
+
+const entries: SettingsTemplateEntry[] = [
+    { id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
+    { id: 'usage', title: 'Usage', text: 'Show usage of current project' },
+    { id: 'invoices', title: 'Invoices', text: 'Manage invoices of current project' },
+]
+
+
 </script>
 
 <template>
-
-    <div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
+    <div class="relative">
 
         <Transition name="pdrawer">
             <PricingDrawer @onCloseClick="showPricingDrawer = false" :currentSub="planData?.premium_type || 0"
@@ -69,26 +77,9 @@ function getPremiumName(type: number) {
             </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">
+        <SettingsTemplate :entries="entries">
+            <template #plan>
+                <LyxUiCard v-if="planData" class="flex flex-col w-full">
                     <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">
@@ -136,9 +127,10 @@ function getPremiumName(type: number) {
                             <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">
+                </LyxUiCard>
+            </template>
+            <template #usage>
+                <LyxUiCard v-if="planData" class="flex flex-col w-full">
                     <div class="flex flex-col gap-6 px-8">
                         <div class="flex justify-between">
                             <div class="flex flex-col">
@@ -164,16 +156,17 @@ function getPremiumName(type: number) {
                             </div>
                         </div>
                     </div>
-            </Card>
-        </div>
+                </LyxUiCard>
+            </template>
+            <template #invoices>
 
-
-        <CardTitled v-if="!isGuest" title="Invoices" :sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''"
-            class="p-4 mt-8 max-w-[72rem]">
+                <CardTitled v-if="!isGuest" title="Invoices"
+                    :sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''" class="p-4 mt-8 w-full">
 
                     <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 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>
 
@@ -196,9 +189,11 @@ function getPremiumName(type: number) {
                     </div>
 
                 </CardTitled>
-
+            </template>
+        </SettingsTemplate>
     </div>
 
+
 </template>
 
 <style scoped lang="scss">

dashboard/components/settings/members.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { SettingsTemplateEntry } from './Template.vue';
+
 
 definePageMeta({ layout: 'dashboard' });
 
-const activeProject = useActiveProject();
 
 const columns = [
     { key: 'me', label: '' },
@@ -67,32 +68,31 @@ async function addMember() {
     } catch (ex: any) { }
 
 
-
 }
 
+const entries: SettingsTemplateEntry[] = [
+    { id: 'add', title: 'Add member', text: 'Add new member to project' },
+    { id: 'members', title: 'Members', text: 'Manage members of current project' },
+]
+
 </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>
+    <SettingsTemplate :entries="entries">
+        <template #add>
+            <div v-if="!isGuest" class="flex flex-col">
+                <div class="flex gap-4 items-center">
+                    <LyxUiInput class="px-4 py-1 w-full" placeholder="User email" v-model="addMemberEmail"></LyxUiInput>
+                    <LyxUiButton @click="addMember" type="secondary"> Add </LyxUiButton>
                 </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 class="poppins text-[.8rem] mt-2 text-lyx-text-darker">
+                    User should have been registered to Litlyx
                 </div>
             </div>
+        </template>
+        <template #members>
+
 
             <UTable :rows="members || []" :columns="columns">
                 <template #me-data="e">
@@ -108,9 +108,7 @@ async function addMember() {
                 </template>
 
             </UTable>
-
-        </div>
-
-    </div>
+        </template>
+    </SettingsTemplate>
 
 </template>

dashboard/layouts/dashboard.vue

@@ -11,31 +11,32 @@ const sections: Section[] = [
     {
         title: 'General',
         entries: [
-            { label: 'Projects', icon: 'far fa-table-layout', to: '/project_selector' },
+            // { label: 'Projects', icon: 'far fa-table-layout', to: '/project_selector' },
             // { label: 'Members', icon: 'far fa-users', to: '/members' },
-            { label: 'Admin', icon: 'fas fa-cat', adminOnly: true, to: '/admin' },
+            // { label: 'Admin', icon: 'fas fa-cat', adminOnly: true, to: '/admin' },
         ]
     },
     {
         title: 'Project',
         entries: [
-            { label: 'Dashboard', to: '/', icon: 'far fa-table-layout' },
-            { label: 'Events', to: '/events', icon: 'far fa-bolt' },
-            { label: 'Analyst', to: '/analyst', icon: 'far fa-microchip-ai' },
-            { label: 'Settings', to: '/settings', icon: 'far fa-gear' },
+            { label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
+            { label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
+            { label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
+            { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
             // { label: 'Report', to: '/report', icon: 'far fa-notes' },
             // { label: 'AI', to: '/dashboard/settings', icon: 'far fa-robot brightness-[.4]' },
             // { label: 'Visits', to: '/dashboard/visits', icon: 'far fa-eye' },
             // { label: 'Events', to: '/dashboard/events', icon: 'far fa-line-chart' },
+            {
+                label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
+                action() { Lit.event('docs_clicked') },
+            },
         ]
     },
     {
         title: 'Non si vede',
         entries: [
-            {
-                label: 'Docs', to: 'https://docs.litlyx.com', icon: 'far fa-book-open', external: true,
-                action() { Lit.event('docs_clicked') },
-            },
+          
             // {
             //     label: 'Github', to: 'https://github.com/litlyx/litlyx', icon: 'fab fa-github', external: true,
             //     action() { Lit.event('git_clicked') },

dashboard/pages/index.vue

@@ -69,6 +69,14 @@ const selectLabels = [
     // { label: 'Month', value: 'month' },
 ];
 
+
+const limitAlertActions: any[] = [
+    {
+        label: 'Upgrade', variant: "outline", color: 'white',
+        trailing: true, action: () => { }
+    }
+]
+
 </script>
 
 
@@ -76,18 +84,33 @@ const selectLabels = [
 
     <div class="dashboard w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
 
-        {{ changingProject }}
-
         <div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction && !changingProject">
 
             <div class="w-full px-4 py-2">
-                <div v-if="limitsInfo && limitsInfo.limited"
+                <!-- <div v-if="limitsInfo && !limitsInfo.limited"
                     class="bg-orange-600 justify-center flex gap-2 py-2 px-4 font-semibold text-[1.2rem] rounded-lg">
                     <div class="poppins text-text"> Limit reached </div>
                     <NuxtLink to="/plans" class="poppins text-[#393972] underline cursor-pointer">
                         Upgrade project
                     </NuxtLink>
+                </div> -->
+
+
+                <div v-if="limitsInfo && limitsInfo.limited" class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex items-center">
+                    <div class="flex flex-col grow">
+                    <div class="poppins font-semibold text-[#fbbf24]">
+                        Limit reached
                     </div>
+                    <div class="poppins text-[#fbbf24]">
+                        Litlyx has stopped to collect yur data. Please upgrade the plan for a minimal data loss.
+                    </div>
+                </div>
+                <div>
+                    <LyxUiButton type="outline"> Upgrade </LyxUiButton>
+                </div>
+
+                </div>
+
             </div>
 
             <DashboardTopSection></DashboardTopSection>

dashboard/pages/settings.vue

@@ -13,12 +13,12 @@ const items = [
 </script>
 
 <template>
-    <div class="px-10 py-8 h-dvh overflow-y-auto">
+    <div class="px-10 py-8 h-dvh overflow-y-auto hide-scrollbars">
         <div class="poppins font-semibold text-[1.3rem]"> Settings </div>
 
-        <UTabs :items="items" class="mt-8">
+        <CustomTab :items="items" class="mt-8">
             <template #general>
-                TODO
+                <SettingsGeneral></SettingsGeneral>
             </template>
             <template #members>
                 <SettingsMembers></SettingsMembers>
@@ -27,8 +27,23 @@ const items = [
                 <SettingsBilling></SettingsBilling>
             </template>
             <template #account>
-                TODO
+                <SettingsAccount></SettingsAccount>
             </template>
-        </UTabs>
+        </CustomTab>
+
+        <!-- <UTabs :items="items" class="mt-8">
+            <template #general>
+                <SettingsGeneral></SettingsGeneral>
+            </template>
+            <template #members>
+                <SettingsMembers></SettingsMembers>
+            </template>
+            <template #billing>
+                <SettingsBilling></SettingsBilling>
+            </template>
+            <template #account>
+                <SettingsAccount></SettingsAccount>
+            </template>
+        </UTabs> -->
     </div>
 </template>