fix: cannot add/create contact from deal

frontend/src/components/SidePanelLayout.vue

@@ -15,40 +15,16 @@
             :opened="section.opened"
           >
             <template v-if="!preview" #actions>
-              <div v-if="section.name == 'contacts_section'" class="pr-2">
+              <slot name="actions" v-bind="{ section }">
-                <Link
-                  value=""
-                  doctype="Contact"
-                  @change="(e) => addContact(e)"
-                  :onCreate="
-                    (value, close) => {
-                      _contact = {
-                        first_name: value,
-                        company_name: deal.data.organization,
-                      }
-                      showContactModal = true
-                      close()
-                    }
-                  "
-                >
-                  <template #target="{ togglePopover }">
                 <Button
-                      class="h-7 px-3"
+                  v-if="section.showEditButton"
-                      variant="ghost"
-                      icon="plus"
-                      @click="togglePopover()"
-                    />
-                  </template>
-                </Link>
-              </div>
-              <Button
-                v-else-if="section.showEditButton"
                   variant="ghost"
                   class="w-7 mr-2"
                   @click="showSidePanelModal = true"
                 >
                   <EditIcon class="h-4 w-4" />
                 </Button>
+              </slot>
             </template>
             <slot v-bind="{ section }">
               <FadedScrollableDiv

frontend/src/pages/Deal.vue

@@ -125,11 +125,42 @@
           :sections="sections.data"
           :addContact="addContact"
           doctype="CRM Deal"
-          v-slot="{ section }"
           @update="updateField"
           @reload="sections.reload"
         >
-          <div v-if="section.name == 'contacts_section'" class="contacts-area">
+          <template #actions="{ section }">
+            <div v-if="section.name == 'contacts_section'" class="pr-2">
+              <Link
+                value=""
+                doctype="Contact"
+                @change="(e) => addContact(e)"
+                :onCreate="
+                  (value, close) => {
+                    _contact = {
+                      first_name: value,
+                      company_name: deal.data.organization,
+                    }
+                    showContactModal = true
+                    close()
+                  }
+                "
+              >
+                <template #target="{ togglePopover }">
+                  <Button
+                    class="h-7 px-3"
+                    variant="ghost"
+                    icon="plus"
+                    @click="togglePopover()"
+                  />
+                </template>
+              </Link>
+            </div>
+          </template>
+          <template #default="{ section }">
+            <div
+              v-if="section.name == 'contacts_section'"
+              class="contacts-area"
+            >
               <div
                 v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
                 class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
@@ -197,7 +228,9 @@
                         </div>
                       </div>
                     </template>
-                  <div class="flex flex-col gap-1.5 text-base text-ink-gray-8">
+                    <div
+                      class="flex flex-col gap-1.5 text-base text-ink-gray-8"
+                    >
                       <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
                         <Email2Icon class="h-4 w-4" />
                         {{ contact.email }}
@@ -221,6 +254,7 @@
                 {{ __('No contacts added') }}
               </div>
             </div>
+          </template>
         </SidePanelLayout>
       </div>
     </Resizer>
@@ -278,6 +312,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import AssignTo from '@/components/AssignTo.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'