From 6d0d1d182f749f9b6bebc7720948369a5c38460c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Jan 2025 11:42:39 +0530
Subject: [PATCH] refactor: separated Section, Column & Field as different
 component

---
 .../src/components/Activities/DataFields.vue  |   2 +-
 .../Controls/GridRowFieldsModal.vue           |   3 +-
 .../src/components/Controls/GridRowModal.vue  |   2 +-
 frontend/src/components/FieldLayout.vue       | 416 ------------------
 .../src/components/FieldLayout/Column.vue     |  20 +
 frontend/src/components/FieldLayout/Field.vue | 261 +++++++++++
 .../components/FieldLayout/FieldLayout.vue    |  69 +++
 .../src/components/FieldLayout/Section.vue    |  41 ++
 .../src/components/Modals/AddressModal.vue    |   2 +-
 .../src/components/Modals/ContactModal.vue    |   2 +-
 .../src/components/Modals/DataFieldsModal.vue |   3 +-
 frontend/src/components/Modals/DealModal.vue  |   7 +-
 frontend/src/components/Modals/LeadModal.vue  |   2 +-
 .../components/Modals/OrganizationModal.vue   |   2 +-
 .../src/components/Modals/QuickEntryModal.vue |   2 +-
 frontend/src/components/Section.vue           |  10 +-
 .../src/components/Settings/SettingsPage.vue  |   3 +-
 frontend/src/components/SidePanelLayout.vue   |   1 +
 18 files changed, 415 insertions(+), 433 deletions(-)
 delete mode 100644 frontend/src/components/FieldLayout.vue
 create mode 100644 frontend/src/components/FieldLayout/Column.vue
 create mode 100644 frontend/src/components/FieldLayout/Field.vue
 create mode 100644 frontend/src/components/FieldLayout/FieldLayout.vue
 create mode 100644 frontend/src/components/FieldLayout/Section.vue

diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 70915265..25feb8e3 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -58,7 +58,7 @@
 <script setup>
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DataFieldsModal from '@/components/Modals/DataFieldsModal.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { Badge, createResource, createDocumentResource } from 'frappe-ui'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import { createToast } from '@/utils'
diff --git a/frontend/src/components/Controls/GridRowFieldsModal.vue b/frontend/src/components/Controls/GridRowFieldsModal.vue
index fb0227b2..b5748c77 100644
--- a/frontend/src/components/Controls/GridRowFieldsModal.vue
+++ b/frontend/src/components/Controls/GridRowFieldsModal.vue
@@ -40,7 +40,6 @@
             v-else
             :tabs="tabs.data"
             :data="{}"
-            :modal="true"
             :preview="true"
           />
         </div>
@@ -49,7 +48,7 @@
   </Dialog>
 </template>
 <script setup>
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { capture } from '@/telemetry'
diff --git a/frontend/src/components/Controls/GridRowModal.vue b/frontend/src/components/Controls/GridRowModal.vue
index 36fe0846..74e17db6 100644
--- a/frontend/src/components/Controls/GridRowModal.vue
+++ b/frontend/src/components/Controls/GridRowModal.vue
@@ -32,7 +32,7 @@
 
 <script setup>
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { createResource } from 'frappe-ui'
 import { nextTick } from 'vue'
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
deleted file mode 100644
index 46288d04..00000000
--- a/frontend/src/components/FieldLayout.vue
+++ /dev/null
@@ -1,416 +0,0 @@
-<template>
-  <div
-    class="flex flex-col"
-    :class="{
-      'border border-outline-gray-1 rounded-lg': hasTabs,
-      'border-outline-gray-modals': modal && hasTabs,
-    }"
-  >
-    <Tabs as="div" v-model="tabIndex" :tabs="_tabs">
-      <TabList
-        :class="!hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''"
-      />
-      <TabPanel v-slot="{ tab }">
-        <div
-          class="sections overflow-hidden"
-          :class="{ 'my-4 sm:my-6': hasTabs }"
-        >
-          <template v-for="(section, i) in tab.sections" :key="section.name">
-            <div
-              v-if="section.visible"
-              class="section"
-              :data-name="section.name"
-            >
-              <div
-                v-if="i !== firstVisibleIndex(tab.sections)"
-                class="w-full section-border"
-                :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
-              />
-              <Section
-                class="flex sm:flex-row flex-col gap-4 text-lg font-medium"
-                :class="{
-                  'px-3 sm:px-5': hasTabs,
-                  'mt-6': section.label && !section.hideLabel,
-                }"
-                :labelClass="[
-                  'text-lg font-medium',
-                  { 'px-3 sm:px-5': hasTabs },
-                ]"
-                :label="section.label"
-                :hideLabel="section.hideLabel || !section.label"
-                :opened="section.opened"
-                :collapsible="section.collapsible"
-                collapseIconPosition="right"
-              >
-                <div
-                  class="column flex flex-col gap-4 w-full"
-                  v-for="column in section.columns"
-                  :key="column.name"
-                  :data-name="column.name"
-                >
-                  <div
-                    v-if="column.label && !column.hideLabel"
-                    class="text-ink-gray-9 max-w-fit text-base"
-                  >
-                    {{ column.label }}
-                  </div>
-                  <template
-                    v-for="field in column.fields"
-                    :key="field.fieldname"
-                  >
-                    <div v-if="field.visible" class="field">
-                      <div
-                        v-if="field.fieldtype != 'Check'"
-                        class="mb-2 text-sm text-ink-gray-5"
-                      >
-                        {{ __(field.label) }}
-                        <span
-                          v-if="
-                            field.reqd ||
-                            (field.mandatory_depends_on &&
-                              field.mandatory_via_depends_on)
-                          "
-                          class="text-ink-red-3"
-                          >*</span
-                        >
-                      </div>
-                      <FormControl
-                        v-if="field.read_only && field.fieldtype !== 'Check'"
-                        type="text"
-                        :placeholder="getPlaceholder(field)"
-                        v-model="data[field.fieldname]"
-                        :disabled="true"
-                      />
-                      <Grid
-                        v-else-if="field.fieldtype === 'Table'"
-                        v-model="data[field.fieldname]"
-                        :doctype="field.options"
-                        :parentDoctype="doctype"
-                      />
-                      <FormControl
-                        v-else-if="field.fieldtype === 'Select'"
-                        type="select"
-                        class="form-control"
-                        :class="field.prefix ? 'prefix' : ''"
-                        :options="field.options"
-                        v-model="data[field.fieldname]"
-                        :placeholder="getPlaceholder(field)"
-                      >
-                        <template v-if="field.prefix" #prefix>
-                          <IndicatorIcon :class="field.prefix" />
-                        </template>
-                      </FormControl>
-                      <div
-                        v-else-if="field.fieldtype == 'Check'"
-                        class="flex items-center gap-2"
-                      >
-                        <FormControl
-                          class="form-control"
-                          type="checkbox"
-                          v-model="data[field.fieldname]"
-                          @change="
-                            (e) => (data[field.fieldname] = e.target.checked)
-                          "
-                          :disabled="Boolean(field.read_only)"
-                        />
-                        <label
-                          class="text-sm text-ink-gray-5"
-                          @click="
-                            () => {
-                              if (!Boolean(field.read_only)) {
-                                data[field.fieldname] = !data[field.fieldname]
-                              }
-                            }
-                          "
-                        >
-                          {{ __(field.label) }}
-                          <span class="text-ink-red-3" v-if="field.mandatory"
-                            >*</span
-                          >
-                        </label>
-                      </div>
-                      <div
-                        class="flex gap-1"
-                        v-else-if="field.fieldtype === 'Link'"
-                      >
-                        <Link
-                          class="form-control flex-1 truncate"
-                          :value="data[field.fieldname]"
-                          :doctype="field.options"
-                          :filters="field.filters"
-                          @change="(v) => (data[field.fieldname] = v)"
-                          :placeholder="getPlaceholder(field)"
-                          :onCreate="field.create"
-                        />
-                        <Button
-                          v-if="data[field.fieldname] && field.edit"
-                          class="shrink-0"
-                          :label="__('Edit')"
-                          @click="field.edit(data[field.fieldname])"
-                        >
-                          <template #prefix>
-                            <EditIcon class="h-4 w-4" />
-                          </template>
-                        </Button>
-                      </div>
-
-                      <Link
-                        v-else-if="field.fieldtype === 'User'"
-                        class="form-control"
-                        :value="
-                          data[field.fieldname] &&
-                          getUser(data[field.fieldname]).full_name
-                        "
-                        :doctype="field.options"
-                        :filters="field.filters"
-                        @change="(v) => (data[field.fieldname] = v)"
-                        :placeholder="getPlaceholder(field)"
-                        :hideMe="true"
-                      >
-                        <template #prefix>
-                          <UserAvatar
-                            v-if="data[field.fieldname]"
-                            class="mr-2"
-                            :user="data[field.fieldname]"
-                            size="sm"
-                          />
-                        </template>
-                        <template #item-prefix="{ option }">
-                          <UserAvatar
-                            class="mr-2"
-                            :user="option.value"
-                            size="sm"
-                          />
-                        </template>
-                        <template #item-label="{ option }">
-                          <Tooltip :text="option.value">
-                            <div class="cursor-pointer">
-                              {{ getUser(option.value).full_name }}
-                            </div>
-                          </Tooltip>
-                        </template>
-                      </Link>
-                      <DateTimePicker
-                        v-else-if="field.fieldtype === 'Datetime'"
-                        v-model="data[field.fieldname]"
-                        icon-left=""
-                        :formatter="(date) => getFormat(date, '', true, true)"
-                        :placeholder="getPlaceholder(field)"
-                        input-class="border-none"
-                      />
-                      <DatePicker
-                        v-else-if="field.fieldtype === 'Date'"
-                        icon-left=""
-                        v-model="data[field.fieldname]"
-                        :formatter="(date) => getFormat(date, '', true)"
-                        :placeholder="getPlaceholder(field)"
-                        input-class="border-none"
-                      />
-                      <FormControl
-                        v-else-if="
-                          ['Small Text', 'Text', 'Long Text', 'Code'].includes(
-                            field.fieldtype,
-                          )
-                        "
-                        type="textarea"
-                        :placeholder="getPlaceholder(field)"
-                        v-model="data[field.fieldname]"
-                      />
-                      <FormControl
-                        v-else-if="['Int'].includes(field.fieldtype)"
-                        type="number"
-                        :placeholder="getPlaceholder(field)"
-                        v-model="data[field.fieldname]"
-                      />
-                      <FormControl
-                        v-else-if="field.fieldtype === 'Percent'"
-                        type="text"
-                        :value="getFormattedPercent(field.fieldname, data)"
-                        :placeholder="getPlaceholder(field)"
-                        :disabled="Boolean(field.read_only)"
-                        @change="
-                          data[field.fieldname] = flt($event.target.value)
-                        "
-                      />
-                      <FormControl
-                        v-else-if="field.fieldtype === 'Float'"
-                        type="text"
-                        :value="getFormattedFloat(field.fieldname, data)"
-                        :placeholder="getPlaceholder(field)"
-                        :disabled="Boolean(field.read_only)"
-                        @change="
-                          data[field.fieldname] = flt($event.target.value)
-                        "
-                      />
-                      <FormControl
-                        v-else-if="field.fieldtype === 'Currency'"
-                        type="text"
-                        :value="getFormattedCurrency(field.fieldname, data)"
-                        :placeholder="getPlaceholder(field)"
-                        :disabled="Boolean(field.read_only)"
-                        @change="
-                          data[field.fieldname] = flt($event.target.value)
-                        "
-                      />
-                      <FormControl
-                        v-else
-                        type="text"
-                        :placeholder="getPlaceholder(field)"
-                        v-model="data[field.fieldname]"
-                        :disabled="Boolean(field.read_only)"
-                      />
-                    </div>
-                  </template>
-                </div>
-              </Section>
-            </div>
-          </template>
-        </div>
-      </TabPanel>
-    </Tabs>
-  </div>
-</template>
-
-<script setup>
-import Section from '@/components/Section.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
-import Link from '@/components/Controls/Link.vue'
-import Grid from '@/components/Controls/Grid.vue'
-import { getMeta } from '@/stores/meta'
-import { usersStore } from '@/stores/users'
-import { getFormat, evaluateDependsOnValue } from '@/utils'
-import { flt } from '@/utils/numberFormat.js'
-import {
-  Tabs,
-  TabList,
-  TabPanel,
-  Tooltip,
-  DatePicker,
-  DateTimePicker,
-} from 'frappe-ui'
-import { ref, computed } from 'vue'
-
-const props = defineProps({
-  tabs: Array,
-  data: Object,
-  doctype: {
-    type: String,
-    default: 'CRM Lead',
-  },
-  modal: {
-    type: Boolean,
-    default: false,
-  },
-  preview: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
-  getMeta(props.doctype)
-const { getUser } = usersStore()
-
-const hasTabs = computed(() => {
-  return (
-    props.tabs.length > 1 || (props.tabs.length == 1 && props.tabs[0].label)
-  )
-})
-
-const _tabs = computed(() => {
-  return props.tabs.map((tab) => {
-    tab.sections = tab.sections.map((section) => {
-      section.columns = section.columns.map((column) => {
-        column.fields = column.fields.map((field) => {
-          return parsedField(field)
-        })
-        return column
-      })
-      return parsedSection(section)
-    })
-    return tab
-  })
-})
-
-function parsedField(field) {
-  if (field.fieldtype == 'Select' && typeof field.options === 'string') {
-    field.options = field.options.split('\n').map((option) => {
-      return { label: option, value: option }
-    })
-
-    if (field.options[0].value !== '') {
-      field.options.unshift({ label: '', value: '' })
-    }
-  }
-
-  if (field.fieldtype === 'Link' && field.options === 'User') {
-    field.options = field.options
-    field.fieldtype = 'User'
-  }
-
-  let _field = {
-    ...field,
-    filters: field.link_filters && JSON.parse(field.link_filters),
-    placeholder: field.placeholder || field.label,
-    display_via_depends_on: evaluateDependsOnValue(
-      field.depends_on,
-      props.data,
-    ),
-    mandatory_via_depends_on: evaluateDependsOnValue(
-      field.mandatory_depends_on,
-      props.data,
-    ),
-  }
-
-  _field.visible = isFieldVisible(_field)
-  return _field
-}
-
-function parsedSection(section) {
-  section.visible = section.columns.some((column) =>
-    column.fields.some((field) => field.visible),
-  )
-
-  // to handle special case
-  if (section.hidden) {
-    section.visible = false
-  }
-  return section
-}
-
-function isFieldVisible(field) {
-  if (props.preview) return true
-  return (
-    (field.fieldtype == 'Check' ||
-      (field.read_only && props.data[field.fieldname]) ||
-      !field.read_only) &&
-    (!field.depends_on || field.display_via_depends_on) &&
-    !field.hidden
-  )
-}
-
-function firstVisibleIndex(sections) {
-  return sections.findIndex((section) => section.visible)
-}
-
-const tabIndex = ref(0)
-
-const getPlaceholder = (field) => {
-  if (field.placeholder) {
-    return __(field.placeholder)
-  }
-  if (['Select', 'Link'].includes(field.fieldtype)) {
-    return __('Select {0}', [__(field.label)])
-  } else {
-    return __('Enter {0}', [__(field.label)])
-  }
-}
-</script>
-
-<style scoped>
-:deep(.form-control.prefix select) {
-  padding-left: 2rem;
-}
-</style>
diff --git a/frontend/src/components/FieldLayout/Column.vue b/frontend/src/components/FieldLayout/Column.vue
new file mode 100644
index 00000000..5f7f5bf0
--- /dev/null
+++ b/frontend/src/components/FieldLayout/Column.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="column flex flex-col gap-4 w-full">
+    <div
+      v-if="column.label && !column.hideLabel"
+      class="text-ink-gray-9 max-w-fit text-base"
+    >
+      {{ column.label }}
+    </div>
+    <template v-for="field in column.fields" :key="field.fieldname">
+      <Field :field="field" :data-name="field.fieldname" />
+    </template>
+  </div>
+</template>
+<script setup>
+import Field from '@/components/FieldLayout/Field.vue'
+
+const props = defineProps({
+  column: Object,
+})
+</script>
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
new file mode 100644
index 00000000..19dc5ae2
--- /dev/null
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -0,0 +1,261 @@
+<template>
+  <div v-if="field.visible" class="field">
+    <div v-if="field.fieldtype != 'Check'" class="mb-2 text-sm text-ink-gray-5">
+      {{ __(field.label) }}
+      <span
+        v-if="
+          field.reqd ||
+          (field.mandatory_depends_on && field.mandatory_via_depends_on)
+        "
+        class="text-ink-red-3"
+        >*</span
+      >
+    </div>
+    <FormControl
+      v-if="field.read_only && field.fieldtype !== 'Check'"
+      type="text"
+      :placeholder="getPlaceholder(field)"
+      v-model="data[field.fieldname]"
+      :disabled="true"
+    />
+    <Grid
+      v-else-if="field.fieldtype === 'Table'"
+      v-model="data[field.fieldname]"
+      :doctype="field.options"
+      :parentDoctype="doctype"
+    />
+    <FormControl
+      v-else-if="field.fieldtype === 'Select'"
+      type="select"
+      class="form-control"
+      :class="field.prefix ? 'prefix' : ''"
+      :options="field.options"
+      v-model="data[field.fieldname]"
+      :placeholder="getPlaceholder(field)"
+    >
+      <template v-if="field.prefix" #prefix>
+        <IndicatorIcon :class="field.prefix" />
+      </template>
+    </FormControl>
+    <div v-else-if="field.fieldtype == 'Check'" class="flex items-center gap-2">
+      <FormControl
+        class="form-control"
+        type="checkbox"
+        v-model="data[field.fieldname]"
+        @change="(e) => (data[field.fieldname] = e.target.checked)"
+        :disabled="Boolean(field.read_only)"
+      />
+      <label
+        class="text-sm text-ink-gray-5"
+        @click="
+          () => {
+            if (!Boolean(field.read_only)) {
+              data[field.fieldname] = !data[field.fieldname]
+            }
+          }
+        "
+      >
+        {{ __(field.label) }}
+        <span class="text-ink-red-3" v-if="field.mandatory">*</span>
+      </label>
+    </div>
+    <div class="flex gap-1" v-else-if="field.fieldtype === 'Link'">
+      <Link
+        class="form-control flex-1 truncate"
+        :value="data[field.fieldname]"
+        :doctype="field.options"
+        :filters="field.filters"
+        @change="(v) => (data[field.fieldname] = v)"
+        :placeholder="getPlaceholder(field)"
+        :onCreate="field.create"
+      />
+      <Button
+        v-if="data[field.fieldname] && field.edit"
+        class="shrink-0"
+        :label="__('Edit')"
+        @click="field.edit(data[field.fieldname])"
+      >
+        <template #prefix>
+          <EditIcon class="h-4 w-4" />
+        </template>
+      </Button>
+    </div>
+
+    <Link
+      v-else-if="field.fieldtype === 'User'"
+      class="form-control"
+      :value="data[field.fieldname] && getUser(data[field.fieldname]).full_name"
+      :doctype="field.options"
+      :filters="field.filters"
+      @change="(v) => (data[field.fieldname] = v)"
+      :placeholder="getPlaceholder(field)"
+      :hideMe="true"
+    >
+      <template #prefix>
+        <UserAvatar
+          v-if="data[field.fieldname]"
+          class="mr-2"
+          :user="data[field.fieldname]"
+          size="sm"
+        />
+      </template>
+      <template #item-prefix="{ option }">
+        <UserAvatar class="mr-2" :user="option.value" size="sm" />
+      </template>
+      <template #item-label="{ option }">
+        <Tooltip :text="option.value">
+          <div class="cursor-pointer">
+            {{ getUser(option.value).full_name }}
+          </div>
+        </Tooltip>
+      </template>
+    </Link>
+    <DateTimePicker
+      v-else-if="field.fieldtype === 'Datetime'"
+      v-model="data[field.fieldname]"
+      icon-left=""
+      :formatter="(date) => getFormat(date, '', true, true)"
+      :placeholder="getPlaceholder(field)"
+      input-class="border-none"
+    />
+    <DatePicker
+      v-else-if="field.fieldtype === 'Date'"
+      icon-left=""
+      v-model="data[field.fieldname]"
+      :formatter="(date) => getFormat(date, '', true)"
+      :placeholder="getPlaceholder(field)"
+      input-class="border-none"
+    />
+    <FormControl
+      v-else-if="
+        ['Small Text', 'Text', 'Long Text', 'Code'].includes(field.fieldtype)
+      "
+      type="textarea"
+      :placeholder="getPlaceholder(field)"
+      v-model="data[field.fieldname]"
+    />
+    <FormControl
+      v-else-if="['Int'].includes(field.fieldtype)"
+      type="number"
+      :placeholder="getPlaceholder(field)"
+      v-model="data[field.fieldname]"
+    />
+    <FormControl
+      v-else-if="field.fieldtype === 'Percent'"
+      type="text"
+      :value="getFormattedPercent(field.fieldname, data)"
+      :placeholder="getPlaceholder(field)"
+      :disabled="Boolean(field.read_only)"
+      @change="data[field.fieldname] = flt($event.target.value)"
+    />
+    <FormControl
+      v-else-if="field.fieldtype === 'Float'"
+      type="text"
+      :value="getFormattedFloat(field.fieldname, data)"
+      :placeholder="getPlaceholder(field)"
+      :disabled="Boolean(field.read_only)"
+      @change="data[field.fieldname] = flt($event.target.value)"
+    />
+    <FormControl
+      v-else-if="field.fieldtype === 'Currency'"
+      type="text"
+      :value="getFormattedCurrency(field.fieldname, data)"
+      :placeholder="getPlaceholder(field)"
+      :disabled="Boolean(field.read_only)"
+      @change="data[field.fieldname] = flt($event.target.value)"
+    />
+    <FormControl
+      v-else
+      type="text"
+      :placeholder="getPlaceholder(field)"
+      v-model="data[field.fieldname]"
+      :disabled="Boolean(field.read_only)"
+    />
+  </div>
+</template>
+<script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import Grid from '@/components/Controls/Grid.vue'
+import { getFormat, evaluateDependsOnValue } from '@/utils'
+import { flt } from '@/utils/numberFormat.js'
+import { getMeta } from '@/stores/meta'
+import { usersStore } from '@/stores/users'
+import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
+import { computed, inject } from 'vue'
+
+const props = defineProps({
+  field: Object,
+})
+
+const data = inject('data')
+const doctype = inject('doctype')
+const preview = inject('preview')
+
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta(doctype)
+const { getUser } = usersStore()
+
+const field = computed(() => {
+  let field = props.field
+  if (field.fieldtype == 'Select' && typeof field.options === 'string') {
+    field.options = field.options.split('\n').map((option) => {
+      return { label: option, value: option }
+    })
+
+    if (field.options[0].value !== '') {
+      field.options.unshift({ label: '', value: '' })
+    }
+  }
+
+  if (field.fieldtype === 'Link' && field.options === 'User') {
+    field.fieldtype = 'User'
+  }
+
+  let _field = {
+    ...field,
+    filters: field.link_filters && JSON.parse(field.link_filters),
+    placeholder: field.placeholder || field.label,
+    display_via_depends_on: evaluateDependsOnValue(
+      field.depends_on,
+      data.value,
+    ),
+    mandatory_via_depends_on: evaluateDependsOnValue(
+      field.mandatory_depends_on,
+      data.value,
+    ),
+  }
+
+  _field.visible = isFieldVisible(_field)
+  return _field
+})
+
+function isFieldVisible(field) {
+  if (preview.value) return true
+  return (
+    (field.fieldtype == 'Check' ||
+      (field.read_only && data.value[field.fieldname]) ||
+      !field.read_only) &&
+    (!field.depends_on || field.display_via_depends_on) &&
+    !field.hidden
+  )
+}
+
+const getPlaceholder = (field) => {
+  if (field.placeholder) {
+    return __(field.placeholder)
+  }
+  if (['Select', 'Link'].includes(field.fieldtype)) {
+    return __('Select {0}', [__(field.label)])
+  } else {
+    return __('Enter {0}', [__(field.label)])
+  }
+}
+</script>
+<style scoped>
+:deep(.form-control.prefix select) {
+  padding-left: 2rem;
+}
+</style>
diff --git a/frontend/src/components/FieldLayout/FieldLayout.vue b/frontend/src/components/FieldLayout/FieldLayout.vue
new file mode 100644
index 00000000..45c588d9
--- /dev/null
+++ b/frontend/src/components/FieldLayout/FieldLayout.vue
@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="flex flex-col"
+    :class="{
+      'border border-outline-gray-1 rounded-lg': hasTabs,
+      'border-outline-gray-modals': hasTabs,
+    }"
+  >
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <TabList :class="!hasTabs ? 'hidden' : 'border-outline-gray-modals'" />
+      <TabPanel v-slot="{ tab }">
+        <div
+          class="sections overflow-hidden"
+          :class="{ 'my-4 sm:my-5': hasTabs }"
+        >
+          <template v-for="section in tab.sections" :key="section.name">
+            <Section :section="section" :data-name="section.name" />
+          </template>
+        </div>
+      </TabPanel>
+    </Tabs>
+  </div>
+</template>
+
+<script setup>
+import Section from '@/components/FieldLayout/Section.vue'
+import { Tabs, TabList, TabPanel } from 'frappe-ui'
+import { ref, computed, provide } from 'vue'
+
+const props = defineProps({
+  tabs: Array,
+  data: Object,
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const tabIndex = ref(0)
+
+const hasTabs = computed(() => {
+  return (
+    props.tabs.length > 1 || (props.tabs.length == 1 && props.tabs[0].label)
+  )
+})
+
+provide(
+  'data',
+  computed(() => props.data),
+)
+provide('hasTabs', hasTabs)
+provide('doctype', props.doctype)
+provide('preview', props.preview)
+</script>
+<style scoped>
+.section:not(:has(.field)) {
+  display: none;
+}
+
+.section:has(.field):nth-child(1 of .section:has(.field)) {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+</style>
diff --git a/frontend/src/components/FieldLayout/Section.vue b/frontend/src/components/FieldLayout/Section.vue
new file mode 100644
index 00000000..e305fcb2
--- /dev/null
+++ b/frontend/src/components/FieldLayout/Section.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-if="!section.hidden"
+    class="section"
+    :class="[
+      section.hideBorder
+        ? 'pt-4'
+        : 'border-t border-outline-gray-modals mt-5 pt-5',
+    ]"
+  >
+    <Section
+      class="flex sm:flex-row flex-col gap-4 text-lg font-medium"
+      :class="{ 'px-3 sm:px-5': hasTabs }"
+      :labelClass="['text-lg font-medium', { 'px-3 sm:px-5': hasTabs }]"
+      :label="section.label"
+      :hideLabel="section.hideLabel || !section.label"
+      :opened="section.opened"
+      :collapsible="section.collapsible"
+      collapseIconPosition="right"
+    >
+      <template v-for="column in section.columns" :key="column.name">
+        <Column
+          :class="{ 'mt-6': section.label && !section.hideLabel }"
+          :column="column"
+          :data-name="column.name"
+        />
+      </template>
+    </Section>
+  </div>
+</template>
+<script setup>
+import Section from '@/components/Section.vue'
+import Column from '@/components/FieldLayout/Column.vue'
+import { inject } from 'vue'
+
+const props = defineProps({
+  section: Object,
+})
+
+const hasTabs = inject('hasTabs')
+</script>
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index 9f1a3f1b..b9f97750 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -50,7 +50,7 @@
 
 <script setup>
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 36ddd6b6..1cf3c8a2 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup>
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
diff --git a/frontend/src/components/Modals/DataFieldsModal.vue b/frontend/src/components/Modals/DataFieldsModal.vue
index 3c4a6ec0..4d4a80c8 100644
--- a/frontend/src/components/Modals/DataFieldsModal.vue
+++ b/frontend/src/components/Modals/DataFieldsModal.vue
@@ -40,7 +40,6 @@
             v-else
             :tabs="tabs.data"
             :data="{}"
-            :modal="true"
             :preview="true"
           />
         </div>
@@ -49,7 +48,7 @@
   </Dialog>
 </template>
 <script setup>
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { capture } from '@/telemetry'
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 57678888..a869816e 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -72,7 +72,7 @@
 
 <script setup>
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
@@ -111,8 +111,8 @@ const deal = reactive({
   deal_owner: '',
 })
 
-const hasOrganizationSections = ref(false)
-const hasContactSections = ref(false)
+const hasOrganizationSections = ref(true)
+const hasContactSections = ref(true)
 
 const isDealCreating = ref(false)
 const chooseExistingContact = ref(false)
@@ -144,6 +144,7 @@ const tabs = createResource({
   params: { doctype: 'CRM Deal', type: 'Quick Entry' },
   auto: true,
   transform: (_tabs) => {
+    hasOrganizationSections.value = false
     return _tabs.forEach((tab) => {
       tab.sections.forEach((section) => {
         section.columns.forEach((column) => {
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 0199834f..81b44903 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -43,7 +43,7 @@
 
 <script setup>
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 4ca2cd38..718c46ed 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup>
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
diff --git a/frontend/src/components/Modals/QuickEntryModal.vue b/frontend/src/components/Modals/QuickEntryModal.vue
index 2b61dc7e..ec237520 100644
--- a/frontend/src/components/Modals/QuickEntryModal.vue
+++ b/frontend/src/components/Modals/QuickEntryModal.vue
@@ -43,7 +43,7 @@
   </Dialog>
 </template>
 <script setup>
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { capture } from '@/telemetry'
diff --git a/frontend/src/components/Section.vue b/frontend/src/components/Section.vue
index 385c5517..c64cead6 100644
--- a/frontend/src/components/Section.vue
+++ b/frontend/src/components/Section.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
     <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-      <div v-if="!hide" class="column-header h-8 flex items-center justify-between">
+      <div
+        v-if="!hide"
+        class="section-header flex items-center justify-between"
+        :class="headerClass"
+      >
         <div
           class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
           :class="labelClass"
@@ -68,6 +72,10 @@ const props = defineProps({
     type: [String, Object, Array],
     default: '',
   },
+  headerClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
 })
 
 const hide = ref(props.hideLabel)
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index b2445d5a..b50f35da 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -36,7 +36,7 @@
   </div>
 </template>
 <script setup>
-import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import {
   createDocumentResource,
   createResource,
@@ -79,7 +79,6 @@ const data = createDocumentResource({
   auto: true,
   setValue: {
     onSuccess: () => {
-      error.value = null
       createToast({
         title: __('Success'),
         text: __(props.successMessage),
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 29d5dfff..878bf695 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -9,6 +9,7 @@
         <div class="p-1 sm:p-3">
           <Section
             labelClass="px-2 font-semibold"
+            headerClass="h-8"
             :label="section.label"
             :hideLabel="!section.label"
             :opened="section.opened"