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>