fix: implemented new tabs layout

frappe-ui

@@ -1 +1 @@
-Subproject commit 6b2cdc8b6ea1f31ff9a0202433bb5d7c4df946b0
+Subproject commit ade8016b7108ed4903928661f9df9204d3ee57bf

frontend/src/components/Activities/DataFields.vue

@@ -12,7 +12,10 @@
       />
     </div>
     <div class="flex gap-1">
-      <Button v-if="isManager()" @click="showDataFieldsModal = true">
+      <Button
+        v-if="isManager() && !isMobileView"
+        @click="showDataFieldsModal = true"
+      >
         <EditIcon class="h-4 w-4" />
       </Button>
       <Button
@@ -60,6 +63,7 @@ import { Badge, createResource, createDocumentResource } from 'frappe-ui'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import { createToast } from '@/utils'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { ref } from 'vue'
 
 const props = defineProps({

frontend/src/components/FieldLayout.vue

@@ -6,254 +6,267 @@
       'border-outline-gray-modals': modal && hasTabs,
     }"
   >
-    <Tabs
+    <Tabs as="div" v-model="tabIndex" :tabs="_tabs">
-      v-model="tabIndex"
+      <TabList
-      class="!h-full"
+        :class="!hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''"
-      :tabs="_tabs"
+      />
-      v-slot="{ tab }"
+      <TabPanel v-slot="{ tab }">
-      :tablistClass="
+        <div
-        !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
+          class="sections overflow-hidden"
-      "
+          :class="{ 'my-4 sm:my-6': hasTabs }"
-    >
+        >
-      <div
+          <template v-for="(section, i) in tab.sections" :key="section.name">
-        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)"
+              v-if="section.visible"
-              class="w-full section-border"
+              class="section"
-              :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
+              :data-name="section.name"
-            />
-            <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-if="i !== firstVisibleIndex(tab.sections)"
-                v-for="column in section.columns"
+                class="w-full section-border"
-                :key="column.name"
+                :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
-                :data-name="column.name"
+              />
+              <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
-                  v-if="column.label && !column.hideLabel"
+                  class="column flex flex-col gap-4 w-full"
-                  class="text-ink-gray-9 max-w-fit text-base"
+                  v-for="column in section.columns"
+                  :key="column.name"
+                  :data-name="column.name"
                 >
-                  {{ column.label }}
+                  <div
-                </div>
+                    v-if="column.label && !column.hideLabel"
-                <template v-for="field in column.fields" :key="field.fieldname">
+                    class="text-ink-gray-9 max-w-fit text-base"
-                  <div v-if="field.visible" class="field">
+                  >
-                    <div
+                    {{ column.label }}
-                      v-if="field.fieldtype != 'Check'"
+                  </div>
-                      class="mb-2 text-sm text-ink-gray-5"
+                  <template
-                    >
+                    v-for="field in column.fields"
-                      {{ __(field.label) }}
+                    :key="field.fieldname"
-                      <span
+                  >
-                        v-if="
+                    <div v-if="field.visible" class="field">
-                          field.reqd ||
+                      <div
-                          (field.mandatory_depends_on &&
+                        v-if="field.fieldtype != 'Check'"
-                            field.mandatory_via_depends_on)
+                        class="mb-2 text-sm text-ink-gray-5"
-                        "
-                        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
+                          v-if="
+                            field.reqd ||
+                            (field.mandatory_depends_on &&
+                              field.mandatory_via_depends_on)
+                          "
+                          class="text-ink-red-3"
                           >*</span
                         >
-                      </label>
+                      </div>
-                    </div>
+                      <FormControl
-                    <div
+                        v-if="field.read_only && field.fieldtype !== 'Check'"
-                      class="flex gap-1"
+                        type="text"
-                      v-else-if="field.fieldtype === 'Link'"
+                        :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
-                        class="form-control flex-1 truncate"
+                        v-else-if="field.fieldtype === 'User'"
-                        :value="data[field.fieldname]"
+                        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)"
-                        :onCreate="field.create"
+                        :hideMe="true"
-                      />
-                      <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" />
+                          <UserAvatar
+                            v-if="data[field.fieldname]"
+                            class="mr-2"
+                            :user="data[field.fieldname]"
+                            size="sm"
+                          />
                         </template>
-                      </Button>
+                        <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>
-                    <Link
+                </div>
-                      v-else-if="field.fieldtype === 'User'"
+              </Section>
-                      class="form-control"
+            </div>
-                      :value="
+          </template>
-                        data[field.fieldname] &&
+        </div>
-                        getUser(data[field.fieldname]).full_name
+      </TabPanel>
-                      "
-                      :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>
     </Tabs>
   </div>
 </template>
@@ -269,7 +282,14 @@ import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
-import { Tabs, Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
+import {
+  Tabs,
+  TabList,
+  TabPanel,
+  Tooltip,
+  DatePicker,
+  DateTimePicker,
+} from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/Modals/AddressModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -53,6 +53,7 @@ import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'

frontend/src/components/Modals/ContactModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -48,6 +48,7 @@
 import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { call, createResource } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'

frontend/src/components/Modals/DealModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -75,6 +75,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { Switch, createResource } from 'frappe-ui'
 import { computed, ref, reactive, onMounted, nextTick, watch } from 'vue'

frontend/src/components/Modals/LeadModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -46,6 +46,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { createResource } from 'frappe-ui'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'

frontend/src/components/Modals/OrganizationModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -48,6 +48,7 @@
 import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'

frontend/src/components/Section.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-      <div v-if="!hide" class="column-header flex items-center justify-between">
+      <div v-if="!hide" class="column-header h-8 flex items-center justify-between">
         <div
           class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
           :class="labelClass"

frontend/src/components/SidePanelLayout.vue

@@ -6,7 +6,7 @@
           v-if="i !== firstVisibleIndex()"
           class="w-full section-border h-px border-t"
         />
-        <div class="p-3">
+        <div class="p-1 sm:p-3">
           <Section
             labelClass="px-2 font-semibold"
             :label="section.label"
@@ -396,6 +396,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
 import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
@@ -481,6 +482,7 @@ function parsedField(field) {
 function parsedSection(section, editButtonAdded) {
   let isContactSection = section.name == 'contacts_section'
   section.showEditButton = !(
+    isMobileView.value ||
     !isManager() ||
     isContactSection ||
     editButtonAdded

frontend/src/pages/Contact.vue

@@ -129,8 +129,8 @@
         />
       </div>
     </Resizer>
-    <Tabs class="!h-full" v-model="tabIndex" :tabs="tabs">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
+      <template #tab-item="{ tab, selected }">
         <button
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
           :class="{ 'text-ink-gray-9': selected }"
@@ -148,7 +148,7 @@
           </Badge>
         </button>
       </template>
-      <template #default="{ tab }">
+      <template #tab-panel="{ tab }">
         <DealsListView
           v-if="tab.label === 'Deals' && rows.length"
           class="mt-4"

frontend/src/pages/Deal.vue

@@ -37,15 +37,17 @@
     </template>
   </LayoutHeader>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" :tabs="tabs" class="!h-full">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
-      <Activities
+      <template #tab-panel>
-        ref="activities"
+        <Activities
-        doctype="CRM Deal"
+          ref="activities"
-        :tabs="tabs"
+          doctype="CRM Deal"
-        v-model:reload="reload"
+          :tabs="tabs"
-        v-model:tabIndex="tabIndex"
+          v-model:reload="reload"
-        v-model="deal"
+          v-model:tabIndex="tabIndex"
-      />
+          v-model="deal"
+        />
+      </template>
     </Tabs>
     <Resizer side="right" class="flex flex-col justify-between border-l">
       <div

frontend/src/pages/Lead.vue

@@ -23,9 +23,7 @@
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
-              <IndicatorIcon
+              <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
-                :class="getLeadStatus(lead.data.status).color"
-              />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -44,15 +42,17 @@
     </template>
   </LayoutHeader>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" class="!h-full" :tabs="tabs">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
-      <Activities
+      <template #tab-panel>
-        ref="activities"
+        <Activities
-        doctype="CRM Lead"
+          ref="activities"
-        :tabs="tabs"
+          doctype="CRM Lead"
-        v-model:reload="reload"
+          :tabs="tabs"
-        v-model:tabIndex="tabIndex"
+          v-model:reload="reload"
-        v-model="lead"
+          v-model:tabIndex="tabIndex"
-      />
+          v-model="lead"
+        />
+      </template>
     </Tabs>
     <Resizer class="flex flex-col justify-between border-l" side="right">
       <div

frontend/src/pages/MobileContact.vue

@@ -103,13 +103,8 @@
         </div>
       </template>
     </FileUploader>
-    <Tabs
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
-      v-model="tabIndex"
+      <TabList class="!px-4" v-slot="{ tab, selected }">
-      :tabs="tabs"
-      tablistClass="!px-4"
-      class="overflow-auto"
-    >
-      <template #tab="{ tab, selected }">
         <button
           v-if="tab.name == 'Deals'"
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
@@ -127,31 +122,20 @@
             {{ tab.count }}
           </Badge>
         </button>
-      </template>
+      </TabList>
-      <template #default="{ tab }">
+      <TabPanel v-slot="{ tab }">
         <div v-if="tab.name == 'Details'">
           <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.data"
-                :key="section.name"
+              doctype="Contact"
-                class="flex flex-col px-2 py-3 sm:p-3"
+              @update="updateField"
-                :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+              @reload="sections.reload"
-              >
+            />
-                <Section :label="section.label" :opened="section.opened">
-                  <SidePanelLayout
-                    :fields="section.columns[0].fields"
-                    :isLastSection="i == fieldsLayout.data.length - 1"
-                    doctype="Contact"
-                    v-model="contact.data"
-                    @update="updateField"
-                  />
-                </Section>
-              </div>
-            </div>
           </div>
         </div>
         <DealsListView
@@ -170,7 +154,7 @@
             <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
           </div>
         </div>
-      </template>
+      </TabPanel>
     </Tabs>
   </div>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
@@ -178,7 +162,6 @@
 
 <script setup>
 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 DetailsIcon from '@/components/Icons/DetailsIcon.vue'
@@ -201,6 +184,8 @@ import {
   Avatar,
   FileUploader,
   Tabs,
+  TabList,
+  TabPanel,
   call,
   createResource,
   usePageMeta,
@@ -347,19 +332,19 @@ const rows = computed(() => {
   return deals.data.map((row) => getDealRowObject(row))
 })
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'Contact'],
   params: { doctype: 'Contact' },
   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') {
+        if (field.fieldname === 'email_id') {
           return {
             ...field,
             type: 'dropdown',
@@ -418,7 +403,8 @@ function getParsedFields(data) {
         } else if (field.name === 'mobile_no') {
           return {
             ...field,
-            type: 'dropdown',
+            read_only: false,
+            fieldtype: 'dropdown',
             options:
               contact.data?.phone_nos?.map((phone) => {
                 return {

frontend/src/pages/MobileDeal.vue

@@ -48,139 +48,141 @@
     </div>
   </div>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <Tabs
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
-      v-model="tabIndex"
+      <TabList class="!px-3" />
-      v-slot="{ tab }"
+      <TabPanel v-slot="{ tab }">
-      :tabs="tabs"
+        <div v-if="tab.name == 'Details'">
-      tablistClass="!px-3"
+          <SLASection
-      class="overflow-auto"
+            v-if="deal.data.sla_status"
-    >
-      <div v-if="tab.name == 'Details'">
-        <SLASection
-          v-if="deal.data.sla_status"
-          v-model="deal.data"
-          @updateField="updateField"
-        />
-        <div
-          v-if="sections.data"
-          class="flex flex-1 flex-col justify-between overflow-hidden"
-        >
-          <SidePanelLayout
             v-model="deal.data"
-            :sections="sections.data"
+            @updateField="updateField"
-            doctype="CRM Deal"
+          />
-            v-slot="{ section }"
+          <div
-            @update="updateField"
+            v-if="sections.data"
-            @reload="sections.reload"
+            class="flex flex-1 flex-col justify-between overflow-hidden"
           >
-            <div
+            <SidePanelLayout
-              v-if="section.name == 'contacts_section'"
+              v-model="deal.data"
-              class="contacts-area"
+              :sections="sections.data"
+              doctype="CRM Deal"
+              v-slot="{ section }"
+              @update="updateField"
+              @reload="sections.reload"
             >
               <div
-                v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
+                v-if="section.name == 'contacts_section'"
-                class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
+                class="contacts-area"
               >
-                <LoadingIndicator class="h-4 w-4" />
+                <div
-                <span>{{ __('Loading...') }}</span>
+                  v-if="
-              </div>
+                    dealContacts?.loading && dealContacts?.data?.length == 0
-              <div
+                  "
-                v-else-if="section.contacts.length"
+                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
-                v-for="(contact, i) in section.contacts"
+                >
-                :key="contact.name"
+                  <LoadingIndicator class="h-4 w-4" />
-              >
+                  <span>{{ __('Loading...') }}</span>
-                <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.name)">
-                            <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>
-                  </Section>
                 </div>
                 <div
-                  v-if="i != section.contacts.length - 1"
+                  v-else-if="section.contacts.length"
-                  class="mx-2 h-px border-t border-outline-gray-modals"
+                  v-for="(contact, i) in section.contacts"
-                />
+                  :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.name)">
+                              <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>
+                    </Section>
+                  </div>
+                  <div
+                    v-if="i != section.contacts.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>
-                v-else
+          </div>
-                class="flex h-20 items-center justify-center text-base text-ink-gray-5"
-              >
-                {{ __('No contacts added') }}
-              </div>
-            </div>
-          </SidePanelLayout>
         </div>
-      </div>
+        <Activities
-      <Activities
+          v-else
-        v-else
+          doctype="CRM Deal"
-        doctype="CRM Deal"
+          :tabs="tabs"
-        :tabs="tabs"
+          v-model:reload="reload"
-        v-model:reload="reload"
+          v-model:tabIndex="tabIndex"
-        v-model:tabIndex="tabIndex"
+          v-model="deal"
-        v-model="deal"
+        />
-      />
+      </TabPanel>
     </Tabs>
   </div>
   <OrganizationModal
@@ -241,6 +243,8 @@ import {
   Dropdown,
   Avatar,
   Tabs,
+  TabList,
+  TabPanel,
   Breadcrumbs,
   call,
   usePageMeta,

frontend/src/pages/MobileLead.vue

@@ -53,40 +53,37 @@
     </div>
   </div>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
-      v-model="tabIndex"
+      <TabList class="!px-3" />
-      v-slot="{ tab }"
+      <TabPanel v-slot="{ tab }">
-      :tabs="tabs"
+        <div v-if="tab.name == 'Details'">
-      tablistClass="!px-3"
+          <SLASection
-      class="overflow-auto"
+            v-if="lead.data.sla_status"
-    >
-      <div v-if="tab.name == 'Details'">
-        <SLASection
-          v-if="lead.data.sla_status"
-          v-model="lead.data"
-          @updateField="updateField"
-        />
-        <div
-          v-if="sections.data"
-          class="flex flex-1 flex-col justify-between overflow-hidden"
-        >
-          <SidePanelLayout
             v-model="lead.data"
-            :sections="sections.data"
+            @updateField="updateField"
-            doctype="CRM Lead"
-            @update="updateField"
-            @reload="sections.reload"
           />
+          <div
+            v-if="sections.data"
+            class="flex flex-1 flex-col justify-between overflow-hidden"
+          >
+            <SidePanelLayout
+              v-model="lead.data"
+              :sections="sections.data"
+              doctype="CRM Lead"
+              @update="updateField"
+              @reload="sections.reload"
+            />
+          </div>
         </div>
-      </div>
+        <Activities
-      <Activities
+          v-else
-        v-else
+          doctype="CRM Lead"
-        doctype="CRM Lead"
+          :tabs="tabs"
-        :tabs="tabs"
+          v-model:reload="reload"
-        v-model:reload="reload"
+          v-model:tabIndex="tabIndex"
-        v-model:tabIndex="tabIndex"
+          v-model="lead"
-        v-model="lead"
+        />
-      />
+      </TabPanel>
     </Tabs>
   </div>
   <Dialog
@@ -193,6 +190,8 @@ import {
   createResource,
   Dropdown,
   Tabs,
+  TabList,
+  TabPanel,
   Switch,
   Breadcrumbs,
   call,

frontend/src/pages/MobileOrganization.vue

@@ -85,13 +85,8 @@
         </div>
       </template>
     </FileUploader>
-    <Tabs
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
-      v-model="tabIndex"
+      <TabList class="!px-4" v-slot="{ tab, selected }">
-      :tabs="tabs"
-      tablistClass="!px-4"
-      class="overflow-auto"
-    >
-      <template #tab="{ tab, selected }">
         <button
           v-if="tab.name !== 'Details'"
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
@@ -109,32 +104,20 @@
             {{ tab.count }}
           </Badge>
         </button>
-      </template>
+      </TabList>
-      <template #default="{ tab }">
+      <TabPanel v-slot="{ tab }">
         <div v-if="tab.name == 'Details'">
           <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.data"
-                :key="section.name"
+              doctype="CRM Organization"
-                class="flex flex-col px-2 py-3 sm:p-3"
+              @update="updateField"
-                :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+              @reload="sections.reload"
-              >
+            />
-                <Section :label="section.label" :opened="section.opened">
-                  <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>
         </div>
         <DealsListView
@@ -160,14 +143,13 @@
             <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
           </div>
         </div>
-      </template>
+      </TabPanel>
     </Tabs>
   </div>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -191,6 +173,8 @@ import {
   FileUploader,
   Dropdown,
   Tabs,
+  TabList,
+  TabPanel,
   call,
   createListResource,
   createDocumentResource,
@@ -326,19 +310,19 @@ const showAddressModal = ref(false)
 const _organization = ref({})
 const _address = ref({})
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'CRM Organization'],
   params: { doctype: 'CRM Organization' },
   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') {
+        if (field.fieldname === 'address') {
           return {
             ...field,
             create: (value, close) => {

frontend/src/pages/Organization.vue

@@ -114,8 +114,8 @@
         />
       </div>
     </Resizer>
-    <Tabs class="!h-full" v-model="tabIndex" :tabs="tabs">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
+      <template #tab-item="{ tab, selected }">
         <button
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
           :class="{ 'text-ink-gray-9': selected }"
@@ -133,7 +133,7 @@
           </Badge>
         </button>
       </template>
-      <template #default="{ tab }">
+      <template #tab-panel="{ tab }">
         <DealsListView
           class="mt-4"
           v-if="tab.label === 'Deals' && rows.length"