Merge pull request #242 from frappe/develop

chore: Merge develop to main

frontend/src/components/Modals/ContactModal.vue

@@ -10,10 +10,10 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="detailMode"
+              v-if="isManager() || detailMode"
               variant="ghost"
               class="w-7"
-              @click="detailMode = false"
+              @click="detailMode ? (detailMode = false) : openQuickEntryModal()"
             >
               <EditIcon class="h-4 w-4" />
             </Button>
@@ -91,8 +91,9 @@ import AddressIcon from '@/components/Icons/AddressIcon.vue'
 import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Dropdown from '@/components/frappe-ui/Dropdown.vue'
+import { usersStore } from '@/stores/users'
 import { call, createResource } from 'frappe-ui'
-import { ref, nextTick, watch, computed, h } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 import { createToast } from '@/utils'
 import { useRouter } from 'vue-router'
 
@@ -111,6 +112,8 @@ const props = defineProps({
   },
 })
 
+const { isManager } = usersStore()
+
 const router = useRouter()
 const show = defineModel()
 
@@ -237,7 +240,7 @@ const detailFields = computed(() => {
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'Contact'],
-  params: { doctype: 'Contact', type: 'Quick Entry'},
+  params: { doctype: 'Contact', type: 'Quick Entry' },
   auto: true,
 })
 
@@ -273,7 +276,7 @@ const filteredSections = computed(() => {
               onDelete: async (option, isNew) => {
                 props.contact.data.email_ids =
                   props.contact.data.email_ids.filter(
-                    (email) => email.name !== option.name
+                    (email) => email.name !== option.name,
                   )
                 !isNew && (await deleteOption('Contact Email', option.name))
                 if (_contact.value.email_id === option.value) {
@@ -281,7 +284,7 @@ const filteredSections = computed(() => {
                     _contact.value.email_id = ''
                   } else {
                     _contact.value.email_id = props.contact.data.email_ids.find(
-                      (email) => email.is_primary
+                      (email) => email.is_primary,
                     )?.email_id
                   }
                 }
@@ -296,7 +299,10 @@ const filteredSections = computed(() => {
             isNew: true,
           })
         }
-      } else if (field.name == 'mobile_no' || field.name == 'actual_mobile_no') {
+      } else if (
+        field.name == 'mobile_no' ||
+        field.name == 'actual_mobile_no'
+      ) {
         field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
         field.name = 'actual_mobile_no'
         field.options =
@@ -323,7 +329,7 @@ const filteredSections = computed(() => {
               onDelete: async (option, isNew) => {
                 props.contact.data.phone_nos =
                   props.contact.data.phone_nos.filter(
-                    (phone) => phone.name !== option.name
+                    (phone) => phone.name !== option.name,
                   )
                 !isNew && (await deleteOption('Contact Phone', option.name))
                 if (_contact.value.actual_mobile_no === option.value) {
@@ -332,7 +338,7 @@ const filteredSections = computed(() => {
                   } else {
                     _contact.value.actual_mobile_no =
                       props.contact.data.phone_nos.find(
-                        (phone) => phone.is_primary_mobile_no
+                        (phone) => phone.is_primary_mobile_no,
                       )?.phone
                   }
                 }
@@ -432,8 +438,17 @@ watch(
         editMode.value = true
       }
     })
-  }
+  },
 )
+
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
 </script>
 
 <style scoped>

frontend/src/components/Modals/DealModal.vue

@@ -1,56 +1,75 @@
 <template>
-  <Dialog
+  <Dialog v-model="show" :options="{ size: '3xl' }">
-    v-model="show"
+    <template #body>
-    :options="{
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
-      size: '3xl',
+        <div class="mb-5 flex items-center justify-between">
-      title: __('Create Deal'),
+          <div>
-    }"
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-  >
+              {{ __('Create Deal') }}
-    <template #body-content>
+            </h3>
-      <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
+          </div>
-        <div class="flex items-center gap-3 text-sm text-gray-600">
+          <div class="flex items-center gap-1">
-          <div>{{ __('Choose Existing Organization') }}</div>
+            <Button
-          <Switch v-model="chooseExistingOrganization" />
+              v-if="isManager()"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
         </div>
-        <div class="flex items-center gap-3 text-sm text-gray-600">
+        <div>
-          <div>{{ __('Choose Existing Contact') }}</div>
+          <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
-          <Switch v-model="chooseExistingContact" />
+            <div class="flex items-center gap-3 text-sm text-gray-600">
+              <div>{{ __('Choose Existing Organization') }}</div>
+              <Switch v-model="chooseExistingOrganization" />
+            </div>
+            <div class="flex items-center gap-3 text-sm text-gray-600">
+              <div>{{ __('Choose Existing Contact') }}</div>
+              <Switch v-model="chooseExistingContact" />
+            </div>
+          </div>
+          <Fields
+            v-if="filteredSections"
+            class="border-t pt-4"
+            :sections="filteredSections"
+            :data="deal"
+          />
+          <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
       </div>
-      <Fields
+      <div class="px-4 pb-7 pt-4 sm:px-6">
-        v-if="filteredSections"
+        <div class="flex flex-row-reverse gap-2">
-        class="border-t pt-4"
+          <Button
-        :sections="filteredSections"
+            variant="solid"
-        :data="deal"
+            :label="__('Create')"
-      />
+            :loading="isDealCreating"
-      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+            @click="createDeal"
-    </template>
+          />
-    <template #actions>
+        </div>
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          variant="solid"
-          :label="__('Create')"
-          :loading="isDealCreating"
-          @click="createDeal"
-        />
       </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Fields from '@/components/Fields.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { Switch, createResource } from 'frappe-ui'
-import { computed, ref, reactive, onMounted } from 'vue'
+import { computed, ref, reactive, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
   defaults: Object,
 })
 
-const { getUser } = usersStore()
+const { getUser, isManager } = usersStore()
 const { getDealStatus, statusOptions } = statusesStore()
 
 const show = defineModel()
@@ -83,7 +102,7 @@ const chooseExistingOrganization = ref(false)
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Deal'],
-  params: { doctype: 'CRM Deal', type: 'Quick Entry'},
+  params: { doctype: 'CRM Deal', type: 'Quick Entry' },
   auto: true,
   transform: (data) => {
     return data.forEach((section) => {
@@ -108,21 +127,21 @@ const filteredSections = computed(() => {
 
   if (chooseExistingOrganization.value) {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Select Organization')
+      allSections.find((s) => s.label === 'Select Organization'),
     )
   } else {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Organization Details')
+      allSections.find((s) => s.label === 'Organization Details'),
     )
   }
 
   if (chooseExistingContact.value) {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Select Contact')
+      allSections.find((s) => s.label === 'Select Contact'),
     )
   } else {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Contact Details')
+      allSections.find((s) => s.label === 'Contact Details'),
     )
   }
 
@@ -197,6 +216,15 @@ function createDeal() {
   })
 }
 
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+
 onMounted(() => {
   Object.assign(deal, props.defaults)
   if (!deal.deal_owner) {

frontend/src/components/Modals/LeadModal.vue

@@ -1,41 +1,60 @@
 <template>
-  <Dialog
+  <Dialog v-model="show" :options="{ size: '3xl' }">
-    v-model="show"
+    <template #body>
-    :options="{
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
-      size: '3xl',
+        <div class="mb-5 flex items-center justify-between">
-      title: __('Create Lead'),
+          <div>
-    }"
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-  >
+              {{ __('Create Lead') }}
-    <template #body-content>
+            </h3>
-      <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
+          </div>
-      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+          <div class="flex items-center gap-1">
-    </template>
+            <Button
-    <template #actions>
+              v-if="isManager()"
-      <div class="flex flex-row-reverse gap-2">
+              variant="ghost"
-        <Button
+              class="w-7"
-          variant="solid"
+              @click="openQuickEntryModal"
-          :label="__('Create')"
+            >
-          :loading="isLeadCreating"
+              <EditIcon class="h-4 w-4" />
-          @click="createNewLead"
+            </Button>
-        />
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div>
+          <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
+          <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+        </div>
+      </div>
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="flex flex-row-reverse gap-2">
+          <Button
+            variant="solid"
+            :label="__('Create')"
+            :loading="isLeadCreating"
+            @click="createNewLead"
+          />
+        </div>
       </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Fields from '@/components/Fields.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { createResource } from 'frappe-ui'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
   defaults: Object,
 })
 
-const { getUser } = usersStore()
+const { getUser, isManager } = usersStore()
 const { getLeadStatus, statusOptions } = statusesStore()
 
 const show = defineModel()
@@ -149,6 +168,15 @@ function createNewLead() {
   })
 }
 
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+
 onMounted(() => {
   Object.assign(lead, props.defaults)
   if (!lead.lead_owner) {

frontend/src/components/Modals/OrganizationModal.vue

@@ -10,10 +10,10 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="detailMode"
+              v-if="isManager() || detailMode"
               variant="ghost"
               class="w-7"
-              @click="detailMode = false"
+              @click="detailMode ? (detailMode = false) : openQuickEntryModal()"
             >
               <EditIcon class="h-4 w-4" />
             </Button>
@@ -65,6 +65,7 @@ import MoneyIcon from '@/components/Icons/MoneyIcon.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import TerritoryIcon from '@/components/Icons/TerritoryIcon.vue'
+import { usersStore } from '@/stores/users'
 import { formatNumberIntoCurrency } from '@/utils'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
 import { ref, nextTick, watch, computed, h } from 'vue'
@@ -81,6 +82,8 @@ const props = defineProps({
   },
 })
 
+const { isManager } = usersStore()
+
 const router = useRouter()
 const show = defineModel()
 const organization = defineModel('organization')
@@ -253,4 +256,13 @@ watch(
     })
   },
 )
+
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
 </script>

frontend/src/components/Settings/QuickEntryLayout.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="flex flex-col overflow-hidden">
-    <div class="flex flex-col gap-2 p-8 pb-5">
-      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
-        <div>{{ __('Quick Entry Layout') }}</div>
-        <Badge
-          v-if="dirty"
-          :label="__('Not Saved')"
-          variant="subtle"
-          theme="orange"
-        />
-      </h2>
-      <div class="flex gap-6 items-end">
-        <FormControl
-          class="flex-1"
-          type="select"
-          v-model="doctype"
-          :label="__('DocType')"
-          :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
-          @change="reload"
-        />
-        <div class="flex flex-row-reverse gap-2">
-          <Button
-            :loading="loading"
-            :label="__('Save')"
-            variant="solid"
-            @click="saveChanges"
-          />
-          <Button :label="__('Reset')" @click="reload" />
-          <Button
-            :label="preview ? __('Hide Preview') : __('Show Preview')"
-            @click="preview = !preview"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
-      <div
-        class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
-      >
-        <QuickEntryLayoutBuilder
-          v-if="!preview"
-          :sections="sections.data"
-          :doctype="doctype"
-        />
-        <Fields v-else :sections="sections.data" :data="{}" />
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import Fields from '@/components/Fields.vue'
-import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
-import { useDebounceFn } from '@vueuse/core'
-import { Badge, call, createResource } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-
-const doctype = ref('CRM Lead')
-const loading = ref(false)
-const dirty = ref(false)
-const preview = ref(false)
-
-function getParams() {
-  return { doctype: doctype.value, type: 'Quick Entry' }
-}
-
-const sections = createResource({
-  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
-  cache: ['quick-entry-sections', doctype.value],
-  params: getParams(),
-  onSuccess(data) {
-    sections.originalData = JSON.parse(JSON.stringify(data))
-  },
-})
-
-watch(
-  () => sections?.data,
-  () => {
-    dirty.value =
-      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
-  },
-  { deep: true },
-)
-
-onMounted(() => useDebounceFn(reload, 100)())
-
-function reload() {
-  sections.params = getParams()
-  sections.reload()
-}
-
-function saveChanges() {
-  let _sections = JSON.parse(JSON.stringify(sections.data))
-  _sections.forEach((section) => {
-    if (!section.fields) return
-    section.fields = section.fields.map(
-      (field) => field.fieldname || field.name,
-    )
-  })
-  loading.value = true
-  call(
-    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
-    {
-      doctype: doctype.value,
-      type: 'Quick Entry',
-      layout: JSON.stringify(_sections),
-    },
-  ).then(() => {
-    loading.value = false
-    reload()
-  })
-}
-</script>

frontend/src/components/Settings/QuickEntryModal.vue

@@ -0,0 +1,127 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div class="flex flex-col overflow-hidden h-[calc(100vh_-_8rem)]">
+        <div class="flex flex-col gap-2 p-8 pb-5">
+          <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+            <div>{{ __('Edit Quick Entry Layout') }}</div>
+            <Badge
+              v-if="dirty"
+              :label="__('Not Saved')"
+              variant="subtle"
+              theme="orange"
+            />
+          </h2>
+          <div class="flex gap-6 items-end">
+            <FormControl
+              class="flex-1"
+              type="select"
+              v-model="_doctype"
+              :label="__('DocType')"
+              :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
+              @change="reload"
+            />
+            <div class="flex flex-row-reverse gap-2">
+              <Button
+                :loading="loading"
+                :label="__('Save')"
+                variant="solid"
+                @click="saveChanges"
+              />
+              <Button :label="__('Reset')" @click="reload" />
+              <Button
+                :label="preview ? __('Hide Preview') : __('Show Preview')"
+                @click="preview = !preview"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
+          <div
+            class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
+          >
+            <QuickEntryLayoutBuilder
+              v-if="!preview"
+              :sections="sections.data"
+              :doctype="_doctype"
+            />
+            <Fields v-else :sections="sections.data" :data="{}" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import Fields from '@/components/Fields.vue'
+import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const show = defineModel()
+const _doctype = ref(props.doctype)
+const loading = ref(false)
+const dirty = ref(false)
+const preview = ref(false)
+
+function getParams() {
+  return { doctype: _doctype.value, type: 'Quick Entry' }
+}
+
+const sections = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['quick-entry-sections', _doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    sections.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+watch(
+  () => sections?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+  },
+  { deep: true },
+)
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  nextTick(() => {
+    sections.params = getParams()
+    sections.reload()
+  })
+}
+
+function saveChanges() {
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    if (!section.fields) return
+    section.fields = section.fields.map(
+      (field) => field.fieldname || field.name,
+    )
+  })
+  loading.value = true
+  call(
+    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
+    {
+      doctype: _doctype.value,
+      type: 'Quick Entry',
+      layout: JSON.stringify(_sections),
+    },
+  ).then(() => {
+    loading.value = false
+    reload()
+  })
+}
+</script>

frontend/src/components/Settings/SettingsModal.vue

@@ -40,15 +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 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'
+import { Dialog } from 'frappe-ui'
 import { ref, markRaw, computed, h } from 'vue'
 
 const show = defineModel()
@@ -82,21 +79,6 @@ const tabs = computed(() => {
         },
       ],
     },
-    {
-      label: 'Customizations',
-      items: [
-        {
-          label: 'Sidebar Fields Layout',
-          icon: RightSideLayoutIcon,
-          component: markRaw(SidebarFieldsLayout),
-        },
-        {
-          label: 'Quick Entry Layout',
-          icon: h(FeatherIcon, { name: 'grid' }),
-          component: markRaw(QuickEntryLayout),
-        },
-      ],
-    },
   ]
 
   return _tabs.map((tab) => {

frontend/src/components/Settings/SidePanelModal.vue

@@ -0,0 +1,145 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div ref="parentRef" class="flex h-[calc(100vh_-_8rem)]">
+        <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>{{ __('Edit 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']"
+              @change="reload"
+            />
+          </div>
+          <div class="flex flex-row-reverse gap-2">
+            <Button
+              :loading="loading"
+              :label="__('Save')"
+              variant="solid"
+              @click="saveChanges"
+            />
+            <Button :label="__('Reset')" @click="reload" />
+            <Button
+              :label="preview ? __('Hide Preview') : __('Show Preview')"
+              @click="preview = !preview"
+            />
+          </div>
+        </div>
+        <Resizer
+          v-if="sections.data"
+          class="flex flex-col justify-between border-l"
+          :parent="parentRef"
+          side="right"
+        >
+          <div class="flex flex-1 flex-col justify-between overflow-hidden">
+            <div class="flex flex-col overflow-y-auto">
+              <SidePanelLayoutBuilder
+                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>
+  </Dialog>
+</template>
+<script setup>
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
+import Resizer from '@/components/Resizer.vue'
+import SidePanelLayoutBuilder from '@/components/Settings/SidePanelLayoutBuilder.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const show = defineModel()
+const _doctype = ref(props.doctype)
+const parentRef = ref(null)
+const loading = ref(false)
+const dirty = ref(false)
+const preview = ref(false)
+const data = ref({})
+
+function getParams() {
+  return { doctype: _doctype.value, type: 'Side Panel' }
+}
+
+const sections = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['sidebar-sections', _doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    sections.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+watch(
+  () => sections?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+  },
+  { deep: true },
+)
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  nextTick(() => {
+    sections.params = getParams()
+    sections.reload()
+  })
+}
+
+function saveChanges() {
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    if (!section.fields) return
+    section.fields = section.fields.map(
+      (field) => field.fieldname || field.name,
+    )
+  })
+  loading.value = true
+  call(
+    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
+    {
+      doctype: _doctype.value,
+      type: 'Side Panel',
+      layout: JSON.stringify(_sections),
+    },
+  ).then(() => {
+    loading.value = false
+    reload()
+  })
+}
+</script>

frontend/src/pages/Contact.vue

@@ -204,9 +204,15 @@
   </div>
   <ContactModal
     v-model="showContactModal"
+    v-model:quickEntry="showQuickEntryModal"
     :contact="contact"
     :options="{ detailMode }"
   />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
+  />
 </template>
 
 <script setup>
@@ -228,6 +234,7 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import {
   dateFormat,
   dateTooltipFormat,
@@ -258,6 +265,7 @@ const props = defineProps({
 const router = useRouter()
 
 const showContactModal = ref(false)
+const showQuickEntryModal = ref(false)
 const detailMode = ref(false)
 
 const breadcrumbs = computed(() => {

frontend/src/pages/Contacts.vue

@@ -59,7 +59,16 @@
       </Button>
     </div>
   </div>
-  <ContactModal v-model="showContactModal" :contact="{}" />
+  <ContactModal
+    v-model="showContactModal"
+    v-model:quickEntry="showQuickEntryModal"
+    :contact="{}"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
+  />
 </template>
 
 <script setup>
@@ -67,6 +76,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { Breadcrumbs } from 'frappe-ui'
@@ -79,6 +89,7 @@ const { getOrganization } = organizationsStore()
 const route = useRoute()
 
 const showContactModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const currentContact = computed(() => {
   return contacts.value?.data?.data?.find(

frontend/src/pages/Deal.vue

@@ -146,6 +146,16 @@
                     </template>
                   </Link>
                 </div>
+                <Button
+                  v-else-if="
+                    ((!section.contacts && i == 1) || i == 0) && isManager()
+                  "
+                  variant="ghost"
+                  class="w-7 mr-2"
+                  @click="showSidePanelModal = true"
+                >
+                  <EditIcon class="h-4 w-4" />
+                </Button>
               </template>
               <SectionFields
                 v-if="section.fields"
@@ -284,10 +294,16 @@
     :doc="deal.data"
     doctype="CRM Deal"
   />
+  <SidePanelModal
+    v-if="showSidePanelModal"
+    v-model="showSidePanelModal"
+    doctype="CRM Deal"
+  />
 </template>
 <script setup>
 import Resizer from '@/components/Resizer.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
@@ -305,6 +321,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
@@ -321,6 +338,7 @@ import {
 import { globalStore } from '@/stores/global'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
+import { usersStore } from '@/stores/users'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import {
   createResource,
@@ -337,6 +355,7 @@ import { useRouter } from 'vue-router'
 const { $dialog, makeCall } = globalStore()
 const { organizations, getOrganization } = organizationsStore()
 const { statusOptions, getDealStatus } = statusesStore()
+const { isManager } = usersStore()
 const router = useRouter()
 
 const props = defineProps({
@@ -372,6 +391,7 @@ onMounted(() => {
 const reload = ref(false)
 const showOrganizationModal = ref(false)
 const showAssignmentModal = ref(false)
+const showSidePanelModal = ref(false)
 const _organization = ref({})
 
 const organization = computed(() => {

frontend/src/pages/Deals.vue

@@ -234,6 +234,7 @@
   <DealModal
     v-if="showDealModal"
     v-model="showDealModal"
+    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -250,6 +251,11 @@
     doctype="CRM Deal"
     :doc="docname"
   />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Deal"
+  />
 </template>
 
 <script setup>
@@ -268,6 +274,7 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import DealModal from '@/components/Modals/DealModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
@@ -296,6 +303,7 @@ const route = useRoute()
 
 const dealsListView = ref(null)
 const showDealModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 

frontend/src/pages/Lead.vue

@@ -178,6 +178,15 @@
                 v-model="lead.data"
                 @update="updateField"
               />
+              <template v-if="i == 0 && isManager()" #actions>
+                <Button
+                  variant="ghost"
+                  class="w-7 mr-2"
+                  @click="showSidePanelModal = true"
+                >
+                  <EditIcon class="h-4 w-4" />
+                </Button>
+              </template>
             </Section>
           </div>
         </div>
@@ -227,7 +236,7 @@
         <div v-else class="mt-2.5 text-base">
           {{
             __(
-              'New organization will be created based on the data in details section'
+              'New organization will be created based on the data in details section',
             )
           }}
         </div>
@@ -257,9 +266,11 @@
       </div>
     </template>
   </Dialog>
+  <SidePanelModal v-if="showSidePanelModal" v-model="showSidePanelModal" />
 </template>
 <script setup>
 import Resizer from '@/components/Resizer.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
@@ -275,6 +286,7 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities.vue'
 import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
@@ -293,6 +305,7 @@ import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
+import { usersStore } from '@/stores/users'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import {
   createResource,
@@ -312,6 +325,7 @@ const { $dialog, makeCall } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { organizations } = organizationsStore()
 const { statusOptions, getLeadStatus } = statusesStore()
+const { isManager } = usersStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -347,6 +361,7 @@ onMounted(() => {
 
 const reload = ref(false)
 const showAssignmentModal = ref(false)
+const showSidePanelModal = ref(false)
 
 function updateLead(fieldname, value, callback) {
   value = Array.isArray(fieldname) ? '' : value
@@ -454,7 +469,7 @@ const tabs = computed(() => {
 watch(tabs, (value) => {
   if (value && route.params.tabName) {
     let index = value.findIndex(
-      (tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase()
+      (tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase(),
     )
     if (index !== -1) {
       tabIndex.value = index
@@ -549,7 +564,7 @@ async function convertToDeal(updated) {
         organization: lead.data.organization,
       },
       '',
-      () => convertToDeal(true)
+      () => convertToDeal(true),
     )
     showConvertToDealModal.value = false
   } else {
@@ -557,7 +572,7 @@ async function convertToDeal(updated) {
       'crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal',
       {
         lead: lead.data.name,
-      }
+      },
     )
     if (deal) {
       if (updated) {

frontend/src/pages/Leads.vue

@@ -260,6 +260,7 @@
   <LeadModal
     v-if="showLeadModal"
     v-model="showLeadModal"
+    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -276,6 +277,7 @@
     doctype="CRM Lead"
     :doc="docname"
   />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 
 <script setup>
@@ -294,6 +296,7 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import LeadModal from '@/components/Modals/LeadModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
@@ -316,6 +319,7 @@ const route = useRoute()
 
 const leadsListView = ref(null)
 const showLeadModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 

frontend/src/pages/Organization.vue

@@ -214,9 +214,15 @@
   </div>
   <OrganizationModal
     v-model="showOrganizationModal"
+    v-model:quickEntry="showQuickEntryModal"
     v-model:organization="organization"
     :options="{ detailMode }"
   />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Organization"
+  />
 </template>
 
 <script setup>
@@ -232,6 +238,7 @@ import {
 } from 'frappe-ui'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
@@ -263,6 +270,7 @@ const props = defineProps({
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
 const showOrganizationModal = ref(false)
+const showQuickEntryModal = ref(false)
 const detailMode = ref(false)
 
 const router = useRouter()

frontend/src/pages/Organizations.vue

@@ -59,13 +59,22 @@
       </Button>
     </div>
   </div>
-  <OrganizationModal v-model="showOrganizationModal" />
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    v-model:quickEntry="showQuickEntryModal"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Organization"
+  />
 </template>
 <script setup>
 import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { Breadcrumbs } from 'frappe-ui'
@@ -82,6 +91,7 @@ const route = useRoute()
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const currentOrganization = computed(() => {
   return organizations.value?.data?.data?.find(