add colors + fix billing page

dashboard/components/AdvancedStackedBarChart.vue

@@ -67,7 +67,7 @@ const chartData = ref<ChartData<'bar'>>({
             label: e.label || '?',
             backgroundColor: [e.color],
             borderWidth: 0,
-            borderRadius: 8
+            borderRadius: 0
         }
     })
 });

dashboard/components/dashboard/EventsChart.vue

@@ -46,7 +46,28 @@ const chartData = ref<ChartData<'doughnut'>>({
         {
             rotation: 1,
             data: [],
-            backgroundColor: ['#6bbbe3', '#5655d0', '#a6d5cb', '#fae0b9'],
+            backgroundColor: [
+                "#5655d0",
+                "#6bbbe3",
+                "#a6d5cb",
+                "#fae0b9",
+                "#f28e8e",
+                "#e3a7e4",
+                "#c4a8e1",
+                "#8cc1d8",
+                "#f9c2cd",
+                "#b4e3b2",
+                "#ffdfba",
+                "#e9c3b5",
+                "#d5b8d6",
+                "#add7f6",
+                "#ffd1dc",
+                "#ffe7a1",
+                "#a8e6cf",
+                "#d4a5a5",
+                "#f3d6e4",
+                "#c3aed6"
+            ],
             borderColor: ['#1d1d1f'],
             borderWidth: 2
         },
@@ -87,7 +108,7 @@ const headers = computed(() => {
 });
 
 const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
-    method: 'POST', headers, lazy: true, immediate: false,transform:transformResponse
+    method: 'POST', headers, lazy: true, immediate: false, transform: transformResponse
 });
 
 onMounted(() => {

dashboard/components/events/EventsStackedBarChart.vue

@@ -30,7 +30,29 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
     });
 
     const parsedDatasets: any[] = [];
-    const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
+
+    const colors = [
+        "#5655d0", 
+        "#6bbbe3", 
+        "#a6d5cb", 
+        "#fae0b9", 
+        "#f28e8e", 
+        "#e3a7e4", 
+        "#c4a8e1", 
+        "#8cc1d8", 
+        "#f9c2cd", 
+        "#b4e3b2", 
+        "#ffdfba", 
+        "#e9c3b5", 
+        "#d5b8d6", 
+        "#add7f6", 
+        "#ffd1dc", 
+        "#ffe7a1", 
+        "#a8e6cf", 
+        "#d4a5a5", 
+        "#f3d6e4", 
+        "#c3aed6"  
+    ];
 
     for (let i = 0; i < fixed.allKeys.length; i++) {
         const line: any = {

dashboard/components/settings/billing.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs';
 import type { SettingsTemplateEntry } from './Template.vue';
+import { getPlanFromId, PREMIUM_PLAN, type PREMIUM_TAG } from '@data/PREMIUM';
 
 const activeProject = useActiveProject();
 
@@ -51,11 +52,17 @@ function openInvoice(link: string) {
 }
 
 function getPremiumName(type: number) {
-    if (type === 0) return 'FREE';
-    if (type === 1) return 'ACCELERATION';
-    if (type === 2) return 'EXPANSION';
-    return 'CUSTOM';
 
+    return Object.keys(PREMIUM_PLAN).map(e => ({
+        ...PREMIUM_PLAN[e as PREMIUM_TAG], name: e
+    })).find(e => e.ID == type)?.name;
+
+}
+
+function getPremiumPrice(type: number) {
+    const PLAN = getPlanFromId(type);
+    if (!PLAN) return '0,00';
+    return (PLAN.COST / 100).toFixed(2).replace('.', ',')
 }
 
 
@@ -104,7 +111,8 @@ const { visible } = usePricingDrawer();
                                 </div>
                             </div>
                             <div class="flex items-center gap-1">
-                                <div class="poppins font-semibold text-[2rem]"> $0 </div>
+                                <div class="poppins font-semibold text-[2rem]"> €
+                                    {{ getPremiumPrice(planData.premium_type) }} </div>
                                 <div class="poppins text-text-sub mt-2"> per month </div>
                             </div>
                         </div>

shared/data/PREMIUM.ts

@@ -23,7 +23,8 @@ export type PREMIUM_DATA = {
     AI_MESSAGE_LIMIT: number,
     PRICE: string,
     PRICE_TEST: string,
-    ID: number
+    ID: number,
+    COST: number
 }
 
 export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
@@ -32,98 +33,116 @@ export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
         COUNT_LIMIT: 5_000,
         AI_MESSAGE_LIMIT: 10,
         PRICE: 'price_1POKCMB2lPUiVs9VLe3QjIHl',
-        PRICE_TEST: 'price_1PNbHYB2lPUiVs9VZP32xglF'
+        PRICE_TEST: 'price_1PNbHYB2lPUiVs9VZP32xglF',
+        COST: 0
     },
     PLAN_1: {
         ID: 1,
         COUNT_LIMIT: 150_000,
         AI_MESSAGE_LIMIT: 100,
         PRICE: 'price_1POKCOB2lPUiVs9VC13s2rQw',
-        PRICE_TEST: 'price_1PNZjVB2lPUiVs9VrsTbJL04'
+        PRICE_TEST: 'price_1PNZjVB2lPUiVs9VrsTbJL04',
+        COST: 0
     },
     PLAN_2: {
         ID: 2,
         COUNT_LIMIT: 500_000,
         AI_MESSAGE_LIMIT: 5_000,
         PRICE: 'price_1POKCKB2lPUiVs9Vol8XOmhW',
-        PRICE_TEST: 'price_1POK34B2lPUiVs9VIROb0IIV'
+        PRICE_TEST: 'price_1POK34B2lPUiVs9VIROb0IIV',
+        COST: 0
     },
     CUSTOM_1: {
         ID: 1001,
         COUNT_LIMIT: 10_000_000,
         AI_MESSAGE_LIMIT: 100_000,
         PRICE: 'price_1POKZyB2lPUiVs9VMAY6jXTV',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 0
     },
     INCUBATION: {
         ID: 101,
         COUNT_LIMIT: 50_000,
         AI_MESSAGE_LIMIT: 30,
         PRICE: 'price_1PdsyzB2lPUiVs9V4J246Jw0',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 499
     },
     ACCELERATION: {
         ID: 102,
         COUNT_LIMIT: 150_000,
         AI_MESSAGE_LIMIT: 100,
         PRICE: 'price_1Pdt5bB2lPUiVs9VhkuCouEt',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 999
     },
     GROWTH: {
         ID: 103,
         COUNT_LIMIT: 500_000,
         AI_MESSAGE_LIMIT: 3_000,
         PRICE: 'price_1PdszrB2lPUiVs9VIdkT3thv',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 2999
     },
     EXPANSION: {
         ID: 104,
         COUNT_LIMIT: 1_000_000,
         AI_MESSAGE_LIMIT: 5_000,
         PRICE: 'price_1Pdt0xB2lPUiVs9V0Rdt80Fe',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 5999
     },
     SCALING: {
         ID: 105,
         COUNT_LIMIT: 2_500_000,
         AI_MESSAGE_LIMIT: 10_000,
         PRICE: 'price_1Pdt1UB2lPUiVs9VUmxntSwZ',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 9999
     },
     UNICORN: {
         ID: 106,
         COUNT_LIMIT: 5_000_000,
         AI_MESSAGE_LIMIT: 20_000,
         PRICE: 'price_1Pdt2LB2lPUiVs9VGBFAIG9G',
-        PRICE_TEST: ''
+        PRICE_TEST: '',
+        COST: 14999
     },
     LIFETIME_GROWTH_ONETIME: {
         ID: 2001,
         COUNT_LIMIT: 500_000,
         AI_MESSAGE_LIMIT: 3_000,
         PRICE: 'price_1PvewGB2lPUiVs9VLheJC8s1',
-        PRICE_TEST: 'price_1Pvf7LB2lPUiVs9VMFNyzpim'
+        PRICE_TEST: 'price_1Pvf7LB2lPUiVs9VMFNyzpim',
+        COST: 239900
     },
     GROWTH_DUMMY: {
         ID: 5001,
         COUNT_LIMIT: 500_000,
         AI_MESSAGE_LIMIT: 3_000,
         PRICE: 'price_1PvgoRB2lPUiVs9VC51YBT7J',
-        PRICE_TEST: 'price_1PvgRTB2lPUiVs9V3kFSNC3G'     
+        PRICE_TEST: 'price_1PvgRTB2lPUiVs9V3kFSNC3G',
+        COST: 0
     }
 }
 
-CustomPremiumPriceModel.find({}).then(custom_prices => {
+try {
-    for (const custom_price of custom_prices) {
+
-        PREMIUM_PLAN[custom_price.tag] = {
+    CustomPremiumPriceModel.find({}).then(custom_prices => {
-            ID: custom_price.price_id,
+        for (const custom_price of custom_prices) {
-            COUNT_LIMIT: custom_price.count_limit,
+            PREMIUM_PLAN[custom_price.tag] = {
-            AI_MESSAGE_LIMIT: custom_price.ai_message_limit,
+                ID: custom_price.price_id,
-            PRICE: custom_price.price,
+                COUNT_LIMIT: custom_price.count_limit,
-            PRICE_TEST: custom_price.price_test || ''
+                AI_MESSAGE_LIMIT: custom_price.ai_message_limit,
+                PRICE: custom_price.price,
+                PRICE_TEST: custom_price.price_test || ''
+            }
         }
-    }
+    });
-});
+
+} catch (ex) {
+
+}
 
 
 export function getPlanFromTag(tag: PREMIUM_TAG) {