feat: added welcome page

frontend/src/components/Modals/LeadModal.vue

@@ -122,7 +122,7 @@ const createLead = createResource({
 const leadStatuses = computed(() => {
   let statuses = statusOptions('lead')
   if (!lead.status) {
-    lead.status = statuses[0].value
+    lead.status = statuses?.[0]?.value
   }
   return statuses
 })
@@ -192,7 +192,7 @@ onMounted(() => {
   if (!lead.lead_owner) {
     lead.lead_owner = getUser().name
   }
-  if (!lead.status && leadStatuses.value[0].value) {
+  if (!lead.status && leadStatuses.value[0]?.value) {
     lead.status = leadStatuses.value[0].value
   }
 })

frontend/src/pages/Welcome.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-col gap-5 justify-center items-center h-full">
+    <div class="font-semibold text-2xl text-ink-gray-8 mb-3">
+      {{ __('Welcome {0}, lets add your first lead', [name]) }}
+    </div>
+    <div class="flex gap-3">
+      <div
+        class="flex flex-col px-6 pt-13 pb-7 justify-between bg-surface-gray-1 rounded-2xl items-center space-y-2 size-56"
+      >
+        <div class="flex flex-col items-center gap-2.5">
+          <div class="flex -space-x-2">
+            <div
+              v-for="i in 3"
+              :key="i"
+              class="bg-surface-gray-3 ring-2 ring-outline-white p-2.5 rounded-full"
+            >
+              <AvatarIcon />
+            </div>
+          </div>
+          <div class="text-p-base text-ink-gray-8 text-center">
+            {{ __('Start with sample 10 leads') }}
+          </div>
+        </div>
+        <Button variant="outline" :label="__('Add sample data')" />
+      </div>
+      <div
+        class="flex flex-col px-6 pt-13 pb-7 justify-between bg-surface-gray-1 rounded-2xl items-center space-y-2 size-56"
+      >
+        <div class="flex flex-col items-center gap-2.5">
+          <GoogleIcon class="" />
+          <div class="text-p-base text-ink-gray-8 text-center">
+            {{ __('Sync your contacts,email and calenders') }}
+          </div>
+        </div>
+        <Button variant="outline" :label="__('Connect your email')" />
+      </div>
+    </div>
+    <Button
+      variant="ghost"
+      :label="__('Or create leads manually')"
+      @click="showLeadModal = true"
+    />
+  </div>
+  <LeadModal
+    v-if="showLeadModal"
+    v-model="showLeadModal"
+    v-model:quickEntry="showQuickEntryModal"
+  />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
+</template>
+<script setup>
+import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
+import GoogleIcon from '@/components/Icons/GoogleIcon.vue'
+import LeadModal from '@/components/Modals/LeadModal.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import { ref } from 'vue'
+
+const name = ref('John Doe')
+const showLeadModal = ref(false)
+const showQuickEntryModal = ref(false)
+</script>

frontend/src/router.js

@@ -91,6 +91,11 @@ const routes = [
     component: () => import('@/pages/EmailTemplate.vue'),
     props: true,
   },
+  {
+    path: '/welcome',
+    name: 'Welcome',
+    component: () => import('@/pages/Welcome.vue'),
+  },
   {
     path: '/:invalidpath',
     name: 'Invalid Page',