From 1944efbf80df808ff4241ff5de8e6bc5bcf29c9f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 24 Aug 2023 17:15:28 +0530
Subject: [PATCH] fix: populated deals list, created deal page and create new
 deal feature

moved getstatus for lead and deal in utils
---
 frontend/src/components/NewDeal.vue | 170 +++++++++++
 frontend/src/components/NewLead.vue |  55 +---
 frontend/src/pages/Deal.vue         | 456 ++++++++++++++++++++++++++++
 frontend/src/pages/Deals.vue        | 227 ++++++++++++--
 frontend/src/pages/Lead.vue         |  64 +---
 frontend/src/pages/Leads.vue        |  24 +-
 frontend/src/router.js              |   6 +
 frontend/src/utils.js               |  46 +++
 8 files changed, 914 insertions(+), 134 deletions(-)
 create mode 100644 frontend/src/components/NewDeal.vue
 create mode 100644 frontend/src/pages/Deal.vue

diff --git a/frontend/src/components/NewDeal.vue b/frontend/src/components/NewDeal.vue
new file mode 100644
index 00000000..ef4ecb86
--- /dev/null
+++ b/frontend/src/components/NewDeal.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div v-for="section in allFields" :key="section.section">
+      <div class="grid grid-cols-3 gap-4">
+        <div v-for="field in section.fields" :key="field.name">
+          <div class="text-gray-600 text-sm mb-2">{{ field.label }}</div>
+          <FormControl
+            v-if="field.type === 'select'"
+            type="select"
+            :options="field.options"
+            v-model="newDeal[field.name]"
+          >
+            <template v-if="field.name == 'deal_status'" #prefix>
+              <IndicatorIcon :class="dealStatuses[newDeal[field.name]].color" />
+            </template>
+          </FormControl>
+          <FormControl
+            v-else-if="field.type === 'email'"
+            type="email"
+            v-model="newDeal[field.name]"
+          />
+          <Autocomplete
+            v-else-if="field.type === 'link'"
+            :options="activeAgents"
+            :value="getUser(newDeal[field.name]).full_name"
+            @change="(option) => (newDeal[field.name] = option.email)"
+            :placeholder="field.placeholder"
+          >
+            <template #prefix>
+              <UserAvatar class="mr-2" :user="newDeal[field.name]" size="sm" />
+            </template>
+            <template #item-prefix="{ option }">
+              <UserAvatar class="mr-2" :user="option.email" size="sm" />
+            </template>
+          </Autocomplete>
+          <Dropdown
+            v-else-if="field.type === 'dropdown'"
+            :options="statusDropdownOptions(newDeal, 'deal')"
+            class="w-full flex-1"
+          >
+            <template #default="{ open }">
+              <Button
+                :label="newDeal[field.name]"
+                class="justify-between w-full"
+              >
+                <template #prefix>
+                  <IndicatorIcon :class="dealStatuses[newDeal[field.name]].color" />
+                </template>
+                <template #default>{{ newDeal[field.name] }}</template>
+                <template #suffix>
+                  <FeatherIcon
+                    :name="open ? 'chevron-up' : 'chevron-down'"
+                    class="h-4"
+                  />
+                </template>
+              </Button>
+            </template>
+          </Dropdown>
+          <FormControl v-else type="text" v-model="newDeal[field.name]" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { usersStore } from '@/stores/users'
+import { dealStatuses, statusDropdownOptions } from '@/utils'
+import {
+  FormControl,
+  Button,
+  Autocomplete,
+  Dropdown,
+  FeatherIcon,
+} from 'frappe-ui'
+import { computed } from 'vue'
+
+const { getUser, users } = usersStore()
+const props = defineProps({
+  newDeal: {
+    type: Object,
+    required: true,
+  },
+})
+
+const allFields = [
+  {
+    section: 'Deal Details',
+    fields: [
+      {
+        label: 'Salutation',
+        name: 'salutation',
+        type: 'select',
+        options: [
+          {
+            label: 'Mr',
+            value: 'Mr',
+          },
+          {
+            label: 'Ms',
+            value: 'Ms',
+          },
+          {
+            label: 'Mrs',
+            value: 'Mrs',
+          },
+        ],
+      },
+      {
+        label: 'First Name',
+        name: 'first_name',
+        type: 'data',
+      },
+      {
+        label: 'Last Name',
+        name: 'last_name',
+        type: 'data',
+      },
+      {
+        label: 'Email',
+        name: 'email',
+        type: 'data',
+      },
+      {
+        label: 'Mobile no',
+        name: 'mobile_no',
+        type: 'data',
+      },
+    ],
+  },
+  {
+    section: 'Other Details',
+    fields: [
+      {
+        label: 'Organization',
+        name: 'organization_name',
+        type: 'data',
+      },
+      {
+        label: 'Status',
+        name: 'deal_status',
+        type: 'select',
+        options: statusDropdownOptions(props.newDeal, 'deal'),
+      },
+      {
+        label: 'Deal owner',
+        name: 'lead_owner',
+        type: 'link',
+        placeholder: 'Deal owner',
+      },
+    ],
+  },
+]
+
+const activeAgents = computed(() => {
+  const nonAgents = ['Administrator', 'Guest']
+  return users.data
+    .filter((user) => !nonAgents.includes(user.name))
+    .sort((a, b) => a.full_name - b.full_name)
+    .map((user) => {
+      return {
+        label: user.full_name,
+        value: user.email,
+        ...user,
+      }
+    })
+})
+</script>
diff --git a/frontend/src/components/NewLead.vue b/frontend/src/components/NewLead.vue
index a9e96015..ad0fd1b3 100644
--- a/frontend/src/components/NewLead.vue
+++ b/frontend/src/components/NewLead.vue
@@ -11,7 +11,7 @@
             v-model="newLead[field.name]"
           >
             <template v-if="field.name == 'status'" #prefix>
-              <IndicatorIcon :class="indicatorColor[newLead[field.name]]" />
+              <IndicatorIcon :class="leadStatuses[newLead[field.name]].color" />
             </template>
           </FormControl>
           <FormControl
@@ -35,7 +35,7 @@
           </Autocomplete>
           <Dropdown
             v-else-if="field.type === 'dropdown'"
-            :options="statusDropdownOptions"
+            :options="statusDropdownOptions(newLead)"
             class="w-full flex-1"
           >
             <template #default="{ open }">
@@ -44,7 +44,7 @@
                 class="justify-between w-full"
               >
                 <template #prefix>
-                  <IndicatorIcon :class="indicatorColor[newLead[field.name]]" />
+                  <IndicatorIcon :class="leadStatuses[newLead[field.name]].color" />
                 </template>
                 <template #default>{{ newLead[field.name] }}</template>
                 <template #suffix>
@@ -67,6 +67,7 @@
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { usersStore } from '@/stores/users'
+import { leadStatuses, statusDropdownOptions } from '@/utils'
 import {
   FormControl,
   Button,
@@ -84,44 +85,6 @@ const props = defineProps({
   },
 })
 
-const statusDropdownOptions = [
-  {
-    label: 'New',
-    icon: () => h(IndicatorIcon, { class: '!text-gray-600' }),
-    onClick: () => {
-      newLead.status = 'New'
-    },
-  },
-  {
-    label: 'Contact made',
-    icon: () => h(IndicatorIcon, { class: 'text-orange-600' }),
-    onClick: () => {
-      newLead.status = 'Contact made'
-    },
-  },
-  {
-    label: 'Proposal made',
-    icon: () => h(IndicatorIcon, { class: '!text-blue-600' }),
-    onClick: () => {
-      newLead.status = 'Proposal made'
-    },
-  },
-  {
-    label: 'Negotiation',
-    icon: () => h(IndicatorIcon, { class: 'text-red-600' }),
-    onClick: () => {
-      newLead.status = 'Negotiation'
-    },
-  },
-  {
-    label: 'Converted',
-    icon: () => h(IndicatorIcon, { class: 'text-green-600' }),
-    onClick: () => {
-      newLead.status = 'Converted'
-    },
-  },
-]
-
 const allFields = [
   {
     section: 'Lead Details',
@@ -179,7 +142,7 @@ const allFields = [
         label: 'Status',
         name: 'status',
         type: 'select',
-        options: statusDropdownOptions,
+        options: statusDropdownOptions(props.newLead),
       },
       {
         label: 'Lead owner',
@@ -191,14 +154,6 @@ const allFields = [
   },
 ]
 
-const indicatorColor = {
-  New: 'text-gray-600',
-  'Contact made': 'text-orange-500',
-  'Proposal made': 'text-blue-600',
-  Negotiation: 'text-red-600',
-  Converted: 'text-green-600',
-}
-
 const activeAgents = computed(() => {
   const nonAgents = ['Administrator', 'Guest']
   return users.data
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
new file mode 100644
index 00000000..d2435e4e
--- /dev/null
+++ b/frontend/src/pages/Deal.vue
@@ -0,0 +1,456 @@
+<template>
+  <LayoutHeader v-if="deal.data">
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs" />
+    </template>
+    <template #right-header>
+      <Autocomplete
+        :options="activeAgents"
+        :value="getUser(deal.data.lead_owner).full_name"
+        @change="(option) => (deal.data.lead_owner = option.email)"
+        placeholder="Deal owner"
+      >
+        <template #prefix>
+          <UserAvatar class="mr-2" :user="deal.data.lead_owner" size="sm" />
+        </template>
+        <template #item-prefix="{ option }">
+          <UserAvatar class="mr-2" :user="option.email" size="sm" />
+        </template>
+      </Autocomplete>
+      <Dropdown :options="statusDropdownOptions(deal.data, 'deal')">
+        <template #default="{ open }">
+          <Button :label="deal.data.deal_status">
+            <template #prefix>
+              <IndicatorIcon :class="dealStatuses[deal.data.deal_status].color" />
+            </template>
+            <template #suffix
+              ><FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+      <Button icon="more-horizontal" />
+      <Button label="Save" variant="solid" @click="() => updateDeal()" />
+    </template>
+  </LayoutHeader>
+  <TabGroup v-slot="{ selectedIndex }" v-if="deal.data" @change="onTabChange">
+    <TabList class="flex items-center gap-6 border-b pl-5 relative">
+      <Tab
+        ref="tabRef"
+        as="template"
+        v-for="tab in tabs"
+        :key="tab.label"
+        v-slot="{ selected }"
+      >
+        <button
+          class="flex items-center gap-2 py-[9px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
+          :class="{ 'text-gray-900': selected }"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ tab.label }}
+        </button>
+      </Tab>
+      <div
+        ref="indicator"
+        class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
+        :style="{ left: `${indicatorLeftValue}px` }"
+      />
+    </TabList>
+    <div class="flex h-full overflow-hidden">
+      <div class="flex-1 flex flex-col">
+        <TabPanels class="flex flex-1 overflow-hidden">
+          <TabPanel
+            class="flex-1 overflow-y-auto"
+            v-for="tab in tabs"
+            :key="tab.label"
+          >
+            <Activities :title="tab.activityTitle" :activities="tab.content" />
+          </TabPanel>
+        </TabPanels>
+        <CommunicationArea
+          v-if="[0, 1].includes(selectedIndex)"
+          v-model="deal"
+        />
+      </div>
+      <div class="flex flex-col justify-between border-l w-[360px]">
+        <div
+          class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+        >
+          <Avatar
+            size="3xl"
+            :label="deal.data.first_name"
+            :image="deal.data.image"
+          />
+          <div class="font-medium text-2xl">{{ deal.data.lead_name }}</div>
+          <div class="flex gap-3">
+            <Tooltip text="Make a call...">
+              <Button
+                class="rounded-full h-8 w-8"
+                @click="() => makeCall(deal.data.mobile_no)"
+              >
+                <PhoneIcon class="h-4 w-4" />
+              </Button>
+            </Tooltip>
+            <Button class="rounded-full h-8 w-8">
+              <EmailIcon class="h-4 w-4" />
+            </Button>
+            <Button icon="message-square" class="rounded-full h-8 w-8" />
+            <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+          </div>
+        </div>
+        <div class="flex-1 flex flex-col justify-between overflow-hidden">
+          <div class="flex flex-col gap-6 p-3 overflow-y-auto">
+            <div
+              v-for="section in detailSections"
+              :key="section.label"
+              class="flex flex-col"
+            >
+              <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
+                <div
+                  class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
+                  @click="toggle()"
+                >
+                  <FeatherIcon
+                    name="chevron-right"
+                    class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
+                    :class="{ 'rotate-90': opened }"
+                  />
+                  {{ section.label }}
+                </div>
+                <transition
+                  enter-active-class="duration-300 ease-in"
+                  leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+                  enter-to-class="max-h-[200px] overflow-hidden"
+                  leave-from-class="max-h-[200px] overflow-hidden"
+                  enter-from-class="max-h-0 overflow-hidden"
+                  leave-to-class="max-h-0 overflow-hidden"
+                >
+                  <div v-if="opened" class="flex flex-col gap-1.5">
+                    <div
+                      v-for="field in section.fields"
+                      :key="field.label"
+                      class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
+                    >
+                      <div class="text-gray-600 w-[106px]">
+                        {{ field.label }}
+                      </div>
+                      <div class="flex-1">
+                        <FormControl
+                          v-if="field.type === 'select'"
+                          type="select"
+                          :options="field.options"
+                          v-model="deal.data[field.name]"
+                          class="form-control cursor-pointer [&_select]:cursor-pointer"
+                        >
+                          <template #prefix>
+                            <IndicatorIcon
+                              :class="dealStatuses[deal.data[field.name]].color"
+                            />
+                          </template>
+                        </FormControl>
+                        <FormControl
+                          v-else-if="field.type === 'email'"
+                          type="email"
+                          class="form-control"
+                          v-model="deal.data[field.name]"
+                        />
+                        <Autocomplete
+                          v-else-if="field.type === 'link'"
+                          :options="activeAgents"
+                          :value="getUser(deal.data[field.name]).full_name"
+                          @change="
+                            (option) => (deal.data[field.name] = option.email)
+                          "
+                          class="form-control"
+                          placeholder="Deal owner"
+                        >
+                          <template #target="{ togglePopover }">
+                            <Button
+                              variant="ghost"
+                              @click="togglePopover()"
+                              :label="getUser(deal.data[field.name]).full_name"
+                              class="!justify-start w-full"
+                            >
+                              <template #prefix>
+                                <UserAvatar
+                                  :user="deal.data[field.name]"
+                                  size="sm"
+                                />
+                              </template>
+                            </Button>
+                          </template>
+                          <template #item-prefix="{ option }">
+                            <UserAvatar
+                              class="mr-2"
+                              :user="option.email"
+                              size="sm"
+                            />
+                          </template>
+                        </Autocomplete>
+                        <Dropdown
+                          v-else-if="field.type === 'dropdown'"
+                          :options="statusDropdownOptions(deal.data, 'deal')"
+                          class="w-full flex-1"
+                        >
+                          <template #default="{ open }">
+                            <Button
+                              :label="deal.data[field.name]"
+                              class="justify-between w-full"
+                            >
+                              <template #prefix>
+                                <IndicatorIcon
+                                  :class="
+                                    dealStatuses[deal.data[field.name]].color
+                                  "
+                                />
+                              </template>
+                              <template #default>{{
+                                deal.data[field.name]
+                              }}</template>
+                              <template #suffix>
+                                <FeatherIcon
+                                  :name="open ? 'chevron-up' : 'chevron-down'"
+                                  class="h-4"
+                                />
+                              </template>
+                            </Button>
+                          </template>
+                        </Dropdown>
+                        <FormControl
+                          v-else
+                          type="text"
+                          v-model="deal.data[field.name]"
+                          class="form-control"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </transition>
+              </Toggler>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
+        >
+          <span class="text-gray-600">Created </span>
+          <Tooltip :text="dateFormat(deal.data.creation, dateTooltipFormat)">
+            {{ timeAgo(deal.data.creation) }}
+          </Tooltip>
+          <span>&nbsp;&middot;&nbsp;</span>
+          <span class="text-gray-600">Updated </span>
+          <Tooltip :text="dateFormat(deal.data.modified, dateTooltipFormat)">
+            {{ timeAgo(deal.data.modified) }}
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  </TabGroup>
+</template>
+<script setup>
+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 Toggler from '@/components/Toggler.vue'
+import Activities from '@/components/Activities.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import CommunicationArea from '@/components/CommunicationArea.vue'
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import { TransitionPresets, useTransition } from '@vueuse/core'
+import { dateFormat, timeAgo, dateTooltipFormat, dealStatuses, statusDropdownOptions } from '@/utils'
+import { usersStore } from '@/stores/users'
+import {
+  createResource,
+  createDocumentResource,
+  FeatherIcon,
+  Autocomplete,
+  FormControl,
+  Dropdown,
+  Tooltip,
+  Avatar,
+} from 'frappe-ui'
+import { ref, computed, inject } from 'vue'
+
+const { getUser, users } = usersStore()
+
+const makeCall = inject('makeOutgoingCall')
+
+const props = defineProps({
+  dealId: {
+    type: String,
+    required: true,
+  },
+})
+
+const deal = createResource({
+  url: 'crm.crm.doctype.crm_lead.api.get_lead',
+  params: { name: props.dealId },
+  cache: ['deal', props.dealId],
+  auto: true,
+})
+
+const uDeal = createDocumentResource({
+  doctype: 'CRM Lead',
+  name: props.dealId,
+  setValue: {
+    onSuccess: () => {
+      deal.reload()
+    },
+  },
+})
+
+function updateDeal() {
+  let dealCopy = { ...deal.data }
+  delete dealCopy.activities
+  uDeal.setValue.submit({ ...dealCopy })
+}
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Deals', route: { name: 'Deals' } }]
+  items.push({
+    label: deal.data.lead_name,
+    route: { name: 'Deal', params: { dealId: deal.data.name } },
+  })
+  return items
+})
+
+const tabs = computed(() => {
+  return [
+    {
+      label: 'Activity',
+      icon: ActivityIcon,
+      content: deal.data.activities,
+      activityTitle: 'Activity log',
+    },
+    {
+      label: 'Emails',
+      icon: EmailIcon,
+      content: deal.data.activities.filter(
+        (activity) => activity.activity_type === 'communication'
+      ),
+      activityTitle: 'Emails',
+    },
+    {
+      label: 'Calls',
+      icon: PhoneIcon,
+      content: deal.data.activities.filter(
+        (activity) => activity.activity_type === 'call'
+      ),
+      activityTitle: 'Calls',
+    },
+    {
+      label: 'Tasks',
+      icon: TaskIcon,
+      activityTitle: 'Tasks',
+    },
+    {
+      label: 'Notes',
+      icon: NoteIcon,
+      activityTitle: 'Notes',
+    },
+  ]
+})
+
+const tabRef = ref([])
+const indicator = ref(null)
+
+let indicatorLeft = ref(20)
+const indicatorLeftValue = useTransition(indicatorLeft, {
+  duration: 250,
+  ease: TransitionPresets.easeOutCubic,
+})
+
+function onTabChange(index) {
+  const selectedTab = tabRef.value[index].el
+  indicator.value.style.width = `${selectedTab.offsetWidth}px`
+  indicatorLeft.value = selectedTab.offsetLeft
+}
+
+const detailSections = computed(() => {
+  return [
+    {
+      label: 'About this deal',
+      opened: true,
+      fields: [
+        {
+          label: 'Status',
+          type: 'select',
+          name: 'deal_status',
+          options: statusDropdownOptions(deal.data, 'deal'),
+        },
+        {
+          label: 'Deal owner',
+          type: 'link',
+          name: 'lead_owner',
+        },
+        {
+          label: 'Organization',
+          type: 'data',
+          name: 'organization_name',
+        },
+        {
+          label: 'Website',
+          type: 'data',
+          name: 'website',
+        },
+      ],
+    },
+    {
+      label: 'Person',
+      opened: true,
+      fields: [
+        {
+          label: 'First name',
+          type: 'data',
+          name: 'first_name',
+        },
+        {
+          label: 'Last name',
+          type: 'data',
+          name: 'last_name',
+        },
+        {
+          label: 'Email',
+          type: 'email',
+          name: 'email',
+        },
+        {
+          label: 'Mobile no.',
+          type: 'phone',
+          name: 'mobile_no',
+        },
+      ],
+    },
+  ]
+})
+
+const activeAgents = computed(() => {
+  const nonAgents = ['Administrator', 'Guest']
+  return users.data
+    .filter((user) => !nonAgents.includes(user.name))
+    .sort((a, b) => a.full_name - b.full_name)
+    .map((user) => {
+      return {
+        label: user.full_name,
+        value: user.email,
+        ...user,
+      }
+    })
+})
+</script>
+
+<style scoped>
+:deep(.form-control input),
+:deep(.form-control select),
+:deep(.form-control button) {
+  border-color: transparent;
+  background: white;
+}
+</style>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 5f27a9f1..caf977fc 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -4,7 +4,7 @@
       <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
     <template #right-header>
-      <Button variant="solid" label="Create">
+      <Button variant="solid" label="Create" @click="showNewDialog = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
@@ -14,51 +14,194 @@
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
-            <template #prefix
-              ><FeatherIcon :name="currentView.icon" class="h-4"
-            /></template>
-            <template #suffix
-              ><FeatherIcon
+            <template #prefix>
+              <FeatherIcon :name="currentView.icon" class="h-4" />
+            </template>
+            <template #suffix>
+              <FeatherIcon
                 :name="open ? 'chevron-up' : 'chevron-down'"
                 class="h-4"
-            /></template>
+              />
+            </template>
           </Button>
         </template>
       </Dropdown>
     </div>
     <div class="flex items-center gap-2">
-      <Button label="Sort">
-        <template #prefix><SortIcon class="h-4" /></template>
-      </Button>
-      <Button label="Filter">
-        <template #prefix><FilterIcon class="h-4" /></template>
-      </Button>
+      <Filter doctype="CRM Lead" />
+      <SortBy doctype="CRM Lead" />
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <ListView :list="list" row-key="name" />
+  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
+  <Dialog
+    v-model="showNewDialog"
+    :options="{
+      size: '3xl',
+      title: 'New Deal',
+      actions: [{ label: 'Save', variant: 'solid' }],
+    }"
+  >
+    <template #body-content>
+      <NewDeal :newDeal="newDeal" />
+    </template>
+    <template #actions="{ close }">
+      <div class="flex flex-row-reverse gap-2">
+        <Button variant="solid" label="Save" @click="createNewDeal(close)" />
+      </div>
+    </template>
+  </Dialog>
 </template>
 
 <script setup>
 import ListView from '@/components/ListView.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
-import SortIcon from '@/components/Icons/SortIcon.vue'
-import FilterIcon from '@/components/Icons/FilterIcon.vue'
-import { FeatherIcon, Button, Dropdown } from 'frappe-ui'
-import { ref } from 'vue'
+import NewDeal from '@/components/NewDeal.vue'
+import SortBy from '@/components/SortBy.vue'
+import Filter from '@/components/Filter.vue'
+import { usersStore } from '@/stores/users'
+import { useOrderBy } from '@/composables/orderby'
+import { useFilter } from '@/composables/filter'
+import { useDebounceFn } from '@vueuse/core'
+import { dealStatuses } from '@/utils'
+import {
+  FeatherIcon,
+  Dialog,
+  Button,
+  Dropdown,
+  createListResource,
+  createResource,
+} from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { ref, computed, reactive, watch } from 'vue'
 
 const list = {
   title: 'Deals',
   plural_label: 'Deals',
   singular_label: 'Deal',
 }
+const { getUser } = usersStore()
+const { get: getOrderBy } = useOrderBy()
+const { getArgs, storage } = useFilter()
 
 const currentView = ref({
   label: 'List',
   icon: 'list',
 })
 
+function getFilter() {
+  return {
+    ...(getArgs() || {}),
+    is_deal: 1,
+  }
+}
+
+const leads = createListResource({
+  type: 'list',
+  doctype: 'CRM Lead',
+  fields: [
+    'name',
+    'first_name',
+    'lead_name',
+    'image',
+    'organization_name',
+    'organization_logo',
+    'deal_status',
+    'email',
+    'mobile_no',
+    'lead_owner',
+    'modified',
+  ],
+  filters: getFilter(),
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+watch(
+  () => getOrderBy(),
+  (value, old_value) => {
+    if (!value && !old_value) return
+    leads.orderBy = getOrderBy() || 'modified desc'
+    leads.reload()
+  },
+  { immediate: true }
+)
+
+watch(
+  storage,
+  useDebounceFn((value, old_value) => {
+    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
+    leads.filters = getFilter()
+    leads.reload()
+  }, 300),
+  { deep: true }
+)
+
+const columns = [
+  {
+    label: 'Name',
+    key: 'lead_name',
+    type: 'avatar',
+    size: 'w-44',
+  },
+  {
+    label: 'Organization',
+    key: 'organization_name',
+    type: 'logo',
+    size: 'w-44',
+  },
+  {
+    label: 'Status',
+    key: 'deal_status',
+    type: 'indicator',
+    size: 'w-44',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    type: 'email',
+    size: 'w-44',
+  },
+  {
+    label: 'Mobile no',
+    key: 'mobile_no',
+    type: 'phone',
+    size: 'w-44',
+  },
+  {
+    label: 'Lead owner',
+    key: 'lead_owner',
+    type: 'avatar',
+    size: 'w-44',
+  },
+]
+
+const rows = computed(() => {
+  return leads.data?.map((lead) => {
+    return {
+      name: lead.name,
+      lead_name: {
+        label: lead.lead_name,
+        image: lead.image,
+        image_label: lead.first_name,
+      },
+      organization_name: {
+        label: lead.organization_name,
+        logo: lead.organization_logo,
+      },
+      deal_status: {
+        label: lead.deal_status,
+        color: dealStatuses[lead.deal_status]?.color,
+      },
+      email: lead.email,
+      mobile_no: lead.mobile_no,
+      lead_owner: lead.lead_owner && getUser(lead.lead_owner),
+    }
+  })
+})
+
 const viewsDropdownOptions = [
   {
     label: 'List',
@@ -101,4 +244,52 @@ const viewsDropdownOptions = [
     },
   },
 ]
+
+const showNewDialog = ref(false)
+
+let newDeal = reactive({
+  salutation: '',
+  first_name: '',
+  last_name: '',
+  lead_name: '',
+  organization_name: '',
+  deal_status: 'Qualification',
+  email: '',
+  mobile_no: '',
+  lead_owner: getUser().email,
+})
+
+const createLead = createResource({
+  url: 'frappe.client.insert',
+  makeParams(values) {
+    return {
+      doc: {
+        doctype: 'CRM Lead',
+        ...values,
+      },
+    }
+  },
+})
+
+const router = useRouter()
+
+function createNewDeal(close) {
+  createLead
+    .submit(newDeal, {
+      validate() {
+        if (!newDeal.first_name) {
+          return 'First name is required'
+        }
+      },
+      onSuccess(data) {
+        router.push({
+          name: 'Lead',
+          params: {
+            leadId: data.name,
+          },
+        })
+      },
+    })
+    .then(close)
+}
 </script>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 6d98b045..062fa2fc 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -17,11 +17,11 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </Autocomplete>
-      <Dropdown :options="statusDropdownOptions">
+      <Dropdown :options="statusDropdownOptions(lead.data)">
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
-              <IndicatorIcon :class="indicatorColor[lead.data.status]" />
+              <IndicatorIcon :class="leadStatuses[lead.data.status].color" />
             </template>
             <template #suffix
               ><FeatherIcon
@@ -146,7 +146,7 @@
                         >
                           <template #prefix>
                             <IndicatorIcon
-                              :class="indicatorColor[lead.data[field.name]]"
+                              :class="leadStatuses[lead.data[field.name]].color"
                             />
                           </template>
                         </FormControl>
@@ -191,7 +191,7 @@
                         </Autocomplete>
                         <Dropdown
                           v-else-if="field.type === 'dropdown'"
-                          :options="statusDropdownOptions"
+                          :options="statusDropdownOptions(lead.data)"
                           class="w-full flex-1"
                         >
                           <template #default="{ open }">
@@ -201,7 +201,9 @@
                             >
                               <template #prefix>
                                 <IndicatorIcon
-                                  :class="indicatorColor[lead.data[field.name]]"
+                                  :class="
+                                    leadStatuses[lead.data[field.name]].color
+                                  "
                                 />
                               </template>
                               <template #default>{{
@@ -262,7 +264,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
-import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
+import { dateFormat, timeAgo, dateTooltipFormat, leadStatuses, statusDropdownOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
 import {
   createResource,
@@ -274,7 +276,7 @@ import {
   Tooltip,
   Avatar,
 } from 'frappe-ui'
-import { ref, computed, h, inject } from 'vue'
+import { ref, computed, inject } from 'vue'
 
 const { getUser, users } = usersStore()
 
@@ -371,52 +373,6 @@ function onTabChange(index) {
   indicatorLeft.value = selectedTab.offsetLeft
 }
 
-const statusDropdownOptions = [
-  {
-    label: 'New',
-    icon: () => h(IndicatorIcon, { class: '!text-gray-600' }),
-    onClick: () => {
-      lead.data.status = 'New'
-    },
-  },
-  {
-    label: 'Contact made',
-    icon: () => h(IndicatorIcon, { class: 'text-orange-600' }),
-    onClick: () => {
-      lead.data.status = 'Contact made'
-    },
-  },
-  {
-    label: 'Proposal made',
-    icon: () => h(IndicatorIcon, { class: '!text-blue-600' }),
-    onClick: () => {
-      lead.data.status = 'Proposal made'
-    },
-  },
-  {
-    label: 'Negotiation',
-    icon: () => h(IndicatorIcon, { class: 'text-red-600' }),
-    onClick: () => {
-      lead.data.status = 'Negotiation'
-    },
-  },
-  {
-    label: 'Converted',
-    icon: () => h(IndicatorIcon, { class: 'text-green-600' }),
-    onClick: () => {
-      lead.data.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',
-}
-
 const detailSections = computed(() => {
   return [
     {
@@ -427,7 +383,7 @@ const detailSections = computed(() => {
           label: 'Status',
           type: 'select',
           name: 'status',
-          options: statusDropdownOptions,
+          options: statusDropdownOptions(lead.data),
         },
         {
           label: 'Lead owner',
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 9b9e2c7b..16fed559 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -63,6 +63,7 @@ import { usersStore } from '@/stores/users'
 import { useOrderBy } from '@/composables/orderby'
 import { useFilter } from '@/composables/filter'
 import { useDebounceFn } from '@vueuse/core'
+import { leadStatuses } from '@/utils'
 import {
   FeatherIcon,
   Dialog,
@@ -88,6 +89,13 @@ const currentView = ref({
   icon: 'list',
 })
 
+function getFilter() {
+  return {
+    ...(getArgs() || {}),
+    is_deal: 0,
+  }
+}
+
 const leads = createListResource({
   type: 'list',
   doctype: 'CRM Lead',
@@ -104,7 +112,7 @@ const leads = createListResource({
     'lead_owner',
     'modified',
   ],
-  filters: getArgs() || {},
+  filters: getFilter(),
   orderBy: 'modified desc',
   pageLength: 20,
   auto: true,
@@ -124,7 +132,7 @@ watch(
   storage,
   useDebounceFn((value, old_value) => {
     if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    leads.filters = getArgs() || {}
+    leads.filters = getFilter()
     leads.reload()
   }, 300),
   { deep: true }
@@ -184,7 +192,7 @@ const rows = computed(() => {
       },
       status: {
         label: lead.status,
-        color: indicatorColor[lead.status],
+        color: leadStatuses[lead.status]?.color,
       },
       email: lead.email,
       mobile_no: lead.mobile_no,
@@ -236,14 +244,6 @@ const viewsDropdownOptions = [
   },
 ]
 
-const indicatorColor = {
-  New: 'text-gray-600',
-  'Contact made': 'text-orange-500',
-  'Proposal made': 'text-blue-600',
-  Negotiation: 'text-red-600',
-  Converted: 'text-green-600',
-}
-
 const showNewDialog = ref(false)
 
 let newLead = reactive({
@@ -252,7 +252,7 @@ let newLead = reactive({
   last_name: '',
   lead_name: '',
   organization_name: '',
-  status: 'New',
+  status: 'Open',
   email: '',
   mobile_no: '',
   lead_owner: getUser().email,
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 49268aad..3d9c5758 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -23,6 +23,12 @@ const routes = [
     name: 'Deals',
     component: () => import('@/pages/Deals.vue'),
   },
+  {
+    path: '/deals/:dealId',
+    name: 'Deal',
+    component: () => import('@/pages/Deal.vue'),
+    props: true,
+  },
   {
     path: '/inbox',
     name: 'Inbox',
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 66e823bf..a4721319 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -1,4 +1,6 @@
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import { useDateFormat, useTimeAgo } from '@vueuse/core'
+import { h } from 'vue'
 
 export function dateFormat(date, format) {
   const _format = format || 'DD-MM-YYYY HH:mm:ss'
@@ -10,3 +12,47 @@ export function timeAgo(date) {
 }
 
 export const dateTooltipFormat = 'ddd, MMM D, YYYY h:mm A'
+
+export const leadStatuses = {
+  Open: { label: 'Open', color: '!text-gray-600' },
+  Contacted: { label: 'Contacted', color: '!text-orange-600' },
+  Nurture: { label: 'Nurture', color: '!text-blue-600' },
+  Qualified: { label: 'Qualified', color: '!text-green-600' },
+  Unqualified: { label: 'Unqualified', color: '!text-red-600' },
+  Junk: { label: 'Junk', color: '!text-purple-600' },
+}
+
+export const dealStatuses = {
+  Qualification: { label: 'Qualification', color: '!text-gray-600' },
+  'Demo/Making': { label: 'Demo/Making', color: '!text-orange-600' },
+  'Proposal/Quotation': {
+    label: 'Proposal/Quotation',
+    color: '!text-blue-600',
+  },
+  Negotiation: { label: 'Negotiation', color: '!text-yellow-600' },
+  'Ready to Close': { label: 'Ready to Close', color: '!text-purple-600' },
+  Won: { label: 'Won', color: '!text-green-600' },
+  Lost: { label: 'Lost', color: '!text-red-600' },
+}
+
+export function statusDropdownOptions(data, doctype) {
+  let statuses = leadStatuses
+  if (doctype == 'deal') {
+    statuses = dealStatuses
+  }
+  let options = []
+  for (const status in statuses) {
+    options.push({
+      label: statuses[status].label,
+      icon: () => h(IndicatorIcon, { class: statuses[status].color }),
+      onClick: () => {
+        if (doctype == 'deal') {
+          data.deal_status = statuses[status].label
+        } else {
+          data.status = statuses[status].label
+        }
+      },
+    })
+  }
+  return options
+}