From ab1d4644dde7f7cbe84b6829452deb471955c0a0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 14:46:13 +0530
Subject: [PATCH 01/10] feat: Quick Entry Layout Builder

---
 .../components/Icons/RightSideLayoutIcon.vue   | 18 ++++++++++++++++++
 .../components/Settings/QuickEntryLayout.vue   |  3 +++
 .../src/components/Settings/SettingsModal.vue  | 13 ++++++++++---
 ...ieldsLayout.vue => SidebarFieldsLayout.vue} |  0
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Icons/RightSideLayoutIcon.vue
 create mode 100644 frontend/src/components/Settings/QuickEntryLayout.vue
 rename frontend/src/components/Settings/{FieldsLayout.vue => SidebarFieldsLayout.vue} (100%)

diff --git a/frontend/src/components/Icons/RightSideLayoutIcon.vue b/frontend/src/components/Icons/RightSideLayoutIcon.vue
new file mode 100644
index 00000000..d9074f3b
--- /dev/null
+++ b/frontend/src/components/Icons/RightSideLayoutIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-panel-right-close"
+  >
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M15 3v18" />
+    <path d="m8 9 3 3-3 3" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
new file mode 100644
index 00000000..46f7e1e9
--- /dev/null
+++ b/frontend/src/components/Settings/QuickEntryLayout.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Quick Entry Layout</div>
+</template>
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index ef90a91e..623621c7 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -40,10 +40,12 @@
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import RightSideLayoutIcon from '@/components/Icons/RightSideLayoutIcon.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
-import FieldsLayout from '@/components/Settings/FieldsLayout.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'
@@ -84,9 +86,14 @@ const tabs = computed(() => {
       label: 'Customizations',
       items: [
         {
-          label: 'Fields Layout',
+          label: 'Sidebar Fields Layout',
+          icon: RightSideLayoutIcon,
+          component: markRaw(SidebarFieldsLayout),
+        },
+        {
+          label: 'Quick Entry Layout',
           icon: h(FeatherIcon, { name: 'grid' }),
-          component: markRaw(FieldsLayout),
+          component: markRaw(QuickEntryLayout),
         },
       ],
     },
diff --git a/frontend/src/components/Settings/FieldsLayout.vue b/frontend/src/components/Settings/SidebarFieldsLayout.vue
similarity index 100%
rename from frontend/src/components/Settings/FieldsLayout.vue
rename to frontend/src/components/Settings/SidebarFieldsLayout.vue

From 7e3a2f9fb725ebe38cac17899f398bb062be2254 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 15:35:28 +0530
Subject: [PATCH 02/10] fix: load sections and fields in quick entry layout
 builder

---
 .../components/Settings/QuickEntryLayout.vue  | 71 ++++++++++++++++++-
 .../Settings/QuickEntryLayoutBuilder.vue      | 33 +++++++++
 2 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Settings/QuickEntryLayoutBuilder.vue

diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
index 46f7e1e9..9fae4596 100644
--- a/frontend/src/components/Settings/QuickEntryLayout.vue
+++ b/frontend/src/components/Settings/QuickEntryLayout.vue
@@ -1,3 +1,72 @@
 <template>
-  <div>Quick Entry Layout</div>
+  <div ref="parentRef" class="flex flex-col p-8 overflow-hidden">
+    <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-1 flex flex-col justify-between -m-3 p-3 gap-6 overflow-y-auto">
+      <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" />
+        </div>
+      </div>
+      <div v-if="sections?.data" class="">
+        <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
+      </div>
+    </div>
+  </div>
 </template>
+<script setup>
+import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { Badge, createResource } from 'frappe-ui'
+import { ref, onMounted } from 'vue'
+
+const parentRef = ref(null)
+const doctype = ref('CRM Lead')
+const loading = ref(false)
+const dirty = 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))
+  },
+})
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  sections.params = getParams()
+  sections.reload()
+}
+
+function saveChanges() {
+  // TODO: Save changes
+}
+</script>
diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
new file mode 100644
index 00000000..0353f60e
--- /dev/null
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="border rounded-xl h-full inline-block w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
+  >
+    <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="mb-6 flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+          <header>
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+              {{ __('Create Lead') }}
+            </h3>
+          </header>
+        </div>
+        <Button icon="x" disabled variant="ghost" />
+      </div>
+      <div>
+        <div v-for="section in sections">
+          <div>{{ section.label }}</div>
+          <div v-for="field in section.fields">
+            <div>{{ field.label }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="px-4 pb-7 pt-4 sm:px-6">Actions</div> -->
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  sections: Object,
+  doctype: String,
+})
+</script>

From ce0ebb03a7ad5379bd34c6d3ca1086a504f245e9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 16:39:31 +0530
Subject: [PATCH 03/10] fix: added draggable fields layout with sections

---
 .../components/Settings/QuickEntryLayout.vue  |  62 ++++--
 .../Settings/QuickEntryLayoutBuilder.vue      | 195 ++++++++++++++++--
 2 files changed, 220 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
index 9fae4596..da43525d 100644
--- a/frontend/src/components/Settings/QuickEntryLayout.vue
+++ b/frontend/src/components/Settings/QuickEntryLayout.vue
@@ -1,15 +1,15 @@
 <template>
-  <div ref="parentRef" class="flex flex-col p-8 overflow-hidden">
-    <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-1 flex flex-col justify-between -m-3 p-3 gap-6 overflow-y-auto">
+  <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"
@@ -29,19 +29,18 @@
           <Button :label="__('Reset')" @click="reload" />
         </div>
       </div>
-      <div v-if="sections?.data" class="">
-        <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
-      </div>
+    </div>
+    <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
+      <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
     </div>
   </div>
 </template>
 <script setup>
 import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
-import { Badge, createResource } from 'frappe-ui'
-import { ref, onMounted } from 'vue'
+import { Badge, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted } from 'vue'
 
-const parentRef = ref(null)
 const doctype = ref('CRM Lead')
 const loading = ref(false)
 const dirty = ref(false)
@@ -59,6 +58,15 @@ const sections = createResource({
   },
 })
 
+watch(
+  () => sections?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+  },
+  { deep: true },
+)
+
 onMounted(() => useDebounceFn(reload, 100)())
 
 function reload() {
@@ -67,6 +75,24 @@ function reload() {
 }
 
 function saveChanges() {
-  // TODO: Save changes
+  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/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index 0353f60e..828e9cab 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -1,33 +1,190 @@
 <template>
   <div
-    class="border rounded-xl h-full inline-block w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
+    class="border rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
   >
-    <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
-      <div class="mb-6 flex items-center justify-between">
-        <div class="flex items-center space-x-2">
-          <header>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-              {{ __('Create Lead') }}
-            </h3>
-          </header>
-        </div>
-        <Button icon="x" disabled variant="ghost" />
-      </div>
-      <div>
-        <div v-for="section in sections">
-          <div>{{ section.label }}</div>
-          <div v-for="field in section.fields">
-            <div>{{ field.label }}</div>
+    <div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
+      <Draggable :list="sections" item-key="label" class="flex flex-col">
+        <template #item="{ element: section }">
+          <div class="border-b py-2 first:pt-0">
+            <div class="flex items-center justify-between py-2">
+              <div
+                class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
+              >
+                <div
+                  v-if="!section.editingLabel"
+                  :class="section.hideLabel ? 'text-gray-400' : ''"
+                >
+                  {{ __(section.label) || __('Untitled') }}
+                </div>
+                <div v-else>
+                  <Input
+                    v-model="section.label"
+                    @keydown.enter="section.editingLabel = false"
+                    @blur="section.editingLabel = false"
+                    @click.stop
+                  />
+                </div>
+              </div>
+              <div>
+                <Button
+                  :icon="section.hideLabel ? 'eye-off' : 'eye'"
+                  variant="ghost"
+                  @click="section.hideLabel = !section.hideLabel"
+                />
+                <Button
+                  :icon="section.editingLabel ? 'check' : 'edit'"
+                  variant="ghost"
+                  @click="section.editingLabel = !section.editingLabel"
+                />
+                <Button
+                  v-if="section.editable !== false"
+                  icon="x"
+                  variant="ghost"
+                  @click="sections.splice(sections.indexOf(section), 1)"
+                />
+              </div>
+            </div>
+            <div>
+              <Draggable
+                :list="section.fields"
+                group="fields"
+                item-key="label"
+                class="grid gap-2"
+                :class="
+                  section.columns
+                    ? 'grid-cols-' + section.columns
+                    : 'grid-cols-3'
+                "
+                handle=".cursor-grab"
+              >
+                <template #item="{ element: field }">
+                  <div
+                    class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+                  >
+                    <div class="flex items-center gap-2">
+                      <DragVerticalIcon class="h-3.5 cursor-grab" />
+                      <div>{{ field.label }}</div>
+                    </div>
+                    <div>
+                      <Button
+                        variant="ghost"
+                        icon="x"
+                        @click="
+                          section.fields.splice(
+                            section.fields.indexOf(field),
+                            1,
+                          )
+                        "
+                      />
+                    </div>
+                  </div>
+                </template>
+              </Draggable>
+              <Autocomplete
+                v-if="fields.data"
+                value=""
+                :options="fields.data"
+                @change="(e) => addField(section, e)"
+              >
+                <template #target="{ togglePopover }">
+                  <div
+                    class="grid gap-2 w-full"
+                    :class="
+                      section.columns
+                        ? 'grid-cols-' + section.columns
+                        : 'grid-cols-3'
+                    "
+                  >
+                    <Button
+                      class="mt-2 w-full !h-[38px] !border-gray-200"
+                      variant="outline"
+                      @click="togglePopover()"
+                      :label="__('Add Field')"
+                    >
+                      <template #prefix>
+                        <FeatherIcon name="plus" class="h-4" />
+                      </template>
+                    </Button>
+                  </div>
+                </template>
+                <template #item-label="{ option }">
+                  <div class="flex flex-col gap-1">
+                    <div>{{ option.label }}</div>
+                    <div class="text-gray-500 text-sm">
+                      {{ `${option.fieldname} - ${option.fieldtype}` }}
+                    </div>
+                  </div>
+                </template>
+              </Autocomplete>
+            </div>
           </div>
-        </div>
+        </template>
+      </Draggable>
+      <div class="py-2">
+        <Button
+          class="w-full !h-[38px] !border-gray-200"
+          variant="outline"
+          :label="__('Add Section')"
+          @click="
+            sections.push({
+              label: __('New Section'),
+              opened: true,
+              fields: [],
+            })
+          "
+        >
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4" />
+          </template>
+        </Button>
       </div>
     </div>
-    <!-- <div class="px-4 pb-7 pt-4 sm:px-6">Actions</div> -->
   </div>
 </template>
 <script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import Draggable from 'vuedraggable'
+import { createResource } from 'frappe-ui'
+import { computed, watch } from 'vue'
+
 const props = defineProps({
   sections: Object,
   doctype: String,
 })
+
+const restrictedFieldTypes = [
+  'Table',
+  'Geolocation',
+  'Attach',
+  'Attach Image',
+  'HTML',
+  'Signature',
+]
+
+const params = computed(() => {
+  return {
+    doctype: props.doctype,
+    restricted_fieldtypes: restrictedFieldTypes,
+    as_array: true,
+  }
+})
+
+const fields = createResource({
+  url: 'crm.api.doc.get_fields_meta',
+  params: params.value,
+  cache: ['fieldsMeta', props.doctype],
+  auto: true,
+})
+
+function addField(section, field) {
+  if (!field) return
+  section.fields.push(field)
+}
+
+watch(
+  () => props.doctype,
+  () => fields.fetch(params.value),
+  { immediate: true },
+)
 </script>

From fb8dfb55d6fb2b7b7e0e2bdcc2c69d225aa95218 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 17:05:41 +0530
Subject: [PATCH 04/10] fix: added/remove column and added all options in
 dropdown

---
 .../Settings/QuickEntryLayoutBuilder.vue      | 71 +++++++++++++------
 .../Settings/SidebarLayoutBuilder.vue         | 13 +++-
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index 828e9cab..3467101c 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
+    class="rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
   >
     <div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
       <Draggable :list="sections" item-key="label" class="flex flex-col">
@@ -16,33 +16,28 @@
                 >
                   {{ __(section.label) || __('Untitled') }}
                 </div>
-                <div v-else>
+                <div v-else class="flex gap-2 items-center">
                   <Input
                     v-model="section.label"
                     @keydown.enter="section.editingLabel = false"
                     @blur="section.editingLabel = false"
                     @click.stop
                   />
+                  <Button
+                    v-if="section.editingLabel"
+                    icon="check"
+                    variant="ghost"
+                    @click="section.editingLabel = false"
+                  />
                 </div>
               </div>
-              <div>
-                <Button
-                  :icon="section.hideLabel ? 'eye-off' : 'eye'"
-                  variant="ghost"
-                  @click="section.hideLabel = !section.hideLabel"
-                />
-                <Button
-                  :icon="section.editingLabel ? 'check' : 'edit'"
-                  variant="ghost"
-                  @click="section.editingLabel = !section.editingLabel"
-                />
-                <Button
-                  v-if="section.editable !== false"
-                  icon="x"
-                  variant="ghost"
-                  @click="sections.splice(sections.indexOf(section), 1)"
-                />
-              </div>
+              <Dropdown :options="getOptions(section)">
+                <template #default>
+                  <Button variant="ghost">
+                    <FeatherIcon name="more-horizontal" class="h-4" />
+                  </Button>
+                </template>
+              </Dropdown>
             </div>
             <div>
               <Draggable
@@ -145,7 +140,7 @@
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
 import Draggable from 'vuedraggable'
-import { createResource } from 'frappe-ui'
+import { Dropdown, createResource } from 'frappe-ui'
 import { computed, watch } from 'vue'
 
 const props = defineProps({
@@ -182,6 +177,40 @@ function addField(section, field) {
   section.fields.push(field)
 }
 
+function getOptions(section) {
+  return [
+    {
+      label: 'Edit',
+      icon: 'edit',
+      onClick: () => (section.editingLabel = true),
+    },
+    {
+      label: section.hideLabel ? 'Show Label' : 'Hide Label',
+      icon: section.hideLabel ? 'eye' : 'eye-off',
+      onClick: () => (section.hideLabel = !section.hideLabel),
+    },
+    {
+      label: 'Add Column',
+      icon: 'columns',
+      onClick: () =>
+        (section.columns = section.columns ? section.columns + 1 : 4),
+      condition: () => !section.columns || section.columns < 4,
+    },
+    {
+      label: 'Remove Column',
+      icon: 'columns',
+      onClick: () =>
+        (section.columns = section.columns ? section.columns - 1 : 2),
+      condition: () => !section.columns || section.columns > 1,
+    },
+    {
+      label: 'Remove Section',
+      icon: 'trash-2',
+      onClick: () => props.sections.splice(props.sections.indexOf(section), 1),
+    },
+  ]
+}
+
 watch(
   () => props.doctype,
   () => fields.fetch(params.value),
diff --git a/frontend/src/components/Settings/SidebarLayoutBuilder.vue b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
index 184fb0f8..cae8c605 100644
--- a/frontend/src/components/Settings/SidebarLayoutBuilder.vue
+++ b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
@@ -16,20 +16,27 @@
               <div v-if="!section.editingLabel">
                 {{ __(section.label) || __('Untitled') }}
               </div>
-              <div v-else>
+              <div v-else class="flex gap-2 items-center">
                 <Input
                   v-model="section.label"
                   @keydown.enter="section.editingLabel = false"
                   @blur="section.editingLabel = false"
                   @click.stop
                 />
+                <Button
+                  v-if="section.editingLabel"
+                  icon="check"
+                  variant="ghost"
+                  @click.stop="section.editingLabel = false"
+                />
               </div>
             </div>
             <div>
               <Button
-                :icon="section.editingLabel ? 'check' : 'edit'"
+                v-if="!section.editingLabel"
+                icon="edit"
                 variant="ghost"
-                @click="section.editingLabel = !section.editingLabel"
+                @click="section.editingLabel = true"
               />
               <Button
                 v-if="section.editable !== false"

From c0caf1c77645d2c404d04e4e96ef9cb47d4c0a8e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 17:29:02 +0530
Subject: [PATCH 05/10] fix: added add/hide border action

---
 .../Settings/QuickEntryLayoutBuilder.vue           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index 3467101c..f91f7a3e 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -5,8 +5,11 @@
     <div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
       <Draggable :list="sections" item-key="label" class="flex flex-col">
         <template #item="{ element: section }">
-          <div class="border-b py-2 first:pt-0">
-            <div class="flex items-center justify-between py-2">
+          <div
+            class="py-2 first:pt-0"
+            :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
+          >
+            <div class="flex items-center justify-between pb-2">
               <div
                 class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
               >
@@ -115,7 +118,7 @@
           </div>
         </template>
       </Draggable>
-      <div class="py-2">
+      <div class="py-2 border-t">
         <Button
           class="w-full !h-[38px] !border-gray-200"
           variant="outline"
@@ -189,6 +192,11 @@ function getOptions(section) {
       icon: section.hideLabel ? 'eye' : 'eye-off',
       onClick: () => (section.hideLabel = !section.hideLabel),
     },
+    {
+      label: section.hideBorder ? 'Show Border' : 'Hide Border',
+      icon: 'minus',
+      onClick: () => (section.hideBorder = !section.hideBorder),
+    },
     {
       label: 'Add Column',
       icon: 'columns',

From fa24d9d784cba61753acd402b2ee24aad66239f1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 17:31:10 +0530
Subject: [PATCH 06/10] fix: show section label in Quick Entry Modal

---
 frontend/src/components/Fields.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index 6bfdc09f..238b3ada 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -6,6 +6,12 @@
       class="first:border-t-0 first:pt-0"
       :class="section.hideBorder ? '' : 'border-t pt-4'"
     >
+      <div
+        v-if="!section.hideLabel"
+        class="flex h-7 mb-3 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
+      >
+        {{ section.label }}
+      </div>
       <div
         class="grid gap-4"
         :class="

From a6fdf4cec3d348cf15fe3ed457d87b6f307f98fe Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 18:10:32 +0530
Subject: [PATCH 07/10] fix: added lead fields in deal and rearranged fields

---
 crm/fcrm/doctype/crm_deal/crm_deal.json | 137 +++++++++++++++++-------
 1 file changed, 97 insertions(+), 40 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.json b/crm/fcrm/doctype/crm_deal/crm_deal.json
index 8b91b3db..9e9818d3 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.json
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.json
@@ -8,31 +8,40 @@
  "engine": "InnoDB",
  "field_order": [
   "organization_tab",
+  "naming_series",
   "organization",
-  "website",
-  "territory",
-  "annual_revenue",
-  "close_date",
-  "probability",
   "next_step",
+  "probability",
+  "column_break_ijan",
+  "status",
+  "close_date",
   "deal_owner",
   "contacts_tab",
+  "contacts",
+  "contact",
+  "lead_details_tab",
+  "lead",
+  "source",
+  "column_break_wsde",
   "lead_name",
+  "organization_details_section",
+  "organization_name",
+  "website",
+  "no_of_employees",
+  "job_title",
+  "column_break_xbyf",
+  "territory",
+  "annual_revenue",
+  "industry",
+  "person_section",
+  "salutation",
+  "first_name",
+  "last_name",
+  "column_break_xjmy",
   "email",
   "mobile_no",
   "phone",
-  "contacts",
-  "others_tab",
-  "naming_series",
-  "status",
-  "section_break_sygz",
-  "no_of_employees",
-  "column_break_nwob",
-  "job_title",
-  "section_break_eepu",
-  "lead",
-  "column_break_bqvs",
-  "source",
+  "gender",
   "sla_tab",
   "sla",
   "sla_creation",
@@ -88,14 +97,6 @@
    "label": "Lead",
    "options": "CRM Lead"
   },
-  {
-   "fieldname": "section_break_eepu",
-   "fieldtype": "Section Break"
-  },
-  {
-   "fieldname": "column_break_bqvs",
-   "fieldtype": "Column Break"
-  },
   {
    "fieldname": "deal_owner",
    "fieldtype": "Link",
@@ -142,12 +143,6 @@
    "label": "Contacts",
    "options": "CRM Contacts"
   },
-  {
-   "fieldname": "others_tab",
-   "fieldtype": "Tab Break",
-   "label": "Others",
-   "read_only": 1
-  },
   {
    "fieldname": "organization_tab",
    "fieldtype": "Tab Break",
@@ -235,14 +230,6 @@
    "label": "No. of Employees",
    "options": "1-10\n11-50\n51-200\n201-500\n501-1000\n1000+"
   },
-  {
-   "fieldname": "section_break_sygz",
-   "fieldtype": "Section Break"
-  },
-  {
-   "fieldname": "column_break_nwob",
-   "fieldtype": "Column Break"
-  },
   {
    "fieldname": "job_title",
    "fieldtype": "Data",
@@ -270,11 +257,81 @@
    "fieldname": "lead_name",
    "fieldtype": "Data",
    "label": "Lead Name"
+  },
+  {
+   "fieldname": "column_break_ijan",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "lead_details_tab",
+   "fieldtype": "Tab Break",
+   "label": "Lead Details"
+  },
+  {
+   "fieldname": "column_break_wsde",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "organization_details_section",
+   "fieldtype": "Section Break",
+   "label": "Organization Details"
+  },
+  {
+   "fieldname": "organization_name",
+   "fieldtype": "Data",
+   "label": "Organization Name"
+  },
+  {
+   "fieldname": "column_break_xbyf",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "industry",
+   "fieldtype": "Link",
+   "label": "Industry",
+   "options": "CRM Industry"
+  },
+  {
+   "fieldname": "person_section",
+   "fieldtype": "Section Break",
+   "label": "Person"
+  },
+  {
+   "fieldname": "salutation",
+   "fieldtype": "Link",
+   "label": "Salutation",
+   "options": "Salutation"
+  },
+  {
+   "fieldname": "first_name",
+   "fieldtype": "Data",
+   "label": "First Name"
+  },
+  {
+   "fieldname": "last_name",
+   "fieldtype": "Data",
+   "label": "Last Name"
+  },
+  {
+   "fieldname": "column_break_xjmy",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "gender",
+   "fieldtype": "Link",
+   "label": "Gender",
+   "options": "Gender"
+  },
+  {
+   "fieldname": "contact",
+   "fieldtype": "Link",
+   "label": "Contact",
+   "options": "Contact"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-01-25 21:00:08.216020",
+ "modified": "2024-06-19 18:01:59.213811",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",

From 3e4680abb951af06157f9bf12376e37878023eb1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 18:35:39 +0530
Subject: [PATCH 08/10] fix: show/hide preview quick entry & sidebar fields

---
 frontend/src/components/SectionFields.vue     |   7 +-
 .../components/Settings/QuickEntryLayout.vue  |  17 +-
 .../Settings/QuickEntryLayoutBuilder.vue      | 263 +++++++++---------
 .../Settings/SidebarFieldsLayout.vue          |  25 +-
 4 files changed, 172 insertions(+), 140 deletions(-)

diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index d80868b5..80a07229 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -36,7 +36,7 @@
         <FormControl
           v-else-if="
             ['email', 'number', 'date', 'password', 'textarea'].includes(
-              field.type
+              field.type,
             )
           "
           class="form-control"
@@ -137,7 +137,10 @@ const _fields = computed(() => {
   props.fields?.forEach((field) => {
     let df = field.all_properties
     if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
-    all_fields.push(field)
+    all_fields.push({
+      ...field,
+      placeholder: field.placeholder || field.label,
+    })
   })
   return all_fields
 })
diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
index da43525d..a043dbe9 100644
--- a/frontend/src/components/Settings/QuickEntryLayout.vue
+++ b/frontend/src/components/Settings/QuickEntryLayout.vue
@@ -27,15 +27,29 @@
             @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">
-      <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
+      <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'
@@ -44,6 +58,7 @@ 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' }
diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index f91f7a3e..30158155 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -1,141 +1,132 @@
 <template>
-  <div
-    class="rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
-  >
-    <div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
-      <Draggable :list="sections" item-key="label" class="flex flex-col">
-        <template #item="{ element: section }">
-          <div
-            class="py-2 first:pt-0"
-            :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
-          >
-            <div class="flex items-center justify-between pb-2">
-              <div
-                class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
-              >
-                <div
-                  v-if="!section.editingLabel"
-                  :class="section.hideLabel ? 'text-gray-400' : ''"
-                >
-                  {{ __(section.label) || __('Untitled') }}
-                </div>
-                <div v-else class="flex gap-2 items-center">
-                  <Input
-                    v-model="section.label"
-                    @keydown.enter="section.editingLabel = false"
-                    @blur="section.editingLabel = false"
-                    @click.stop
-                  />
-                  <Button
-                    v-if="section.editingLabel"
-                    icon="check"
-                    variant="ghost"
-                    @click="section.editingLabel = false"
-                  />
-                </div>
-              </div>
-              <Dropdown :options="getOptions(section)">
-                <template #default>
-                  <Button variant="ghost">
-                    <FeatherIcon name="more-horizontal" class="h-4" />
-                  </Button>
-                </template>
-              </Dropdown>
-            </div>
-            <div>
-              <Draggable
-                :list="section.fields"
-                group="fields"
-                item-key="label"
-                class="grid gap-2"
-                :class="
-                  section.columns
-                    ? 'grid-cols-' + section.columns
-                    : 'grid-cols-3'
-                "
-                handle=".cursor-grab"
-              >
-                <template #item="{ element: field }">
-                  <div
-                    class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
-                  >
-                    <div class="flex items-center gap-2">
-                      <DragVerticalIcon class="h-3.5 cursor-grab" />
-                      <div>{{ field.label }}</div>
-                    </div>
-                    <div>
-                      <Button
-                        variant="ghost"
-                        icon="x"
-                        @click="
-                          section.fields.splice(
-                            section.fields.indexOf(field),
-                            1,
-                          )
-                        "
-                      />
-                    </div>
-                  </div>
-                </template>
-              </Draggable>
-              <Autocomplete
-                v-if="fields.data"
-                value=""
-                :options="fields.data"
-                @change="(e) => addField(section, e)"
-              >
-                <template #target="{ togglePopover }">
-                  <div
-                    class="grid gap-2 w-full"
-                    :class="
-                      section.columns
-                        ? 'grid-cols-' + section.columns
-                        : 'grid-cols-3'
-                    "
-                  >
-                    <Button
-                      class="mt-2 w-full !h-[38px] !border-gray-200"
-                      variant="outline"
-                      @click="togglePopover()"
-                      :label="__('Add Field')"
-                    >
-                      <template #prefix>
-                        <FeatherIcon name="plus" class="h-4" />
-                      </template>
-                    </Button>
-                  </div>
-                </template>
-                <template #item-label="{ option }">
-                  <div class="flex flex-col gap-1">
-                    <div>{{ option.label }}</div>
-                    <div class="text-gray-500 text-sm">
-                      {{ `${option.fieldname} - ${option.fieldtype}` }}
-                    </div>
-                  </div>
-                </template>
-              </Autocomplete>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-      <div class="py-2 border-t">
-        <Button
-          class="w-full !h-[38px] !border-gray-200"
-          variant="outline"
-          :label="__('Add Section')"
-          @click="
-            sections.push({
-              label: __('New Section'),
-              opened: true,
-              fields: [],
-            })
-          "
+  <div>
+    <Draggable :list="sections" item-key="label" class="flex flex-col">
+      <template #item="{ element: section }">
+        <div
+          class="py-2 first:pt-0"
+          :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
         >
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4" />
-          </template>
-        </Button>
-      </div>
+          <div class="flex items-center justify-between pb-2">
+            <div
+              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
+            >
+              <div
+                v-if="!section.editingLabel"
+                :class="section.hideLabel ? 'text-gray-400' : ''"
+              >
+                {{ __(section.label) || __('Untitled') }}
+              </div>
+              <div v-else class="flex gap-2 items-center">
+                <Input
+                  v-model="section.label"
+                  @keydown.enter="section.editingLabel = false"
+                  @blur="section.editingLabel = false"
+                  @click.stop
+                />
+                <Button
+                  v-if="section.editingLabel"
+                  icon="check"
+                  variant="ghost"
+                  @click="section.editingLabel = false"
+                />
+              </div>
+            </div>
+            <Dropdown :options="getOptions(section)">
+              <template #default>
+                <Button variant="ghost">
+                  <FeatherIcon name="more-horizontal" class="h-4" />
+                </Button>
+              </template>
+            </Dropdown>
+          </div>
+          <div>
+            <Draggable
+              :list="section.fields"
+              group="fields"
+              item-key="label"
+              class="grid gap-2"
+              :class="
+                section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
+              "
+              handle=".cursor-grab"
+            >
+              <template #item="{ element: field }">
+                <div
+                  class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+                >
+                  <div class="flex items-center gap-2">
+                    <DragVerticalIcon class="h-3.5 cursor-grab" />
+                    <div>{{ field.label }}</div>
+                  </div>
+                  <div>
+                    <Button
+                      variant="ghost"
+                      icon="x"
+                      @click="
+                        section.fields.splice(section.fields.indexOf(field), 1)
+                      "
+                    />
+                  </div>
+                </div>
+              </template>
+            </Draggable>
+            <Autocomplete
+              v-if="fields.data"
+              value=""
+              :options="fields.data"
+              @change="(e) => addField(section, e)"
+            >
+              <template #target="{ togglePopover }">
+                <div
+                  class="grid gap-2 w-full"
+                  :class="
+                    section.columns
+                      ? 'grid-cols-' + section.columns
+                      : 'grid-cols-3'
+                  "
+                >
+                  <Button
+                    class="mt-2 w-full !h-[38px] !border-gray-200"
+                    variant="outline"
+                    @click="togglePopover()"
+                    :label="__('Add Field')"
+                  >
+                    <template #prefix>
+                      <FeatherIcon name="plus" class="h-4" />
+                    </template>
+                  </Button>
+                </div>
+              </template>
+              <template #item-label="{ option }">
+                <div class="flex flex-col gap-1">
+                  <div>{{ option.label }}</div>
+                  <div class="text-gray-500 text-sm">
+                    {{ `${option.fieldname} - ${option.fieldtype}` }}
+                  </div>
+                </div>
+              </template>
+            </Autocomplete>
+          </div>
+        </div>
+      </template>
+    </Draggable>
+    <div class="py-2 border-t">
+      <Button
+        class="w-full !h-[38px] !border-gray-200"
+        variant="outline"
+        :label="__('Add Section')"
+        @click="
+          sections.push({
+            label: __('New Section'),
+            opened: true,
+            fields: [],
+          })
+        "
+      >
+        <template #prefix>
+          <FeatherIcon name="plus" class="h-4" />
+        </template>
+      </Button>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Settings/SidebarFieldsLayout.vue b/frontend/src/components/Settings/SidebarFieldsLayout.vue
index 0858cae0..86e8ace7 100644
--- a/frontend/src/components/Settings/SidebarFieldsLayout.vue
+++ b/frontend/src/components/Settings/SidebarFieldsLayout.vue
@@ -27,6 +27,10 @@
           @click="saveChanges"
         />
         <Button :label="__('Reset')" @click="reload" />
+        <Button
+          :label="preview ? __('Hide Preview') : __('Show Preview')"
+          @click="preview = !preview"
+        />
       </div>
     </div>
     <Resizer
@@ -37,13 +41,30 @@
     >
       <div class="flex flex-1 flex-col justify-between overflow-hidden">
         <div class="flex flex-col overflow-y-auto">
-          <SidebarLayoutBuilder :sections="sections.data" :doctype="doctype" />
+          <SidebarLayoutBuilder
+            v-if="!preview"
+            :sections="sections.data"
+            :doctype="doctype"
+          />
+          <div
+            v-else
+            v-for="(section, i) in sections.data"
+            :key="section.label"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== sections.data.length - 1 }"
+          >
+            <Section :is-opened="section.opened" :label="section.label">
+              <SectionFields :fields="section.fields" v-model="data" />
+            </Section>
+          </div>
         </div>
       </div>
     </Resizer>
   </div>
 </template>
 <script setup>
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
 import Resizer from '@/components/Resizer.vue'
 import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
@@ -54,6 +75,8 @@ const parentRef = ref(null)
 const doctype = ref('CRM Lead')
 const loading = ref(false)
 const dirty = ref(false)
+const preview = ref(false)
+const data = ref({})
 
 function getParams() {
   return { doctype: doctype.value, type: 'Side Panel' }

From 892e7b0d9ce43f1d50dc3d88c4db89558cf6d3b9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 19:17:24 +0530
Subject: [PATCH 09/10] fix: do not allow renaming or removing some sections in
 deal quick entry modal

---
 frontend/src/components/Settings/QuickEntryLayoutBuilder.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index 30158155..c285db8a 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -177,6 +177,7 @@ function getOptions(section) {
       label: 'Edit',
       icon: 'edit',
       onClick: () => (section.editingLabel = true),
+      condition: () => section.editable !== false,
     },
     {
       label: section.hideLabel ? 'Show Label' : 'Hide Label',
@@ -206,6 +207,7 @@ function getOptions(section) {
       label: 'Remove Section',
       icon: 'trash-2',
       onClick: () => props.sections.splice(props.sections.indexOf(section), 1),
+      condition: () => section.editable !== false,
     },
   ]
 }

From 954feff9bbed24ff20f97ee789335139b53b14fe Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 19:18:38 +0530
Subject: [PATCH 10/10] patch: added patch to update deal quick entry layout to
 restrict editing section label and removing it

---
 crm/install.py                                    |  8 ++++----
 crm/patches.txt                                   |  3 ++-
 .../v1_0/update_deal_quick_entry_layout.py        | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 crm/patches/v1_0/update_deal_quick_entry_layout.py

diff --git a/crm/install.py b/crm/install.py
index 923cbd4e..92d8a2ef 100644
--- a/crm/install.py
+++ b/crm/install.py
@@ -113,19 +113,19 @@ def add_default_fields_layout():
 	layouts = {
 		"CRM Lead-Quick Entry": {
 			"doctype": "CRM Lead",
-			"layout": '[\n{\n"label": "Person",\n\t"fields": ["salutation", "first_name", "last_name", "email", "mobile_no", "gender"]\n},\n{\n"label": "Organization",\n\t"fields": ["organization", "website", "no_of_employees", "territory", "annual_revenue", "industry"]\n},\n{\n"label": "Other",\n"columns": 2,\n\t"fields": ["status", "lead_owner"]\n}\n]'
+			"layout": '[{"label":"Person","fields":["salutation","first_name","last_name","email","mobile_no", "gender"],"hideLabel":true},{"label":"Organization","fields":["organization","website","no_of_employees","territory","annual_revenue","industry"],"hideLabel":true,"hideBorder":false},{"label":"Other","columns":2,"fields":["status","lead_owner"],"hideLabel":true,"hideBorder":false}]'
 		},
 		"CRM Deal-Quick Entry": {
 			"doctype": "CRM Deal",
-			"layout": '[\n{\n"label": "Select Organization",\n\t"fields": ["organization"]\n},\n{\n"label": "Organization Details",\n\t"fields": [{"label": "Organization Name", "name": "organization_name", "type": "Data"}, "website", "no_of_employees", "territory", "annual_revenue", {"label": "Industry", "name": "industry", "type": "Link", "options": "CRM Industry"}]\n},\n{\n"label": "Select Contact",\n\t"fields": [{"label": "Contact", "name": "contact", "type": "Link", "options": "Contact"}]\n},\n{\n"label": "Contact Details",\n\t"fields": [{"label": "Salutation", "name": "salutation", "type": "Link", "options": "Salutation"}, {"label": "First Name", "name": "first_name", "type": "Data"}, {"label": "Last Name", "name": "last_name", "type": "Data"}, "email", "mobile_no", {"label": "Gender", "name": "gender", "type": "Link", "options": "Gender"}]\n},\n{\n"label": "Other",\n"columns": 2,\n\t"fields": ["status", "deal_owner"]\n}\n]'
+			"layout": '[{"label": "Select Organization", "fields": ["organization"], "hideLabel": true, "editable": true}, {"label": "Organization Details", "fields": ["organization_name", "website", "no_of_employees", "territory", "annual_revenue", "industry"], "hideLabel": true, "editable": true}, {"label": "Select Contact", "fields": ["contact"], "hideLabel": true, "editable": true}, {"label": "Contact Details", "fields": ["salutation", "first_name", "last_name", "email", "mobile_no", "gender"], "hideLabel": true, "editable": true}, {"label": "Other", "columns": 2, "fields": ["status", "deal_owner"], "hideLabel": true}]'
 		},
 		"Contact-Quick Entry": {
 			"doctype": "Contact",
-			"layout": '[\n{\n"label": "Salutation",\n"columns": 1,\n"fields": ["salutation"]\n},\n{\n"label": "Full Name",\n"columns": 2,\n"hideBorder": true,\n"fields": ["first_name", "last_name"]\n},\n{\n"label": "Email",\n"columns": 1,\n"hideBorder": true,\n"fields": ["email_id"]\n},\n{\n"label": "Mobile No. & Gender",\n"columns": 2,\n"hideBorder": true,\n"fields": ["mobile_no", "gender"]\n},\n{\n"label": "Organization",\n"columns": 1,\n"hideBorder": true,\n"fields": ["company_name"]\n},\n{\n"label": "Designation",\n"columns": 1,\n"hideBorder": true,\n"fields": ["designation"]\n}\n]'
+			"layout": '[{"label":"Salutation","columns":1,"fields":["salutation"],"hideLabel":true},{"label":"Full Name","columns":2,"hideBorder":true,"fields":["first_name","last_name"],"hideLabel":true},{"label":"Email","columns":1,"hideBorder":true,"fields":["email_id"],"hideLabel":true},{"label":"Mobile No. & Gender","columns":2,"hideBorder":true,"fields":["mobile_no","gender"],"hideLabel":true},{"label":"Organization","columns":1,"hideBorder":true,"fields":["company_name"],"hideLabel":true},{"label":"Designation","columns":1,"hideBorder":true,"fields":["designation"],"hideLabel":true}]'
 		},
 		"Organization-Quick Entry": {
 			"doctype": "CRM Organization",
-			"layout": '[\n{\n"label": "Organization Name",\n"columns": 1,\n"fields": ["organization_name"]\n},\n{\n"label": "Website & Revenue",\n"columns": 2,\n"hideBorder": true,\n"fields": ["website", "annual_revenue"]\n},\n{\n"label": "Territory",\n"columns": 1,\n"hideBorder": true,\n"fields": ["territory"]\n},\n{\n"label": "No of Employees & Industry",\n"columns": 2,\n"hideBorder": true,\n"fields": ["no_of_employees", "industry"]\n}\n]'
+			"layout": '[{"label":"Organization Name","columns":1,"fields":["organization_name"],"hideLabel":true},{"label":"Website & Revenue","columns":2,"hideBorder":true,"fields":["website","annual_revenue"],"hideLabel":true},{"label":"Territory","columns":1,"hideBorder":true,"fields":["territory"],"hideLabel":true},{"label":"No of Employees & Industry","columns":2,"hideBorder":true,"fields":["no_of_employees","industry"],"hideLabel":true}]'
 		},
 	}
 
diff --git a/crm/patches.txt b/crm/patches.txt
index 32c4485a..b4c07a8e 100644
--- a/crm/patches.txt
+++ b/crm/patches.txt
@@ -7,4 +7,5 @@ crm.patches.v1_0.move_crm_note_data_to_fcrm_note
 # Patches added in this section will be executed after doctypes are migrated
 crm.patches.v1_0.create_email_template_custom_fields
 crm.patches.v1_0.create_default_fields_layout
-crm.patches.v1_0.create_default_sidebar_fields_layout
\ No newline at end of file
+crm.patches.v1_0.create_default_sidebar_fields_layout
+crm.patches.v1_0.update_deal_quick_entry_layout
\ No newline at end of file
diff --git a/crm/patches/v1_0/update_deal_quick_entry_layout.py b/crm/patches/v1_0/update_deal_quick_entry_layout.py
new file mode 100644
index 00000000..9cc54516
--- /dev/null
+++ b/crm/patches/v1_0/update_deal_quick_entry_layout.py
@@ -0,0 +1,15 @@
+import json
+import frappe
+
+def execute():
+    if not frappe.db.exists("CRM Fields Layout", "CRM Deal-Quick Entry"):
+        return
+
+    deal = frappe.db.get_value("CRM Fields Layout", "CRM Deal-Quick Entry", "layout")
+
+    layout = json.loads(deal)
+    for section in layout:
+        if section.get("label") in ["Select Organization", "Organization Details", "Select Contact", "Contact Details"]:
+            section["editable"] = True
+
+    frappe.db.set_value("CRM Fields Layout", "CRM Deal-Quick Entry", "layout", json.dumps(layout))
\ No newline at end of file