From 4983b7ba9300dcc8a29883a2790c0b029ed3aefe Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 2 Jul 2024 13:20:14 +0530
Subject: [PATCH] feat: show quick entry layout edit button in respective modal
 and remove from settings

---
 .../src/components/Modals/ContactModal.vue    |  31 +++--
 frontend/src/components/Modals/DealModal.vue  |  97 ++++++++-----
 frontend/src/components/Modals/LeadModal.vue  |  63 ++++++---
 .../components/Modals/OrganizationModal.vue   |  12 +-
 .../components/Settings/QuickEntryLayout.vue  | 113 ----------------
 .../components/Settings/QuickEntryModal.vue   | 127 ++++++++++++++++++
 .../src/components/Settings/SettingsModal.vue |   6 -
 frontend/src/pages/Contact.vue                |   8 ++
 frontend/src/pages/Contacts.vue               |  13 +-
 frontend/src/pages/Deals.vue                  |   8 ++
 frontend/src/pages/Leads.vue                  |   4 +
 frontend/src/pages/Organization.vue           |   8 ++
 frontend/src/pages/Organizations.vue          |  12 +-
 13 files changed, 312 insertions(+), 190 deletions(-)
 delete mode 100644 frontend/src/components/Settings/QuickEntryLayout.vue
 create mode 100644 frontend/src/components/Settings/QuickEntryModal.vue

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index c8e855ca..08c8c5b5 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -10,10 +10,9 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="detailMode"
               variant="ghost"
               class="w-7"
-              @click="detailMode = false"
+              @click="detailMode ? (detailMode = false) : openQuickEntryModal()"
             >
               <EditIcon class="h-4 w-4" />
             </Button>
@@ -92,7 +91,7 @@ import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Dropdown from '@/components/frappe-ui/Dropdown.vue'
 import { call, createResource } from 'frappe-ui'
-import { ref, nextTick, watch, computed, h } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 import { createToast } from '@/utils'
 import { useRouter } from 'vue-router'
 
@@ -237,7 +236,7 @@ const detailFields = computed(() => {
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'Contact'],
-  params: { doctype: 'Contact', type: 'Quick Entry'},
+  params: { doctype: 'Contact', type: 'Quick Entry' },
   auto: true,
 })
 
@@ -273,7 +272,7 @@ const filteredSections = computed(() => {
               onDelete: async (option, isNew) => {
                 props.contact.data.email_ids =
                   props.contact.data.email_ids.filter(
-                    (email) => email.name !== option.name
+                    (email) => email.name !== option.name,
                   )
                 !isNew && (await deleteOption('Contact Email', option.name))
                 if (_contact.value.email_id === option.value) {
@@ -281,7 +280,7 @@ const filteredSections = computed(() => {
                     _contact.value.email_id = ''
                   } else {
                     _contact.value.email_id = props.contact.data.email_ids.find(
-                      (email) => email.is_primary
+                      (email) => email.is_primary,
                     )?.email_id
                   }
                 }
@@ -296,7 +295,10 @@ const filteredSections = computed(() => {
             isNew: true,
           })
         }
-      } else if (field.name == 'mobile_no' || field.name == 'actual_mobile_no') {
+      } else if (
+        field.name == 'mobile_no' ||
+        field.name == 'actual_mobile_no'
+      ) {
         field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
         field.name = 'actual_mobile_no'
         field.options =
@@ -323,7 +325,7 @@ const filteredSections = computed(() => {
               onDelete: async (option, isNew) => {
                 props.contact.data.phone_nos =
                   props.contact.data.phone_nos.filter(
-                    (phone) => phone.name !== option.name
+                    (phone) => phone.name !== option.name,
                   )
                 !isNew && (await deleteOption('Contact Phone', option.name))
                 if (_contact.value.actual_mobile_no === option.value) {
@@ -332,7 +334,7 @@ const filteredSections = computed(() => {
                   } else {
                     _contact.value.actual_mobile_no =
                       props.contact.data.phone_nos.find(
-                        (phone) => phone.is_primary_mobile_no
+                        (phone) => phone.is_primary_mobile_no,
                       )?.phone
                   }
                 }
@@ -432,8 +434,17 @@ watch(
         editMode.value = true
       }
     })
-  }
+  },
 )
+
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 293e81ac..19be29f9 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -1,49 +1,63 @@
 <template>
-  <Dialog
-    v-model="show"
-    :options="{
-      size: '3xl',
-      title: __('Create Deal'),
-    }"
-  >
-    <template #body-content>
-      <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex items-center gap-3 text-sm text-gray-600">
-          <div>{{ __('Choose Existing Organization') }}</div>
-          <Switch v-model="chooseExistingOrganization" />
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+              {{ __('Create Deal') }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button variant="ghost" class="w-7" @click="openQuickEntryModal">
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
         </div>
-        <div class="flex items-center gap-3 text-sm text-gray-600">
-          <div>{{ __('Choose Existing Contact') }}</div>
-          <Switch v-model="chooseExistingContact" />
+        <div>
+          <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <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>
+          <Fields
+            v-if="filteredSections"
+            class="border-t pt-4"
+            :sections="filteredSections"
+            :data="deal"
+          />
+          <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
       </div>
-      <Fields
-        v-if="filteredSections"
-        class="border-t pt-4"
-        :sections="filteredSections"
-        :data="deal"
-      />
-      <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 class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="flex flex-row-reverse gap-2">
+          <Button
+            variant="solid"
+            :label="__('Create')"
+            :loading="isDealCreating"
+            @click="createDeal"
+          />
+        </div>
       </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Fields from '@/components/Fields.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { Switch, createResource } from 'frappe-ui'
-import { computed, ref, reactive, onMounted } from 'vue'
+import { computed, ref, reactive, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -83,7 +97,7 @@ const chooseExistingOrganization = ref(false)
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Deal'],
-  params: { doctype: 'CRM Deal', type: 'Quick Entry'},
+  params: { doctype: 'CRM Deal', type: 'Quick Entry' },
   auto: true,
   transform: (data) => {
     return data.forEach((section) => {
@@ -108,21 +122,21 @@ const filteredSections = computed(() => {
 
   if (chooseExistingOrganization.value) {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Select Organization')
+      allSections.find((s) => s.label === 'Select Organization'),
     )
   } else {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Organization Details')
+      allSections.find((s) => s.label === 'Organization Details'),
     )
   }
 
   if (chooseExistingContact.value) {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Select Contact')
+      allSections.find((s) => s.label === 'Select Contact'),
     )
   } else {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Contact Details')
+      allSections.find((s) => s.label === 'Contact Details'),
     )
   }
 
@@ -197,6 +211,15 @@ function createDeal() {
   })
 }
 
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+
 onMounted(() => {
   Object.assign(deal, props.defaults)
   if (!deal.deal_owner) {
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index b29be41b..6ebbea9a 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -1,34 +1,48 @@
 <template>
-  <Dialog
-    v-model="show"
-    :options="{
-      size: '3xl',
-      title: __('Create Lead'),
-    }"
-  >
-    <template #body-content>
-      <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
-      <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="isLeadCreating"
-          @click="createNewLead"
-        />
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+              {{ __('Create Lead') }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button variant="ghost" class="w-7" @click="openQuickEntryModal">
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div>
+          <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
+          <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+        </div>
+      </div>
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="flex flex-row-reverse gap-2">
+          <Button
+            variant="solid"
+            :label="__('Create')"
+            :loading="isLeadCreating"
+            @click="createNewLead"
+          />
+        </div>
       </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Fields from '@/components/Fields.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { createResource } from 'frappe-ui'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -149,6 +163,15 @@ function createNewLead() {
   })
 }
 
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+
 onMounted(() => {
   Object.assign(lead, props.defaults)
   if (!lead.lead_owner) {
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 9e94ff6d..3debd0ba 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -10,10 +10,9 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="detailMode"
               variant="ghost"
               class="w-7"
-              @click="detailMode = false"
+              @click="detailMode ? (detailMode = false) : openQuickEntryModal()"
             >
               <EditIcon class="h-4 w-4" />
             </Button>
@@ -253,4 +252,13 @@ watch(
     })
   },
 )
+
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
 </script>
diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
deleted file mode 100644
index a043dbe9..00000000
--- a/frontend/src/components/Settings/QuickEntryLayout.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div class="flex flex-col overflow-hidden">
-    <div class="flex flex-col gap-2 p-8 pb-5">
-      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
-        <div>{{ __('Quick Entry Layout') }}</div>
-        <Badge
-          v-if="dirty"
-          :label="__('Not Saved')"
-          variant="subtle"
-          theme="orange"
-        />
-      </h2>
-      <div class="flex gap-6 items-end">
-        <FormControl
-          class="flex-1"
-          type="select"
-          v-model="doctype"
-          :label="__('DocType')"
-          :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
-          @change="reload"
-        />
-        <div class="flex flex-row-reverse gap-2">
-          <Button
-            :loading="loading"
-            :label="__('Save')"
-            variant="solid"
-            @click="saveChanges"
-          />
-          <Button :label="__('Reset')" @click="reload" />
-          <Button
-            :label="preview ? __('Hide Preview') : __('Show Preview')"
-            @click="preview = !preview"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
-      <div
-        class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
-      >
-        <QuickEntryLayoutBuilder
-          v-if="!preview"
-          :sections="sections.data"
-          :doctype="doctype"
-        />
-        <Fields v-else :sections="sections.data" :data="{}" />
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import Fields from '@/components/Fields.vue'
-import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
-import { useDebounceFn } from '@vueuse/core'
-import { Badge, call, createResource } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-
-const doctype = ref('CRM Lead')
-const loading = ref(false)
-const dirty = ref(false)
-const preview = ref(false)
-
-function getParams() {
-  return { doctype: doctype.value, type: 'Quick Entry' }
-}
-
-const sections = createResource({
-  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
-  cache: ['quick-entry-sections', doctype.value],
-  params: getParams(),
-  onSuccess(data) {
-    sections.originalData = JSON.parse(JSON.stringify(data))
-  },
-})
-
-watch(
-  () => sections?.data,
-  () => {
-    dirty.value =
-      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
-  },
-  { deep: true },
-)
-
-onMounted(() => useDebounceFn(reload, 100)())
-
-function reload() {
-  sections.params = getParams()
-  sections.reload()
-}
-
-function saveChanges() {
-  let _sections = JSON.parse(JSON.stringify(sections.data))
-  _sections.forEach((section) => {
-    if (!section.fields) return
-    section.fields = section.fields.map(
-      (field) => field.fieldname || field.name,
-    )
-  })
-  loading.value = true
-  call(
-    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
-    {
-      doctype: doctype.value,
-      type: 'Quick Entry',
-      layout: JSON.stringify(_sections),
-    },
-  ).then(() => {
-    loading.value = false
-    reload()
-  })
-}
-</script>
diff --git a/frontend/src/components/Settings/QuickEntryModal.vue b/frontend/src/components/Settings/QuickEntryModal.vue
new file mode 100644
index 00000000..a979aeca
--- /dev/null
+++ b/frontend/src/components/Settings/QuickEntryModal.vue
@@ -0,0 +1,127 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div class="flex flex-col overflow-hidden">
+        <div class="flex flex-col gap-2 p-8 pb-5">
+          <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+            <div>{{ __('Edit Quick Entry Layout') }}</div>
+            <Badge
+              v-if="dirty"
+              :label="__('Not Saved')"
+              variant="subtle"
+              theme="orange"
+            />
+          </h2>
+          <div class="flex gap-6 items-end">
+            <FormControl
+              class="flex-1"
+              type="select"
+              v-model="_doctype"
+              :label="__('DocType')"
+              :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
+              @change="reload"
+            />
+            <div class="flex flex-row-reverse gap-2">
+              <Button
+                :loading="loading"
+                :label="__('Save')"
+                variant="solid"
+                @click="saveChanges"
+              />
+              <Button :label="__('Reset')" @click="reload" />
+              <Button
+                :label="preview ? __('Hide Preview') : __('Show Preview')"
+                @click="preview = !preview"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
+          <div
+            class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
+          >
+            <QuickEntryLayoutBuilder
+              v-if="!preview"
+              :sections="sections.data"
+              :doctype="_doctype"
+            />
+            <Fields v-else :sections="sections.data" :data="{}" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import Fields from '@/components/Fields.vue'
+import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const show = defineModel()
+const _doctype = ref(props.doctype)
+const loading = ref(false)
+const dirty = ref(false)
+const preview = ref(false)
+
+function getParams() {
+  return { doctype: _doctype.value, type: 'Quick Entry' }
+}
+
+const sections = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['quick-entry-sections', _doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    sections.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+watch(
+  () => sections?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+  },
+  { deep: true },
+)
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  nextTick(() => {
+    sections.params = getParams()
+    sections.reload()
+  })
+}
+
+function saveChanges() {
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    if (!section.fields) return
+    section.fields = section.fields.map(
+      (field) => field.fieldname || field.name,
+    )
+  })
+  loading.value = true
+  call(
+    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
+    {
+      doctype: _doctype.value,
+      type: 'Quick Entry',
+      layout: JSON.stringify(_sections),
+    },
+  ).then(() => {
+    loading.value = false
+    reload()
+  })
+}
+</script>
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 623621c7..938f0aec 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -45,7 +45,6 @@ import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
 import SidebarFieldsLayout from '@/components/Settings/SidebarFieldsLayout.vue'
-import QuickEntryLayout from '@/components/Settings/QuickEntryLayout.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { isWhatsappInstalled } from '@/composables/settings'
 import { Dialog, FeatherIcon } from 'frappe-ui'
@@ -90,11 +89,6 @@ const tabs = computed(() => {
           icon: RightSideLayoutIcon,
           component: markRaw(SidebarFieldsLayout),
         },
-        {
-          label: 'Quick Entry Layout',
-          icon: h(FeatherIcon, { name: 'grid' }),
-          component: markRaw(QuickEntryLayout),
-        },
       ],
     },
   ]
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 02bb60e6..096edd44 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -204,9 +204,15 @@
   </div>
   <ContactModal
     v-model="showContactModal"
+    v-model:quickEntry="showQuickEntryModal"
     :contact="contact"
     :options="{ detailMode }"
   />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
+  />
 </template>
 
 <script setup>
@@ -228,6 +234,7 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import {
   dateFormat,
   dateTooltipFormat,
@@ -258,6 +265,7 @@ const props = defineProps({
 const router = useRouter()
 
 const showContactModal = ref(false)
+const showQuickEntryModal = ref(false)
 const detailMode = ref(false)
 
 const breadcrumbs = computed(() => {
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 604c3296..d7cc1127 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -59,7 +59,16 @@
       </Button>
     </div>
   </div>
-  <ContactModal v-model="showContactModal" :contact="{}" />
+  <ContactModal
+    v-model="showContactModal"
+    v-model:quickEntry="showQuickEntryModal"
+    :contact="{}"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
+  />
 </template>
 
 <script setup>
@@ -67,6 +76,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { Breadcrumbs } from 'frappe-ui'
@@ -79,6 +89,7 @@ const { getOrganization } = organizationsStore()
 const route = useRoute()
 
 const showContactModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const currentContact = computed(() => {
   return contacts.value?.data?.data?.find(
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 53e69cb2..a9bcf892 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -234,6 +234,7 @@
   <DealModal
     v-if="showDealModal"
     v-model="showDealModal"
+    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -250,6 +251,11 @@
     doctype="CRM Deal"
     :doc="docname"
   />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Deal"
+  />
 </template>
 
 <script setup>
@@ -268,6 +274,7 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import DealModal from '@/components/Modals/DealModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
@@ -296,6 +303,7 @@ const route = useRoute()
 
 const dealsListView = ref(null)
 const showDealModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 599f6634..a81329d2 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -260,6 +260,7 @@
   <LeadModal
     v-if="showLeadModal"
     v-model="showLeadModal"
+    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -276,6 +277,7 @@
     doctype="CRM Lead"
     :doc="docname"
   />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 
 <script setup>
@@ -294,6 +296,7 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import LeadModal from '@/components/Modals/LeadModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
@@ -316,6 +319,7 @@ const route = useRoute()
 
 const leadsListView = ref(null)
 const showLeadModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 96f9e473..3ac92b62 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -214,9 +214,15 @@
   </div>
   <OrganizationModal
     v-model="showOrganizationModal"
+    v-model:quickEntry="showQuickEntryModal"
     v-model:organization="organization"
     :options="{ detailMode }"
   />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Organization"
+  />
 </template>
 
 <script setup>
@@ -232,6 +238,7 @@ import {
 } from 'frappe-ui'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
@@ -263,6 +270,7 @@ const props = defineProps({
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
 const showOrganizationModal = ref(false)
+const showQuickEntryModal = ref(false)
 const detailMode = ref(false)
 
 const router = useRouter()
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 79101c44..5e8c895e 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -59,13 +59,22 @@
       </Button>
     </div>
   </div>
-  <OrganizationModal v-model="showOrganizationModal" />
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    v-model:quickEntry="showQuickEntryModal"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Organization"
+  />
 </template>
 <script setup>
 import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { Breadcrumbs } from 'frappe-ui'
@@ -82,6 +91,7 @@ const route = useRoute()
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const currentOrganization = computed(() => {
   return organizations.value?.data?.data?.find(