From 145d26403f6dbc09f9402ef752fb63ab0ef0d02e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 13 Jun 2024 15:42:18 +0530
Subject: [PATCH 01/14] fix: removed unique from doctype field

---
 crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
index c780557a..00012770 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
@@ -19,8 +19,7 @@
    "in_list_view": 1,
    "in_standard_filter": 1,
    "label": "Document Type",
-   "options": "DocType",
-   "unique": 1
+   "options": "DocType"
   },
   {
    "fieldname": "type",
@@ -47,7 +46,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-06-07 17:01:20.250697",
+ "modified": "2024-06-13 15:10:01.612851",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Fields Layout",

From 22a46827a9352a5d0e2a57b1c5750ee9ddaf9878 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 13 Jun 2024 15:43:43 +0530
Subject: [PATCH 02/14] refactor: renamed get_quick_entry_fields and made it
 generic

---
 crm/api/doc.py                                       | 6 +++---
 frontend/src/components/Modals/ContactModal.vue      | 4 ++--
 frontend/src/components/Modals/DealModal.vue         | 4 ++--
 frontend/src/components/Modals/LeadModal.vue         | 4 ++--
 frontend/src/components/Modals/OrganizationModal.vue | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 0c535e99..c1739280 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -158,10 +158,10 @@ def get_group_by_fields(doctype: str):
 
 
 @frappe.whitelist()
-def get_quick_entry_fields(doctype: str):
+def get_fields_layout(doctype: str, type: str):
 	sections = []
-	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": "Quick Entry"}):
-		layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": "Quick Entry"})
+	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
+		layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
 	else:
 		return []
 
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 7ec75161..4e23756f 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -235,9 +235,9 @@ const detailFields = computed(() => {
 })
 
 const sections = createResource({
-  url: 'crm.api.doc.get_quick_entry_fields',
+  url: 'crm.api.doc.get_fields_layout',
   cache: ['quickEntryFields', 'Contact'],
-  params: { doctype: 'Contact' },
+  params: { doctype: 'Contact', type: 'Quick Entry'},
   auto: true,
 })
 
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index bf465ddc..be2f7a72 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -77,9 +77,9 @@ const chooseExistingContact = ref(false)
 const chooseExistingOrganization = ref(false)
 
 const sections = createResource({
-  url: 'crm.api.doc.get_quick_entry_fields',
+  url: 'crm.api.doc.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Deal'],
-  params: { doctype: 'CRM Deal' },
+  params: { doctype: 'CRM Deal', type: 'Quick Entry'},
   auto: true,
   transform: (data) => {
     return data.forEach((section) => {
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 54e7566e..a8245ffc 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -40,9 +40,9 @@ const error = ref(null)
 const isLeadCreating = ref(false)
 
 const sections = createResource({
-  url: 'crm.api.doc.get_quick_entry_fields',
+  url: 'crm.api.doc.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Lead'],
-  params: { doctype: 'CRM Lead' },
+  params: { doctype: 'CRM Lead', type: 'Quick Entry' },
   auto: true,
   transform: (data) => {
     return data.forEach((section) => {
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 08a7e91a..d04205dc 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -225,9 +225,9 @@ const fields = computed(() => {
 })
 
 const sections = createResource({
-  url: 'crm.api.doc.get_quick_entry_fields',
+  url: 'crm.api.doc.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Organization'],
-  params: { doctype: 'CRM Organization' },
+  params: { doctype: 'CRM Organization', type: 'Quick Entry'},
   auto: true,
 })
 

From e59d9b142678f626a3c7715eea7dd910b4603519 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 13 Jun 2024 15:44:40 +0530
Subject: [PATCH 03/14] refactor: calculate gap from left/right in resizer
 based on parent ref passed

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

diff --git a/frontend/src/components/Resizer.vue b/frontend/src/components/Resizer.vue
index e81df9e7..ebe0029b 100644
--- a/frontend/src/components/Resizer.vue
+++ b/frontend/src/components/Resizer.vue
@@ -28,6 +28,10 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  parent: {
+    type: Object,
+    default: null,
+  },
 })
 
 const sidebarResizing = ref(false)
@@ -58,6 +62,9 @@ function resize(e) {
   sidebarWidth.value =
     props.side == 'left' ? e.clientX : window.innerWidth - e.clientX
 
+  let gap = props.parent ? distance() : 0
+  sidebarWidth.value = sidebarWidth.value - gap
+
   // snap to props.defaultWidth
   let range = [props.defaultWidth - 10, props.defaultWidth + 10]
   if (sidebarWidth.value > range[0] && sidebarWidth.value < range[1]) {
@@ -71,4 +78,9 @@ function resize(e) {
     sidebarWidth.value = props.maxWidth
   }
 }
+function distance() {
+  if (!props.parent) return 0
+  const rect = props.parent.getBoundingClientRect()
+  return window.innerWidth - rect[props.side]
+}
 </script>

From 50984571072f9bb137b30b0ed72fae24432ba136 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 13 Jun 2024 15:46:25 +0530
Subject: [PATCH 04/14] fix: removed default padding from settings page

---
 frontend/src/components/SectionFields.vue             |  2 +-
 frontend/src/components/Settings/ProfileSettings.vue  |  2 +-
 frontend/src/components/Settings/SettingsModal.vue    |  2 +-
 frontend/src/components/Settings/SettingsPage.vue     | 11 ++++++++---
 frontend/src/components/Settings/TwilioSettings.vue   |  2 +-
 frontend/src/components/Settings/WhatsAppSettings.vue |  2 +-
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 63d43e00..d80868b5 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -136,7 +136,7 @@ const _fields = computed(() => {
   let all_fields = []
   props.fields?.forEach((field) => {
     let df = field.all_properties
-    if (df.depends_on) evaluate_depends_on(df.depends_on, field)
+    if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
     all_fields.push(field)
   })
   return all_fields
diff --git a/frontend/src/components/Settings/ProfileSettings.vue b/frontend/src/components/Settings/ProfileSettings.vue
index a2ef0974..34b92f11 100644
--- a/frontend/src/components/Settings/ProfileSettings.vue
+++ b/frontend/src/components/Settings/ProfileSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="profile" class="flex w-full items-center justify-between">
+  <div v-if="profile" class="flex w-full items-center justify-between p-12 pt-14">
     <div class="flex items-center gap-4">
       <Avatar
         class="!size-16"
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 821294ec..1809d812 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -40,7 +40,7 @@
             />
           </nav>
         </div>
-        <div class="flex flex-1 flex-col overflow-y-auto p-8">
+        <div class="flex flex-1 flex-col overflow-y-auto">
           <component :is="activeTab.component" v-if="activeTab" />
         </div>
       </div>
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index f7eff59e..45bf3b02 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -3,10 +3,10 @@
     <h2 class="flex gap-2 text-xl font-semibold leading-none">
       <div>{{ __(doctype) }}</div>
       <Badge
+        v-if="data.isDirty"
         :label="__('Not Saved')"
         variant="subtle"
         theme="orange"
-        v-if="data.isDirty"
       />
     </h2>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
@@ -17,7 +17,7 @@
       />
     </div>
     <div v-else class="flex flex-1 items-center justify-center">
-      <Spinner />
+      <Spinner class="size-8" />
     </div>
     <div class="flex flex-row-reverse">
       <Button
@@ -31,7 +31,12 @@
 </template>
 <script setup>
 import Fields from '@/components/Fields.vue'
-import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
+import {
+  createDocumentResource,
+  createResource,
+  Spinner,
+  Badge,
+} from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Settings/TwilioSettings.vue b/frontend/src/components/Settings/TwilioSettings.vue
index 5672da6f..8d8479ba 100644
--- a/frontend/src/components/Settings/TwilioSettings.vue
+++ b/frontend/src/components/Settings/TwilioSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <SettingsPage doctype="Twilio Settings" />
+  <SettingsPage doctype="Twilio Settings" class="p-8" />
 </template>
 <script setup>
 import SettingsPage from '@/components/Settings/SettingsPage.vue'
diff --git a/frontend/src/components/Settings/WhatsAppSettings.vue b/frontend/src/components/Settings/WhatsAppSettings.vue
index 027b1b91..0b257791 100644
--- a/frontend/src/components/Settings/WhatsAppSettings.vue
+++ b/frontend/src/components/Settings/WhatsAppSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <SettingsPage doctype="WhatsApp Settings" />
+  <SettingsPage doctype="WhatsApp Settings" class="p-8" />
 </template>
 <script setup>
 import SettingsPage from '@/components/Settings/SettingsPage.vue'

From 212dacfedfefb7df3d5f52f844c4ea6e7db0938b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 13 Jun 2024 15:52:08 +0530
Subject: [PATCH 05/14] feat: fields layout builder

---
 .../src/components/Settings/FieldsLayout.vue  | 57 +++++++++++++++++++
 .../src/components/Settings/SettingsModal.vue | 10 +++-
 2 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Settings/FieldsLayout.vue

diff --git a/frontend/src/components/Settings/FieldsLayout.vue b/frontend/src/components/Settings/FieldsLayout.vue
new file mode 100644
index 00000000..256c026f
--- /dev/null
+++ b/frontend/src/components/Settings/FieldsLayout.vue
@@ -0,0 +1,57 @@
+<template>
+  <div ref="parentRef" class="flex h-full">
+    <div class="flex-1 p-8">
+      <FormControl
+        type="select"
+        v-model="doctype"
+        :label="__('DocType')"
+        :options="['CRM Lead', 'CRM Deal']"
+      />
+    </div>
+    <Resizer
+      class="flex flex-col justify-between border-l"
+      :parent="parentRef"
+      side="right"
+    >
+      <div
+        v-if="sections.data"
+        class="flex flex-1 flex-col justify-between overflow-hidden"
+      >
+        <div class="flex flex-col overflow-y-auto">
+          <div
+            v-for="(section, i) in sections.data"
+            :key="section.label"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== sections.data - 1 }"
+          >
+            <Section :is-opened="section.opened" :label="section.label">
+              <div v-for="field in section.fields" class="p-3">
+                {{ field.label }}
+              </div>
+            </Section>
+          </div>
+        </div>
+      </div>
+    </Resizer>
+  </div>
+</template>
+<script setup>
+import Resizer from '@/components/Resizer.vue'
+import Section from '@/components/Section.vue'
+import { createResource } from 'frappe-ui'
+import { ref, watch } from 'vue'
+
+const parentRef = ref(null)
+const doctype = ref('CRM Lead')
+
+const sections = createResource({
+  url: 'crm.api.doc.get_fields_layout',
+  cache: ['sidebar-sections', doctype],
+  params: { doctype: doctype.value, type: 'Side Panel' },
+  auto: true,
+})
+
+watch(doctype, (val) => sections.fetch({ doctype: val, type: 'Side Panel' }), {
+  immediate: true,
+})
+</script>
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 1809d812..af45481f 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -54,10 +54,11 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.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 SidebarLink from '@/components/SidebarLink.vue'
 import { isWhatsappInstalled } from '@/composables/settings'
-import { Dialog } from 'frappe-ui'
-import { ref, markRaw, computed } from 'vue'
+import { Dialog, FeatherIcon } from 'frappe-ui'
+import { ref, markRaw, computed, h } from 'vue'
 
 const show = defineModel()
 
@@ -67,6 +68,11 @@ let tabs = [
     icon: ContactsIcon,
     component: markRaw(ProfileSettings),
   },
+  {
+    label: 'Fields Layout',
+    icon: h(FeatherIcon, { name: 'grid' }),
+    component: markRaw(FieldsLayout),
+  },
 ]
 
 let integrations = computed(() => {

From 8292a0c1be2d3467cae7127252a8ebfebdbf02d8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 11:01:28 +0530
Subject: [PATCH 06/14] feat: implemented sidebar layout builder

---
 .../src/components/Settings/SettingsPage.vue  |  2 +-
 .../Settings/SidebarLayoutBuilder.vue         | 98 +++++++++++++++++++
 2 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Settings/SidebarLayoutBuilder.vue

diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index 45bf3b02..8cbf42fa 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-full flex-col gap-8">
-    <h2 class="flex gap-2 text-xl font-semibold leading-none">
+    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
       <div>{{ __(doctype) }}</div>
       <Badge
         v-if="data.isDirty"
diff --git a/frontend/src/components/Settings/SidebarLayoutBuilder.vue b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
new file mode 100644
index 00000000..796d3770
--- /dev/null
+++ b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <Draggable :list="sections" item-key="label" class="flex flex-col">
+      <template #item="{ element: section }">
+        <div class="border-b">
+          <div class="flex items-center justify-between p-2">
+            <div
+              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
+              @click="section.opened = !section.opened"
+            >
+              <FeatherIcon
+                name="chevron-right"
+                class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                :class="{ 'rotate-90': section.opened }"
+              />
+              <div v-if="!section.editingLabel">
+                {{ __(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.editingLabel ? 'check' : 'edit'"
+                variant="ghost"
+                @click="section.editingLabel = !section.editingLabel"
+              />
+              <Button
+                icon="x"
+                variant="ghost"
+                @click="sections.splice(sections.indexOf(section), 1)"
+              />
+            </div>
+          </div>
+          <div v-show="section.opened" class="p-4 pt-0 pb-2">
+            <Draggable
+              :list="section.fields"
+              item-key="label"
+              class="flex flex-col gap-1"
+              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>
+            <Button
+              class="w-full mt-2"
+              variant="outline"
+              :label="__('Add Field')"
+              @click="section.fields.push({ label: 'New Field' })"
+            />
+          </div>
+        </div>
+      </template>
+    </Draggable>
+    <div class="p-2">
+      <Button
+        class="w-full"
+        variant="outline"
+        :label="__('Add Section')"
+        @click="
+          sections.push({ label: 'New Section', opened: true, fields: [] })
+        "
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import Draggable from 'vuedraggable'
+import { Input } from 'frappe-ui'
+
+const props = defineProps({
+  sections: Object,
+})
+</script>

From dff9ca8c2db805a03af9e30959f6c346e725c2e7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 11:02:27 +0530
Subject: [PATCH 07/14] fix: save changes using layout builder

---
 crm/api/doc.py                                | 17 ++++
 .../src/components/Settings/FieldsLayout.vue  | 82 +++++++++++++------
 2 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index c1739280..91b72b52 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -194,6 +194,23 @@ def get_fields_layout(doctype: str, type: str):
 
 	return sections or []
 
+
+@frappe.whitelist()
+def save_fields_layout(doctype: str, type: str, layout: str):
+	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
+		doc = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
+	else:
+		doc = frappe.new_doc("CRM Fields Layout")
+
+	doc.update({
+		"dt": doctype,
+		"type": type,
+		"layout": layout,
+	})
+	doc.save(ignore_permissions=True)
+
+	return doc.layout
+
 def get_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields):
 	parent = "parent" if DocField._table_name == "tabDocField" else "dt"
 	return (
diff --git a/frontend/src/components/Settings/FieldsLayout.vue b/frontend/src/components/Settings/FieldsLayout.vue
index 256c026f..b53642c2 100644
--- a/frontend/src/components/Settings/FieldsLayout.vue
+++ b/frontend/src/components/Settings/FieldsLayout.vue
@@ -1,12 +1,32 @@
 <template>
   <div ref="parentRef" class="flex h-full">
-    <div class="flex-1 p-8">
-      <FormControl
-        type="select"
-        v-model="doctype"
-        :label="__('DocType')"
-        :options="['CRM Lead', 'CRM Deal']"
-      />
+    <div class="flex-1 flex flex-col justify-between gap-2 p-8">
+      <div class="flex flex-col gap-2">
+        <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+          <div>{{ __('Sidebar Fields Layout') }}</div>
+          <Badge
+            v-if="dirty"
+            :label="__('Not Saved')"
+            variant="subtle"
+            theme="orange"
+          />
+        </h2>
+        <FormControl
+          type="select"
+          v-model="doctype"
+          :label="__('DocType')"
+          :options="['CRM Lead', 'CRM Deal']"
+        />
+      </div>
+      <div class="flex flex-row-reverse gap-2">
+        <Button
+          :loading="loading"
+          :label="__('Save')"
+          variant="solid"
+          @click="saveChanges"
+        />
+        <Button :label="__('Reset')" @click="sections.reload" />
+      </div>
     </div>
     <Resizer
       class="flex flex-col justify-between border-l"
@@ -18,18 +38,7 @@
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <div class="flex flex-col overflow-y-auto">
-          <div
-            v-for="(section, i) in sections.data"
-            :key="section.label"
-            class="flex flex-col p-3"
-            :class="{ 'border-b': i !== sections.data - 1 }"
-          >
-            <Section :is-opened="section.opened" :label="section.label">
-              <div v-for="field in section.fields" class="p-3">
-                {{ field.label }}
-              </div>
-            </Section>
-          </div>
+          <SidebarLayoutBuilder :sections="sections.data" />
         </div>
       </div>
     </Resizer>
@@ -37,19 +46,46 @@
 </template>
 <script setup>
 import Resizer from '@/components/Resizer.vue'
-import Section from '@/components/Section.vue'
-import { createResource } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
+import { Badge, call, createResource } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
 
 const parentRef = ref(null)
 const doctype = ref('CRM Lead')
 
+const oldSections = ref([])
+
 const sections = createResource({
   url: 'crm.api.doc.get_fields_layout',
-  cache: ['sidebar-sections', doctype],
+  cache: ['sidebar-sections', doctype.value],
   params: { doctype: doctype.value, type: 'Side Panel' },
   auto: true,
+  onSuccess(data) {
+    oldSections.value = JSON.parse(JSON.stringify(data))
+  },
 })
+const loading = ref(false)
+
+const dirty = computed(() => {
+  if (!sections.data) return false
+  return JSON.stringify(sections.data) !== JSON.stringify(oldSections.value)
+})
+
+function saveChanges() {
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    section.fields = section.fields.map((field) => field.name)
+  })
+  loading.value = true
+  call('crm.api.doc.save_fields_layout', {
+    doctype: doctype.value,
+    type: 'Side Panel',
+    layout: JSON.stringify(_sections),
+  }).then(() => {
+    loading.value = false
+    sections.reload()
+  })
+}
 
 watch(doctype, (val) => sections.fetch({ doctype: val, type: 'Side Panel' }), {
   immediate: true,

From 7aacbb4c77333239ad69db007e6b8d875838f437 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 12:22:00 +0530
Subject: [PATCH 08/14] fix: api for getting fields layout and refactor old
 code

---
 crm/api/doc.py                    | 92 ++++++++++++++++---------------
 crm/fcrm/doctype/crm_deal/api.py  |  4 +-
 crm/fcrm/doctype/crm_lead/api.py  |  4 +-
 frontend/src/pages/Deal.vue       |  2 +-
 frontend/src/pages/Lead.vue       |  2 +-
 frontend/src/pages/MobileDeal.vue |  2 +-
 frontend/src/pages/MobileLead.vue |  2 +-
 7 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 91b72b52..6e7738c6 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -66,12 +66,12 @@ def get_filterable_fields(doctype: str):
 
 	# append DocFields
 	DocField = frappe.qb.DocType("DocField")
-	doc_fields = get_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields)
+	doc_fields = get_doctype_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields)
 	res.extend(doc_fields)
 
 	# append Custom Fields
 	CustomField = frappe.qb.DocType("Custom Field")
-	custom_fields = get_fields_meta(CustomField, doctype, allowed_fieldtypes, restricted_fields)
+	custom_fields = get_doctype_fields_meta(CustomField, doctype, allowed_fieldtypes, restricted_fields)
 	res.extend(custom_fields)
 
 	# append standard fields (getting error when using frappe.model.std_fields)
@@ -170,13 +170,15 @@ def get_fields_layout(doctype: str, type: str):
 
 	allowed_fields = []
 	for section in sections:
+		if not section.get("fields"):
+			continue
 		allowed_fields.extend(section.get("fields"))
 
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldname in allowed_fields]
 
 	for section in sections:
-		for field in section.get("fields"):
+		for field in section.get("fields") if section.get("fields") else []:
 			field = next((f for f in fields if f.fieldname == field), None)
 			if field:
 				if field.fieldtype == "Select":
@@ -211,7 +213,7 @@ def save_fields_layout(doctype: str, type: str, layout: str):
 
 	return doc.layout
 
-def get_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields):
+def get_doctype_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields):
 	parent = "parent" if DocField._table_name == "tabDocField" else "dt"
 	return (
 		frappe.qb.from_(DocField)
@@ -430,8 +432,9 @@ def get_list_data(
 	}
 
 
-def get_doctype_fields(doctype, name):
+def get_fields_meta(doctype):
 	not_allowed_fieldtypes = [
+		"Tab Break",
 		"Section Break",
 		"Column Break",
 	]
@@ -439,56 +442,57 @@ def get_doctype_fields(doctype, name):
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
 
-	sections = {}
-	section_fields = []
-	last_section = None
-	doc = frappe.get_cached_doc(doctype, name)
+	fields_meta = {}
+	for field in fields:
+		fields_meta[field.fieldname] = field
 
+	return fields_meta
+
+@frappe.whitelist()
+def get_sidebar_fields(doctype, name):
+	if not frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": "Side Panel"}):
+		return []
+	layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": "Side Panel"}).layout
+
+	if not layout:
+		return []
+	
+	layout = json.loads(layout)
+
+	not_allowed_fieldtypes = [
+		"Tab Break",
+		"Section Break",
+		"Column Break",
+	]
+
+	fields = frappe.get_meta(doctype).fields
+	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
+
+	doc = frappe.get_cached_doc(doctype, name)
 	has_high_permlevel_fields = any(df.permlevel > 0 for df in fields)
 	if has_high_permlevel_fields:
 		has_read_access_to_permlevels = doc.get_permlevel_access("read")
 		has_write_access_to_permlevels = doc.get_permlevel_access("write")
 
-	for field in fields:
-		if field.fieldtype == "Tab Break" and last_section:
-			sections[last_section]["fields"] = section_fields
-			last_section = None
-			if field.read_only:
-				section_fields = []
-				continue
-		if field.fieldtype == "Tab Break":
-			if field.read_only:
-				section_fields = []
-				continue
-			section_fields = []
-			last_section = field.fieldname
-			sections[field.fieldname] = {
-				"label": field.label,
-				"name": field.fieldname,
-				"opened": True,
-				"fields": [],
-			}
-		else:
-			if field.permlevel > 0:
-				field_has_write_access = field.permlevel in has_write_access_to_permlevels
-				field_has_read_access = field.permlevel in has_read_access_to_permlevels
-				if not field_has_write_access and field_has_read_access:
-					field.read_only = 1
-				if not field_has_read_access and not field_has_write_access:
-					field.hidden = 1
-			section_fields.append(get_field_obj(field))
+	for section in layout:
+		section["name"] = section.get("name") or section.get("label")
+		for field in section.get("fields") if section.get("fields") else []:
+			field_obj = next((f for f in fields if f.fieldname == field), None)
+			if field_obj:
+				if field_obj.permlevel > 0:
+					field_has_write_access = field_obj.permlevel in has_write_access_to_permlevels
+					field_has_read_access = field_obj.permlevel in has_read_access_to_permlevels
+					if not field_has_write_access and field_has_read_access:
+						field_obj.read_only = 1
+					if not field_has_read_access and not field_has_write_access:
+						field_obj.hidden = 1
+				section["fields"][section.get("fields").index(field)] = get_field_obj(field_obj)
 
-	section_fields = []
-	for section in sections:
-		section_fields.append(sections[section])
-
-	fields = [field for field in fields if field.fieldtype not in "Tab Break"]
 	fields_meta = {}
 	for field in fields:
 		fields_meta[field.fieldname] = field
 
-	return section_fields, fields_meta
-
+	return layout
 
 def get_field_obj(field):
 	obj = {
diff --git a/crm/fcrm/doctype/crm_deal/api.py b/crm/fcrm/doctype/crm_deal/api.py
index cb757b59..76a764ae 100644
--- a/crm/fcrm/doctype/crm_deal/api.py
+++ b/crm/fcrm/doctype/crm_deal/api.py
@@ -1,7 +1,7 @@
 import frappe
 from frappe import _
 
-from crm.api.doc import get_doctype_fields, get_assigned_users
+from crm.api.doc import get_fields_meta, get_assigned_users
 from crm.fcrm.doctype.crm_form_script.crm_form_script import get_form_script
 
 @frappe.whitelist()
@@ -27,8 +27,8 @@ def get_deal(name):
 		fields=["contact", "is_primary"],
 	)
 
-	deal["doctype_fields"], deal["all_fields"] = get_doctype_fields("CRM Deal", name) 
 	deal["doctype"] = "CRM Deal"
+	deal["fields_meta"] = get_fields_meta("CRM Deal") 
 	deal["_form_script"] = get_form_script('CRM Deal')
 	deal["_assign"] = get_assigned_users("CRM Deal", deal.name, deal.owner)
 	return deal
diff --git a/crm/fcrm/doctype/crm_lead/api.py b/crm/fcrm/doctype/crm_lead/api.py
index b4dca9f7..e1bb4a4f 100644
--- a/crm/fcrm/doctype/crm_lead/api.py
+++ b/crm/fcrm/doctype/crm_lead/api.py
@@ -1,7 +1,7 @@
 import frappe
 from frappe import _
 
-from crm.api.doc import get_doctype_fields, get_assigned_users
+from crm.api.doc import get_fields_meta, get_assigned_users
 from crm.fcrm.doctype.crm_form_script.crm_form_script import get_form_script
 
 @frappe.whitelist()
@@ -15,8 +15,8 @@ def get_lead(name):
 		frappe.throw(_("Lead not found"), frappe.DoesNotExistError)
 	lead = lead.pop()
 
-	lead["doctype_fields"], lead["all_fields"] = get_doctype_fields("CRM Lead", name)
 	lead["doctype"] = "CRM Lead"
+	lead["fields_meta"] = get_fields_meta("CRM Lead")
 	lead["_form_script"] = get_form_script('CRM Lead')
 	lead["_assign"] = get_assigned_users("CRM Lead", lead.name, lead.owner)
 	return lead
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 22534012..937ba891 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -414,7 +414,7 @@ function updateDeal(fieldname, value, callback) {
 }
 
 function validateRequired(fieldname, value) {
-  let meta = deal.data.all_fields || {}
+  let meta = deal.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
     createToast({
       title: __('Error Updating Deal'),
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index be203374..a329d529 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -384,7 +384,7 @@ function updateLead(fieldname, value, callback) {
 }
 
 function validateRequired(fieldname, value) {
-  let meta = lead.data.all_fields || {}
+  let meta = lead.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
     createToast({
       title: __('Error Updating Lead'),
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 255ec2cd..c0cd8976 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -369,7 +369,7 @@ function updateDeal(fieldname, value, callback) {
 }
 
 function validateRequired(fieldname, value) {
-  let meta = deal.data.all_fields || {}
+  let meta = deal.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
     createToast({
       title: __('Error Updating Deal'),
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 8a8b7b99..ec8ff88a 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -283,7 +283,7 @@ function updateLead(fieldname, value, callback) {
 }
 
 function validateRequired(fieldname, value) {
-  let meta = lead.data.all_fields || {}
+  let meta = lead.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
     createToast({
       title: __('Error Updating Lead'),

From afeac24b36fe61894d08bbf144e7a5e00ff85163 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 12:26:01 +0530
Subject: [PATCH 09/14] fix: get sidebar field for lead/deal using api

---
 frontend/src/pages/Deal.vue | 16 +++++++++-------
 frontend/src/pages/Lead.vue | 15 ++++++++-------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 937ba891..0acf08d2 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -108,15 +108,15 @@
         @updateField="updateField"
       />
       <div
-        v-if="detailSections.length"
+        v-if="fieldsLayout.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <div class="flex flex-col overflow-y-auto">
           <div
-            v-for="(section, i) in detailSections"
+            v-for="(section, i) in fieldsLayout.data"
             :key="section.label"
             class="flex flex-col p-3"
-            :class="{ 'border-b': i !== detailSections.length - 1 }"
+            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section :is-opened="section.opened" :label="section.label">
               <template #actions>
@@ -480,10 +480,12 @@ const tabs = computed(() => {
   return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
 })
 
-const detailSections = computed(() => {
-  let data = deal.data
-  if (!data) return []
-  return getParsedFields(data.doctype_fields, deal_contacts.data)
+const fieldsLayout = createResource({
+  url: 'crm.api.doc.get_sidebar_fields',
+  cache: ['fieldsLayout', props.dealId],
+  params: { doctype: 'CRM Deal', name: props.dealId },
+  auto: true,
+  transform: (data) => getParsedFields(data, deal_contacts.data),
 })
 
 function getParsedFields(sections, contacts) {
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index a329d529..cddfdab9 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -162,15 +162,15 @@
         @updateField="updateField"
       />
       <div
-        v-if="detailSections.length"
+        v-if="fieldsLayout.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <div class="flex flex-col overflow-y-auto">
           <div
-            v-for="(section, i) in detailSections"
+            v-for="(section, i) in fieldsLayout.data"
             :key="section.label"
             class="flex flex-col p-3"
-            :class="{ 'border-b': i !== detailSections.length - 1 }"
+            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section :is-opened="section.opened" :label="section.label">
               <SectionFields
@@ -469,10 +469,11 @@ function validateFile(file) {
   }
 }
 
-const detailSections = computed(() => {
-  let data = lead.data
-  if (!data) return []
-  return data.doctype_fields
+const fieldsLayout = createResource({
+  url: 'crm.api.doc.get_sidebar_fields',
+  cache: ['fieldsLayout', props.leadId],
+  params: { doctype: 'CRM Lead', name: props.leadId },
+  auto: true,
 })
 
 function updateField(name, value, callback) {

From c430abc33ac1f5379c0fd5aa00e952410a2fafaf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 12:27:00 +0530
Subject: [PATCH 10/14] fix: handle rendering of contacts section

---
 .../src/components/Settings/FieldsLayout.vue  |  1 +
 frontend/src/pages/Deal.vue                   | 60 +++++++++----------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/Settings/FieldsLayout.vue b/frontend/src/components/Settings/FieldsLayout.vue
index b53642c2..d43fbc93 100644
--- a/frontend/src/components/Settings/FieldsLayout.vue
+++ b/frontend/src/components/Settings/FieldsLayout.vue
@@ -74,6 +74,7 @@ const dirty = computed(() => {
 function saveChanges() {
   let _sections = JSON.parse(JSON.stringify(sections.data))
   _sections.forEach((section) => {
+    if (!section.fields) return
     section.fields = section.fields.map((field) => field.name)
   })
   loading.value = true
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 0acf08d2..adbf0c6e 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -485,41 +485,26 @@ const fieldsLayout = createResource({
   cache: ['fieldsLayout', props.dealId],
   params: { doctype: 'CRM Deal', name: props.dealId },
   auto: true,
-  transform: (data) => getParsedFields(data, deal_contacts.data),
+  transform: (data) => getParsedFields(data),
 })
 
 function getParsedFields(sections, contacts) {
   sections.forEach((section) => {
-    if (section.name == 'contacts_tab') {
-      delete section.fields
-      section.contacts =
-        contacts?.map((contact) => {
-          return {
-            name: contact.name,
-            full_name: contact.full_name,
-            email: contact.email,
-            mobile_no: contact.mobile_no,
-            image: contact.image,
-            is_primary: contact.is_primary,
-            opened: false,
-          }
-        }) || []
-    } else {
-      section.fields.forEach((field) => {
-        if (field.name == 'organization') {
-          field.create = (value, close) => {
-            _organization.value.organization_name = value
-            showOrganizationModal.value = true
-            close()
-          }
-          field.link = (org) =>
-            router.push({
-              name: 'Organization',
-              params: { organizationId: org },
-            })
+    if (section.name == 'contacts_section') return
+    section.fields.forEach((field) => {
+      if (field.name == 'organization') {
+        field.create = (value, close) => {
+          _organization.value.organization_name = value
+          showOrganizationModal.value = true
+          close()
         }
-      })
-    }
+        field.link = (org) =>
+          router.push({
+            name: 'Organization',
+            params: { organizationId: org },
+          })
+      }
+    })
   })
   return sections
 }
@@ -597,6 +582,21 @@ const deal_contacts = createResource({
   params: { name: props.dealId },
   cache: ['deal_contacts', props.dealId],
   auto: true,
+  onSuccess: (data) => {
+    fieldsLayout.data.find(
+      (section) => section.name == 'contacts_section',
+    ).contacts = data.map((contact) => {
+      return {
+        name: contact.name,
+        full_name: contact.full_name,
+        email: contact.email,
+        mobile_no: contact.mobile_no,
+        image: contact.image,
+        is_primary: contact.is_primary,
+        opened: false,
+      }
+    })
+  },
 })
 
 function triggerCall() {

From 2f4acd7b1373dd278b86d579f5de4e71c2c31ebf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 12:27:44 +0530
Subject: [PATCH 11/14] fix: empty state for non editable section and remove x
 button

---
 .../src/components/Settings/SidebarLayoutBuilder.vue   | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/Settings/SidebarLayoutBuilder.vue b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
index 796d3770..1c9fca02 100644
--- a/frontend/src/components/Settings/SidebarLayoutBuilder.vue
+++ b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
@@ -32,6 +32,7 @@
                 @click="section.editingLabel = !section.editingLabel"
               />
               <Button
+                v-if="section.editable !== false"
                 icon="x"
                 variant="ghost"
                 @click="sections.splice(sections.indexOf(section), 1)"
@@ -66,11 +67,20 @@
               </template>
             </Draggable>
             <Button
+              v-if="section.editable !== false"
               class="w-full mt-2"
               variant="outline"
               :label="__('Add Field')"
               @click="section.fields.push({ label: 'New Field' })"
             />
+            <div
+              v-else
+              class="flex justify-center items-center border rounded border-dashed p-3"
+            >
+              <div class="text-sm text-gray-500">
+                {{ __('This section is not editable') }}
+              </div>
+            </div>
           </div>
         </div>
       </template>

From a1eb3a6dd473ff41b4f8927e29eadbb4d4bda0c0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 13:35:33 +0530
Subject: [PATCH 12/14] fix: implemented add fields using autocomplete

---
 crm/api/doc.py                                | 11 ++-
 .../src/components/Settings/FieldsLayout.vue  |  4 +-
 .../Settings/SidebarLayoutBuilder.vue         | 74 +++++++++++++++++--
 3 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 6e7738c6..6f337426 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -431,17 +431,24 @@ def get_list_data(
 		"list_script": get_form_script(doctype, "List"),
 	}
 
-
-def get_fields_meta(doctype):
+@frappe.whitelist()
+def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False):
 	not_allowed_fieldtypes = [
 		"Tab Break",
 		"Section Break",
 		"Column Break",
 	]
 
+	if restricted_fieldtypes:
+		restricted_fieldtypes = frappe.parse_json(restricted_fieldtypes)
+		not_allowed_fieldtypes += restricted_fieldtypes
+
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
 
+	if as_array:
+		return fields
+
 	fields_meta = {}
 	for field in fields:
 		fields_meta[field.fieldname] = field
diff --git a/frontend/src/components/Settings/FieldsLayout.vue b/frontend/src/components/Settings/FieldsLayout.vue
index d43fbc93..66014571 100644
--- a/frontend/src/components/Settings/FieldsLayout.vue
+++ b/frontend/src/components/Settings/FieldsLayout.vue
@@ -38,7 +38,7 @@
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <div class="flex flex-col overflow-y-auto">
-          <SidebarLayoutBuilder :sections="sections.data" />
+          <SidebarLayoutBuilder :sections="sections.data" :doctype="doctype" />
         </div>
       </div>
     </Resizer>
@@ -75,7 +75,7 @@ function saveChanges() {
   let _sections = JSON.parse(JSON.stringify(sections.data))
   _sections.forEach((section) => {
     if (!section.fields) return
-    section.fields = section.fields.map((field) => field.name)
+    section.fields = section.fields.map((field) => field.fieldname || field.name)
   })
   loading.value = true
   call('crm.api.doc.save_fields_layout', {
diff --git a/frontend/src/components/Settings/SidebarLayoutBuilder.vue b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
index 1c9fca02..643bea61 100644
--- a/frontend/src/components/Settings/SidebarLayoutBuilder.vue
+++ b/frontend/src/components/Settings/SidebarLayoutBuilder.vue
@@ -66,13 +66,33 @@
                 </div>
               </template>
             </Draggable>
-            <Button
-              v-if="section.editable !== false"
-              class="w-full mt-2"
-              variant="outline"
-              :label="__('Add Field')"
-              @click="section.fields.push({ label: 'New Field' })"
-            />
+            <Autocomplete
+              v-if="fields.data && section.editable !== false"
+              value=""
+              :options="fields.data"
+              @change="(e) => addField(section, e)"
+            >
+              <template #target="{ togglePopover }">
+                <Button
+                  class="w-full mt-2"
+                  variant="outline"
+                  @click="togglePopover()"
+                  :label="__('Add Field')"
+                >
+                  <template #prefix>
+                    <FeatherIcon name="plus" class="h-4" />
+                  </template>
+                </Button>
+              </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
               v-else
               class="flex justify-center items-center border rounded border-dashed p-3"
@@ -98,11 +118,49 @@
   </div>
 </template>
 <script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
 import Draggable from 'vuedraggable'
-import { Input } from 'frappe-ui'
+import { Input, 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 bbe5fa22498b4af1cd721d956ea5090d39b97b1a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 17:52:53 +0530
Subject: [PATCH 13/14] patch: added patch to create default sidebar fields
 layout from customize form

---
 crm/patches.txt                               |  3 +-
 .../create_default_sidebar_fields_layout.py   | 63 +++++++++++++++++++
 frontend/src/pages/Deal.vue                   |  6 +-
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 crm/patches/v1_0/create_default_sidebar_fields_layout.py

diff --git a/crm/patches.txt b/crm/patches.txt
index c0204ec5..32c4485a 100644
--- a/crm/patches.txt
+++ b/crm/patches.txt
@@ -6,4 +6,5 @@ crm.patches.v1_0.move_crm_note_data_to_fcrm_note
 [post_model_sync]
 # 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
\ No newline at end of file
+crm.patches.v1_0.create_default_fields_layout
+crm.patches.v1_0.create_default_sidebar_fields_layout
\ No newline at end of file
diff --git a/crm/patches/v1_0/create_default_sidebar_fields_layout.py b/crm/patches/v1_0/create_default_sidebar_fields_layout.py
new file mode 100644
index 00000000..04b65fee
--- /dev/null
+++ b/crm/patches/v1_0/create_default_sidebar_fields_layout.py
@@ -0,0 +1,63 @@
+import json
+import frappe
+
+def execute():
+	if not frappe.db.exists("CRM Fields Layout", {"dt": "CRM Lead", "type": "Side Panel"}):
+		create_doctype_fields_layout("CRM Lead")
+
+	if not frappe.db.exists("CRM Fields Layout", {"dt": "CRM Deal", "type": "Side Panel"}):
+		create_doctype_fields_layout("CRM Deal")
+
+def create_doctype_fields_layout(doctype):
+	not_allowed_fieldtypes = [
+		"Section Break",
+		"Column Break",
+	]
+
+	fields = frappe.get_meta(doctype).fields
+	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
+
+	sections = {}
+	section_fields = []
+	last_section = None
+
+	for field in fields:
+		if field.fieldtype == "Tab Break" and last_section:
+			sections[last_section]["fields"] = section_fields
+			last_section = None
+			if field.read_only:
+				section_fields = []
+				continue
+		if field.fieldtype == "Tab Break":
+			if field.read_only:
+				section_fields = []
+				continue
+			section_fields = []
+			last_section = field.fieldname
+			sections[field.fieldname] = {
+				"label": field.label,
+				"name": field.fieldname,
+				"opened": True,
+				"fields": [],
+			}
+			if field.fieldname == "contacts_tab":
+				sections[field.fieldname]["editable"] = False
+				sections[field.fieldname]["contacts"] = []
+		else:
+			section_fields.append(field.fieldname)
+
+	section_fields = []
+	for section in sections:
+		if section == "contacts_tab":
+			sections[section]["name"] = "contacts_section"
+			sections[section].pop("fields", None)
+		section_fields.append(sections[section])
+
+	frappe.get_doc({
+		"doctype": "CRM Fields Layout",
+		"dt": doctype,
+		"type": "Side Panel",
+		"layout": json.dumps(section_fields),
+	}).insert(ignore_permissions=True)
+
+	return section_fields
\ No newline at end of file
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index adbf0c6e..fd8fbb85 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -583,9 +583,11 @@ const deal_contacts = createResource({
   cache: ['deal_contacts', props.dealId],
   auto: true,
   onSuccess: (data) => {
-    fieldsLayout.data.find(
+    let contactSection = fieldsLayout.data.find(
       (section) => section.name == 'contacts_section',
-    ).contacts = data.map((contact) => {
+    )
+    if (!contactSection) return
+    contactSection.contacts = data.map((contact) => {
       return {
         name: contact.name,
         full_name: contact.full_name,

From 6dbe3d2d53bd393503cd5072b80ef51be3e6043c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 15 Jun 2024 18:09:38 +0530
Subject: [PATCH 14/14] chore: moved fields layout related code to
 crm_fields_layout.py

---
 crm/api/doc.py                                | 56 -----------------
 .../crm_fields_layout/crm_fields_layout.py    | 60 ++++++++++++++++++-
 .../src/components/Modals/ContactModal.vue    |  2 +-
 frontend/src/components/Modals/DealModal.vue  |  2 +-
 frontend/src/components/Modals/LeadModal.vue  |  2 +-
 .../components/Modals/OrganizationModal.vue   |  2 +-
 .../src/components/Settings/FieldsLayout.vue  |  4 +-
 7 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 6f337426..0159c663 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -157,62 +157,6 @@ def get_group_by_fields(doctype: str):
 	return fields
 
 
-@frappe.whitelist()
-def get_fields_layout(doctype: str, type: str):
-	sections = []
-	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
-		layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
-	else:
-		return []
-
-	if layout.layout:
-		sections = json.loads(layout.layout)
-
-	allowed_fields = []
-	for section in sections:
-		if not section.get("fields"):
-			continue
-		allowed_fields.extend(section.get("fields"))
-
-	fields = frappe.get_meta(doctype).fields
-	fields = [field for field in fields if field.fieldname in allowed_fields]
-
-	for section in sections:
-		for field in section.get("fields") if section.get("fields") else []:
-			field = next((f for f in fields if f.fieldname == field), None)
-			if field:
-				if field.fieldtype == "Select":
-					field.options = field.options.split("\n")
-					field.options = [{"label": _(option), "value": option} for option in field.options]
-					field.options.insert(0, {"label": "", "value": ""})
-				field = {
-					"label": _(field.label),
-					"name": field.fieldname,
-					"type": field.fieldtype,
-					"options": field.options,
-					"mandatory": field.reqd,
-				}
-				section["fields"][section.get("fields").index(field["name"])] = field
-
-	return sections or []
-
-
-@frappe.whitelist()
-def save_fields_layout(doctype: str, type: str, layout: str):
-	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
-		doc = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
-	else:
-		doc = frappe.new_doc("CRM Fields Layout")
-
-	doc.update({
-		"dt": doctype,
-		"type": type,
-		"layout": layout,
-	})
-	doc.save(ignore_permissions=True)
-
-	return doc.layout
-
 def get_doctype_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields):
 	parent = "parent" if DocField._table_name == "tabDocField" else "dt"
 	return (
diff --git a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
index 36d8bb72..3129c478 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
@@ -1,9 +1,67 @@
 # Copyright (c) 2024, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
 
-# import frappe
+import json
+import frappe
+from frappe import _
 from frappe.model.document import Document
 
 
 class CRMFieldsLayout(Document):
 	pass
+
+@frappe.whitelist()
+def get_fields_layout(doctype: str, type: str):
+	sections = []
+	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
+		layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
+	else:
+		return []
+
+	if layout.layout:
+		sections = json.loads(layout.layout)
+
+	allowed_fields = []
+	for section in sections:
+		if not section.get("fields"):
+			continue
+		allowed_fields.extend(section.get("fields"))
+
+	fields = frappe.get_meta(doctype).fields
+	fields = [field for field in fields if field.fieldname in allowed_fields]
+
+	for section in sections:
+		for field in section.get("fields") if section.get("fields") else []:
+			field = next((f for f in fields if f.fieldname == field), None)
+			if field:
+				if field.fieldtype == "Select":
+					field.options = field.options.split("\n")
+					field.options = [{"label": _(option), "value": option} for option in field.options]
+					field.options.insert(0, {"label": "", "value": ""})
+				field = {
+					"label": _(field.label),
+					"name": field.fieldname,
+					"type": field.fieldtype,
+					"options": field.options,
+					"mandatory": field.reqd,
+				}
+				section["fields"][section.get("fields").index(field["name"])] = field
+
+	return sections or []
+
+
+@frappe.whitelist()
+def save_fields_layout(doctype: str, type: str, layout: str):
+	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
+		doc = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
+	else:
+		doc = frappe.new_doc("CRM Fields Layout")
+
+	doc.update({
+		"dt": doctype,
+		"type": type,
+		"layout": layout,
+	})
+	doc.save(ignore_permissions=True)
+
+	return doc.layout
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 4e23756f..c8e855ca 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -235,7 +235,7 @@ const detailFields = computed(() => {
 })
 
 const sections = createResource({
-  url: 'crm.api.doc.get_fields_layout',
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'Contact'],
   params: { doctype: 'Contact', type: 'Quick Entry'},
   auto: true,
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index be2f7a72..08260ef0 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -77,7 +77,7 @@ const chooseExistingContact = ref(false)
 const chooseExistingOrganization = ref(false)
 
 const sections = createResource({
-  url: 'crm.api.doc.get_fields_layout',
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Deal'],
   params: { doctype: 'CRM Deal', type: 'Quick Entry'},
   auto: true,
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index a8245ffc..d288196d 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -40,7 +40,7 @@ const error = ref(null)
 const isLeadCreating = ref(false)
 
 const sections = createResource({
-  url: 'crm.api.doc.get_fields_layout',
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Lead'],
   params: { doctype: 'CRM Lead', type: 'Quick Entry' },
   auto: true,
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index d04205dc..a051166c 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -225,7 +225,7 @@ const fields = computed(() => {
 })
 
 const sections = createResource({
-  url: 'crm.api.doc.get_fields_layout',
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Organization'],
   params: { doctype: 'CRM Organization', type: 'Quick Entry'},
   auto: true,
diff --git a/frontend/src/components/Settings/FieldsLayout.vue b/frontend/src/components/Settings/FieldsLayout.vue
index 66014571..9f6879c7 100644
--- a/frontend/src/components/Settings/FieldsLayout.vue
+++ b/frontend/src/components/Settings/FieldsLayout.vue
@@ -56,7 +56,7 @@ const doctype = ref('CRM Lead')
 const oldSections = ref([])
 
 const sections = createResource({
-  url: 'crm.api.doc.get_fields_layout',
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['sidebar-sections', doctype.value],
   params: { doctype: doctype.value, type: 'Side Panel' },
   auto: true,
@@ -78,7 +78,7 @@ function saveChanges() {
     section.fields = section.fields.map((field) => field.fieldname || field.name)
   })
   loading.value = true
-  call('crm.api.doc.save_fields_layout', {
+  call('crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout', {
     doctype: doctype.value,
     type: 'Side Panel',
     layout: JSON.stringify(_sections),