feat: add analytics form page

Author: Adelino Ngomacha

libs/components/Dashboard/Settings/Forms/AIForm.vue

@@ -6,7 +6,7 @@
   <form>
     <div class="space-y-12">
       <div class="border-b border-gray-900/10 pb-12">
-        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
           <div class="sm:col-span-3">
             <label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Deploy AI
               Endpoints</label>
@@ -27,7 +27,7 @@
             </div>
           </div>
 
-          <div class="sm:col-span-3"></div>
+          <div class="sm:col-span-3" />
 
           <div class="sm:col-span-3">
             <div>

libs/components/Dashboard/Settings/Forms/AnalyticsForm.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <form>
+    <div class="space-y-12">
+      <div class="border-b border-gray-900/10 pb-12">
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+          <div class="sm:col-span-3">
+            <label for="driver" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
+            <div class="mt-2">
+              <select id="driver" name="country" autocomplete="country-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <option selected>
+                  Fathom
+                </option>
+                <option>Google Analytics</option>
+              </select>
+            </div>
+          </div>
+          <div class="sm:col-span-3" />
+
+          <div class="sm:col-span-3">
+            <label for="google-analytics" class="block text-sm font-medium leading-6 text-gray-900">Google Analytics (tracking-id)</label>
+            <div class="mt-2">
+              <input id="google-analytics" type="text" name="google-analytics" placeholder="UA-XXXXXXXXX-X" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label for="fathom" class="block text-sm font-medium leading-6 text-gray-900">Fathom (site-id)</label>
+            <div class="mt-2">
+              <input id="fathom" type="text" placeholder="WOLZMJDL" name="fathom" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm font-semibold leading-6 text-gray-900">
+        Cancel
+      </button>
+      <Button
+        type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Save
+      </Button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>

libs/components/Dashboard/Settings/SettingsFormManager.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AIForm from './Forms/AIForm.vue'
+import AnalyticsForm from './Forms/AnalyticsForm.vue'
 
 const props = defineProps({
   name: String,
@@ -113,7 +114,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
           <AIForm />
         </template>
         <template v-else-if="name === 'analytics'">
-          TODO Analytics
+          <AnalyticsForm />
         </template>
         <template v-else>
           <div class="text-center">
@@ -127,7 +128,6 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
           </div>
         </template>
       </div>
-
     </div>
   </main>
 </template>

libs/components/Dashboard/SettingsSidebar.vue

@@ -26,7 +26,7 @@
         <li>
           <RouterLink to="analytics" class="sidebar-links group flex items-center justify-between">
             <div class="flex items-center gap-x-2">
-              <div class="i-heroicons-square-3-stack-3d text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
+              <div class="i-heroicons-chart-bar text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
               Analytics
             </div>
             <div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />