From 8ff9ea380e6a405cd499ded7c05e8428858298cf Mon Sep 17 00:00:00 2001
From: Rajeshbala2020 <rajeshbala.qbs@gmail.com>
Date: Mon, 11 Nov 2024 10:54:58 +0530
Subject: [PATCH 01/13] multiple avatar component array reverse correction

---
 frontend/src/components/MultipleAvatar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/MultipleAvatar.vue b/frontend/src/components/MultipleAvatar.vue
index d25670e3b..92604bd21 100644
--- a/frontend/src/components/MultipleAvatar.vue
+++ b/frontend/src/components/MultipleAvatar.vue
@@ -48,5 +48,5 @@ const props = defineProps({
     default: 'md',
   },
 })
-const reverseAvatars = computed(() => props.avatars.reverse())
+const reverseAvatars = computed(() => [...props.avatars].reverse())
 </script>

From 3dc45c3c8cd3f44a971c7d408478e43f535a500c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 15:30:45 +0530
Subject: [PATCH 02/13] fix: remove the scroll behaviour in listview

---
 frontend/src/router.js | 30 ------------------------------
 1 file changed, 30 deletions(-)

diff --git a/frontend/src/router.js b/frontend/src/router.js
index a64bdd8ba..7ce0f1105 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -18,7 +18,6 @@ const routes = [
     path: '/leads/view/:viewType?',
     name: 'Leads',
     component: () => import('@/pages/Leads.vue'),
-    meta: { scrollPos: { top: 0, left: 0 } },
   },
   {
     path: '/leads/:leadId',
@@ -31,7 +30,6 @@ const routes = [
     path: '/deals/view/:viewType?',
     name: 'Deals',
     component: () => import('@/pages/Deals.vue'),
-    meta: { scrollPos: { top: 0, left: 0 } },
   },
   {
     path: '/deals/:dealId',
@@ -56,7 +54,6 @@ const routes = [
     path: '/contacts/view/:viewType?',
     name: 'Contacts',
     component: () => import('@/pages/Contacts.vue'),
-    meta: { scrollPos: { top: 0, left: 0 } },
   },
   {
     path: '/contacts/:contactId',
@@ -69,7 +66,6 @@ const routes = [
     path: '/organizations/view/:viewType?',
     name: 'Organizations',
     component: () => import('@/pages/Organizations.vue'),
-    meta: { scrollPos: { top: 0, left: 0 } },
   },
   {
     path: '/organizations/:organizationId',
@@ -82,14 +78,12 @@ const routes = [
     path: '/call-logs/view/:viewType?',
     name: 'Call Logs',
     component: () => import('@/pages/CallLogs.vue'),
-    meta: { scrollPos: { top: 0, left: 0 } },
   },
   {
     alias: '/email-templates',
     path: '/email-templates/view/:viewType?',
     name: 'Email Templates',
     component: () => import('@/pages/EmailTemplates.vue'),
-    meta: { scrollPos: { top: 0, left: 0 } },
   },
   {
     path: '/email-templates/:emailTemplateId',
@@ -108,29 +102,9 @@ const handleMobileView = (componentName) => {
   return window.innerWidth < 768 ? `Mobile${componentName}` : componentName
 }
 
-const scrollBehavior = (to, from, savedPosition) => {
-  if (to.name === from.name) {
-    to.meta?.scrollPos && (to.meta.scrollPos.top = 0)
-    return { left: 0, top: 0 }
-  }
-  const scrollpos = to.meta?.scrollPos || { left: 0, top: 0 }
-
-  if (scrollpos.top > 0) {
-    setTimeout(() => {
-      let el = document.querySelector('#list-rows')
-      el.scrollTo({
-        top: scrollpos.top,
-        left: scrollpos.left,
-        behavior: 'smooth',
-      })
-    }, 300)
-  }
-}
-
 let router = createRouter({
   history: createWebHistory('/crm'),
   routes,
-  scrollBehavior,
 })
 
 router.beforeEach(async (to, from, next) => {
@@ -138,10 +112,6 @@ router.beforeEach(async (to, from, next) => {
 
   isLoggedIn && (await userResource.promise)
 
-  if (from.meta?.scrollPos) {
-    from.meta.scrollPos.top = document.querySelector('#list-rows')?.scrollTop
-  }
-
   if (to.name === 'Home' && isLoggedIn) {
     next({ name: 'Leads' })
   } else if (!isLoggedIn) {

From d1efa543db67574e0f75a8e1e7ea5a80fc3ea162 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 15:31:35 +0530
Subject: [PATCH 03/13] fix: maintain scroll position in ListRows component

---
 .../components/ListViews/CallLogsListView.vue | 181 ++++++++---------
 .../components/ListViews/ContactsListView.vue | 176 ++++++++--------
 .../components/ListViews/DealsListView.vue    |   6 +-
 .../ListViews/EmailTemplatesListView.vue      | 155 +++++++-------
 .../components/ListViews/LeadsListView.vue    |   6 +-
 .../src/components/ListViews/ListRows.vue     |  43 +++-
 .../ListViews/OrganizationsListView.vue       | 159 +++++++--------
 .../components/ListViews/TasksListView.vue    | 192 +++++++++---------
 8 files changed, 472 insertions(+), 446 deletions(-)

diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 4f8071c08..4331237b3 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -11,7 +11,10 @@
     row-key="name"
     v-bind="$attrs"
   >
-    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader
+      class="sm:mx-5 mx-3"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -29,32 +32,52 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows class="mx-3 sm:mx-5" id="list-rows">
-      <ListRow
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <ListRowItem :item="item">
-          <template #prefix>
-            <div v-if="['caller', 'receiver'].includes(column.key)">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.image"
-                :label="item.label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="['type', 'duration'].includes(column.key)">
-              <FeatherIcon :name="item.icon" class="h-3 w-3" />
-            </div>
-          </template>
-          <template #default="{ label }">
-            <div
-              v-if="['modified', 'creation'].includes(column.key)"
-              class="truncate text-base"
+    <ListRows
+      class="mx-3 sm:mx-5"
+      :rows="rows"
+      v-slot="{ idx, column, item }"
+      doctype="CRM Call Log"
+    >
+      <ListRowItem :item="item">
+        <template #prefix>
+          <div v-if="['caller', 'receiver'].includes(column.key)">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.image"
+              :label="item.label"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="['type', 'duration'].includes(column.key)">
+            <FeatherIcon :name="item.icon" class="h-3 w-3" />
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="column.key === 'status'" class="truncate text-base">
+            <Badge
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="__(item.label)"
               @click="
                 (event) =>
                   emit('applyFilter', {
@@ -65,69 +88,46 @@
                     firstColumn: columns[0],
                   })
               "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
-            </div>
-            <div v-else-if="column.key === 'status'" class="truncate text-base">
-              <Badge
-                :variant="'subtle'"
-                :theme="item.color"
-                size="md"
-                :label="__(item.label)"
-                @click="
-                  (event) =>
-                    emit('applyFilter', {
-                      event,
-                      idx,
-                      column,
-                      item,
-                      firstColumn: columns[0],
-                    })
-                "
-              />
-            </div>
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
+            />
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-ink-gray-9"
+            />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
               "
             >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -161,13 +161,12 @@
 <script setup>
 import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListSelectBanner,
   ListRowItem,
   ListFooter,
@@ -232,7 +231,7 @@ const listBulkActionsRef = ref(null)
 
 defineExpose({
   customListActions: computed(
-    () => listBulkActionsRef.value?.customListActions
+    () => listBulkActionsRef.value?.customListActions,
   ),
 })
 </script>
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index ebb0ecba3..c944dcc8e 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -36,96 +36,93 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows class="mx-3 sm:mx-5" id="list-rows">
-      <ListRow
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <ListRowItem :item="item">
-          <template #prefix>
-            <div v-if="column.key === 'full_name'">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.image"
-                :label="item.image_label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'company_name'">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.logo"
-                :label="item.label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="column.key === 'mobile_no'">
-              <PhoneIcon class="h-4 w-4" />
-            </div>
-          </template>
-          <template #default="{ label }">
-            <div
-              v-if="['modified', 'creation'].includes(column.key)"
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
-              "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
-            </div>
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
+    <ListRows
+      class="mx-3 sm:mx-5"
+      :rows="rows"
+      v-slot="{ idx, column, item }"
+      doctype="Contact"
+    >
+      <ListRowItem :item="item">
+        <template #prefix>
+          <div v-if="column.key === 'full_name'">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.image"
+              :label="item.image_label"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'company_name'">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.logo"
+              :label="item.label"
+              size="sm"
+            />
+          </div>
+          <div v-else-if="column.key === 'mobile_no'">
+            <PhoneIcon class="h-4 w-4" />
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-ink-gray-9"
+            />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
               "
             >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -160,13 +157,12 @@
 import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListSelectBanner,
   ListRowItem,
   ListFooter,
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 19ddb30ec..03dd100e7 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -36,7 +36,11 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows :rows="rows" v-slot="{ idx, column, item, row }">
+    <ListRows
+      :rows="rows"
+      v-slot="{ idx, column, item, row }"
+      doctype="CRM Deal"
+    >
       <div v-if="column.key === '_assign'" class="flex items-center">
         <MultipleAvatar
           :avatars="item"
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 604422b7b..52931cbb0 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -10,7 +10,10 @@
     }"
     row-key="name"
   >
-    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader
+      class="sm:mx-5 mx-3"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -28,21 +31,41 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows class="mx-3 sm:mx-5" id="list-rows">
-      <ListRow
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <ListRowItem :item="item">
-          <!-- <template #prefix>
+    <ListRows
+      class="mx-3 sm:mx-5"
+      :rows="rows"
+      v-slot="{ idx, column, item }"
+      doctype="Email Template"
+    >
+      <ListRowItem :item="item">
+        <!-- <template #prefix>
 
           </template> -->
-          <template #default="{ label }">
-            <div
-              v-if="['modified', 'creation'].includes(column.key)"
-              class="truncate text-base"
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="column.key === 'status'" class="truncate text-base">
+            <Badge
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.label"
               @click="
                 (event) =>
                   emit('applyFilter', {
@@ -53,69 +76,46 @@
                     firstColumn: columns[0],
                   })
               "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
-            </div>
-            <div v-else-if="column.key === 'status'" class="truncate text-base">
-              <Badge
-                :variant="'subtle'"
-                :theme="item.color"
-                size="md"
-                :label="item.label"
-                @click="
-                  (event) =>
-                    emit('applyFilter', {
-                      event,
-                      idx,
-                      column,
-                      item,
-                      firstColumn: columns[0],
-                    })
-                "
-              />
-            </div>
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
+            />
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-ink-gray-9"
+            />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
               "
             >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -148,12 +148,11 @@
 <script setup>
 import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import {
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListSelectBanner,
   ListRowItem,
   ListFooter,
@@ -219,7 +218,7 @@ const listBulkActionsRef = ref(null)
 
 defineExpose({
   customListActions: computed(
-    () => listBulkActionsRef.value?.customListActions
+    () => listBulkActionsRef.value?.customListActions,
   ),
 })
 </script>
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 0c9dd942a..ea79c83a5 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -36,7 +36,11 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows :rows="rows" v-slot="{ idx, column, item, row }">
+    <ListRows
+      :rows="rows"
+      v-slot="{ idx, column, item, row }"
+      doctype="CRM Lead"
+    >
       <div v-if="column.key === '_assign'" class="flex items-center">
         <MultipleAvatar
           :avatars="item"
diff --git a/frontend/src/components/ListViews/ListRows.vue b/frontend/src/components/ListViews/ListRows.vue
index f99f1eac2..f0a784909 100644
--- a/frontend/src/components/ListViews/ListRows.vue
+++ b/frontend/src/components/ListViews/ListRows.vue
@@ -15,7 +15,7 @@
           </div>
         </div>
       </ListGroupHeader>
-      <ListGroupRows :group="group" id="list-rows">
+      <ListGroupRows :group="group">
         <ListRow
           v-for="row in group.rows"
           :key="row.name"
@@ -27,7 +27,12 @@
       </ListGroupRows>
     </div>
   </div>
-  <ListRows class="mx-3 sm:mx-5" v-else id="list-rows">
+  <ListRows
+    v-else
+    ref="scrollContainer"
+    class="mx-3 sm:mx-5"
+    @scroll="handleScroll"
+  >
     <ListRow
       v-for="row in reactivieRows"
       :key="row.name"
@@ -40,27 +45,53 @@
 </template>
 
 <script setup>
+import { useStorage } from '@vueuse/core'
 import { ListRows, ListRow, ListGroupHeader, ListGroupRows } from 'frappe-ui'
-
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onBeforeUnmount, onMounted } from 'vue'
 
 const props = defineProps({
   rows: {
     type: Array,
     required: true,
   },
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
 })
 
 const reactivieRows = ref(props.rows)
 
 watch(
   () => props.rows,
-  (val) => (reactivieRows.value = val)
+  (val) => (reactivieRows.value = val),
 )
 
 let showGroupedRows = computed(() => {
   return props.rows.every(
-    (row) => row.group && row.rows && Array.isArray(row.rows)
+    (row) => row.group && row.rows && Array.isArray(row.rows),
   )
 })
+
+const scrollPosition = useStorage(`scrollPosition${props.doctype}`, 0)
+const scrollContainer = ref(null)
+
+const handleScroll = () => {
+  if (scrollContainer.value) {
+    scrollPosition.value = scrollContainer.value.$el.scrollTop
+  }
+}
+
+onBeforeUnmount(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.$el.removeEventListener('scroll', handleScroll)
+  }
+})
+
+onMounted(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.$el.addEventListener('scroll', handleScroll)
+    scrollContainer.value.$el.scrollTop = scrollPosition.value
+  }
+})
 </script>
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index 32b113d0e..5cc57e49e 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -14,7 +14,10 @@
     }"
     row-key="name"
   >
-    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader
+      class="sm:mx-5 mx-3"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -32,84 +35,81 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows class="mx-3 sm:mx-5" id="list-rows">
-      <ListRow
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <ListRowItem :item="item">
-          <template #prefix>
-            <div v-if="column.key === 'organization_name'">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.logo"
-                :label="item.label"
-                size="sm"
-              />
-            </div>
-          </template>
-          <template #default="{ label }">
-            <div
-              v-if="['modified', 'creation'].includes(column.key)"
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
-              "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
-            </div>
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
+    <ListRows
+      class="mx-3 sm:mx-5"
+      :rows="rows"
+      v-slot="{ idx, column, item }"
+      doctype="CRM Organization"
+    >
+      <ListRowItem :item="item">
+        <template #prefix>
+          <div v-if="column.key === 'organization_name'">
+            <Avatar
+              v-if="item.label"
+              class="flex items-center"
+              :image="item.logo"
+              :label="item.label"
+              size="sm"
+            />
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-ink-gray-9"
+            />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
               "
             >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -142,13 +142,12 @@
 <script setup>
 import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListSelectBanner,
   ListRowItem,
   ListFooter,
@@ -216,7 +215,7 @@ const listBulkActionsRef = ref(null)
 
 defineExpose({
   customListActions: computed(
-    () => listBulkActionsRef.value?.customListActions
+    () => listBulkActionsRef.value?.customListActions,
   ),
 })
 </script>
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 186e76b3c..dc85354e7 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -31,107 +31,102 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows class="mx-3 sm:mx-5" id="list-rows">
-      <ListRow
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-      >
-        <div v-if="column.key === 'due_date'">
-          <Tooltip
-            :text="item && formatDate(item, 'ddd, MMM D, YYYY | hh:mm a')"
-          >
-            <div class="flex items-center gap-2 truncate text-base">
-              <div><CalendarIcon /></div>
-              <div v-if="item" class="truncate">
-                {{ formatDate(item, 'D MMM, hh:mm a') }}
-              </div>
-            </div>
-          </Tooltip>
-        </div>
-        <ListRowItem v-else :item="item">
-          <template #prefix>
-            <div v-if="column.key === 'status'">
-              <TaskStatusIcon :status="item" />
-            </div>
-            <div v-else-if="column.key === 'priority'">
-              <TaskPriorityIcon :priority="item" />
-            </div>
-            <div v-else-if="column.key === 'assigned_to'">
-              <Avatar
-                v-if="item.full_name"
-                class="flex items-center"
-                :image="item.user_image"
-                :label="item.full_name"
-                size="sm"
-              />
-            </div>
-          </template>
-          <template #default="{ label }">
-            <div
-              v-if="['modified', 'creation'].includes(column.key)"
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
-              "
-            >
-              <Tooltip :text="item.label">
-                <div>{{ item.timeAgo }}</div>
-              </Tooltip>
+    <ListRows
+      class="mx-3 sm:mx-5"
+      :rows="rows"
+      v-slot="{ idx, column, item }"
+      doctype="CRM Task"
+    >
+      <div v-if="column.key === 'due_date'">
+        <Tooltip :text="item && formatDate(item, 'ddd, MMM D, YYYY | hh:mm a')">
+          <div class="flex items-center gap-2 truncate text-base">
+            <div><CalendarIcon /></div>
+            <div v-if="item" class="truncate">
+              {{ formatDate(item, 'D MMM, hh:mm a') }}
             </div>
-            <div
-              v-else-if="column.type === 'Text Editor'"
-              v-html="item"
-              class="truncate text-base h-4 [&>p]:truncate"
+          </div>
+        </Tooltip>
+      </div>
+      <ListRowItem v-else :item="item">
+        <template #prefix>
+          <div v-if="column.key === 'status'">
+            <TaskStatusIcon :status="item" />
+          </div>
+          <div v-else-if="column.key === 'priority'">
+            <TaskPriorityIcon :priority="item" />
+          </div>
+          <div v-else-if="column.key === 'assigned_to'">
+            <Avatar
+              v-if="item.full_name"
+              class="flex items-center"
+              :image="item.user_image"
+              :label="item.full_name"
+              size="sm"
             />
-            <div v-else-if="column.type === 'Check'">
-              <FormControl
-                type="checkbox"
-                :modelValue="item"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
-            </div>
-            <div v-else-if="column.key === '_liked_by'">
-              <Button
-                v-if="column.key == '_liked_by'"
-                variant="ghosted"
-                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
-                @click.stop.prevent="
-                  () =>
-                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
-                "
-              >
-                <HeartIcon class="h-4 w-4" />
-              </Button>
-            </div>
-            <div
-              v-else
-              class="truncate text-base"
-              @click="
-                (event) =>
-                  emit('applyFilter', {
-                    event,
-                    idx,
-                    column,
-                    item,
-                    firstColumn: columns[0],
-                  })
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div
+            v-else-if="column.type === 'Text Editor'"
+            v-html="item"
+            class="truncate text-base h-4 [&>p]:truncate"
+          />
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-ink-gray-9"
+            />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
               "
             >
-              {{ label }}
-            </div>
-          </template>
-        </ListRowItem>
-      </ListRow>
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
@@ -167,14 +162,13 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
 import { formatDate } from '@/utils'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListRows,
-  ListRow,
   ListSelectBanner,
   ListRowItem,
   ListFooter,

From 2b06594532473c4a9c67888183de10d50d5ee30d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 16:49:27 +0530
Subject: [PATCH 04/13] fix: side panel breaks if added a field

---
 frontend/src/components/Modals/SidePanelModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
index 6bd24b181..53a2a938b 100644
--- a/frontend/src/components/Modals/SidePanelModal.vue
+++ b/frontend/src/components/Modals/SidePanelModal.vue
@@ -151,7 +151,7 @@ function saveChanges() {
     {
       doctype: _doctype.value,
       type: 'Side Panel',
-      layout: JSON.stringify(_tabs),
+      layout: JSON.stringify(_tabs[0].sections),
     },
   ).then(() => {
     loading.value = false

From fe78ff844c88f4c899be85fbb6f865167e817fbd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 16:50:47 +0530
Subject: [PATCH 05/13] fix: get meta for doctype

---
 frontend/src/stores/meta.js | 49 +++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 frontend/src/stores/meta.js

diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
new file mode 100644
index 000000000..221b6357d
--- /dev/null
+++ b/frontend/src/stores/meta.js
@@ -0,0 +1,49 @@
+import { createResource } from 'frappe-ui'
+import { formatCurrency } from '@/utils/numberFormat.js'
+import { reactive } from 'vue'
+
+const doctypeMeta = reactive({})
+
+export function getMeta(doctype) {
+  const meta = createResource({
+    url: 'frappe.desk.form.load.getdoctype',
+    params: {
+      doctype: doctype,
+      with_parent: 1,
+      cached_timestamp: null,
+    },
+    cache: ['Meta', doctype],
+    onSuccess: (res) => {
+      let dtMetas = res.docs
+      for (let dtMeta of dtMetas) {
+        doctypeMeta[dtMeta.name] = dtMeta
+      }
+    },
+  })
+
+  if (!doctypeMeta[doctype]) {
+    meta.fetch()
+  }
+
+  function getFormattedCurrency(fieldname, doc) {
+    let currency = window.sysdefaults.currency || 'USD'
+
+    let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
+
+    if (df && df.options) {
+      if (df.options.indexOf(':') != -1) {
+        currency = currency
+      } else if (doc && doc[df.options]) {
+        currency = doc[df.options]
+      }
+    }
+
+    return formatCurrency(doc[fieldname], df, currency)
+  }
+
+  return {
+    meta,
+    doctypeMeta,
+    getFormattedCurrency,
+  }
+}

From fb2303edf1c7133c2bc84326ad663ce6e35990af Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 16:52:20 +0530
Subject: [PATCH 06/13] fix: added utils to format number & currency

---
 frontend/src/utils/index.js        |  11 --
 frontend/src/utils/numberFormat.js | 289 +++++++++++++++++++++++++++++
 2 files changed, 289 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/utils/numberFormat.js

diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 744b55792..557e85880 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -126,17 +126,6 @@ export function secondsToDuration(seconds) {
   return `${hours}h ${minutes}m ${_seconds}s`
 }
 
-export function formatNumberIntoCurrency(value, currency = 'INR') {
-  if (value) {
-    return value.toLocaleString('en-IN', {
-      maximumFractionDigits: 0,
-      style: 'currency',
-      currency: currency ? currency : 'INR',
-    })
-  }
-  return ''
-}
-
 export function startCase(str) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
diff --git a/frontend/src/utils/numberFormat.js b/frontend/src/utils/numberFormat.js
new file mode 100644
index 000000000..9e2962bc4
--- /dev/null
+++ b/frontend/src/utils/numberFormat.js
@@ -0,0 +1,289 @@
+const NUMBER_FORMAT_INFO = {
+  '#,###.##': { decimalStr: '.', groupSep: ',' },
+  '#.###,##': { decimalStr: ',', groupSep: '.' },
+  '# ###.##': { decimalStr: '.', groupSep: ' ' },
+  '# ###,##': { decimalStr: ',', groupSep: ' ' },
+  "#'###.##": { decimalStr: '.', groupSep: "'" },
+  '#, ###.##': { decimalStr: '.', groupSep: ', ' },
+  '#,##,###.##': { decimalStr: '.', groupSep: ',' },
+  '#,###.###': { decimalStr: '.', groupSep: ',' },
+  '#.###': { decimalStr: '', groupSep: '.' },
+  '#,###': { decimalStr: '', groupSep: ',' },
+}
+
+export function replaceAll(s, t1, t2) {
+  return s.split(t1).join(t2)
+}
+
+export function strip(s, chars) {
+  if (s) {
+    s = lstrip(s, chars)
+    s = rstrip(s, chars)
+    return s
+  }
+}
+
+export function lstrip(s, chars) {
+  if (!chars) chars = ['\n', '\t', ' ']
+  // strip left
+  let first_char = s.substr(0, 1)
+  while (chars.includes(first_char)) {
+    s = s.substr(1)
+    first_char = s.substr(0, 1)
+  }
+  return s
+}
+
+export function rstrip(s, chars) {
+  if (!chars) chars = ['\n', '\t', ' ']
+  let last_char = s.substr(s.length - 1)
+  while (chars.includes(last_char)) {
+    s = s.substr(0, s.length - 1)
+    last_char = s.substr(s.length - 1)
+  }
+  return s
+}
+
+export function cstr(s) {
+  if (s == null) return ''
+  return s + ''
+}
+
+export function cint(v, def) {
+  if (v === true) return 1
+  if (v === false) return 0
+  v = v + ''
+  if (v !== '0') v = lstrip(v, ['0'])
+  v = parseInt(v) // eslint-ignore-line
+  if (isNaN(v)) v = def === undefined ? 0 : def
+  return v
+}
+
+function flt(v, decimals, numberFormat, roundingMethod) {
+  if (v == null || v == '') return 0
+
+  if (typeof v !== 'number') {
+    v = v + ''
+
+    // strip currency symbol if exists
+    if (v.indexOf(' ') != -1) {
+      // using slice(1).join(" ") because space could also be a group separator
+      var parts = v.split(' ')
+      v = isNaN(parseFloat(parts[0]))
+        ? parts.slice(parts.length - 1).join(' ')
+        : v
+    }
+
+    v = stripNumberGroups(v, numberFormat)
+
+    v = parseFloat(v)
+    if (isNaN(v)) v = 0
+  }
+
+  if (decimals != null) return roundNumber(v, decimals, roundingMethod)
+  return v
+}
+
+function stripNumberGroups(v, numberFormat) {
+  if (!numberFormat) numberFormat = getNumberFormat()
+  var info = getNumberFormatInfo(numberFormat)
+
+  // strip groups (,)
+  var groupRegex = new RegExp(
+    info.groupSep === '.' ? '\\.' : info.groupSep,
+    'g',
+  )
+  v = v.replace(groupRegex, '')
+
+  // replace decimal separator with (.)
+  if (info.decimalStr !== '.' && info.decimalStr !== '') {
+    var decimal_regex = new RegExp(info.decimalStr, 'g')
+    v = v.replace(decimal_regex, '.')
+  }
+
+  return v
+}
+
+export function formatNumber(v, format, decimals) {
+  if (!format) {
+    format = getNumberFormat()
+    if (decimals == null)
+      decimals = cint(window.sysdefaults.float_precision || 3)
+  }
+
+  let info = getNumberFormatInfo(format)
+
+  // Fix the decimal first, toFixed will auto fill trailing zero.
+  if (decimals == null) decimals = info.precision
+
+  v = flt(v, decimals, format)
+
+  let isNegative = false
+  if (v < 0) isNegative = true
+  v = Math.abs(v)
+
+  v = v.toFixed(decimals)
+
+  let part = v.split('.')
+
+  // get group position and parts
+  let groupPosition = info.groupSep ? 3 : 0
+
+  if (groupPosition) {
+    let integer = part[0]
+    let str = ''
+    for (let i = integer.length; i >= 0; i--) {
+      let l = replaceAll(str, info.groupSep, '').length
+      if (format == '#,##,###.##' && str.indexOf(',') != -1) {
+        // INR
+        groupPosition = 2
+        l += 1
+      }
+
+      str += integer.charAt(i)
+
+      if (l && !((l + 1) % groupPosition) && i != 0) {
+        str += info.groupSep
+      }
+    }
+    part[0] = str.split('').reverse().join('')
+  }
+  if (part[0] + '' == '') {
+    part[0] = '0'
+  }
+
+  // join decimal
+  part[1] = part[1] && info.decimalStr ? info.decimalStr + part[1] : ''
+
+  // join
+  return (isNegative ? '-' : '') + part[0] + part[1]
+}
+
+export function formatCurrency(value, df, currency = 'USD') {
+  if (!value || !df) return ''
+
+  let precision
+  if (typeof df.precision == 'number') {
+    precision = df.precision
+  } else {
+    precision = cint(df.precision || window.sysdefaults.currency_precision || 2)
+  }
+
+  // If you change anything below, it's going to hurt a company in UAE, a bit.
+  if (precision > 2) {
+    let parts = cstr(value).split('.') // should be minimum 2, comes from the DB
+    let decimals = parts.length > 1 ? parts[1] : '' // parts.length == 2 ???
+
+    if (decimals.length < 3 || decimals.length < precision) {
+      const fraction = 100
+
+      if (decimals.length < cstr(fraction).length) {
+        precision = cstr(fraction).length - 1
+      }
+    }
+  }
+
+  value = value == null || value === '' ? '' : value
+
+  let format = getNumberFormat()
+  let symbol = getCurrencySymbol(currency)
+
+  if (symbol) {
+    return __(symbol) + ' ' + formatNumber(value, format, precision)
+  }
+
+  return formatNumber(value, format, precision)
+}
+
+function getCurrencySymbol(currencyCode) {
+  try {
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: currencyCode,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    })
+    // Extract the currency symbol from the formatted string
+    const parts = formatter.formatToParts(1)
+    const symbol = parts.find((part) => part.type === 'currency')
+    return symbol ? symbol.value : null
+  } catch (error) {
+    console.error(`Invalid currency code: ${currencyCode}`)
+    return null
+  }
+}
+
+function getNumberFormat() {
+  return window.sysdefaults.number_format || '#,###.##'
+}
+
+function getNumberFormatInfo(format) {
+  let info = NUMBER_FORMAT_INFO[format]
+
+  if (!info) {
+    info = { decimalStr: '.', groupSep: ',' }
+  }
+
+  // get the precision from the number format
+  info.precision = format.split(info.decimalStr).slice(1)[0].length
+
+  return info
+}
+
+function roundNumber(num, precision, roundingMethod) {
+  roundingMethod =
+    roundingMethod ||
+    window.sysdefaults.rounding_method ||
+    "Banker's Rounding (legacy)"
+
+  let isNegative = num < 0 ? true : false
+
+  if (roundingMethod == "Banker's Rounding (legacy)") {
+    var d = cint(precision)
+    var m = Math.pow(10, d)
+    var n = +(d ? Math.abs(num) * m : Math.abs(num)).toFixed(8) // Avoid rounding errors
+    var i = Math.floor(n),
+      f = n - i
+    var r = !precision && f == 0.5 ? (i % 2 == 0 ? i : i + 1) : Math.round(n)
+    r = d ? r / m : r
+    return isNegative ? -r : r
+  } else if (roundingMethod == "Banker's Rounding") {
+    if (num == 0) return 0.0
+    precision = cint(precision)
+
+    let multiplier = Math.pow(10, precision)
+    num = Math.abs(num) * multiplier
+
+    let floorNum = Math.floor(num)
+    let decimalPart = num - floorNum
+
+    // For explanation of this method read python flt implementation notes.
+    let epsilon = 2.0 ** (Math.log2(Math.abs(num)) - 52.0)
+
+    if (Math.abs(decimalPart - 0.5) < epsilon) {
+      num = floorNum % 2 == 0 ? floorNum : floorNum + 1
+    } else {
+      num = Math.round(num)
+    }
+    num = num / multiplier
+    return isNegative ? -num : num
+  } else if (roundingMethod == 'Commercial Rounding') {
+    if (num == 0) return 0.0
+
+    let digits = cint(precision)
+    let multiplier = Math.pow(10, digits)
+
+    num = num * multiplier
+
+    // For explanation of this method read python flt implementation notes.
+    let epsilon = 2.0 ** (Math.log2(Math.abs(num)) - 52.0)
+    if (isNegative) {
+      epsilon = -1 * epsilon
+    }
+
+    num = Math.round(num + epsilon)
+    return num / multiplier
+  } else {
+    throw new Error(`Unknown rounding method ${roundingMethod}`)
+  }
+}

From 9b8662de14e32d431be95f1399e954fed2c6fec8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 16:54:10 +0530
Subject: [PATCH 07/13] feat: show formatted currency fields in all list views

---
 frontend/src/pages/Contact.vue            | 15 +++++----------
 frontend/src/pages/Contacts.vue           |  6 ++++++
 frontend/src/pages/Deals.vue              | 19 +++++++------------
 frontend/src/pages/EmailTemplates.vue     |  7 +++++++
 frontend/src/pages/Leads.vue              |  6 ++++++
 frontend/src/pages/MobileContact.vue      | 15 +++++----------
 frontend/src/pages/MobileOrganization.vue | 17 ++++++-----------
 frontend/src/pages/Organization.vue       | 17 ++++++-----------
 frontend/src/pages/Organizations.vue      | 14 ++++++++------
 frontend/src/pages/Tasks.vue              |  6 ++++++
 frontend/src/utils/callLog.js             |  6 ++++++
 11 files changed, 68 insertions(+), 60 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index e3e64c515..5eea6170b 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -211,13 +211,9 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
-import {
-  formatDate,
-  timeAgo,
-  formatNumberIntoCurrency,
-  createToast,
-} from '@/utils'
+import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
 import { usersStore } from '@/stores/users.js'
 import { organizationsStore } from '@/stores/organizations.js'
@@ -601,6 +597,8 @@ async function updateField(fieldname, value) {
   contact.reload()
 }
 
+const { getFormattedCurrency } = getMeta('CRM Deal')
+
 const columns = computed(() => dealColumns)
 
 function getDealRowObject(deal) {
@@ -610,10 +608,7 @@ function getDealRowObject(deal) {
       label: deal.organization,
       logo: getOrganization(deal.organization)?.organization_logo,
     },
-    annual_revenue: formatNumberIntoCurrency(
-      deal.annual_revenue,
-      deal.currency,
-    ),
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
       color: getDealStatus(deal.status)?.iconColorClass,
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index dca88f309..172d2565b 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -70,10 +70,12 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
 import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
+const { getFormattedCurrency } = getMeta('Contact')
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
@@ -110,6 +112,10 @@ const rows = computed(() => {
         _rows[row] = formatDate(contact[row], '', true, fieldType == 'Datetime')
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, contact)
+      }
+
       if (row == 'full_name') {
         _rows[row] = {
           label: contact.full_name,
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 7a3162b8c..3f6f4e684 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -281,22 +281,18 @@ import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
 import { callEnabled } from '@/composables/settings'
-import {
-  formatDate,
-  timeAgo,
-  website,
-  formatNumberIntoCurrency,
-  formatTime,
-} from '@/utils'
+import { formatDate, timeAgo, website, formatTime } from '@/utils'
 import { Tooltip, Avatar, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, reactive, computed, h } from 'vue'
 
+const { getFormattedCurrency } = getMeta('CRM Deal')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
@@ -402,6 +398,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = formatDate(deal[row], '', true, fieldType == 'Datetime')
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, deal)
+      }
+
       if (row == 'organization') {
         _rows[row] = {
           label: deal.organization,
@@ -409,11 +409,6 @@ function parseRows(rows, columns = []) {
         }
       } else if (row === 'website') {
         _rows[row] = website(deal.website)
-      } else if (row == 'annual_revenue') {
-        _rows[row] = formatNumberIntoCurrency(
-          deal.annual_revenue,
-          deal.currency,
-        )
       } else if (row == 'status') {
         _rows[row] = {
           label: deal.status,
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 73e3ec5f5..cdbc14ee1 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -75,9 +75,12 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
 import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
+import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo } from '@/utils'
 import { computed, ref } from 'vue'
 
+const { getFormattedCurrency } = getMeta('Email Template')
+
 const emailTemplatesListView = ref(null)
 
 // emailTemplates data is loaded in the ViewControls component
@@ -115,6 +118,10 @@ const rows = computed(() => {
         )
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, emailTemplate)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(emailTemplate[row]),
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 8be6fa7b5..d08d57588 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -303,6 +303,7 @@ import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
@@ -312,6 +313,7 @@ import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
 
+const { getFormattedCurrency } = getMeta('CRM Lead')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getLeadStatus } = statusesStore()
@@ -416,6 +418,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = formatDate(lead[row], '', true, fieldType == 'Datetime')
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, lead)
+      }
+
       if (row == 'lead_name') {
         _rows[row] = {
           label: lead.lead_name,
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index c39d6bc32..9508d3ee4 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -186,13 +186,9 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
-import {
-  formatDate,
-  timeAgo,
-  formatNumberIntoCurrency,
-  createToast,
-} from '@/utils'
+import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
 import { usersStore } from '@/stores/users.js'
 import { organizationsStore } from '@/stores/organizations.js'
@@ -581,6 +577,8 @@ async function updateField(fieldname, value) {
   contact.reload()
 }
 
+const { getFormattedCurrency } = getMeta('CRM Deal')
+
 const columns = computed(() => dealColumns)
 
 function getDealRowObject(deal) {
@@ -590,10 +588,7 @@ function getDealRowObject(deal) {
       label: deal.organization,
       logo: getOrganization(deal.organization)?.organization_logo,
     },
-    annual_revenue: formatNumberIntoCurrency(
-      deal.annual_revenue,
-      deal.currency,
-    ),
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
       color: getDealStatus(deal.status)?.iconColorClass,
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index 58bd77d02..d73ce09fa 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -176,16 +176,12 @@ import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import {
-  formatDate,
-  timeAgo,
-  formatNumberIntoCurrency,
-  createToast,
-} from '@/utils'
+import { formatDate, timeAgo, createToast } from '@/utils'
 import {
   Breadcrumbs,
   Avatar,
@@ -441,6 +437,8 @@ const rows = computed(() => {
   })
 })
 
+const { getFormattedCurrency } = getMeta('CRM Deal')
+
 const columns = computed(() => {
   return tabIndex.value === 0 ? dealColumns : contactColumns
 })
@@ -450,12 +448,9 @@ function getDealRowObject(deal) {
     name: deal.name,
     organization: {
       label: deal.organization,
-      logo: props.organization?.organization_logo,
+      logo: organization.doc?.organization_logo,
     },
-    annual_revenue: formatNumberIntoCurrency(
-      deal.annual_revenue,
-      deal.currency,
-    ),
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
       color: getDealStatus(deal.status)?.iconColorClass,
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index d84fd232e..e4920855e 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -211,16 +211,12 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import {
-  formatDate,
-  timeAgo,
-  formatNumberIntoCurrency,
-  createToast,
-} from '@/utils'
+import { formatDate, timeAgo, createToast } from '@/utils'
 import {
   Tooltip,
   Breadcrumbs,
@@ -476,6 +472,8 @@ const rows = computed(() => {
   })
 })
 
+const { getFormattedCurrency } = getMeta('CRM Deal')
+
 const columns = computed(() => {
   return tabIndex.value === 0 ? dealColumns : contactColumns
 })
@@ -485,12 +483,9 @@ function getDealRowObject(deal) {
     name: deal.name,
     organization: {
       label: deal.organization,
-      logo: props.organization?.organization_logo,
+      logo: organization.doc?.organization_logo,
     },
-    annual_revenue: formatNumberIntoCurrency(
-      deal.annual_revenue,
-      deal.currency,
-    ),
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
       color: getDealStatus(deal.status)?.iconColorClass,
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 60a2204b6..5db5a8c38 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -69,9 +69,12 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
-import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils'
+import { getMeta } from '@/stores/meta'
+import { formatDate, timeAgo, website } from '@/utils'
 import { ref, computed } from 'vue'
 
+const { getFormattedCurrency } = getMeta('CRM Organization')
+
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
 
@@ -110,6 +113,10 @@ const rows = computed(() => {
         )
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, organization)
+      }
+
       if (row === 'organization_name') {
         _rows[row] = {
           label: organization.organization_name,
@@ -117,11 +124,6 @@ const rows = computed(() => {
         }
       } else if (row === 'website') {
         _rows[row] = website(organization.website)
-      } else if (row === 'annual_revenue') {
-        _rows[row] = formatNumberIntoCurrency(
-          organization.annual_revenue,
-          organization.currency,
-        )
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(organization[row]),
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 0349c8768..1d892c7ae 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -204,12 +204,14 @@ import ViewControls from '@/components/ViewControls.vue'
 import TasksListView from '@/components/ListViews/TasksListView.vue'
 import KanbanView from '@/components/Kanban/KanbanView.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
+import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { formatDate, timeAgo } from '@/utils'
 import { Tooltip, Avatar, TextEditor, Dropdown, call } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+const { getFormattedCurrency } = getMeta('CRM Task')
 const { getUser } = usersStore()
 
 const router = useRouter()
@@ -271,6 +273,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = formatDate(task[row], '', true, fieldType == 'Datetime')
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, task)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(task[row]),
diff --git a/frontend/src/utils/callLog.js b/frontend/src/utils/callLog.js
index ee006d1a0..35388c20f 100644
--- a/frontend/src/utils/callLog.js
+++ b/frontend/src/utils/callLog.js
@@ -1,7 +1,9 @@
 import { secondsToDuration, formatDate, timeAgo } from '@/utils'
+import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 
+const { getFormattedCurrency } = getMeta('CRM Call Log')
 const { getUser } = usersStore()
 const { getContact, getLeadContact } = contactsStore()
 
@@ -58,6 +60,10 @@ export function getCallLogDetail(row, log, columns = []) {
     return formatDate(log[row], '', true, fieldType == 'Datetime')
   }
 
+  if (fieldType && fieldType == 'Currency') {
+    return getFormattedCurrency(row, log)
+  }
+
   return log[row]
 }
 

From 0d2ca4cb4a2688974a0f62204c9f42772b26009f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 17:57:38 +0530
Subject: [PATCH 08/13] feat: show formatted currency fields in Modal & data
 fields

---
 .../src/components/Activities/DataFields.vue  |  7 ++++++-
 frontend/src/components/FieldLayout.vue       | 21 +++++++++++++++++--
 .../src/components/Modals/AddressModal.vue    |  4 ++--
 .../src/components/Modals/ContactModal.vue    |  6 +++++-
 frontend/src/components/Modals/DealModal.vue  |  1 +
 .../components/Modals/OrganizationModal.vue   |  6 +++++-
 .../src/components/Settings/SettingsPage.vue  |  7 ++++++-
 frontend/src/components/SidePanelLayout.vue   | 18 ++++++++++++++++
 frontend/src/pages/Contact.vue                |  1 +
 frontend/src/pages/Deal.vue                   |  1 +
 frontend/src/pages/MobileContact.vue          |  1 +
 frontend/src/pages/MobileDeal.vue             |  1 +
 frontend/src/pages/MobileOrganization.vue     |  3 ++-
 frontend/src/pages/Organization.vue           |  3 ++-
 frontend/src/utils/numberFormat.js            |  2 +-
 15 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 287d4a8a6..cee88cf01 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -32,7 +32,12 @@
     <span>{{ __('Loading...') }}</span>
   </div>
   <div v-else>
-    <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data.doc" />
+    <FieldLayout
+      v-if="tabs.data"
+      :tabs="tabs.data"
+      :data="data.doc"
+      :doctype="doctype"
+    />
   </div>
   <DataFieldsModal
     v-if="showDataFieldsModal"
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index e28a34368..a9fbc7215 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -190,6 +190,16 @@
                     :placeholder="getPlaceholder(field)"
                     v-model="data[field.name]"
                   />
+                  <FormControl
+                    v-else-if="field.type === 'Currency'"
+                    type="text"
+                    :value="getFormattedCurrency(field.name, data)"
+                    :placeholder="getPlaceholder(field)"
+                    :disabled="Boolean(field.read_only)"
+                    @change="
+                      data[field.name] = flt($event.target.value)
+                    "
+                  />
                   <FormControl
                     v-else
                     type="text"
@@ -213,22 +223,29 @@ 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 { getMeta } from '../stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
+import { flt } from '@/utils/numberFormat.js'
 import { Tabs, Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
-const { getUser } = usersStore()
-
 const props = defineProps({
   tabs: Array,
   data: Object,
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
   modal: {
     type: Boolean,
     default: false,
   },
 })
 
+const { getFormattedCurrency } = getMeta(props.doctype)
+const { getUser } = usersStore()
+
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
 
 const tabIndex = ref(0)
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index fd7cd25ae..8b92f58e2 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -23,7 +23,7 @@
           </div>
         </div>
         <div v-if="tabs.data">
-          <FieldLayout :tabs="tabs.data" :data="_address" />
+          <FieldLayout :tabs="tabs.data" :data="_address" doctype="Address" />
           <ErrorMessage class="mt-2" :message="error" />
         </div>
       </div>
@@ -54,7 +54,7 @@ import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
-import { call, FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
+import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index a3515e8b8..7cfa190b3 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -23,7 +23,11 @@
           </div>
         </div>
         <div v-if="filteredSections.length">
-          <FieldLayout :tabs="filteredSections" :data="_contact" />
+          <FieldLayout
+            :tabs="filteredSections"
+            :data="_contact"
+            doctype="Contact"
+          />
         </div>
       </div>
       <div class="px-4 pb-7 pt-4 sm:px-6">
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 2ccadec62..abb7f22f0 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -38,6 +38,7 @@
             v-if="filteredSections.length"
             :tabs="filteredSections"
             :data="deal"
+            doctype="CRM Deal"
           />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 585b9b78a..0ea5e1596 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -23,7 +23,11 @@
           </div>
         </div>
         <div v-if="filteredSections.length">
-          <FieldLayout :tabs="filteredSections" :data="_organization" />
+          <FieldLayout
+            :tabs="filteredSections"
+            :data="_organization"
+            doctype="CRM Organization"
+          />
         </div>
       </div>
       <div class="px-4 pb-7 pt-4 sm:px-6">
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index e8d6c8762..1d6bfdc35 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -12,7 +12,12 @@
       />
     </h2>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
-      <FieldLayout v-if="data?.doc && tabs" :tabs="tabs" :data="data.doc" />
+      <FieldLayout
+        v-if="data?.doc && tabs"
+        :tabs="tabs"
+        :data="data.doc"
+        :doctype="doctype"
+      />
       <ErrorMessage class="mt-2" :message="error" />
     </div>
     <div v-else class="flex flex-1 items-center justify-center">
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index e18d65fc2..be6467272 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -168,6 +168,17 @@
               @change="(data) => emit('update', field.name, data)"
             />
           </div>
+          <FormControl
+            v-else-if="field.type === 'currency'"
+            class="form-control"
+            type="text"
+            :value="getFormattedCurrency(field.name, data)"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="
+              emit('update', field.name, flt($event.target.value))
+            "
+          />
           <FormControl
             v-else
             class="form-control"
@@ -203,8 +214,10 @@ import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
+import { flt } from '@/utils/numberFormat.js'
 import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
 import { computed } from 'vue'
 
@@ -212,12 +225,17 @@ const props = defineProps({
   fields: {
     type: Object,
   },
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
   isLastSection: {
     type: Boolean,
     default: false,
   },
 })
 
+const { getFormattedCurrency } = getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const emit = defineEmits(['update'])
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 5eea6170b..2a982136c 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -142,6 +142,7 @@
                 v-if="section.fields"
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
+                doctype="Contact"
                 v-model="contact.data"
                 @update="updateField"
               />
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index ba464d018..9c2b3db9c 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -171,6 +171,7 @@
                 v-if="section.fields"
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
+                doctype="CRM Deal"
                 v-model="deal.data"
                 @update="updateField"
               />
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 9508d3ee4..41fb08d1a 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -145,6 +145,7 @@
                   <SidePanelLayout
                     :fields="section.fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"
+                    doctype="Contact"
                     v-model="contact.data"
                     @update="updateField"
                   />
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index f2c784c26..8936921f7 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -102,6 +102,7 @@
                   v-if="section.fields"
                   :fields="section.fields"
                   :isLastSection="i == fieldsLayout.data.length - 1"
+                  doctype="CRM Deal"
                   v-model="deal.data"
                   @update="updateField"
                 />
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index d73ce09fa..abf523079 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -125,9 +125,10 @@
               >
                 <Section :label="section.label" :opened="section.opened">
                   <SidePanelLayout
+                    v-model="organization.doc"
                     :fields="section.fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"
-                    v-model="organization.doc"
+                    doctype="CRM Organization"
                     @update="updateField"
                   />
                 </Section>
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index e4920855e..011e8da90 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -125,9 +125,10 @@
               </template>
               <SidePanelLayout
                 v-if="section.fields"
+                v-model="organization.doc"
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
-                v-model="organization.doc"
+                doctype="CRM Organization"
                 @update="updateField"
               />
             </Section>
diff --git a/frontend/src/utils/numberFormat.js b/frontend/src/utils/numberFormat.js
index 9e2962bc4..061e7f707 100644
--- a/frontend/src/utils/numberFormat.js
+++ b/frontend/src/utils/numberFormat.js
@@ -59,7 +59,7 @@ export function cint(v, def) {
   return v
 }
 
-function flt(v, decimals, numberFormat, roundingMethod) {
+export function flt(v, decimals, numberFormat, roundingMethod) {
   if (v == null || v == '') return 0
 
   if (typeof v !== 'number') {

From a91d8e449f597cb3452bf94b3da8207905d60345 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 18:20:00 +0530
Subject: [PATCH 09/13] feat: show formatted float fields in Modal & data
 fields

---
 frontend/src/components/FieldLayout.vue     | 14 ++++++++++----
 frontend/src/components/SidePanelLayout.vue | 15 +++++++++++----
 frontend/src/stores/meta.js                 |  9 ++++++++-
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index a9fbc7215..6fbd07af8 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -190,15 +190,21 @@
                     :placeholder="getPlaceholder(field)"
                     v-model="data[field.name]"
                   />
+                  <FormControl
+                    v-else-if="field.type === 'Float'"
+                    type="text"
+                    :value="getFormattedFloat(field.name, data)"
+                    :placeholder="getPlaceholder(field)"
+                    :disabled="Boolean(field.read_only)"
+                    @change="data[field.name] = flt($event.target.value)"
+                  />
                   <FormControl
                     v-else-if="field.type === 'Currency'"
                     type="text"
                     :value="getFormattedCurrency(field.name, data)"
                     :placeholder="getPlaceholder(field)"
                     :disabled="Boolean(field.read_only)"
-                    @change="
-                      data[field.name] = flt($event.target.value)
-                    "
+                    @change="data[field.name] = flt($event.target.value)"
                   />
                   <FormControl
                     v-else
@@ -243,7 +249,7 @@ const props = defineProps({
   },
 })
 
-const { getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index be6467272..e919ae46e 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -168,6 +168,15 @@
               @change="(data) => emit('update', field.name, data)"
             />
           </div>
+          <FormControl
+            v-else-if="field.type === 'float'"
+            class="form-control"
+            type="text"
+            :value="getFormattedFloat(field.name, data)"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="emit('update', field.name, flt($event.target.value))"
+          />
           <FormControl
             v-else-if="field.type === 'currency'"
             class="form-control"
@@ -175,9 +184,7 @@
             :value="getFormattedCurrency(field.name, data)"
             :placeholder="field.placeholder"
             :debounce="500"
-            @change.stop="
-              emit('update', field.name, flt($event.target.value))
-            "
+            @change.stop="emit('update', field.name, flt($event.target.value))"
           />
           <FormControl
             v-else
@@ -235,7 +242,7 @@ const props = defineProps({
   },
 })
 
-const { getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const emit = defineEmits(['update'])
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index 221b6357d..bd086d128 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -1,5 +1,5 @@
 import { createResource } from 'frappe-ui'
-import { formatCurrency } from '@/utils/numberFormat.js'
+import { formatCurrency, formatNumber } from '@/utils/numberFormat.js'
 import { reactive } from 'vue'
 
 const doctypeMeta = reactive({})
@@ -25,6 +25,12 @@ export function getMeta(doctype) {
     meta.fetch()
   }
 
+  function getFormattedFloat(fieldname, doc) {
+    let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
+    let precision = df?.precision || null
+    return formatNumber(doc[fieldname], "", precision)
+  }
+
   function getFormattedCurrency(fieldname, doc) {
     let currency = window.sysdefaults.currency || 'USD'
 
@@ -44,6 +50,7 @@ export function getMeta(doctype) {
   return {
     meta,
     doctypeMeta,
+    getFormattedFloat,
     getFormattedCurrency,
   }
 }

From 538885cffba891a1b88b47da71df6c7b687250a8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 18:42:59 +0530
Subject: [PATCH 10/13] fix: align right - currency, int, float & percent
 fields

---
 crm/fcrm/doctype/crm_deal/crm_deal.py                       | 1 +
 frontend/src/components/ColumnSettings.vue                  | 6 +++++-
 frontend/src/components/ListViews/CallLogsListView.vue      | 2 +-
 frontend/src/components/ListViews/ContactsListView.vue      | 2 +-
 frontend/src/components/ListViews/DealsListView.vue         | 2 +-
 .../src/components/ListViews/EmailTemplatesListView.vue     | 2 +-
 frontend/src/components/ListViews/LeadsListView.vue         | 2 +-
 frontend/src/components/ListViews/OrganizationsListView.vue | 2 +-
 frontend/src/components/ListViews/TasksListView.vue         | 2 +-
 9 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index dc18c1331..04bf74fd4 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -139,6 +139,7 @@ def default_list_data():
 				'label': 'Amount',
 				'type': 'Currency',
 				'key': 'annual_revenue',
+				'align': 'right',
 				'width': '9rem',
 			},
 			{
diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index d91ce7357..438e7eaff 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -49,7 +49,9 @@
               </div>
             </template>
           </Draggable>
-          <div class="mt-1.5 flex flex-col gap-1 border-t border-outline-gray-modals pt-1.5">
+          <div
+            class="mt-1.5 flex flex-col gap-1 border-t border-outline-gray-modals pt-1.5"
+          >
             <Autocomplete
               value=""
               :options="fields"
@@ -213,11 +215,13 @@ const fields = computed(() => {
 })
 
 function addColumn(c) {
+  let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type) ? 'right' : 'left'
   let _column = {
     label: c.label,
     type: c.type,
     key: c.value,
     width: '10rem',
+    align,
   }
   columns.value.push(_column)
   rows.value.push(c.value)
diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 4331237b3..1522e0a53 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -38,7 +38,7 @@
       v-slot="{ idx, column, item }"
       doctype="CRM Call Log"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <template #prefix>
           <div v-if="['caller', 'receiver'].includes(column.key)">
             <Avatar
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index c944dcc8e..aeecb7c86 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -42,7 +42,7 @@
       v-slot="{ idx, column, item }"
       doctype="Contact"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'full_name'">
             <Avatar
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 03dd100e7..ddd0df519 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -57,7 +57,7 @@
           "
         />
       </div>
-      <ListRowItem v-else :item="item">
+      <ListRowItem v-else :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'status'">
             <IndicatorIcon :class="item.color" />
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 52931cbb0..2d937cb8c 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -37,7 +37,7 @@
       v-slot="{ idx, column, item }"
       doctype="Email Template"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <!-- <template #prefix>
 
           </template> -->
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index ea79c83a5..dccfe438e 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -57,7 +57,7 @@
           "
         />
       </div>
-      <ListRowItem v-else :item="item">
+      <ListRowItem v-else :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'status'">
             <IndicatorIcon :class="item.color" />
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index 5cc57e49e..8dfc0ae66 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -41,7 +41,7 @@
       v-slot="{ idx, column, item }"
       doctype="CRM Organization"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'organization_name'">
             <Avatar
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index dc85354e7..7109449f8 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -47,7 +47,7 @@
           </div>
         </Tooltip>
       </div>
-      <ListRowItem v-else :item="item">
+      <ListRowItem v-else :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'status'">
             <TaskStatusIcon :status="item" />

From 90bf761eb35357816a79bd8b70a6598b1c052cd0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 18:50:34 +0530
Subject: [PATCH 11/13] feat: show formatted float fields in all listviews

---
 frontend/src/pages/Contact.vue            | 1 +
 frontend/src/pages/Contacts.vue           | 6 +++++-
 frontend/src/pages/Deals.vue              | 6 +++++-
 frontend/src/pages/EmailTemplates.vue     | 6 +++++-
 frontend/src/pages/Leads.vue              | 6 +++++-
 frontend/src/pages/MobileContact.vue      | 1 +
 frontend/src/pages/MobileOrganization.vue | 3 ++-
 frontend/src/pages/Organization.vue       | 3 ++-
 frontend/src/pages/Organizations.vue      | 6 +++++-
 frontend/src/pages/Tasks.vue              | 6 +++++-
 frontend/src/utils/callLog.js             | 6 +++++-
 11 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 2a982136c..659f6711c 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -636,6 +636,7 @@ const dealColumns = [
   {
     label: __('Amount'),
     key: 'annual_revenue',
+    align: 'right',
     width: '9rem',
   },
   {
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 172d2565b..7f94e15ce 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -75,7 +75,7 @@ import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedCurrency } = getMeta('Contact')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
@@ -116,6 +116,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedCurrency(row, contact)
       }
 
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, contact)
+      }
+
       if (row == 'full_name') {
         _rows[row] = {
           label: contact.full_name,
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 3f6f4e684..a445776f7 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -292,7 +292,7 @@ import { Tooltip, Avatar, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, reactive, computed, h } from 'vue'
 
-const { getFormattedCurrency } = getMeta('CRM Deal')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Deal')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
@@ -402,6 +402,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedCurrency(row, deal)
       }
 
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, deal)
+      }
+
       if (row == 'organization') {
         _rows[row] = {
           label: deal.organization,
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index cdbc14ee1..b77f7e77e 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -79,7 +79,7 @@ import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo } from '@/utils'
 import { computed, ref } from 'vue'
 
-const { getFormattedCurrency } = getMeta('Email Template')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('Email Template')
 
 const emailTemplatesListView = ref(null)
 
@@ -122,6 +122,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedCurrency(row, emailTemplate)
       }
 
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, emailTemplate)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(emailTemplate[row]),
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index d08d57588..9c8fc4554 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -313,7 +313,7 @@ import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
 
-const { getFormattedCurrency } = getMeta('CRM Lead')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Lead')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getLeadStatus } = statusesStore()
@@ -422,6 +422,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedCurrency(row, lead)
       }
 
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, lead)
+      }
+
       if (row == 'lead_name') {
         _rows[row] = {
           label: lead.lead_name,
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 41fb08d1a..ca08c833b 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -616,6 +616,7 @@ const dealColumns = [
   {
     label: __('Amount'),
     key: 'annual_revenue',
+    align: 'right',
     width: '9rem',
   },
   {
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index abf523079..0a06f695f 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -481,7 +481,7 @@ function getContactRowObject(contact) {
     mobile_no: contact.mobile_no,
     company_name: {
       label: contact.company_name,
-      logo: props.organization?.organization_logo,
+      logo: organization.doc?.organization_logo,
     },
     modified: {
       label: formatDate(contact.modified),
@@ -499,6 +499,7 @@ const dealColumns = [
   {
     label: __('Amount'),
     key: 'annual_revenue',
+    align: 'right',
     width: '9rem',
   },
   {
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 011e8da90..831a5b2a1 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -516,7 +516,7 @@ function getContactRowObject(contact) {
     mobile_no: contact.mobile_no,
     company_name: {
       label: contact.company_name,
-      logo: props.organization?.organization_logo,
+      logo: organization.doc?.organization_logo,
     },
     modified: {
       label: formatDate(contact.modified),
@@ -534,6 +534,7 @@ const dealColumns = [
   {
     label: __('Amount'),
     key: 'annual_revenue',
+    align: 'right',
     width: '9rem',
   },
   {
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 5db5a8c38..81ff99fe4 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -73,7 +73,7 @@ import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo, website } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedCurrency } = getMeta('CRM Organization')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Organization')
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
@@ -117,6 +117,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedCurrency(row, organization)
       }
 
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, organization)
+      }
+
       if (row === 'organization_name') {
         _rows[row] = {
           label: organization.organization_name,
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 1d892c7ae..b25e4c1c7 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -211,7 +211,7 @@ import { Tooltip, Avatar, TextEditor, Dropdown, call } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-const { getFormattedCurrency } = getMeta('CRM Task')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Task')
 const { getUser } = usersStore()
 
 const router = useRouter()
@@ -277,6 +277,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedCurrency(row, task)
       }
 
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, task)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(task[row]),
diff --git a/frontend/src/utils/callLog.js b/frontend/src/utils/callLog.js
index 35388c20f..a3ef761ae 100644
--- a/frontend/src/utils/callLog.js
+++ b/frontend/src/utils/callLog.js
@@ -3,7 +3,7 @@ import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 
-const { getFormattedCurrency } = getMeta('CRM Call Log')
+const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Call Log')
 const { getUser } = usersStore()
 const { getContact, getLeadContact } = contactsStore()
 
@@ -64,6 +64,10 @@ export function getCallLogDetail(row, log, columns = []) {
     return getFormattedCurrency(row, log)
   }
 
+  if (fieldType && fieldType == 'Float') {
+    return getFormattedFloat(row, log)
+  }
+
   return log[row]
 }
 

From eb5d362e000d0746c812cb94fb8d08c835ac94a8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 18:57:15 +0530
Subject: [PATCH 12/13] fix: removed df parameter and added format parameter

---
 frontend/src/stores/meta.js        |  6 +++---
 frontend/src/utils/numberFormat.js | 25 +++++++++++--------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index bd086d128..dfcdcb29c 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -28,13 +28,13 @@ export function getMeta(doctype) {
   function getFormattedFloat(fieldname, doc) {
     let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
     let precision = df?.precision || null
-    return formatNumber(doc[fieldname], "", precision)
+    return formatNumber(doc[fieldname], '', precision)
   }
 
   function getFormattedCurrency(fieldname, doc) {
     let currency = window.sysdefaults.currency || 'USD'
-
     let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
+    let precision = df?.precision || null
 
     if (df && df.options) {
       if (df.options.indexOf(':') != -1) {
@@ -44,7 +44,7 @@ export function getMeta(doctype) {
       }
     }
 
-    return formatCurrency(doc[fieldname], df, currency)
+    return formatCurrency(doc[fieldname], '', currency, precision)
   }
 
   return {
diff --git a/frontend/src/utils/numberFormat.js b/frontend/src/utils/numberFormat.js
index 061e7f707..7ee2128fa 100644
--- a/frontend/src/utils/numberFormat.js
+++ b/frontend/src/utils/numberFormat.js
@@ -1,3 +1,5 @@
+import { get } from '@vueuse/core'
+
 const NUMBER_FORMAT_INFO = {
   '#,###.##': { decimalStr: '.', groupSep: ',' },
   '#.###,##': { decimalStr: ',', groupSep: '.' },
@@ -159,14 +161,11 @@ export function formatNumber(v, format, decimals) {
   return (isNegative ? '-' : '') + part[0] + part[1]
 }
 
-export function formatCurrency(value, df, currency = 'USD') {
-  if (!value || !df) return ''
+export function formatCurrency(value, format, currency = 'USD', precision = 2) {
+  value = value == null || value === '' ? 0 : value
 
-  let precision
-  if (typeof df.precision == 'number') {
-    precision = df.precision
-  } else {
-    precision = cint(df.precision || window.sysdefaults.currency_precision || 2)
+  if (typeof precision != 'number') {
+    precision = cint(precision || window.sysdefaults.currency_precision || 2)
   }
 
   // If you change anything below, it's going to hurt a company in UAE, a bit.
@@ -183,9 +182,7 @@ export function formatCurrency(value, df, currency = 'USD') {
     }
   }
 
-  value = value == null || value === '' ? '' : value
-
-  let format = getNumberFormat()
+  format = getNumberFormat(format)
   let symbol = getCurrencySymbol(currency)
 
   if (symbol) {
@@ -195,6 +192,10 @@ export function formatCurrency(value, df, currency = 'USD') {
   return formatNumber(value, format, precision)
 }
 
+function getNumberFormat(format = null) {
+  return format || window.sysdefaults.number_format || '#,###.##'
+}
+
 function getCurrencySymbol(currencyCode) {
   try {
     const formatter = new Intl.NumberFormat('en-US', {
@@ -213,10 +214,6 @@ function getCurrencySymbol(currencyCode) {
   }
 }
 
-function getNumberFormat() {
-  return window.sysdefaults.number_format || '#,###.##'
-}
-
 function getNumberFormatInfo(format) {
   let info = NUMBER_FORMAT_INFO[format]
 

From b0be80f1a888887c11b799f07ab284d564b7d630 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 19:25:07 +0530
Subject: [PATCH 13/13] feat: show formatted percent fields in listview, Modal
 & data fields

---
 frontend/src/components/FieldLayout.vue     | 11 ++++++++++-
 frontend/src/components/SidePanelLayout.vue | 12 +++++++++++-
 frontend/src/pages/Contacts.vue             |  6 +++++-
 frontend/src/pages/Deals.vue                |  7 ++++++-
 frontend/src/pages/EmailTemplates.vue       |  7 ++++++-
 frontend/src/pages/Leads.vue                |  7 ++++++-
 frontend/src/pages/Organizations.vue        |  7 ++++++-
 frontend/src/pages/Tasks.vue                |  7 ++++++-
 frontend/src/stores/meta.js                 |  6 ++++++
 frontend/src/utils/callLog.js               |  7 ++++++-
 10 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 6fbd07af8..0585e42c2 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -190,6 +190,14 @@
                     :placeholder="getPlaceholder(field)"
                     v-model="data[field.name]"
                   />
+                  <FormControl
+                    v-else-if="field.type === 'Percent'"
+                    type="text"
+                    :value="getFormattedPercent(field.name, data)"
+                    :placeholder="getPlaceholder(field)"
+                    :disabled="Boolean(field.read_only)"
+                    @change="data[field.name] = flt($event.target.value)"
+                  />
                   <FormControl
                     v-else-if="field.type === 'Float'"
                     type="text"
@@ -249,7 +257,8 @@ const props = defineProps({
   },
 })
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index e919ae46e..788f7dd1b 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -168,6 +168,15 @@
               @change="(data) => emit('update', field.name, data)"
             />
           </div>
+          <FormControl
+            v-else-if="field.type === 'percent'"
+            class="form-control"
+            type="text"
+            :value="getFormattedPercent(field.name, data)"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="emit('update', field.name, flt($event.target.value))"
+          />
           <FormControl
             v-else-if="field.type === 'float'"
             class="form-control"
@@ -242,7 +251,8 @@ const props = defineProps({
   },
 })
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const emit = defineEmits(['update'])
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 7f94e15ce..fdd69dfc0 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -75,7 +75,7 @@ import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
@@ -120,6 +120,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedFloat(row, contact)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, contact)
+      }
+
       if (row == 'full_name') {
         _rows[row] = {
           label: contact.full_name,
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index a445776f7..8afcdfe94 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -292,7 +292,8 @@ import { Tooltip, Avatar, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, reactive, computed, h } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Deal')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Deal')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
@@ -406,6 +407,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedFloat(row, deal)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, deal)
+      }
+
       if (row == 'organization') {
         _rows[row] = {
           label: deal.organization,
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index b77f7e77e..4ab8e0dc5 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -79,7 +79,8 @@ import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo } from '@/utils'
 import { computed, ref } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('Email Template')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('Email Template')
 
 const emailTemplatesListView = ref(null)
 
@@ -126,6 +127,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedFloat(row, emailTemplate)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, emailTemplate)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(emailTemplate[row]),
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 9c8fc4554..c6884febc 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -313,7 +313,8 @@ import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Lead')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Lead')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getLeadStatus } = statusesStore()
@@ -426,6 +427,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedFloat(row, lead)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, lead)
+      }
+
       if (row == 'lead_name') {
         _rows[row] = {
           label: lead.lead_name,
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 81ff99fe4..4853d0966 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -73,7 +73,8 @@ import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo, website } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Organization')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Organization')
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
@@ -121,6 +122,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedFloat(row, organization)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, organization)
+      }
+
       if (row === 'organization_name') {
         _rows[row] = {
           label: organization.organization_name,
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index b25e4c1c7..69662d9e2 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -211,7 +211,8 @@ import { Tooltip, Avatar, TextEditor, Dropdown, call } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Task')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Task')
 const { getUser } = usersStore()
 
 const router = useRouter()
@@ -281,6 +282,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedFloat(row, task)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, task)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(task[row]),
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index dfcdcb29c..af2350598 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -25,6 +25,11 @@ export function getMeta(doctype) {
     meta.fetch()
   }
 
+  function getFormattedPercent(fieldname, doc) {
+    let value = getFormattedFloat(fieldname, doc)
+    return value + '%'
+  }
+
   function getFormattedFloat(fieldname, doc) {
     let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
     let precision = df?.precision || null
@@ -51,6 +56,7 @@ export function getMeta(doctype) {
     meta,
     doctypeMeta,
     getFormattedFloat,
+    getFormattedPercent,
     getFormattedCurrency,
   }
 }
diff --git a/frontend/src/utils/callLog.js b/frontend/src/utils/callLog.js
index a3ef761ae..ac10e74d6 100644
--- a/frontend/src/utils/callLog.js
+++ b/frontend/src/utils/callLog.js
@@ -3,7 +3,8 @@ import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Call Log')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Call Log')
 const { getUser } = usersStore()
 const { getContact, getLeadContact } = contactsStore()
 
@@ -68,6 +69,10 @@ export function getCallLogDetail(row, log, columns = []) {
     return getFormattedFloat(row, log)
   }
 
+  if (fieldType && fieldType == 'Percent') {
+    return getFormattedPercent(row, log)
+  }
+
   return log[row]
 }