From 4f4230a925e81a3745c07f9ecfc73d93b737c7dd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 27 Jul 2023 12:58:36 +0530
Subject: [PATCH] feat: added lead form page with tabs

---
 .../src/components/Icons/ActivityIcon.vue     |  38 ++++
 frontend/src/components/Icons/EmailIcon.vue   |  15 ++
 frontend/src/components/Icons/NoteIcon.vue    |  21 +++
 frontend/src/components/Icons/PhoneIcon.vue   |  15 ++
 frontend/src/components/Icons/TaskIcon.vue    |  17 ++
 frontend/src/pages/Lead.vue                   | 162 ++++++++++++++++++
 frontend/src/router.js                        |   6 +
 7 files changed, 274 insertions(+)
 create mode 100644 frontend/src/components/Icons/ActivityIcon.vue
 create mode 100644 frontend/src/components/Icons/EmailIcon.vue
 create mode 100644 frontend/src/components/Icons/NoteIcon.vue
 create mode 100644 frontend/src/components/Icons/PhoneIcon.vue
 create mode 100644 frontend/src/components/Icons/TaskIcon.vue
 create mode 100644 frontend/src/pages/Lead.vue

diff --git a/frontend/src/components/Icons/ActivityIcon.vue b/frontend/src/components/Icons/ActivityIcon.vue
new file mode 100644
index 00000000..99407547
--- /dev/null
+++ b/frontend/src/components/Icons/ActivityIcon.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.5 6C2.5 4.61929 3.61929 3.5 5 3.5H15C16.3807 3.5 17.5 4.61929 17.5 6V12C17.5 15.0376 15.0376 17.5 12 17.5H5C3.61929 17.5 2.5 16.3807 2.5 15V6Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M6 2.5V3.5"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 2.5V3"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.75 7.5C10.75 7.91421 10.4142 8.25 10 8.25C9.58579 8.25 9.25 7.91421 9.25 7.5C9.25 7.08579 9.58579 6.75 10 6.75C10.4142 6.75 10.75 7.08579 10.75 7.5ZM10.75 10.5C10.75 10.9142 10.4142 11.25 10 11.25C9.58579 11.25 9.25 10.9142 9.25 10.5C9.25 10.0858 9.58579 9.75 10 9.75C10.4142 9.75 10.75 10.0858 10.75 10.5ZM10 14.25C10.4142 14.25 10.75 13.9142 10.75 13.5C10.75 13.0858 10.4142 12.75 10 12.75C9.58579 12.75 9.25 13.0858 9.25 13.5C9.25 13.9142 9.58579 14.25 10 14.25ZM7.25 13.5C7.25 13.9142 6.91421 14.25 6.5 14.25C6.08579 14.25 5.75 13.9142 5.75 13.5C5.75 13.0858 6.08579 12.75 6.5 12.75C6.91421 12.75 7.25 13.0858 7.25 13.5ZM6.5 11.25C6.91421 11.25 7.25 10.9142 7.25 10.5C7.25 10.0858 6.91421 9.75 6.5 9.75C6.08579 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 6.08579 11.25 6.5 11.25ZM14.25 10.5C14.25 10.9142 13.9142 11.25 13.5 11.25C13.0858 11.25 12.75 10.9142 12.75 10.5C12.75 10.0858 13.0858 9.75 13.5 9.75C13.9142 9.75 14.25 10.0858 14.25 10.5ZM13.5 8.25C13.9142 8.25 14.25 7.91421 14.25 7.5C14.25 7.08579 13.9142 6.75 13.5 6.75C13.0858 6.75 12.75 7.08579 12.75 7.5C12.75 7.91421 13.0858 8.25 13.5 8.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.0077 11.6994L17.5 11.2071V11.5V12C17.5 15.0241 15.0594 17.4781 12.0404 17.4999L12.7878 16.5656C13.2586 15.9772 13.4651 15.2203 13.3586 14.4743C13.2098 13.4332 14.0203 12.5 15.0739 12.5C15.7985 12.5 16.4949 12.2122 17.0077 11.6994Z"
+      stroke="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/EmailIcon.vue b/frontend/src/components/Icons/EmailIcon.vue
new file mode 100644
index 00000000..6063cb95
--- /dev/null
+++ b/frontend/src/components/Icons/EmailIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.5 6.5V6.5C2.5 7.10397 2.86771 7.64708 3.42848 7.87139L9.25722 10.2029C9.73404 10.3936 10.266 10.3936 10.7428 10.2029L16.5715 7.87139C17.1323 7.64708 17.5 7.10397 17.5 6.5V6.5"
+      stroke="currentColor"
+    />
+    <rect x="2.5" y="4" width="15" height="12" rx="2.5" stroke="currentColor" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/NoteIcon.vue b/frontend/src/components/Icons/NoteIcon.vue
new file mode 100644
index 00000000..bd7233b1
--- /dev/null
+++ b/frontend/src/components/Icons/NoteIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 4.5C10 3.39543 9.10457 2.5 8 2.5H5.75C4.64543 2.5 3.75 3.39543 3.75 4.5V15.5C3.75 16.6046 4.64543 17.5 5.75 17.5H14.25C15.3546 17.5 16.25 16.6021 16.25 15.4976C16.25 13.1374 16.25 12.6616 16.25 9.75319C16.25 9.2009 15.8023 8.75 15.25 8.75H11C10.4477 8.75 10 8.30228 10 7.75V5.3125V4.5Z"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.5 2.5H9.4844C10.2191 2.5 10.9283 2.76964 11.4775 3.25777L15.2431 6.60497C15.8836 7.17427 16.25 7.99028 16.25 8.8472V10.625"
+      stroke="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/PhoneIcon.vue b/frontend/src/components/Icons/PhoneIcon.vue
new file mode 100644
index 00000000..e1f699b6
--- /dev/null
+++ b/frontend/src/components/Icons/PhoneIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.381 15.0091L13.0108 12.8044C13.3009 12.5612 13.7186 12.5445 14.0272 12.7639L16.5838 14.5815C17.0394 14.9054 17.0522 15.5775 16.6093 15.9186L15.6001 16.6955C14.9561 17.1913 14.0933 17.2956 13.3711 16.9225C11.824 16.1231 9.08016 14.5487 7.11025 12.5456C5.21236 10.6158 3.81881 8.0839 3.08578 6.57321C2.70649 5.79154 2.88609 4.87094 3.48778 4.24418L4.42402 3.26893C4.7989 2.87842 5.441 2.94435 5.72871 3.40288L7.34325 5.976C7.55012 6.3057 7.50072 6.73477 7.22432 7.00882L4.62919 9.58191"
+      stroke="currentColor"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/TaskIcon.vue b/frontend/src/components/Icons/TaskIcon.vue
new file mode 100644
index 00000000..986917ee
--- /dev/null
+++ b/frontend/src/components/Icons/TaskIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="3" y="3" width="14" height="14" rx="2.5" stroke="currentColor" />
+    <path
+      d="M6.5 10.5L8.5 13L13.5 7.5"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
new file mode 100644
index 00000000..083c7231
--- /dev/null
+++ b/frontend/src/pages/Lead.vue
@@ -0,0 +1,162 @@
+<template>
+  <LayoutHeader v-if="lead.doc">
+    <template #left-header>
+      <FeatherIcon
+        name="chevron-left"
+        class="h-5 cursor-pointer"
+        @click="$router.back()"
+      />
+      <h1 class="font-semibold text-xl">{{ lead.doc.lead_name }}</h1>
+      <div
+        v-if="lead.doc.organization_name"
+        class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 p-1 pr-2 rounded ml-2 cursor-pointer"
+      >
+        <Avatar
+          class="flex items-center"
+          :image="lead.doc.organization_logo"
+          :label="lead.doc.organization_name"
+          size="sm"
+          shape="square"
+        />
+        <div class="text-base text-gray-700 truncate">
+          {{ lead.doc.organization_name }}
+        </div>
+      </div>
+    </template>
+    <template #right-header>
+      <div
+        v-if="lead.doc.lead_owner"
+        class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 pl-1.5 py-1 pr-2 rounded ml-2 cursor-pointer"
+      >
+        <Avatar
+          :image="getUser(lead.doc.lead_owner).user_image"
+          :label="getUser(lead.doc.lead_owner).full_name"
+          size="sm"
+        />
+        <div class="text-base text-gray-700">
+          {{ getUser(lead.doc.lead_owner).full_name }}
+        </div>
+      </div>
+      <Dropdown :options="statusDropdownOptions">
+        <template #default="{ open }">
+          <Button :label="lead.doc.status">
+            <template #prefix>
+              <IndicatorIcon :class="indicatorColor[lead.doc.status]" />
+            </template>
+            <template #suffix
+              ><FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+      <Button icon="more-horizontal" />
+    </template>
+  </LayoutHeader>
+  <TabView v-if="lead.doc" :tabs="tabs">
+    <template #tab-content="{ tab }">
+      <div>{{ tab.label }}</div>
+    </template>
+  </TabView>
+</template>
+<script setup>
+import TabView from '@/components/TabView.vue'
+import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import LayoutHeader from '../components/LayoutHeader.vue'
+import {
+  createDocumentResource,
+  Avatar,
+  FeatherIcon,
+  Dropdown,
+} from 'frappe-ui'
+import { usersStore } from '../stores/users'
+
+const { getUser } = usersStore()
+
+const props = defineProps({
+  leadId: {
+    type: String,
+    required: true,
+  },
+})
+const lead = createDocumentResource({
+  doctype: 'CRM Lead',
+  name: props.leadId,
+  auto: true,
+})
+
+const tabs = [
+  {
+    label: 'Activity',
+    icon: ActivityIcon,
+  },
+  {
+    label: 'Emails',
+    icon: EmailIcon,
+  },
+  {
+    label: 'Calls',
+    icon: PhoneIcon,
+  },
+  {
+    label: 'Tasks',
+    icon: TaskIcon,
+  },
+  {
+    label: 'Notes',
+    icon: NoteIcon,
+  },
+]
+
+const statusDropdownOptions = [
+  {
+    label: 'New',
+    icon: IndicatorIcon,
+    onClick: () => {
+      lead.doc.status = 'New'
+    },
+  },
+  {
+    label: 'Contact made',
+    icon: IndicatorIcon,
+    onClick: () => {
+      lead.doc.status = 'Contact made'
+    },
+  },
+  {
+    label: 'Proposal made',
+    icon: IndicatorIcon,
+    onClick: () => {
+      lead.doc.status = 'Proposal made'
+    },
+  },
+  {
+    label: 'Negotiation',
+    icon: IndicatorIcon,
+    onClick: () => {
+      lead.doc.status = 'Negotiation'
+    },
+  },
+  {
+    label: 'Converted',
+    icon: IndicatorIcon,
+    onClick: () => {
+      lead.doc.status = 'Converted'
+    },
+  },
+]
+
+const indicatorColor = {
+  New: 'text-gray-600',
+  'Contact made': 'text-orange-500',
+  'Proposal made': 'text-blue-600',
+  Negotiation: 'text-red-600',
+  Converted: 'text-green-600',
+}
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 32ab8550..49268aad 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -12,6 +12,12 @@ const routes = [
     name: 'Leads',
     component: () => import('@/pages/Leads.vue'),
   },
+  {
+    path: '/leads/:leadId',
+    name: 'Lead',
+    component: () => import('@/pages/Lead.vue'),
+    props: true,
+  },
   {
     path: '/deals',
     name: 'Deals',