From 9cde4bb5a0f73510f4bf00d6dd59257ec056f4e4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 17 Apr 2024 00:32:33 +0530
Subject: [PATCH 1/5] fix: allow creating or selecting org & contact from
 create deal modal from deal listview

---
 crm/fcrm/doctype/crm_deal/crm_deal.py        |  75 +++++
 frontend/src/components/Modals/DealModal.vue | 330 +++++++++++++++++++
 frontend/src/components/NewDeal.vue          | 190 -----------
 frontend/src/pages/Deals.vue                 |  85 +----
 4 files changed, 412 insertions(+), 268 deletions(-)
 create mode 100644 frontend/src/components/Modals/DealModal.vue
 delete mode 100644 frontend/src/components/NewDeal.vue

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index be40f3d4..8e56dad0 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -230,3 +230,78 @@ def set_primary_contact(deal, contact):
 	deal.save()
 	return True
 
+def create_organization(doc):
+	if not doc.get("organization_name"):
+		return
+
+	existing_organization = frappe.db.exists("CRM Organization", {"organization_name": doc.get("organization_name")})
+	if existing_organization:
+		return existing_organization
+
+	organization = frappe.new_doc("CRM Organization")
+	organization.update(
+		{
+			"organization_name": doc.get("organization_name"),
+			"website": doc.get("website"),
+			"territory": doc.get("territory"),
+			"industry": doc.get("industry"),
+			"annual_revenue": doc.get("annual_revenue"),
+		}
+	)
+	organization.insert(ignore_permissions=True)
+	return organization.name
+
+def contact_exists(doc):
+	email_exist = frappe.db.exists("Contact Email", {"email_id": doc.get("email")})
+	mobile_exist = frappe.db.exists("Contact Phone", {"phone": doc.get("mobile_no")})
+
+	doctype = "Contact Email" if email_exist else "Contact Phone"
+	name = email_exist or mobile_exist
+
+	if name:
+		return frappe.db.get_value(doctype, name, "parent")
+
+	return False
+
+def create_contact(doc):
+	existing_contact = contact_exists(doc)
+	if existing_contact:
+		return existing_contact
+
+	contact = frappe.new_doc("Contact")
+	contact.update(
+		{
+			"first_name": doc.get("first_name"),
+			"last_name": doc.get("last_name"),
+			"salutation": doc.get("salutation"),
+			"company_name": doc.get("organization") or doc.get("organization_name"),
+		}
+	)
+
+	if doc.get("email"):
+		contact.append("email_ids", {"email_id": doc.get("email"), "is_primary": 1})
+
+	if doc.get("mobile_no"):
+		contact.append("phone_nos", {"phone": doc.get("mobile_no"), "is_primary_mobile_no": 1})
+
+	contact.insert(ignore_permissions=True)
+	contact.reload()  # load changes by hooks on contact
+
+	return contact.name
+
+@frappe.whitelist()
+def create_deal(args):
+	deal = frappe.new_doc("CRM Deal")
+
+	contact = args.get("contact")
+	if not contact and (args.get("first_name") or args.get("last_name") or args.get("email") or args.get("mobile_no")):
+		contact = create_contact(args)
+
+	deal.update({
+		"organization": args.get("organization") or create_organization(args),
+		"contacts": [{"contact": contact, "is_primary": 1}] if contact else [],
+		"deal_owner": args.get("deal_owner"),
+		"status": args.get("status"),
+	})
+	deal.insert(ignore_permissions=True)
+	return deal.name
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
new file mode 100644
index 00000000..a83778e1
--- /dev/null
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -0,0 +1,330 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      size: '3xl',
+      title: __('Create Deal'),
+    }"
+  >
+    <template #body-content>
+      <div class="mb-4 grid grid-cols-3 gap-4">
+        <div class="flex items-center gap-3 text-sm text-gray-600">
+          <div>{{ __('Choose Existing Organization') }}</div>
+          <Switch v-model="chooseExistingOrganization" />
+        </div>
+        <div class="flex items-center gap-3 text-sm text-gray-600">
+          <div>{{ __('Choose Existing Contact') }}</div>
+          <Switch v-model="chooseExistingContact" />
+        </div>
+      </div>
+      <div class="flex flex-col gap-4">
+        <div v-for="section in allFields" :key="section.section">
+          <div class="grid grid-cols-3 gap-4 border-t pt-4">
+            <div v-for="field in section.fields" :key="field.name">
+              <div class="mb-2 text-sm text-gray-600">{{ field.label }}</div>
+              <FormControl
+                v-if="field.type === 'select'"
+                type="select"
+                class="form-control"
+                :options="field.options"
+                v-model="deal[field.name]"
+                :placeholder="__(field.placeholder)"
+              >
+                <template v-if="field.prefix" #prefix>
+                  <IndicatorIcon :class="field.prefix" />
+                </template>
+              </FormControl>
+              <Link
+                v-else-if="field.type === 'link'"
+                class="form-control"
+                :value="deal[field.name]"
+                :doctype="field.doctype"
+                @change="(v) => (deal[field.name] = v)"
+                :placeholder="__(field.placeholder)"
+                :onCreate="field.create"
+              />
+              <Link
+                v-else-if="field.type === 'user'"
+                class="form-control"
+                :value="getUser(deal[field.name]).full_name"
+                :doctype="field.doctype"
+                @change="(v) => (deal[field.name] = v)"
+                :placeholder="__(field.placeholder)"
+                :hideMe="true"
+              >
+                <template #prefix>
+                  <UserAvatar class="mr-2" :user="deal[field.name]" size="sm" />
+                </template>
+                <template #item-prefix="{ option }">
+                  <UserAvatar class="mr-2" :user="option.value" size="sm" />
+                </template>
+                <template #item-label="{ option }">
+                  <Tooltip :text="option.value">
+                    <div class="cursor-pointer">
+                      {{ getUser(option.value).full_name }}
+                    </div>
+                  </Tooltip>
+                </template>
+              </Link>
+              <FormControl
+                v-else
+                type="text"
+                :placeholder="__(field.placeholder)"
+                v-model="deal[field.name]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+    </template>
+    <template #actions>
+      <div class="flex flex-row-reverse gap-2">
+        <Button
+          variant="solid"
+          :label="__('Create')"
+          :loading="isDealCreating"
+          @click="createDeal"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import { usersStore } from '@/stores/users'
+import { statusesStore } from '@/stores/statuses'
+import { createToast } from '@/utils'
+import { Tooltip, Switch, createResource } from 'frappe-ui'
+import { computed, ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { getUser } = usersStore()
+const { getDealStatus, statusOptions } = statusesStore()
+
+const show = defineModel()
+const router = useRouter()
+const error = ref(null)
+
+const deal = reactive({
+  organization: '',
+  organization_name: '',
+  website: '',
+  industry: '',
+  territory: '',
+  contact: '',
+  first_name: '',
+  last_name: '',
+  email: '',
+  mobile_no: '',
+  status: '',
+  deal_owner: '',
+})
+
+const isDealCreating = ref(false)
+const chooseExistingContact = ref(false)
+const chooseExistingOrganization = ref(false)
+
+const allFields = computed(() => {
+  let fields = []
+  if (chooseExistingOrganization.value) {
+    fields.push({
+      section: 'Select Organization',
+      fields: [
+        {
+          label: 'Organization',
+          name: 'organization',
+          type: 'link',
+          placeholder: 'Frappé Technologies',
+          doctype: 'CRM Organization',
+        },
+      ],
+    })
+  } else {
+    fields.push({
+      section: 'Organization Details',
+      fields: [
+        {
+          label: 'Organization Name',
+          name: 'organization_name',
+          type: 'data',
+          placeholder: 'Frappé Technologies',
+        },
+        {
+          label: 'Website',
+          name: 'website',
+          type: 'data',
+          placeholder: 'https://frappe.io',
+        },
+        {
+          label: 'No of Employees',
+          name: 'no_of_employees',
+          type: 'select',
+          options: [
+            { label: __('1-10'), value: '1-10' },
+            { label: __('11-50'), value: '11-50' },
+            { label: __('51-200'), value: '51-200' },
+            { label: __('201-500'), value: '201-500' },
+            { label: __('501-1000'), value: '501-1000' },
+            { label: __('1001-5000'), value: '1001-5000' },
+            { label: __('5001-10000'), value: '5001-10000' },
+            { label: __('10001+'), value: '10001+' },
+          ],
+          placeholder: '1-10',
+        },
+        {
+          label: 'Territory',
+          name: 'territory',
+          type: 'link',
+          doctype: 'CRM Territory',
+          placeholder: 'India',
+        },
+        {
+          label: 'Annual Revenue',
+          name: 'annual_revenue',
+          type: 'data',
+          placeholder: '9,999,999',
+        },
+        {
+          label: 'Industry',
+          name: 'industry',
+          type: 'link',
+          doctype: 'CRM Industry',
+          placeholder: 'Technology',
+        },
+      ],
+    })
+  }
+  if (chooseExistingContact.value) {
+    fields.push({
+      section: 'Select Contact',
+      fields: [
+        {
+          label: 'Contact',
+          name: 'contact',
+          type: 'link',
+          placeholder: 'John Doe',
+          doctype: 'Contact',
+        },
+      ],
+    })
+  } else {
+    fields.push({
+      section: 'Contact Details',
+      fields: [
+        {
+          label: 'Salutation',
+          name: 'salutation',
+          type: 'link',
+          doctype: 'Salutation',
+          placeholder: 'Mr',
+        },
+        {
+          label: 'First Name',
+          name: 'first_name',
+          type: 'data',
+          placeholder: 'John',
+        },
+        {
+          label: 'Last Name',
+          name: 'last_name',
+          type: 'data',
+          placeholder: 'Doe',
+        },
+        {
+          label: 'Email',
+          name: 'email',
+          type: 'data',
+          placeholder: 'john@doe.com',
+        },
+        {
+          label: 'Mobile No',
+          name: 'mobile_no',
+          type: 'data',
+          placeholder: '+91 1234567890',
+        },
+        {
+          label: 'Gender',
+          name: 'gender',
+          type: 'link',
+          doctype: 'Gender',
+          placeholder: 'Male',
+        },
+      ],
+    })
+  }
+  fields.push({
+    section: 'Deal Details',
+    fields: [
+      {
+        label: 'Status',
+        name: 'status',
+        type: 'select',
+        options: statusOptions('deal', (field, value) => (deal[field] = value)),
+        prefix: getDealStatus(deal.status).iconColorClass,
+      },
+      {
+        label: 'Deal Owner',
+        name: 'deal_owner',
+        type: 'user',
+        placeholder: 'Deal Owner',
+        doctype: 'User',
+      },
+    ],
+  })
+  return fields
+})
+
+function createDeal() {
+  createResource({
+    url: 'crm.fcrm.doctype.crm_deal.crm_deal.create_deal',
+    params: { args: deal },
+    auto: true,
+    validate() {
+      error.value = null
+      if (deal.website && !deal.website.startsWith('http')) {
+        deal.website = 'https://' + deal.website
+      }
+      if (deal.annual_revenue) {
+        deal.annual_revenue = deal.annual_revenue.replace(/,/g, '')
+        if (isNaN(deal.annual_revenue)) {
+          error.value = __('Annual Revenue should be a number')
+          return error.value
+        }
+      }
+      if (deal.mobile_no && isNaN(deal.mobile_no.replace(/[-+() ]/g, ''))) {
+        error.value = __('Mobile No should be a number')
+        return error.value
+      }
+      if (deal.email && !deal.email.includes('@')) {
+        error.value = __('Invalid Email')
+        return error.value
+      }
+      isDealCreating.value = true
+    },
+    onSuccess(name) {
+      isDealCreating.value = false
+      show.value = false
+      router.push({ name: 'Deal', params: { dealId: name } })
+    },
+  })
+}
+
+onMounted(() => {
+  if (!deal.status) {
+    deal.status = computed(() => getDealStatus().name)
+  }
+  if (!deal.deal_owner) {
+    deal.deal_owner = getUser().email
+  }
+})
+</script>
+
+<style scoped>
+:deep(.form-control select) {
+  padding-left: 2rem;
+}
+</style>
diff --git a/frontend/src/components/NewDeal.vue b/frontend/src/components/NewDeal.vue
deleted file mode 100644
index 06b08e07..00000000
--- a/frontend/src/components/NewDeal.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<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="mb-2 text-sm text-gray-600">{{ field.label }}</div>
-          <FormControl
-            v-if="field.type === 'select'"
-            type="select"
-            class="form-control"
-            :options="field.options"
-            v-model="newDeal[field.name]"
-          >
-            <template v-if="field.prefix" #prefix>
-              <IndicatorIcon :class="field.prefix" />
-            </template>
-          </FormControl>
-          <FormControl
-            v-else-if="field.type === 'email'"
-            type="email"
-            v-model="newDeal[field.name]"
-          />
-          <Link
-            v-else-if="field.type === 'link'"
-            class="form-control"
-            :value="newDeal[field.name]"
-            :doctype="field.doctype"
-            @change="(e) => field.change(e)"
-            :placeholder="field.placeholder"
-            :onCreate="field.create"
-          />
-          <Link
-            v-else-if="field.type === 'user'"
-            class="form-control"
-            :value="getUser(newDeal[field.name]).full_name"
-            :doctype="field.doctype"
-            @change="(e) => field.change(e)"
-            :placeholder="field.placeholder"
-            :hideMe="true"
-          >
-            <template #prefix>
-              <UserAvatar class="mr-2" :user="newDeal[field.name]" size="sm" />
-            </template>
-            <template #item-prefix="{ option }">
-              <UserAvatar class="mr-2" :user="option.value" size="sm" />
-            </template>
-            <template #item-label="{ option }">
-              <Tooltip :text="option.value">
-                <div class="cursor-pointer">
-                  {{ getUser(option.value).full_name }}
-                </div>
-              </Tooltip>
-            </template>
-          </Link>
-          <FormControl
-            v-else
-            type="text"
-            :placeholder="field.placeholder"
-            v-model="newDeal[field.name]"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <OrganizationModal
-    v-model="showOrganizationModal"
-    v-model:organization="_organization"
-    :options="{
-      redirect: false,
-      afterInsert: (doc) => (newDeal.organization = doc.name),
-    }"
-  />
-</template>
-
-<script setup>
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
-import Link from '@/components/Controls/Link.vue'
-import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import { usersStore } from '@/stores/users'
-import { statusesStore } from '@/stores/statuses'
-import { Tooltip } from 'frappe-ui'
-import { computed, onMounted, ref } from 'vue'
-
-const { getUser } = usersStore()
-const { getDealStatus, statusOptions } = statusesStore()
-
-const props = defineProps({
-  newDeal: {
-    type: Object,
-    required: true,
-  },
-})
-
-const showOrganizationModal = ref(false)
-const _organization = ref({})
-
-const allFields = computed(() => {
-  return [
-    {
-      section: 'Deal Details',
-      fields: [
-        {
-          label: 'Salutation',
-          name: 'salutation',
-          type: 'link',
-          doctype: 'Salutation',
-          placeholder: 'Mr.',
-          change: (data) => (props.newDeal.salutation = data),
-        },
-        {
-          label: 'First Name',
-          name: 'first_name',
-          type: 'data',
-          placeholder: 'John',
-        },
-        {
-          label: 'Last Name',
-          name: 'last_name',
-          type: 'data',
-          placeholder: 'Doe',
-        },
-        {
-          label: 'Email',
-          name: 'email',
-          type: 'data',
-          placeholder: 'john@doe.com',
-        },
-        {
-          label: 'Mobile No',
-          name: 'mobile_no',
-          type: 'data',
-          placeholder: '+91 1234567890',
-        },
-      ],
-    },
-    {
-      section: 'Other Details',
-      fields: [
-        {
-          label: 'Organization',
-          name: 'organization',
-          type: 'link',
-          placeholder: 'Frappé Technologies',
-          doctype: 'CRM Organization',
-          change: (data) => (props.newDeal.organization = data),
-          create: (value, close) => {
-            _organization.value.organization_name = value
-            showOrganizationModal.value = true
-            close()
-          },
-        },
-        {
-          label: 'Status',
-          name: 'status',
-          type: 'select',
-          options: statusOptions(
-            'deal',
-            (field, value) => (props.newDeal[field] = value)
-          ),
-          prefix: getDealStatus(props.newDeal.status).iconColorClass,
-        },
-        {
-          label: 'Deal Owner',
-          name: 'deal_owner',
-          type: 'user',
-          placeholder: 'Deal Owner',
-          doctype: 'User',
-          change: (data) => (props.newDeal.deal_owner = data),
-        },
-      ],
-    },
-  ]
-})
-
-onMounted(() => {
-  if (!props.newDeal.status) {
-    props.newDeal.status = getDealStatus(props.newDeal.status).name
-  }
-  if (!props.newDeal.deal_owner) {
-    props.newDeal.deal_owner = getUser().email
-  }
-})
-</script>
-
-<style scoped>
-:deep(.form-control select) {
-  padding-left: 2rem;
-}
-</style>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 098ee0d3..efa64340 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -11,7 +11,7 @@
       <Button
         variant="solid"
         :label="__('Create')"
-        @click="showNewDialog = true"
+        @click="showDealModal = true"
       >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
@@ -49,31 +49,12 @@
     >
       <DealsIcon class="h-10 w-10" />
       <span>{{ __('No Deals Found') }}</span>
-      <Button :label="__('Create')" @click="showNewDialog = true">
+      <Button :label="__('Create')" @click="showDealModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </div>
   </div>
-  <Dialog
-    v-model="showNewDialog"
-    :options="{
-      size: '3xl',
-      title: __('New Deal'),
-    }"
-  >
-    <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>
+  <DealModal v-model="showDealModal" />
 </template>
 
 <script setup>
@@ -81,7 +62,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
-import NewDeal from '@/components/NewDeal.vue'
+import DealModal from '@/components/Modals/DealModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
@@ -92,11 +73,9 @@ import {
   timeAgo,
   formatNumberIntoCurrency,
   formatTime,
-  createToast,
 } from '@/utils'
-import { createResource, Breadcrumbs } from 'frappe-ui'
-import { useRouter } from 'vue-router'
-import { ref, computed, reactive } from 'vue'
+import { Breadcrumbs } from 'frappe-ui'
+import { ref, computed } from 'vue'
 
 const breadcrumbs = [{ label: __('Deals'), route: { name: 'Deals' } }]
 
@@ -104,9 +83,8 @@ const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
 
-const router = useRouter()
-
 const dealsListView = ref(null)
+const showDealModal = ref(false)
 
 // deals data is loaded in the ViewControls component
 const deals = ref({})
@@ -197,53 +175,4 @@ const rows = computed(() => {
     return _rows
   })
 })
-
-// New Deal
-const showNewDialog = ref(false)
-
-let newDeal = reactive({
-  organization: '',
-  status: '',
-  email: '',
-  mobile_no: '',
-  deal_owner: '',
-})
-
-const createDeal = createResource({
-  url: 'frappe.client.insert',
-  makeParams(values) {
-    return {
-      doc: {
-        doctype: 'CRM Deal',
-        ...values,
-      },
-    }
-  },
-})
-
-function createNewDeal(close) {
-  createDeal
-    .submit(newDeal, {
-      validate() {
-        if (!newDeal.first_name) {
-          createToast({
-            title: __('Error creating deal'),
-            text: __('First name is required'),
-            icon: 'x',
-            iconClasses: 'text-red-600',
-          })
-          return __('First name is required')
-        }
-      },
-      onSuccess(data) {
-        router.push({
-          name: 'Deal',
-          params: {
-            dealId: data.name,
-          },
-        })
-      },
-    })
-    .then(close)
-}
 </script>

From 25b4a233c14c8e6545827c017e7fc7144a16b96d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 17 Apr 2024 01:12:24 +0530
Subject: [PATCH 2/5] refactor: added more fields and validation in create lead
 modal from leads listview

---
 frontend/src/components/Modals/DealModal.vue |  19 +-
 frontend/src/components/Modals/LeadModal.vue | 307 +++++++++++++++++++
 frontend/src/components/NewLead.vue          | 171 -----------
 frontend/src/pages/Leads.vue                 |  31 +-
 4 files changed, 326 insertions(+), 202 deletions(-)
 create mode 100644 frontend/src/components/Modals/LeadModal.vue
 delete mode 100644 frontend/src/components/NewLead.vue

diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index a83778e1..f48cfbc8 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -18,10 +18,16 @@
         </div>
       </div>
       <div class="flex flex-col gap-4">
-        <div v-for="section in allFields" :key="section.section">
-          <div class="grid grid-cols-3 gap-4 border-t pt-4">
+        <div
+          v-for="section in allFields"
+          :key="section.section"
+          class="border-t pt-4"
+        >
+          <div class="grid grid-cols-3 gap-4">
             <div v-for="field in section.fields" :key="field.name">
-              <div class="mb-2 text-sm text-gray-600">{{ field.label }}</div>
+              <div class="mb-2 text-sm text-gray-600">
+                {{ __(field.label) }}
+              </div>
               <FormControl
                 v-if="field.type === 'select'"
                 type="select"
@@ -97,7 +103,6 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
-import { createToast } from '@/utils'
 import { Tooltip, Switch, createResource } from 'frappe-ui'
 import { computed, ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -113,13 +118,17 @@ const deal = reactive({
   organization: '',
   organization_name: '',
   website: '',
-  industry: '',
+  no_of_employees: '',
   territory: '',
+  annual_revenue: '',
+  industry: '',
   contact: '',
+  salutation: '',
   first_name: '',
   last_name: '',
   email: '',
   mobile_no: '',
+  gender: '',
   status: '',
   deal_owner: '',
 })
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
new file mode 100644
index 00000000..a3f87769
--- /dev/null
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -0,0 +1,307 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      size: '3xl',
+      title: __('Create Lead'),
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="section in allFields"
+          :key="section.section"
+          class="border-t pt-4 first:border-t-0"
+        >
+          <div class="grid grid-cols-3 gap-4">
+            <div v-for="field in section.fields" :key="field.name">
+              <div class="mb-2 text-sm text-gray-600">
+                {{ __(field.label) }}
+                <span class="text-red-500" v-if="field.mandatory">*</span>
+              </div>
+              <FormControl
+                v-if="field.type === 'select'"
+                type="select"
+                class="form-control"
+                :options="field.options"
+                v-model="lead[field.name]"
+                :placeholder="__(field.placeholder)"
+              >
+                <template v-if="field.prefix" #prefix>
+                  <IndicatorIcon :class="field.prefix" />
+                </template>
+              </FormControl>
+              <Link
+                v-else-if="field.type === 'link'"
+                class="form-control"
+                :value="lead[field.name]"
+                :doctype="field.doctype"
+                @change="(v) => (lead[field.name] = v)"
+                :placeholder="__(field.placeholder)"
+                :onCreate="field.create"
+              />
+              <Link
+                v-else-if="field.type === 'user'"
+                class="form-control"
+                :value="getUser(lead[field.name]).full_name"
+                :doctype="field.doctype"
+                @change="(v) => (lead[field.name] = v)"
+                :placeholder="__(field.placeholder)"
+                :hideMe="true"
+              >
+                <template #prefix>
+                  <UserAvatar class="mr-2" :user="lead[field.name]" size="sm" />
+                </template>
+                <template #item-prefix="{ option }">
+                  <UserAvatar class="mr-2" :user="option.value" size="sm" />
+                </template>
+                <template #item-label="{ option }">
+                  <Tooltip :text="option.value">
+                    <div class="cursor-pointer">
+                      {{ getUser(option.value).full_name }}
+                    </div>
+                  </Tooltip>
+                </template>
+              </Link>
+              <FormControl
+                v-else
+                type="text"
+                :placeholder="__(field.placeholder)"
+                v-model="lead[field.name]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+    </template>
+    <template #actions>
+      <div class="flex flex-row-reverse gap-2">
+        <Button variant="solid" :label="__('Save')" @click="createNewLead" />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import { usersStore } from '@/stores/users'
+import { statusesStore } from '@/stores/statuses'
+import { Tooltip, createResource } from 'frappe-ui'
+import { computed, onMounted, ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { getUser } = usersStore()
+const { getLeadStatus, statusOptions } = statusesStore()
+
+const show = defineModel()
+const router = useRouter()
+const error = ref(null)
+const isLeadCreating = ref(false)
+
+const lead = reactive({
+  salutation: '',
+  first_name: '',
+  last_name: '',
+  email: '',
+  mobile_no: '',
+  gender: '',
+  organization: '',
+  website: '',
+  no_of_employees: '',
+  territory: '',
+  annual_revenue: '',
+  industry: '',
+  status: '',
+  lead_owner: '',
+})
+
+const allFields = computed(() => {
+  return [
+    {
+      section: 'Contact Details',
+      fields: [
+        {
+          label: 'Salutation',
+          name: 'salutation',
+          type: 'link',
+          placeholder: 'Mr',
+          doctype: 'Salutation',
+        },
+        {
+          label: 'First Name',
+          name: 'first_name',
+          mandatory: true,
+          type: 'data',
+          placeholder: 'John',
+        },
+        {
+          label: 'Last Name',
+          name: 'last_name',
+          type: 'data',
+          placeholder: 'Doe',
+        },
+        {
+          label: 'Email',
+          name: 'email',
+          type: 'data',
+          placeholder: 'john@doe.com',
+        },
+        {
+          label: 'Mobile No',
+          name: 'mobile_no',
+          type: 'data',
+          placeholder: '+91 9876543210',
+        },
+        {
+          label: 'Gender',
+          name: 'gender',
+          type: 'link',
+          doctype: 'Gender',
+          placeholder: 'Male',
+        },
+      ],
+    },
+    {
+      section: 'Organization Details',
+      fields: [
+        {
+          label: 'Organization',
+          name: 'organization',
+          type: 'data',
+          placeholder: 'Frappé Technologies',
+        },
+        {
+          label: 'Website',
+          name: 'website',
+          type: 'data',
+          placeholder: 'https://frappe.io',
+        },
+        {
+          label: 'No of Employees',
+          name: 'no_of_employees',
+          type: 'select',
+          options: [
+            { label: __('1-10'), value: '1-10' },
+            { label: __('11-50'), value: '11-50' },
+            { label: __('51-200'), value: '51-200' },
+            { label: __('201-500'), value: '201-500' },
+            { label: __('501-1000'), value: '501-1000' },
+            { label: __('1001-5000'), value: '1001-5000' },
+            { label: __('5001-10000'), value: '5001-10000' },
+            { label: __('10001+'), value: '10001+' },
+          ],
+          placeholder: '1-10',
+        },
+        {
+          label: 'Territory',
+          name: 'territory',
+          type: 'link',
+          doctype: 'CRM Territory',
+          placeholder: 'India',
+        },
+        {
+          label: 'Annual Revenue',
+          name: 'annual_revenue',
+          type: 'data',
+          placeholder: '1000000',
+        },
+        {
+          label: 'Industry',
+          name: 'industry',
+          type: 'link',
+          doctype: 'CRM Industry',
+          placeholder: 'Technology',
+        },
+      ],
+    },
+    {
+      section: 'Other Details',
+      fields: [
+        {
+          label: 'Status',
+          name: 'status',
+          type: 'select',
+          options: statusOptions(
+            'lead',
+            (field, value) => (lead[field] = value)
+          ),
+          prefix: getLeadStatus(lead.status).iconColorClass,
+        },
+        {
+          label: 'Lead Owner',
+          name: 'lead_owner',
+          type: 'user',
+          placeholder: 'Lead Owner',
+          doctype: 'User',
+        },
+      ],
+    },
+  ]
+})
+
+const createLead = createResource({
+  url: 'frappe.client.insert',
+  makeParams(values) {
+    return {
+      doc: {
+        doctype: 'CRM Lead',
+        ...values,
+      },
+    }
+  },
+})
+
+function createNewLead() {
+  createLead.submit(lead, {
+    validate() {
+      error.value = null
+      if (!lead.first_name) {
+        error.value = __('First Name is mandatory')
+        return error.value
+      }
+      if (lead.website && !lead.website.startsWith('http')) {
+        lead.website = 'https://' + lead.website
+      }
+      if (lead.annual_revenue) {
+        lead.annual_revenue = lead.annual_revenue.replace(/,/g, '')
+        if (isNaN(lead.annual_revenue)) {
+          error.value = __('Annual Revenue should be a number')
+          return error.value
+        }
+      }
+      if (lead.mobile_no && isNaN(lead.mobile_no.replace(/[-+() ]/g, ''))) {
+        error.value = __('Mobile No should be a number')
+        return error.value
+      }
+      if (lead.email && !lead.email.includes('@')) {
+        error.value = __('Invalid Email')
+        return error.value
+      }
+      isLeadCreating.value = true
+    },
+    onSuccess(data) {
+      isLeadCreating.value = false
+      show.value = false
+      router.push({ name: 'Lead', params: { leadId: data.name } })
+    },
+  })
+}
+
+onMounted(() => {
+  if (!lead.status) {
+    lead.status = computed(() => getLeadStatus().name)
+  }
+  if (!lead.lead_owner) {
+    lead.lead_owner = getUser().email
+  }
+})
+</script>
+
+<style scoped>
+:deep(.form-control select) {
+  padding-left: 2rem;
+}
+</style>
diff --git a/frontend/src/components/NewLead.vue b/frontend/src/components/NewLead.vue
deleted file mode 100644
index b64bb075..00000000
--- a/frontend/src/components/NewLead.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<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="mb-2 text-sm text-gray-600">{{ field.label }}</div>
-          <FormControl
-            v-if="field.type === 'select'"
-            type="select"
-            class="form-control"
-            :options="field.options"
-            v-model="newLead[field.name]"
-          >
-            <template v-if="field.prefix" #prefix>
-              <IndicatorIcon :class="field.prefix" />
-            </template>
-          </FormControl>
-          <FormControl
-            v-else-if="field.type === 'email'"
-            type="email"
-            v-model="newLead[field.name]"
-          />
-          <Link
-            v-else-if="field.type === 'link'"
-            class="form-control"
-            :value="newLead[field.name]"
-            :doctype="field.doctype"
-            @change="(e) => field.change(e)"
-            :placeholder="field.placeholder"
-            :onCreate="field.create"
-          />
-          <Link
-            v-else-if="field.type === 'user'"
-            class="form-control"
-            :value="getUser(newLead[field.name]).full_name"
-            :doctype="field.doctype"
-            @change="(e) => field.change(e)"
-            :placeholder="field.placeholder"
-            :hideMe="true"
-          >
-            <template #prefix>
-              <UserAvatar class="mr-2" :user="newLead[field.name]" size="sm" />
-            </template>
-            <template #item-prefix="{ option }">
-              <UserAvatar class="mr-2" :user="option.value" size="sm" />
-            </template>
-            <template #item-label="{ option }">
-              <Tooltip :text="option.value">
-                <div class="cursor-pointer">
-                  {{ getUser(option.value).full_name }}
-                </div>
-              </Tooltip>
-            </template>
-          </Link>
-          <FormControl
-            v-else
-            type="text"
-            :placeholder="field.placeholder"
-            v-model="newLead[field.name]"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
-import Link from '@/components/Controls/Link.vue'
-import { usersStore } from '@/stores/users'
-import { statusesStore } from '@/stores/statuses'
-import { Tooltip } from 'frappe-ui'
-import { computed, onMounted, ref } from 'vue'
-
-const { getUser } = usersStore()
-const { getLeadStatus, statusOptions } = statusesStore()
-
-const props = defineProps({
-  newLead: {
-    type: Object,
-    required: true,
-  },
-})
-
-const allFields = computed(() => {
-  return [
-    {
-      section: 'Lead Details',
-      fields: [
-        {
-          label: 'Salutation',
-          name: 'salutation',
-          type: 'link',
-          placeholder: 'Mr.',
-          doctype: 'Salutation',
-          change: (data) => (props.newLead.salutation = data),
-        },
-        {
-          label: 'First Name',
-          name: 'first_name',
-          type: 'data',
-          placeholder: 'John',
-        },
-        {
-          label: 'Last Name',
-          name: 'last_name',
-          type: 'data',
-          placeholder: 'Doe',
-        },
-        {
-          label: 'Email',
-          name: 'email',
-          type: 'data',
-          placeholder: 'john@doe.com',
-        },
-        {
-          label: 'Mobile No',
-          name: 'mobile_no',
-          type: 'data',
-          placeholder: '+91 9876543210',
-        },
-      ],
-    },
-    {
-      section: 'Other Details',
-      fields: [
-        {
-          label: 'Organization',
-          name: 'organization',
-          type: 'data',
-          placeholder: 'Frappé Technologies',
-        },
-        {
-          label: 'Status',
-          name: 'status',
-          type: 'select',
-          options: statusOptions(
-            'lead',
-            (field, value) => (props.newLead[field] = value)
-          ),
-          prefix: getLeadStatus(props.newLead.status).iconColorClass,
-        },
-        {
-          label: 'Lead Owner',
-          name: 'lead_owner',
-          type: 'user',
-          placeholder: 'Lead Owner',
-          doctype: 'User',
-          change: (data) => (props.newLead.lead_owner = data),
-        },
-      ],
-    },
-  ]
-})
-
-onMounted(() => {
-  if (!props.newLead.status) {
-    props.newLead.status = getLeadStatus(props.newLead.status).name
-  }
-  if (!props.newLead.lead_owner) {
-    props.newLead.lead_owner = getUser().email
-  }
-})
-</script>
-
-<style scoped>
-:deep(.form-control select) {
-  padding-left: 2rem;
-}
-</style>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index b3b69349..daa9367c 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -11,7 +11,7 @@
       <Button
         variant="solid"
         :label="__('Create')"
-        @click="showNewDialog = true"
+        @click="showLeadModal = true"
       >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
@@ -50,31 +50,12 @@
     >
       <LeadsIcon class="h-10 w-10" />
       <span>{{ __('No Leads Found') }}</span>
-      <Button :label="__('Create')" @click="showNewDialog = true">
+      <Button :label="__('Create')" @click="showLeadModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </div>
   </div>
-  <Dialog
-    v-model="showNewDialog"
-    :options="{
-      size: '3xl',
-      title: __('New Lead'),
-    }"
-  >
-    <template #body-content>
-      <NewLead :newLead="newLead" />
-    </template>
-    <template #actions="{ close }">
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          variant="solid"
-          :label="__('Save')"
-          @click="createNewLead(close)"
-        />
-      </div>
-    </template>
-  </Dialog>
+  <LeadModal v-model="showLeadModal" />
 </template>
 
 <script setup>
@@ -82,7 +63,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
-import NewLead from '@/components/NewLead.vue'
+import LeadModal from '@/components/Modals/LeadModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
@@ -107,6 +88,7 @@ const { getLeadStatus } = statusesStore()
 const router = useRouter()
 
 const leadsListView = ref(null)
+const showLeadModal = ref(false)
 
 // leads data is loaded in the ViewControls component
 const leads = ref({})
@@ -200,9 +182,6 @@ const rows = computed(() => {
   })
 })
 
-// New Lead
-const showNewDialog = ref(false)
-
 let newLead = reactive({
   salutation: '',
   first_name: '',

From e04a4c6b4c1381040efb887de7681512c996cb15 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 17 Apr 2024 02:05:41 +0530
Subject: [PATCH 3/5] fix: translate deal tabs label

---
 frontend/src/pages/Deal.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index dc335cb9..2d2345df 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -436,27 +436,27 @@ const tabIndex = ref(0)
 const tabs = [
   {
     name: 'Activity',
-    label: 'Activity',
+    label: __('Activity'),
     icon: ActivityIcon,
   },
   {
     name: 'Emails',
-    label: 'Emails',
+    label: __('Emails'),
     icon: EmailIcon,
   },
   {
     name: 'Calls',
-    label: 'Calls',
+    label: __('Calls'),
     icon: PhoneIcon,
   },
   {
     name: 'Tasks',
-    label: 'Tasks',
+    label: __('Tasks'),
     icon: TaskIcon,
   },
   {
     name: 'Notes',
-    label: 'Notes',
+    label: __('Notes'),
     icon: NoteIcon,
   },
 ]

From 9fff23e55a9a4a405fd7e525684cfe0907fd47fc Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 24 Apr 2024 17:08:50 +0530
Subject: [PATCH 4/5] fix: remove auto updating deal/org on changing deal/org
 data

---
 crm/fcrm/doctype/crm_deal/crm_deal.py         | 15 --------------
 .../crm_organization/crm_organization.py      | 20 -------------------
 frontend/src/pages/Deals.vue                  |  6 ++----
 3 files changed, 2 insertions(+), 39 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index 8e56dad0..e9a1dd61 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -18,7 +18,6 @@ class CRMDeal(Document):
 	def validate(self):
 		self.set_primary_contact()
 		self.set_primary_email_mobile_no()
-		self.update_organization()
 		if self.deal_owner and not self.is_new():
 			self.share_with_agent(self.deal_owner)
 			self.assign_agent(self.deal_owner)
@@ -69,20 +68,6 @@ class CRMDeal(Document):
 			self.mobile_no = ""
 			self.phone = ""
 
-	def update_organization(self):
-		if self.organization:
-			if self.has_value_changed("organization"):
-				organization = frappe.get_cached_doc("CRM Organization", self.organization)
-				self.website = organization.website
-				self.territory = organization.territory
-				self.annual_revenue = organization.annual_revenue
-			if self.has_value_changed("website"):
-				frappe.db.set_value("CRM Organization", self.organization, "website", self.website)
-			if self.has_value_changed("territory"):
-				frappe.db.set_value("CRM Organization", self.organization, "territory", self.territory)
-			if self.has_value_changed("annual_revenue"):
-				frappe.db.set_value("CRM Organization", self.organization, "annual_revenue", self.annual_revenue)
-
 	def assign_agent(self, agent):
 		if not agent:
 			return
diff --git a/crm/fcrm/doctype/crm_organization/crm_organization.py b/crm/fcrm/doctype/crm_organization/crm_organization.py
index f1ecaae9..6d9a2a14 100644
--- a/crm/fcrm/doctype/crm_organization/crm_organization.py
+++ b/crm/fcrm/doctype/crm_organization/crm_organization.py
@@ -6,26 +6,6 @@ from frappe.model.document import Document
 
 
 class CRMOrganization(Document):
-		def on_update(self):
-			self.update_deal_organization_fields()
-
-		def update_deal_organization_fields(self):
-			if (
-				self.has_value_changed("website")
-				or self.has_value_changed("territory")
-				or self.has_value_changed("annual_revenue")
-			):
-				for deal in frappe.get_all(
-					"CRM Deal",
-					filters={"organization": self.name},
-				):
-					if self.has_value_changed("website"):
-						frappe.db.set_value("CRM Deal", deal.name, "website", self.website)
-					if self.has_value_changed("territory"):
-						frappe.db.set_value("CRM Deal", deal.name, "territory", self.territory)
-					if self.has_value_changed("annual_revenue"):
-						frappe.db.set_value("CRM Deal", deal.name, "annual_revenue", self.annual_revenue)
-
 		@staticmethod
 		def default_list_data():
 			columns = [
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index efa64340..71c0096b 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -101,15 +101,13 @@ const rows = computed(() => {
     deals.value.data.rows.forEach((row) => {
       _rows[row] = deal[row]
 
-      let org = getOrganization(deal.organization)
-
       if (row == 'organization') {
         _rows[row] = {
           label: deal.organization,
-          logo: org?.organization_logo,
+          logo: getOrganization(deal.organization)?.organization_logo,
         }
       } else if (row == 'annual_revenue') {
-        _rows[row] = formatNumberIntoCurrency(org?.annual_revenue)
+        _rows[row] = formatNumberIntoCurrency(deal.annual_revenue)
       } else if (row == 'status') {
         _rows[row] = {
           label: deal.status,

From d6db510eb6982082b20040dc71af8cc361588d85 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 24 Apr 2024 17:13:59 +0530
Subject: [PATCH 5/5] fix: only block oversroll vertically

---
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 7560ce74..31a720b7 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,7 +11,7 @@
       href="/assets/crm/crm_logo.png"
     />
   </head>
-  <body class="overscroll-none no-scrollbar">
+  <body class="overscroll-y-none no-scrollbar">
     <div id="app" class="h-full"></div>
     <div id="modals"></div>
     <div id="popovers"></div>