fix: implemented updated SidePanelLayout in Lead/Deal/Contact & Organization Page

frontend/src/pages/Contact.vue

@@ -117,42 +117,15 @@
         </FileUploader>
       </div>
       <div
-        v-if="fieldsLayout.data"
+        v-if="sections.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
-        <div class="flex flex-col overflow-y-auto">
+        <SidePanelLayout
-          <div
+          v-model="contact.data"
-            v-for="(section, i) in fieldsLayout.data"
+          :sections="sections"
-            :key="section.name"
+          doctype="Contact"
-            class="flex flex-col p-3"
+          @update="updateField"
-            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+        />
-          >
-            <Section
-              labelClass="px-2 font-semibold"
-              :label="section.label"
-              :opened="section.opened"
-            >
-              <template #actions>
-                <Button
-                  v-if="i == 0 && isManager()"
-                  variant="ghost"
-                  class="w-7"
-                  @click="showSidePanelModal = true"
-                >
-                  <EditIcon class="h-4 w-4" />
-                </Button>
-              </template>
-              <SidePanelLayout
-                v-if="section.columns?.[0].fields"
-                :fields="section.columns[0].fields"
-                :isLastSection="i == fieldsLayout.data.length - 1"
-                doctype="Contact"
-                v-model="contact.data"
-                @update="updateField"
-              />
-            </Section>
-          </div>
-        </div>
       </div>
     </Resizer>
     <Tabs class="!h-full" v-model="tabIndex" :tabs="tabs">
@@ -194,27 +167,18 @@
       </template>
     </Tabs>
   </div>
-  <SidePanelModal
-    v-if="showSidePanelModal"
-    v-model="showSidePanelModal"
-    doctype="Contact"
-    @reload="() => fieldsLayout.reload()"
-  />
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
 import Resizer from '@/components/Resizer.vue'
 import Icon from '@/components/Icon.vue'
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
-import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
@@ -241,7 +205,7 @@ import { useRoute, useRouter } from 'vue-router'
 const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
 
-const { getUser, isManager } = usersStore()
+const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
 
@@ -256,7 +220,6 @@ const route = useRoute()
 const router = useRouter()
 
 const showAddressModal = ref(false)
-const showSidePanelModal = ref(false)
 const _contact = ref({})
 const _address = ref({})
 
@@ -371,16 +334,16 @@ const rows = computed(() => {
   return deals.data.map((row) => getDealRowObject(row))
 })
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.api.doc.get_sidebar_fields',
-  cache: ['fieldsLayout', props.contactId],
+  cache: ['sidePanelSections', props.contactId],
   params: { doctype: 'Contact', name: props.contactId },
   auto: true,
-  transform: (data) => getParsedFields(data),
+  transform: (data) => getParsedSections(data),
 })
 
-function getParsedFields(data) {
+function getParsedSections(_sections) {
-  return data.map((section) => {
+  return _sections.map((section) => {
     section.columns = section.columns.map((column) => {
       column.fields = column.fields.map((field) => {
         if (field.name === 'email_id') {

frontend/src/pages/Deal.vue

@@ -114,169 +114,109 @@
         @updateField="updateField"
       />
       <div
-        v-if="fieldsLayout.data"
+        v-if="sections.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
-        <div class="flex flex-col overflow-y-auto">
+        <SidePanelLayout
-          <div
+          v-model="deal.data"
-            v-for="(section, i) in fieldsLayout.data"
+          :sections="sections"
-            :key="section.name"
+          doctype="CRM Deal"
-            class="section flex flex-col p-3"
+          @update="updateField"
-            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+          v-slot="{ section }"
-          >
+        >
-            <Section
+          <div v-if="section.name == 'contacts_section'" class="contacts-area">
-              labelClass="px-2 font-semibold"
+            <div
-              :label="section.label"
+              v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
-              :opened="section.opened"
+              class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
             >
-              <template #actions>
+              <LoadingIndicator class="h-4 w-4" />
-                <div v-if="section.contacts" class="pr-2">
+              <span>{{ __('Loading...') }}</span>
-                  <Link
+            </div>
-                    value=""
+            <div
-                    doctype="Contact"
+              v-else-if="dealContacts?.data?.length"
-                    @change="(e) => addContact(e)"
+              v-for="(contact, i) in dealContacts.data"
-                    :onCreate="
+              :key="contact.name"
-                      (value, close) => {
+            >
-                        _contact = {
+              <div class="px-2 pb-2.5" :class="[i == 0 ? 'pt-5' : 'pt-2.5']">
-                          first_name: value,
+                <Section :opened="contact.opened">
-                          company_name: deal.data.organization,
+                  <template #header="{ opened, toggle }">
-                        }
+                    <div
-                        showContactModal = true
+                      class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
-                        close()
+                    >
-                      }
-                    "
-                  >
-                    <template #target="{ togglePopover }">
-                      <Button
-                        class="h-7 px-3"
-                        variant="ghost"
-                        icon="plus"
-                        @click="togglePopover()"
-                      />
-                    </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>
-              <SidePanelLayout
-                v-if="section.columns?.[0].fields"
-                :fields="section.columns[0].fields"
-                :isLastSection="i == fieldsLayout.data.length - 1"
-                doctype="CRM Deal"
-                v-model="deal.data"
-                @update="updateField"
-              />
-              <div v-else>
-                <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"
-                >
-                  <LoadingIndicator class="h-4 w-4" />
-                  <span>{{ __('Loading...') }}</span>
-                </div>
-                <div
-                  v-else-if="dealContacts?.data?.length"
-                  v-for="(contact, i) in dealContacts.data"
-                  :key="contact.name"
-                >
-                  <div
-                    class="px-2 pb-2.5"
-                    :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
-                  >
-                    <Section :opened="contact.opened">
-                      <template #header="{ opened, toggle }">
-                        <div
-                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
-                        >
-                          <div
-                            class="flex h-7 items-center gap-2 truncate"
-                            @click="toggle()"
-                          >
-                            <Avatar
-                              :label="contact.full_name"
-                              :image="contact.image"
-                              size="md"
-                            />
-                            <div class="truncate">
-                              {{ contact.full_name }}
-                            </div>
-                            <Badge
-                              v-if="contact.is_primary"
-                              class="ml-2"
-                              variant="outline"
-                              :label="__('Primary')"
-                              theme="green"
-                            />
-                          </div>
-                          <div class="flex items-center">
-                            <Dropdown :options="contactOptions(contact)">
-                              <Button
-                                icon="more-horizontal"
-                                class="text-ink-gray-5"
-                                variant="ghost"
-                              />
-                            </Dropdown>
-                            <Button
-                              variant="ghost"
-                              @click="
-                                router.push({
-                                  name: 'Contact',
-                                  params: { contactId: contact.name },
-                                })
-                              "
-                            >
-                              <ArrowUpRightIcon class="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" @click="toggle()">
-                              <FeatherIcon
-                                name="chevron-right"
-                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
-                                :class="{ 'rotate-90': opened }"
-                              />
-                            </Button>
-                          </div>
-                        </div>
-                      </template>
                       <div
-                        class="flex flex-col gap-1.5 text-base text-ink-gray-8"
+                        class="flex h-7 items-center gap-2 truncate"
+                        @click="toggle()"
                       >
-                        <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
+                        <Avatar
-                          <Email2Icon class="h-4 w-4" />
+                          :label="contact.full_name"
-                          {{ contact.email }}
+                          :image="contact.image"
-                        </div>
+                          size="md"
-                        <div class="flex items-center gap-3 p-1 py-1.5">
+                        />
-                          <PhoneIcon class="h-4 w-4" />
+                        <div class="truncate">
-                          {{ contact.mobile_no }}
+                          {{ contact.full_name }}
                         </div>
+                        <Badge
+                          v-if="contact.is_primary"
+                          class="ml-2"
+                          variant="outline"
+                          :label="__('Primary')"
+                          theme="green"
+                        />
                       </div>
-                    </Section>
+                      <div class="flex items-center">
+                        <Dropdown :options="contactOptions(contact)">
+                          <Button
+                            icon="more-horizontal"
+                            class="text-ink-gray-5"
+                            variant="ghost"
+                          />
+                        </Dropdown>
+                        <Button
+                          variant="ghost"
+                          @click="
+                            router.push({
+                              name: 'Contact',
+                              params: { contactId: contact.name },
+                            })
+                          "
+                        >
+                          <ArrowUpRightIcon class="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" @click="toggle()">
+                          <FeatherIcon
+                            name="chevron-right"
+                            class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
+                            :class="{ 'rotate-90': opened }"
+                          />
+                        </Button>
+                      </div>
+                    </div>
+                  </template>
+                  <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 }}
+                    </div>
+                    <div class="flex items-center gap-3 p-1 py-1.5">
+                      <PhoneIcon class="h-4 w-4" />
+                      {{ contact.mobile_no }}
+                    </div>
                   </div>
-                  <div
+                </Section>
-                    v-if="i != dealContacts.data.length - 1"
-                    class="mx-2 h-px border-t border-outline-gray-modals"
-                  />
-                </div>
-                <div
-                  v-else
-                  class="flex h-20 items-center justify-center text-base text-ink-gray-5"
-                >
-                  {{ __('No contacts added') }}
-                </div>
               </div>
-            </Section>
+              <div
+                v-if="i != dealContacts.data.length - 1"
+                class="mx-2 h-px border-t border-outline-gray-modals"
+              />
+            </div>
+            <div
+              v-else
+              class="flex h-20 items-center justify-center text-base text-ink-gray-5"
+            >
+              {{ __('No contacts added') }}
+            </div>
           </div>
-        </div>
+        </SidePanelLayout>
       </div>
     </Resizer>
   </div>
@@ -303,12 +243,6 @@
     :doc="deal.data"
     doctype="CRM Deal"
   />
-  <SidePanelModal
-    v-if="showSidePanelModal"
-    v-model="showSidePanelModal"
-    doctype="CRM Deal"
-    @reload="() => fieldsLayout.reload()"
-  />
   <FilesUploader
     v-if="deal.data?.name"
     v-model="showFilesUploader"
@@ -326,7 +260,6 @@
 import Icon from '@/components/Icon.vue'
 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 Email2Icon from '@/components/Icons/Email2Icon.vue'
@@ -348,8 +281,6 @@ import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
-import SidePanelModal from '@/components/Modals/SidePanelModal.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'
@@ -366,7 +297,6 @@ import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
-import { usersStore } from '@/stores/users'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import {
   createResource,
@@ -385,7 +315,6 @@ import { useActiveTabManager } from '@/composables/useActiveTabManager'
 const { brand } = getSettings()
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
-const { isManager } = usersStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -422,7 +351,7 @@ const deal = createResource({
       resource: {
         deal,
         dealContacts,
-        fieldsLayout,
+        sections,
       },
       call,
     }
@@ -461,7 +390,6 @@ onBeforeUnmount(() => {
 const reload = ref(false)
 const showOrganizationModal = ref(false)
 const showAssignmentModal = ref(false)
-const showSidePanelModal = ref(false)
 const showFilesUploader = ref(false)
 const _organization = ref({})
 
@@ -600,16 +528,16 @@ const tabs = computed(() => {
 })
 const { tabIndex } = useActiveTabManager(tabs, 'lastDealTab')
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.api.doc.get_sidebar_fields',
-  cache: ['fieldsLayout', props.dealId],
+  cache: ['sidePanelSections', props.dealId],
   params: { doctype: 'CRM Deal', name: props.dealId },
   auto: true,
-  transform: (data) => getParsedFields(data),
+  transform: (data) => getParsedSections(data),
 })
 
-function getParsedFields(sections) {
+function getParsedSections(_sections) {
-  sections.forEach((section) => {
+  _sections.forEach((section) => {
     if (section.name == 'contacts_section') return
     section.columns[0].fields.forEach((field) => {
       if (field.name == 'organization') {
@@ -626,7 +554,7 @@ function getParsedFields(sections) {
       }
     })
   })
-  return sections
+  return _sections
 }
 
 const showContactModal = ref(false)
@@ -748,12 +676,3 @@ function openEmailBox() {
   activities.value.emailBox.show = true
 }
 </script>
-
-<style scoped>
-:deep(.section:has(.section-field.hidden)) {
-  display: none;
-}
-:deep(.section:has(.section-field:not(.hidden))) {
-  display: flex;
-}
-</style>

frontend/src/pages/Lead.vue

@@ -167,39 +167,15 @@
         @updateField="updateField"
       />
       <div
-        v-if="fieldsLayout.data"
+        v-if="sections.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
-        <div class="flex flex-col overflow-y-auto">
+        <SidePanelLayout
-          <div
+          v-model="lead.data"
-            v-for="(section, i) in fieldsLayout.data"
+          :sections="sections"
-            :key="section.name"
+          doctype="CRM Lead"
-            class="flex flex-col p-3"
+          @update="updateField"
-            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+        />
-          >
-            <Section
-              labelClass="px-2 font-semibold"
-              :label="section.label"
-              :opened="section.opened"
-            >
-              <SidePanelLayout
-                :fields="section.columns[0].fields"
-                :isLastSection="i == fieldsLayout.data.length - 1"
-                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>
       </div>
     </Resizer>
   </div>
@@ -276,11 +252,6 @@
       </div>
     </template>
   </Dialog>
-  <SidePanelModal
-    v-if="showSidePanelModal"
-    v-model="showSidePanelModal"
-    @reload="() => fieldsLayout.reload()"
-  />
   <FilesUploader
     v-if="lead.data?.name"
     v-model="showFilesUploader"
@@ -297,7 +268,6 @@
 <script setup>
 import Icon from '@/components/Icon.vue'
 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 Email2Icon from '@/components/Icons/Email2Icon.vue'
@@ -317,10 +287,8 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
 import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.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'
 import CustomActions from '@/components/CustomActions.vue'
@@ -337,7 +305,6 @@ import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
 import { statusesStore } from '@/stores/statuses'
-import { usersStore } from '@/stores/users'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import {
@@ -360,7 +327,6 @@ const { brand } = getSettings()
 const { $dialog, $socket, makeCall } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { statusOptions, getLeadStatus } = statusesStore()
-const { isManager } = usersStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -389,7 +355,7 @@ const lead = createResource({
       deleteDoc: deleteLead,
       resource: {
         lead,
-        fieldsLayout,
+        sections,
       },
       call,
     }
@@ -407,7 +373,6 @@ onMounted(() => {
 
 const reload = ref(false)
 const showAssignmentModal = ref(false)
-const showSidePanelModal = ref(false)
 const showFilesUploader = ref(false)
 
 function updateLead(fieldname, value, callback) {
@@ -564,9 +529,9 @@ function validateFile(file) {
   }
 }
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.api.doc.get_sidebar_fields',
-  cache: ['fieldsLayout', props.leadId],
+  cache: ['sidePanelSections', props.leadId],
   params: { doctype: 'CRM Lead', name: props.leadId },
   auto: true,
 })

frontend/src/pages/Organization.vue

@@ -102,42 +102,15 @@
         </FileUploader>
       </div>
       <div
-        v-if="fieldsLayout.data"
+        v-if="sections.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
-        <div class="flex flex-col overflow-y-auto">
+        <SidePanelLayout
-          <div
+          v-model="organization.doc"
-            v-for="(section, i) in fieldsLayout.data"
+          :sections="sections"
-            :key="section.name"
+          doctype="CRM Organization"
-            class="flex flex-col p-3"
+          @update="updateField"
-            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+        />
-          >
-            <Section
-              labelClass="px-2 font-semibold"
-              :label="section.label"
-              :opened="section.opened"
-            >
-              <template #actions>
-                <Button
-                  v-if="i == 0 && isManager()"
-                  variant="ghost"
-                  class="w-7"
-                  @click="showSidePanelModal = true"
-                >
-                  <EditIcon class="h-4 w-4" />
-                </Button>
-              </template>
-              <SidePanelLayout
-                v-if="section.columns?.[0].fields"
-                v-model="organization.doc"
-                :fields="section.columns[0].fields"
-                :isLastSection="i == fieldsLayout.data.length - 1"
-                doctype="CRM Organization"
-                @update="updateField"
-              />
-            </Section>
-          </div>
-        </div>
       </div>
     </Resizer>
     <Tabs class="!h-full" v-model="tabIndex" :tabs="tabs">
@@ -186,12 +159,6 @@
       </template>
     </Tabs>
   </div>
-  <SidePanelModal
-    v-if="showSidePanelModal"
-    v-model="showSidePanelModal"
-    doctype="CRM Organization"
-    @reload="() => fieldsLayout.reload()"
-  />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
@@ -202,9 +169,7 @@
 
 <script setup>
 import Resizer from '@/components/Resizer.vue'
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
-import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
@@ -212,7 +177,6 @@ import AddressModal from '@/components/Modals/AddressModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
@@ -247,10 +211,9 @@ const props = defineProps({
 })
 
 const { brand } = getSettings()
-const { getUser, isManager } = usersStore()
+const { getUser } = usersStore()
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
-const showSidePanelModal = ref(false)
 const showQuickEntryModal = ref(false)
 
 const route = useRoute()
@@ -371,16 +334,16 @@ const showAddressModal = ref(false)
 const _organization = ref({})
 const _address = ref({})
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.api.doc.get_sidebar_fields',
-  cache: ['fieldsLayout', props.organizationId],
+  cache: ['sidePanelSections', props.organizationId],
   params: { doctype: 'CRM Organization', name: props.organizationId },
   auto: true,
-  transform: (data) => getParsedFields(data),
+  transform: (data) => getParsedSections(data),
 })
 
-function getParsedFields(data) {
+function getParsedSections(_sections) {
-  return data.map((section) => {
+  return _sections.map((section) => {
     section.columns = section.columns.map((column) => {
       column.fields = column.fields.map((field) => {
         if (field.name === 'address') {