Better Form Stats (#567)

* Better Form Stats

* fix lint

* submission timer store in localstorage

* Update test case for stats

* remove extra code

* fix form stats

* on restart remove timer

* fix resetTimer function name

* Improve form timer

* Fix timer after form validation error + polish UI

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/forms/[slug]/show/stats.vue

@@ -1,8 +1,39 @@
 <template>
   <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
-    <h3 class="font-semibold mt-4 text-xl">
-      Form Analytics (last 30 days)
-    </h3>
+    <div class="w-full flex flex-col sm:flex-row gap-2">
+      <div
+        v-for="(stat, index) in [
+          { label: 'Views', value: totalViews, placeholder: '123' },
+          { label: 'Submissions', value: totalSubmissions, placeholder: '123' },
+          { label: 'Completion Rate', value: completionRate + '%', placeholder: '100%' },
+          { label: 'Average Duration', value: averageDuration, placeholder: '10 seconds' }
+        ]"
+        :key="index"
+        class="border border-gray-300 rounded-lg shadow-sm p-4 w-full mx-auto"
+      >
+        <div class="mb-2 text-sm text-gray-500">
+          {{ stat.label }}
+        </div>
+         
+        <Loader
+          v-if="isLoading"
+          class="h-6 w-6 text-nt-blue"
+        />
+        <span
+          v-else-if="form.is_pro"
+          class="font-medium text-2xl"
+        >
+          {{ stat.value }}
+        </span>
+        <span
+          v-else
+          class="blur-[3px]"
+        >
+          {{ stat.placeholder }}
+        </span>
+      </div>
+    </div>
+
     <form-stats :form="form" />
   </div>
 </template>
@@ -20,4 +51,33 @@ definePageMeta({
 useOpnSeoMeta({
   title: props.form ? "Form Analytics - " + props.form.title : "Form Analytics",
 })
+
+const isLoading = ref(false)
+const totalViews = ref(0)
+const totalSubmissions = ref(0)
+const completionRate = ref(0)
+const averageDuration = ref('-')
+
+onMounted(() => {
+  getCardData()
+})
+
+const getCardData = async() => {
+  if (!props.form || !props.form.is_pro) { return null }
+  isLoading.value = true
+  opnFetch(
+      "/open/workspaces/" +
+      props.form.workspace_id +
+      "/form-stats-details/" +
+      props.form.id,
+  ).then((responseData) => {
+    if (responseData) {
+      totalViews.value = responseData.views ?? 0
+      totalSubmissions.value = responseData.submissions ?? 0
+      completionRate.value = Math.min(100,responseData.completion_rate ?? 0)
+      averageDuration.value = responseData.average_duration ?? '-'
+      isLoading.value = false
+    }
+  })
+}
 </script>