update menu + add event page

dashboard/components/events/EventsMetadataAnalyzer.vue

@@ -2,7 +2,6 @@
 
 const activeProject = useActiveProject();
 
-
 const eventNames = ref<string[]>([]);
 const selectedEventName = ref<string>();
 const metadataFields = ref<string[]>([]);

dashboard/components/events/EventsUserFlow.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+
+const activeProject = useActiveProject();
+
+const eventNames = ref<string[]>([]);
+const selectedEventName = ref<string>();
+
+onMounted(async () => {
+    eventNames.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/names`, signHeaders());
+});
+
+const userFlowData = ref<any>();
+const analyzing = ref<boolean>(false);
+
+async function analyzeEvent() {
+    userFlowData.value = undefined;
+    analyzing.value = true;
+    userFlowData.value = await $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?name=${selectedEventName.value}`, signHeaders());
+    analyzing.value = false;
+}
+
+</script>
+
+<template>
+    <CardTitled title="Event User Flow"
+        sub="Track your user's journey from external links to custom events within your platform." class="w-full p-4">
+
+        <div class="p-2 flex flex-col gap-3">
+            <USelectMenu searchable searchable-placeholder="Search an event..." class="w-full"
+                placeholder="Select an event" :options="eventNames" v-model="selectedEventName">
+            </USelectMenu>
+            <div v-if="selectedEventName && !analyzing" class="flex justify-center">
+                <div @click="analyzeEvent()"
+                    class="bg-bg w-fit px-8 py-2 poppins rounded-lg hover:bg-bg/80 cursor-pointer">
+                    Analyze
+                </div>
+            </div>
+
+            <div v-if="analyzing">
+                Analyzing...
+            </div>
+
+            <div class="flex flex-col gap-2" v-if="userFlowData">
+                <div class="flex gap-4 items-center bg-bg py-1 px-2 rounded-lg" v-for="(count, referrer) in userFlowData">
+                    <div class="w-5 h-5 flex items-center justify-center">
+                        <img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`" :alt="'referrer'">
+                    </div>
+                    <div> {{ referrer }} </div>
+                    <div class="grow"></div>
+                    <div> {{ count }} </div>
+                </div>
+            </div>
+
+        </div>
+
+    </CardTitled>
+</template>