From 1450163379c58a57d60aa12de98fa04f50c16166 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 16:04:18 +0530
Subject: [PATCH 01/24] feat: added grid (child table) control

---
 frontend/src/components/Controls/Grid.vue | 268 ++++++++++++++++++++++
 frontend/src/types/controls.ts            |  49 ++++
 frontend/src/utils/index.js               |  11 +
 3 files changed, 328 insertions(+)
 create mode 100644 frontend/src/components/Controls/Grid.vue
 create mode 100644 frontend/src/types/controls.ts

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
new file mode 100644
index 00000000..c697b3be
--- /dev/null
+++ b/frontend/src/components/Controls/Grid.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="flex flex-col text-base">
+    <div v-if="label" class="mb-1.5 text-sm text-gray-600">{{ label }}</div>
+
+    <div class="rounded border border-gray-100">
+      <!-- Header -->
+      <div
+        class="grid items-center rounded-t-sm bg-gray-100 text-gray-600"
+        :style="{ gridTemplateColumns: gridTemplateColumns }"
+      >
+        <div class="inline-flex items-center justify-center border-r p-2">
+          <Checkbox
+            class="cursor-pointer duration-300"
+            :modelValue="allRowsSelected"
+            @click.stop="toggleSelectAllRows($event.target.checked)"
+          />
+        </div>
+        <div class="inline-flex items-center justify-center border-r py-2 px-1">
+          No.
+        </div>
+        <div
+          class="inline-flex items-center border-r p-2"
+          v-for="field in gridFields"
+          :key="field.fieldname"
+        >
+          {{ field.label }}
+        </div>
+        <div class="p-2" />
+      </div>
+      <!-- Rows -->
+      <template v-if="rows.length">
+        <Draggable class="w-full" v-model="rows" group="rows" item-key="name">
+          <template #item="{ element: row, index }">
+            <div
+              class="grid-row grid cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
+              :style="{ gridTemplateColumns: gridTemplateColumns }"
+            >
+              <div
+                class="inline-flex h-full items-center justify-center border-r p-2"
+              >
+                <Checkbox
+                  class="cursor-pointer duration-300"
+                  :modelValue="selectedRows.has(row.name)"
+                  @click.stop="toggleSelectRow(row)"
+                />
+              </div>
+              <div
+                class="flex h-full items-center justify-center border-r p-2 text-sm text-gray-800"
+              >
+                {{ index + 1 }}
+              </div>
+              <div
+                class="border-r border-gray-100 h-full"
+                v-for="field in gridFields"
+                :key="field.fieldname"
+              >
+                <Link
+                  v-if="field.fieldtype === 'Link'"
+                  class="text-sm text-gray-800"
+                  :value="row[field.fieldname]"
+                  :doctype="field.options"
+                  :placeholder="row.placeholder"
+                  @change="
+                    (data: String) =>
+                      field.onChange && field.onChange(data, index)
+                  "
+                />
+                <div
+                  v-else-if="field.fieldtype === 'Check'"
+                  class="flex h-full justify-center items-center"
+                >
+                  <Checkbox
+                    class="cursor-pointer duration-300"
+                    v-model="row[field.fieldname]"
+                    @change="
+                      (e: Event) =>
+                        field.onChange &&
+                        field.onChange(
+                          (e.target as HTMLInputElement).checked,
+                          index,
+                        )
+                    "
+                  />
+                </div>
+                <FormControl
+                  v-else
+                  class="text-sm text-gray-800"
+                  v-model="row[field.fieldname]"
+                  :type="field.fieldtype.toLowerCase()"
+                  :options="field.options"
+                  variant="outline"
+                  size="md"
+                  @change="
+                    (e: Event) =>
+                      field.onChange &&
+                      field.onChange(
+                        (e.target as HTMLInputElement).value,
+                        index,
+                      )
+                  "
+                />
+              </div>
+              <div class="edit-row">
+                <Button
+                  class="flex w-full items-center justify-center rounded"
+                  @click="showRowList[index] = true"
+                >
+                  <FeatherIcon
+                    name="edit-2"
+                    class="h-3.5 w-3.5 text-gray-700"
+                  />
+                </Button>
+              </div>
+              <Dialog
+                v-model="showRowList[index]"
+                :options="{ title: `Editing Row ${index + 1}` }"
+              >
+                <template #body-content>
+                  <div v-for="field in fields" :key="field.fieldname">
+                    {{ field.label }}: {{ row[field.fieldname] }}
+                  </div>
+                </template>
+              </Dialog>
+            </div>
+          </template>
+        </Draggable>
+      </template>
+
+      <div
+        v-else
+        class="flex flex-col items-center rounded p-5 text-sm text-gray-600"
+      >
+        No Data
+      </div>
+    </div>
+
+    <div class="mt-2 flex flex-row gap-2">
+      <Button
+        v-if="showDeleteBtn"
+        label="Delete"
+        variant="solid"
+        theme="red"
+        @click="deleteRows"
+      />
+      <Button label="Add Row" @click="addRow" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Link from '@/components/Controls/Link.vue'
+import { GridColumn, GridRow } from '@/types/controls'
+import { getRandom } from '@/utils'
+import { Dialog, FormControl, Checkbox } from 'frappe-ui'
+import Draggable from 'vuedraggable'
+import { ref, reactive, computed, PropType } from 'vue'
+
+const props = defineProps<{
+  label?: string
+  gridFields: GridColumn[]
+  fields: GridColumn[]
+}>()
+
+const rows = defineModel({
+  type: Array as PropType<GridRow[]>,
+  default: () => [],
+})
+const showRowList = ref(new Array(rows.value.length).fill(false))
+const selectedRows = reactive(new Set<string>())
+
+const gridTemplateColumns = computed(() => {
+  // for the checkbox & sr no. columns
+  let columns = '0.5fr 0.5fr'
+  columns +=
+    ' ' +
+    props.gridFields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
+  // for the edit button column
+  columns += ' 0.5fr'
+
+  return columns
+})
+
+const allRowsSelected = computed(() => {
+  if (!rows.value.length) return false
+  return rows.value.length === selectedRows.size
+})
+
+const showDeleteBtn = computed(() => selectedRows.size > 0)
+
+const toggleSelectAllRows = (iSelected: boolean) => {
+  if (iSelected) {
+    rows.value.forEach((row: GridRow) => selectedRows.add(row.name))
+  } else {
+    selectedRows.clear()
+  }
+}
+
+const toggleSelectRow = (row: GridRow) => {
+  if (selectedRows.has(row.name)) {
+    selectedRows.delete(row.name)
+  } else {
+    selectedRows.add(row.name)
+  }
+}
+
+const addRow = () => {
+  const newRow = {} as GridRow
+  props.gridFields.forEach((field) => {
+    if (field.fieldtype === 'Check') newRow[field.fieldname] = false
+    else newRow[field.fieldname] = ''
+  })
+  newRow.name = getRandom(10)
+  showRowList.value.push(false)
+  newRow['__islocal'] = true
+  rows.value.push(newRow)
+}
+
+const deleteRows = () => {
+  rows.value = rows.value.filter((row) => !selectedRows.has(row.name))
+  showRowList.value.pop()
+  selectedRows.clear()
+}
+</script>
+
+<style scoped>
+/* For Input fields */
+:deep(.grid-row input:not([type='checkbox'])) {
+  border: none;
+  border-radius: 0;
+  height: 38px;
+}
+
+:deep(.grid-row input:focus, .grid-row input:hover) {
+  box-shadow: none;
+}
+
+:deep(.grid-row input:focus-within) {
+  border: 1px solid #d1d8dd;
+}
+
+/* For select field */
+:deep(.grid-row select) {
+  border: none;
+  border-radius: 0;
+  height: 38px;
+}
+
+/* For Autocomplete */
+:deep(.grid-row button) {
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  height: 38px;
+}
+
+:deep(.grid-row .edit-row button) {
+  border-bottom-right-radius: 7px;
+}
+
+:deep(.grid-row button:focus, .grid-row button:hover) {
+  box-shadow: none;
+  background-color: white;
+}
+
+:deep(.grid-row button:focus-within) {
+  border: 1px solid #d1d8dd;
+}
+</style>
diff --git a/frontend/src/types/controls.ts b/frontend/src/types/controls.ts
new file mode 100644
index 00000000..9d27299e
--- /dev/null
+++ b/frontend/src/types/controls.ts
@@ -0,0 +1,49 @@
+export type FieldTypes =
+  | 'Data'
+  | 'Int'
+  | 'Float'
+  | 'Currency'
+  | 'Check'
+  | 'Text'
+  | 'Small Text'
+  | 'Long Text'
+  | 'Code'
+  | 'Text Editor'
+  | 'Date'
+  | 'Datetime'
+  | 'Time'
+  | 'HTML'
+  | 'Image'
+  | 'Attach'
+  | 'Select'
+  | 'Read Only'
+  | 'Section Break'
+  | 'Column Break'
+  | 'Table'
+  | 'Button'
+  | 'Link'
+  | 'Dynamic Link'
+  | 'Password'
+  | 'Signature'
+  | 'Color'
+  | 'Barcode'
+  | 'Geolocation'
+  | 'Duration'
+  | 'Percent'
+  | 'Rating'
+  | 'Icon'
+
+// Grid / Child Table
+export interface GridColumn {
+  label: string
+  fieldname: string
+  fieldtype: FieldTypes
+  options?: string | string[]
+  width?: number
+  onChange?: (value: string, index: number) => void
+}
+
+export interface GridRow {
+  name: string
+  [fieldname: string]: string | number | boolean
+}
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 557e8588..c0306e4b 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -305,3 +305,14 @@ export function isImage(extention) {
     extention.toLowerCase(),
   )
 }
+
+export function getRandom(len) {
+  let text = ''
+  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+
+  Array.from({ length: len }).forEach(() => {
+    text += possible.charAt(Math.floor(Math.random() * possible.length))
+  })
+
+  return text
+}

From ed11fb48cb5433c046b1c3278dcdacae19f7a0aa Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 16:10:25 +0530
Subject: [PATCH 02/24] fix: get child table meta

---
 crm/api/doc.py                        |   3 +
 crm/fcrm/doctype/crm_deal/crm_deal.py | 109 ++++++++++++---------
 crm/fcrm/doctype/crm_lead/crm_lead.py | 131 +++++++++++++++++---------
 3 files changed, 157 insertions(+), 86 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index b7e3e463..266db1cc 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -557,6 +557,9 @@ def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False):
 	fields_meta = {}
 	for field in fields:
 		fields_meta[field.get("fieldname")] = field
+		if field.get("fieldtype") == "Table":
+			_fields = frappe.get_meta(field.get("options")).fields
+			fields_meta[field.get("fieldname")] = {"df": field, "fields": _fields}
 
 	return fields_meta
 
diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index 04bf74fd..beb63cbd 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -1,6 +1,5 @@
 # Copyright (c) 2023, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
-import json
 
 import frappe
 from frappe import _
@@ -8,7 +7,9 @@ from frappe.desk.form.assign_to import add as assign
 from frappe.model.document import Document
 
 from crm.fcrm.doctype.crm_service_level_agreement.utils import get_sla
-from crm.fcrm.doctype.crm_status_change_log.crm_status_change_log import add_status_change_log
+from crm.fcrm.doctype.crm_status_change_log.crm_status_change_log import (
+	add_status_change_log,
+)
 
 
 class CRMDeal(Document):
@@ -94,19 +95,26 @@ class CRMDeal(Document):
 		shared_with = [d.user for d in docshares] + [agent]
 
 		for user in shared_with:
-			if user == agent and not frappe.db.exists("DocShare", {"user": agent, "share_name": self.name, "share_doctype": self.doctype}):
+			if user == agent and not frappe.db.exists(
+				"DocShare",
+				{"user": agent, "share_name": self.name, "share_doctype": self.doctype},
+			):
 				frappe.share.add_docshare(
-					self.doctype, self.name, agent, write=1, flags={"ignore_share_permission": True}
+					self.doctype,
+					self.name,
+					agent,
+					write=1,
+					flags={"ignore_share_permission": True},
 				)
 			elif user != agent:
 				frappe.share.remove(self.doctype, self.name, user)
 
-
 	def set_sla(self):
 		"""
 		Find an SLA to apply to the deal.
 		"""
-		if self.sla: return
+		if self.sla:
+			return
 
 		sla = get_sla(self)
 		if not sla:
@@ -129,48 +137,48 @@ class CRMDeal(Document):
 	def default_list_data():
 		columns = [
 			{
-				'label': 'Organization',
-				'type': 'Link',
-				'key': 'organization',
-				'options': 'CRM Organization',
-				'width': '11rem',
+				"label": "Organization",
+				"type": "Link",
+				"key": "organization",
+				"options": "CRM Organization",
+				"width": "11rem",
 			},
 			{
-				'label': 'Amount',
-				'type': 'Currency',
-				'key': 'annual_revenue',
-				'align': 'right',
-				'width': '9rem',
+				"label": "Annual Revenue",
+				"type": "Currency",
+				"key": "annual_revenue",
+				"align": "right",
+				"width": "9rem",
 			},
 			{
-				'label': 'Status',
-				'type': 'Select',
-				'key': 'status',
-				'width': '10rem',
+				"label": "Status",
+				"type": "Select",
+				"key": "status",
+				"width": "10rem",
 			},
 			{
-				'label': 'Email',
-				'type': 'Data',
-				'key': 'email',
-				'width': '12rem',
+				"label": "Email",
+				"type": "Data",
+				"key": "email",
+				"width": "12rem",
 			},
 			{
-				'label': 'Mobile No',
-				'type': 'Data',
-				'key': 'mobile_no',
-				'width': '11rem',
+				"label": "Mobile No",
+				"type": "Data",
+				"key": "mobile_no",
+				"width": "11rem",
 			},
 			{
-				'label': 'Assigned To',
-				'type': 'Text',
-				'key': '_assign',
-				'width': '10rem',
+				"label": "Assigned To",
+				"type": "Text",
+				"key": "_assign",
+				"width": "10rem",
 			},
 			{
-				'label': 'Last Modified',
-				'type': 'Datetime',
-				'key': 'modified',
-				'width': '8rem',
+				"label": "Last Modified",
+				"type": "Datetime",
+				"key": "modified",
+				"width": "8rem",
 			},
 		]
 		rows = [
@@ -189,16 +197,17 @@ class CRMDeal(Document):
 			"modified",
 			"_assign",
 		]
-		return {'columns': columns, 'rows': rows}
+		return {"columns": columns, "rows": rows}
 
 	@staticmethod
 	def default_kanban_settings():
 		return {
 			"column_field": "status",
 			"title_field": "organization",
-			"kanban_fields": '["annual_revenue", "email", "mobile_no", "_assign", "modified"]'
+			"kanban_fields": '["annual_revenue", "email", "mobile_no", "_assign", "modified"]',
 		}
 
+
 @frappe.whitelist()
 def add_contact(deal, contact):
 	if not frappe.has_permission("CRM Deal", "write", deal):
@@ -209,6 +218,7 @@ def add_contact(deal, contact):
 	deal.save()
 	return True
 
+
 @frappe.whitelist()
 def remove_contact(deal, contact):
 	if not frappe.has_permission("CRM Deal", "write", deal):
@@ -219,6 +229,7 @@ def remove_contact(deal, contact):
 	deal.save()
 	return True
 
+
 @frappe.whitelist()
 def set_primary_contact(deal, contact):
 	if not frappe.has_permission("CRM Deal", "write", deal):
@@ -229,11 +240,14 @@ def set_primary_contact(deal, contact):
 	deal.save()
 	return True
 
+
 def create_organization(doc):
 	if not doc.get("organization_name"):
 		return
 
-	existing_organization = frappe.db.exists("CRM Organization", {"organization_name": doc.get("organization_name")})
+	existing_organization = frappe.db.exists(
+		"CRM Organization", {"organization_name": doc.get("organization_name")}
+	)
 	if existing_organization:
 		return existing_organization
 
@@ -250,6 +264,7 @@ def create_organization(doc):
 	organization.insert(ignore_permissions=True)
 	return organization.name
 
+
 def contact_exists(doc):
 	email_exist = frappe.db.exists("Contact Email", {"email_id": doc.get("email")})
 	mobile_exist = frappe.db.exists("Contact Phone", {"phone": doc.get("mobile_no")})
@@ -262,6 +277,7 @@ def contact_exists(doc):
 
 	return False
 
+
 def create_contact(doc):
 	existing_contact = contact_exists(doc)
 	if existing_contact:
@@ -288,18 +304,23 @@ def create_contact(doc):
 
 	return contact.name
 
+
 @frappe.whitelist()
 def create_deal(args):
 	deal = frappe.new_doc("CRM Deal")
 
 	contact = args.get("contact")
-	if not contact and (args.get("first_name") or args.get("last_name") or args.get("email") or args.get("mobile_no")):
+	if not contact and (
+		args.get("first_name") or args.get("last_name") or args.get("email") or args.get("mobile_no")
+	):
 		contact = create_contact(args)
 
-	deal.update({
-		"organization": args.get("organization") or create_organization(args),
-		"contacts": [{"contact": contact, "is_primary": 1}] if contact else [],
-	})
+	deal.update(
+		{
+			"organization": args.get("organization") or create_organization(args),
+			"contacts": [{"contact": contact, "is_primary": 1}] if contact else [],
+		}
+	)
 
 	args.pop("organization", None)
 
diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.py b/crm/fcrm/doctype/crm_lead/crm_lead.py
index 632080a9..e81cc566 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.py
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.py
@@ -1,15 +1,16 @@
 # Copyright (c) 2023, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
-import json
 
 import frappe
 from frappe import _
 from frappe.desk.form.assign_to import add as assign
 from frappe.model.document import Document
-
 from frappe.utils import has_gravatar, validate_email_address
+
 from crm.fcrm.doctype.crm_service_level_agreement.utils import get_sla
-from crm.fcrm.doctype.crm_status_change_log.crm_status_change_log import add_status_change_log
+from crm.fcrm.doctype.crm_status_change_log.crm_status_change_log import (
+	add_status_change_log,
+)
 
 
 class CRMLead(Document):
@@ -37,7 +38,15 @@ class CRMLead(Document):
 	def set_full_name(self):
 		if self.first_name:
 			self.lead_name = " ".join(
-				filter(None, [self.salutation, self.first_name, self.middle_name, self.last_name])
+				filter(
+					None,
+					[
+						self.salutation,
+						self.first_name,
+						self.middle_name,
+						self.last_name,
+					],
+				)
 			)
 
 	def set_lead_name(self):
@@ -92,9 +101,16 @@ class CRMLead(Document):
 		shared_with = [d.user for d in docshares] + [agent]
 
 		for user in shared_with:
-			if user == agent and not frappe.db.exists("DocShare", {"user": agent, "share_name": self.name, "share_doctype": self.doctype}):
+			if user == agent and not frappe.db.exists(
+				"DocShare",
+				{"user": agent, "share_name": self.name, "share_doctype": self.doctype},
+			):
 				frappe.share.add_docshare(
-					self.doctype, self.name, agent, write=1, flags={"ignore_share_permission": True}
+					self.doctype,
+					self.name,
+					agent,
+					write=1,
+					flags={"ignore_share_permission": True},
 				)
 			elif user != agent:
 				frappe.share.remove(self.doctype, self.name, user)
@@ -188,8 +204,36 @@ class CRMLead(Document):
 			"lead_owner": "deal_owner",
 		}
 
-		restricted_fieldtypes = ["Tab Break", "Section Break", "Column Break", "HTML", "Button", "Attach", "Table"]
-		restricted_map_fields = ["name", "naming_series", "creation", "owner", "modified", "modified_by", "idx", "docstatus", "status", "email", "mobile_no", "phone", "sla", "sla_status", "response_by", "first_response_time", "first_responded_on", "communication_status", "sla_creation"]
+		restricted_fieldtypes = [
+			"Tab Break",
+			"Section Break",
+			"Column Break",
+			"HTML",
+			"Button",
+			"Attach",
+			"Table",
+		]
+		restricted_map_fields = [
+			"name",
+			"naming_series",
+			"creation",
+			"owner",
+			"modified",
+			"modified_by",
+			"idx",
+			"docstatus",
+			"status",
+			"email",
+			"mobile_no",
+			"phone",
+			"sla",
+			"sla_status",
+			"response_by",
+			"first_response_time",
+			"first_responded_on",
+			"communication_status",
+			"sla_creation",
+		]
 
 		for field in self.meta.fields:
 			if field.fieldtype in restricted_fieldtypes:
@@ -222,7 +266,7 @@ class CRMLead(Document):
 					"sla_status": self.sla_status,
 					"communication_status": self.communication_status,
 					"first_response_time": self.first_response_time,
-					"first_responded_on": self.first_responded_on
+					"first_responded_on": self.first_responded_on,
 				}
 			)
 
@@ -233,7 +277,8 @@ class CRMLead(Document):
 		"""
 		Find an SLA to apply to the lead.
 		"""
-		if self.sla: return
+		if self.sla:
+			return
 
 		sla = get_sla(self)
 		if not sla:
@@ -263,47 +308,47 @@ class CRMLead(Document):
 	def default_list_data():
 		columns = [
 			{
-				'label': 'Name',
-				'type': 'Data',
-				'key': 'lead_name',
-				'width': '12rem',
+				"label": "Name",
+				"type": "Data",
+				"key": "lead_name",
+				"width": "12rem",
 			},
 			{
-				'label': 'Organization',
-				'type': 'Link',
-				'key': 'organization',
-				'options': 'CRM Organization',
-				'width': '10rem',
+				"label": "Organization",
+				"type": "Link",
+				"key": "organization",
+				"options": "CRM Organization",
+				"width": "10rem",
 			},
 			{
-				'label': 'Status',
-				'type': 'Select',
-				'key': 'status',
-				'width': '8rem',
+				"label": "Status",
+				"type": "Select",
+				"key": "status",
+				"width": "8rem",
 			},
 			{
-				'label': 'Email',
-				'type': 'Data',
-				'key': 'email',
-				'width': '12rem',
+				"label": "Email",
+				"type": "Data",
+				"key": "email",
+				"width": "12rem",
 			},
 			{
-				'label': 'Mobile No',
-				'type': 'Data',
-				'key': 'mobile_no',
-				'width': '11rem',
+				"label": "Mobile No",
+				"type": "Data",
+				"key": "mobile_no",
+				"width": "11rem",
 			},
 			{
-				'label': 'Assigned To',
-				'type': 'Text',
-				'key': '_assign',
-				'width': '10rem',
+				"label": "Assigned To",
+				"type": "Text",
+				"key": "_assign",
+				"width": "10rem",
 			},
 			{
-				'label': 'Last Modified',
-				'type': 'Datetime',
-				'key': 'modified',
-				'width': '8rem',
+				"label": "Last Modified",
+				"type": "Datetime",
+				"key": "modified",
+				"width": "8rem",
 			},
 		]
 		rows = [
@@ -323,20 +368,22 @@ class CRMLead(Document):
 			"_assign",
 			"image",
 		]
-		return {'columns': columns, 'rows': rows}
+		return {"columns": columns, "rows": rows}
 
 	@staticmethod
 	def default_kanban_settings():
 		return {
 			"column_field": "status",
 			"title_field": "lead_name",
-			"kanban_fields": '["organization", "email", "mobile_no", "_assign", "modified"]'
+			"kanban_fields": '["organization", "email", "mobile_no", "_assign", "modified"]',
 		}
 
 
 @frappe.whitelist()
 def convert_to_deal(lead, doc=None):
-	if not (doc and doc.flags.get("ignore_permissions")) and not frappe.has_permission("CRM Lead", "write", lead):
+	if not (doc and doc.flags.get("ignore_permissions")) and not frappe.has_permission(
+		"CRM Lead", "write", lead
+	):
 		frappe.throw(_("Not allowed to convert Lead to Deal"), frappe.PermissionError)
 
 	lead = frappe.get_cached_doc("CRM Lead", lead)

From 7b86773b7343bca8b755d324b300e499b42bf9bf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 17:21:05 +0530
Subject: [PATCH 03/24] fix: show grid fields, update onchange of grid cell

---
 .../src/components/Activities/Activities.vue  |  6 ++-
 .../src/components/Activities/DataFields.vue  | 39 +++++++++++++++++++
 frontend/src/components/FieldLayout.vue       |  9 ++++-
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index baf28de0..169ef24d 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -365,7 +365,11 @@
       </div>
     </div>
     <div v-else-if="title == 'Data'" class="h-full flex flex-col px-3 sm:px-10">
-      <DataFields :doctype="doctype" :docname="doc.data.name" />
+      <DataFields
+        :doctype="doctype"
+        :docname="doc.data.name"
+        :meta="doc.data.fields_meta"
+      />
     </div>
     <div
       v-else
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index cee88cf0..6edc989c 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -71,6 +71,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  meta: {
+    type: Object,
+    required: true,
+  },
 })
 
 const { isManager } = usersStore()
@@ -105,8 +109,43 @@ const tabs = createResource({
   cache: ['DataFields', props.doctype],
   params: { doctype: props.doctype, type: 'Data Fields' },
   auto: true,
+  transform: (_tabs) => parseTabs(_tabs),
 })
 
+function parseTabs(_tabs) {
+  _tabs.forEach((tab) => {
+    tab.sections.forEach((section) => {
+      section.fields.forEach((field) => {
+        if (field.type === 'Table') {
+          let name = props.meta[field.name].df.fieldname
+          let fields = props.meta[field.name].fields
+          field.fields = fields.map((field) => {
+            return {
+              ...getFieldObj(field),
+              onChange: (value, index) => {
+                data.doc[name][index][field.fieldname] = value
+              },
+            }
+          })
+          field.gridFields = field.fields.filter((field) => field.in_list_view)
+        }
+      })
+    })
+  })
+
+  return _tabs
+}
+
+function getFieldObj(field) {
+  return {
+    label: field.label,
+    fieldname: field.fieldname,
+    fieldtype: field.fieldtype,
+    options: field.options,
+    in_list_view: field.in_list_view,
+  }
+}
+
 function saveChanges() {
   data.save.submit()
 }
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 0585e42c..0b342126 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -76,6 +76,12 @@
                     v-model="data[field.name]"
                     :disabled="true"
                   />
+                  <Grid
+                    v-else-if="field.type === 'Table'"
+                    v-model="data[field.name]"
+                    :fields="field.fields"
+                    :gridFields="field.gridFields"
+                  />
                   <FormControl
                     v-else-if="field.type === 'Select'"
                     type="select"
@@ -237,7 +243,8 @@ 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 Grid from '@/components/Controls/Grid.vue'
+import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'

From 3b29f377e1ba8cb7b482a6ed7934e742cd02f74d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 19:25:40 +0530
Subject: [PATCH 04/24] fix: render more fieldtypes and show all field in modal

---
 .../src/components/Activities/DataFields.vue  |  23 +++-
 frontend/src/components/Controls/Grid.vue     | 121 +++++++++++++++---
 frontend/src/components/FieldLayout.vue       |   4 +-
 3 files changed, 121 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 6edc989c..b4b58ffb 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -119,7 +119,7 @@ function parseTabs(_tabs) {
         if (field.type === 'Table') {
           let name = props.meta[field.name].df.fieldname
           let fields = props.meta[field.name].fields
-          field.fields = fields.map((field) => {
+          let _fields = fields.map((field) => {
             return {
               ...getFieldObj(field),
               onChange: (value, index) => {
@@ -127,7 +127,14 @@ function parseTabs(_tabs) {
               },
             }
           })
-          field.gridFields = field.fields.filter((field) => field.in_list_view)
+
+          field.fields = [
+            {
+              no_tabs: true,
+              sections: [{ columns: 3, hideLabel: true, fields: _fields }],
+            },
+          ]
+          field.gridFields = _fields.filter((field) => field.in_list_view)
         }
       })
     })
@@ -137,10 +144,18 @@ function parseTabs(_tabs) {
 }
 
 function getFieldObj(field) {
+  if (field.fieldtype === 'Select' && typeof field.options === 'string') {
+    field.options = field.options.split('\n').map((option) => {
+      return {
+        label: option,
+        value: option,
+      }
+    })
+  }
   return {
     label: field.label,
-    fieldname: field.fieldname,
-    fieldtype: field.fieldtype,
+    name: field.fieldname,
+    type: field.fieldtype,
     options: field.options,
     in_list_view: field.in_list_view,
   }
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index c697b3be..04e0e5cf 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -21,7 +21,7 @@
         <div
           class="inline-flex items-center border-r p-2"
           v-for="field in gridFields"
-          :key="field.fieldname"
+          :key="field.name"
         >
           {{ field.label }}
         </div>
@@ -52,26 +52,26 @@
               <div
                 class="border-r border-gray-100 h-full"
                 v-for="field in gridFields"
-                :key="field.fieldname"
+                :key="field.name"
               >
                 <Link
-                  v-if="field.fieldtype === 'Link'"
+                  v-if="field.type === 'Link'"
                   class="text-sm text-gray-800"
-                  :value="row[field.fieldname]"
+                  :value="row[field.name]"
                   :doctype="field.options"
-                  :placeholder="row.placeholder"
+                  :filters="field.filters"
                   @change="
                     (data: String) =>
                       field.onChange && field.onChange(data, index)
                   "
                 />
                 <div
-                  v-else-if="field.fieldtype === 'Check'"
+                  v-else-if="field.type === 'Check'"
                   class="flex h-full justify-center items-center"
                 >
                   <Checkbox
                     class="cursor-pointer duration-300"
-                    v-model="row[field.fieldname]"
+                    v-model="row[field.name]"
                     @change="
                       (e: Event) =>
                         field.onChange &&
@@ -82,14 +82,85 @@
                     "
                   />
                 </div>
+                <DatePicker
+                  v-else-if="field.type === 'Date'"
+                  :value="row[field.name]"
+                  icon-left=""
+                  variant="outline"
+                  :formatter="(date) => getFormat(date, '', true)"
+                  input-class="border-none text-sm text-gray-800"
+                  @change="
+                    (data: String) =>
+                      field.onChange && field.onChange(data, index)
+                  "
+                />
+                <DateTimePicker
+                  v-else-if="field.type === 'Datetime'"
+                  :value="row[field.name]"
+                  icon-left=""
+                  variant="outline"
+                  :formatter="(date) => getFormat(date, '', true, true)"
+                  input-class="border-none text-sm text-gray-800"
+                  @change="
+                    (data: String) =>
+                      field.onChange && field.onChange(data, index)
+                  "
+                />
+                <FormControl
+                  v-else-if="
+                    ['Small Text', 'Text', 'Long Text', 'Code'].includes(
+                      field.type,
+                    )
+                  "
+                  type="textarea"
+                  v-model="row[field.name]"
+                  variant="outline"
+                  @change="
+                    (e: Event) =>
+                      field.onChange &&
+                      field.onChange(
+                        (e.target as HTMLInputElement).value,
+                        index,
+                      )
+                  "
+                />
+                <FormControl
+                  v-else-if="['Int'].includes(field.type)"
+                  type="number"
+                  v-model="row[field.name]"
+                  variant="outline"
+                  @change="
+                    (e: Event) =>
+                      field.onChange &&
+                      field.onChange(
+                        (e.target as HTMLInputElement).value,
+                        index,
+                      )
+                  "
+                />
+                <FormControl
+                  v-else-if="field.type === 'Select'"
+                  class="text-sm text-gray-800"
+                  v-model="row[field.name]"
+                  type="select"
+                  :options="field.options"
+                  variant="outline"
+                  @change="
+                    (e: Event) =>
+                      field.onChange &&
+                      field.onChange(
+                        (e.target as HTMLInputElement).value,
+                        index,
+                      )
+                  "
+                />
                 <FormControl
                   v-else
                   class="text-sm text-gray-800"
-                  v-model="row[field.fieldname]"
-                  :type="field.fieldtype.toLowerCase()"
+                  v-model="row[field.name]"
+                  type="text"
                   :options="field.options"
                   variant="outline"
-                  size="md"
                   @change="
                     (e: Event) =>
                       field.onChange &&
@@ -113,12 +184,13 @@
               </div>
               <Dialog
                 v-model="showRowList[index]"
-                :options="{ title: `Editing Row ${index + 1}` }"
+                :options="{
+                  title: __('Editing Row {0}', [index + 1]),
+                  size: '4xl',
+                }"
               >
                 <template #body-content>
-                  <div v-for="field in fields" :key="field.fieldname">
-                    {{ field.label }}: {{ row[field.fieldname] }}
-                  </div>
+                  <FieldLayout :tabs="fields" :data="row" />
                 </template>
               </Dialog>
             </div>
@@ -130,28 +202,35 @@
         v-else
         class="flex flex-col items-center rounded p-5 text-sm text-gray-600"
       >
-        No Data
+        __("No Data")
       </div>
     </div>
 
     <div class="mt-2 flex flex-row gap-2">
       <Button
         v-if="showDeleteBtn"
-        label="Delete"
+        :label="__('Delete')"
         variant="solid"
         theme="red"
         @click="deleteRows"
       />
-      <Button label="Add Row" @click="addRow" />
+      <Button :label="__('Add Row')" @click="addRow" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import FieldLayout from '@/components/FieldLayout.vue'
 import Link from '@/components/Controls/Link.vue'
 import { GridColumn, GridRow } from '@/types/controls'
-import { getRandom } from '@/utils'
-import { Dialog, FormControl, Checkbox } from 'frappe-ui'
+import { getRandom, getFormat } from '@/utils'
+import {
+  Dialog,
+  FormControl,
+  Checkbox,
+  DateTimePicker,
+  DatePicker,
+} from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { ref, reactive, computed, PropType } from 'vue'
 
@@ -206,8 +285,8 @@ const toggleSelectRow = (row: GridRow) => {
 const addRow = () => {
   const newRow = {} as GridRow
   props.gridFields.forEach((field) => {
-    if (field.fieldtype === 'Check') newRow[field.fieldname] = false
-    else newRow[field.fieldname] = ''
+    if (field.type === 'Check') newRow[field.name] = false
+    else newRow[field.name] = ''
   })
   newRow.name = getRandom(10)
   showRowList.value.push(false)
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 0b342126..61f4630d 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -15,7 +15,7 @@
         !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
       "
     >
-      <div :class="{ 'my-4 sm:my-6': hasTabs }">
+      <div class="overflow-hidden" :class="{ 'my-4 sm:my-6': hasTabs }">
         <div
           v-for="(section, i) in tab.sections"
           :key="section.label"
@@ -184,7 +184,7 @@
                   />
                   <FormControl
                     v-else-if="
-                      ['Small Text', 'Text', 'Long Text'].includes(field.type)
+                      ['Small Text', 'Text', 'Long Text', 'Code'].includes(field.type)
                     "
                     type="textarea"
                     :placeholder="getPlaceholder(field)"

From e32f187be09a0c274800549ac37ec15a5d83a601 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 19:49:32 +0530
Subject: [PATCH 05/24] fix: allow showing grid for preview

---
 frontend/src/components/Controls/Grid.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 04e0e5cf..778f010b 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col text-base">
-    <div v-if="label" class="mb-1.5 text-sm text-gray-600">{{ label }}</div>
+    <div v-if="label" class="mb-1.5 text-sm text-gray-600">
+      {{ __(label) }}
+    </div>
 
     <div class="rounded border border-gray-100">
       <!-- Header -->
@@ -16,9 +18,10 @@
           />
         </div>
         <div class="inline-flex items-center justify-center border-r py-2 px-1">
-          No.
+          {{ __('No.') }}
         </div>
         <div
+          v-if="gridFields?.length"
           class="inline-flex items-center border-r p-2"
           v-for="field in gridFields"
           :key="field.name"
@@ -50,6 +53,7 @@
                 {{ index + 1 }}
               </div>
               <div
+                v-if="gridFields?.length"
                 class="border-r border-gray-100 h-full"
                 v-for="field in gridFields"
                 :key="field.name"
@@ -190,7 +194,11 @@
                 }"
               >
                 <template #body-content>
-                  <FieldLayout :tabs="fields" :data="row" />
+                  <FieldLayout
+                    v-if="fields?.length"
+                    :tabs="fields"
+                    :data="row"
+                  />
                 </template>
               </Dialog>
             </div>
@@ -202,11 +210,11 @@
         v-else
         class="flex flex-col items-center rounded p-5 text-sm text-gray-600"
       >
-        __("No Data")
+        {{ __('No Data') }}
       </div>
     </div>
 
-    <div class="mt-2 flex flex-row gap-2">
+    <div v-if="gridFields?.length" class="mt-2 flex flex-row gap-2">
       <Button
         v-if="showDeleteBtn"
         :label="__('Delete')"
@@ -248,6 +256,7 @@ const showRowList = ref(new Array(rows.value.length).fill(false))
 const selectedRows = reactive(new Set<string>())
 
 const gridTemplateColumns = computed(() => {
+  if (!props.gridFields?.length) return '1fr 1fr 9fr'
   // for the checkbox & sr no. columns
   let columns = '0.5fr 0.5fr'
   columns +=
@@ -284,7 +293,7 @@ const toggleSelectRow = (row: GridRow) => {
 
 const addRow = () => {
   const newRow = {} as GridRow
-  props.gridFields.forEach((field) => {
+  props.gridFields?.forEach((field) => {
     if (field.type === 'Check') newRow[field.name] = false
     else newRow[field.name] = ''
   })

From 11fec38acdaa232114328d403b2933e7ffb78500 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 19:50:20 +0530
Subject: [PATCH 06/24] fix: allow adding table field & dont show already added
 field in field layout editor

---
 frontend/src/components/FieldLayoutEditor.vue | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index 4421199f..dd5780c9 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -209,7 +209,6 @@ const props = defineProps({
 const tabIndex = ref(0)
 
 const restrictedFieldTypes = [
-  'Table',
   'Geolocation',
   'Attach',
   'Attach Image',
@@ -230,6 +229,34 @@ const fields = createResource({
   params: params.value,
   cache: ['fieldsMeta', props.doctype],
   auto: true,
+  transform: (data) => {
+    let restrictedFields = [
+      'name',
+      'owner',
+      'creation',
+      'modified',
+      'modified_by',
+      'docstatus',
+      '_comments',
+      '_user_tags',
+      '_assign',
+      '_liked_by',
+    ]
+    let existingFields = []
+
+    for (let tab of props.tabs) {
+      for (let section of tab.sections) {
+        existingFields = existingFields.concat(section.fields)
+      }
+    }
+
+    return data.filter((field) => {
+      return (
+        !existingFields.find((f) => f.name === field.fieldname) &&
+        !restrictedFields.includes(field.fieldname)
+      )
+    })
+  },
 })
 
 function addTab() {
@@ -243,7 +270,12 @@ function addTab() {
 
 function addField(section, field) {
   if (!field) return
-  section.fields.push(field)
+  let newFieldObj = {
+    ...field,
+    name: field.fieldname,
+    type: field.fieldtype,
+  }
+  section.fields.push(newFieldObj)
 }
 
 function getTabOptions(tab) {

From 916752565634177b22c23c6bae2e7bf1fe36387a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 20:00:53 +0530
Subject: [PATCH 07/24] fix: allow grid inside grid

---
 frontend/src/components/Controls/Grid.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 778f010b..64130fa4 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -69,6 +69,12 @@
                       field.onChange && field.onChange(data, index)
                   "
                 />
+                <Grid
+                  v-else-if="field.type === 'Table'"
+                  v-model="data[field.name]"
+                  :fields="field.fields || []"
+                  :gridFields="field.gridFields || []"
+                />
                 <div
                   v-else-if="field.type === 'Check'"
                   class="flex h-full justify-center items-center"
@@ -230,6 +236,7 @@
 <script setup lang="ts">
 import FieldLayout from '@/components/FieldLayout.vue'
 import Link from '@/components/Controls/Link.vue'
+import Grid from '@/components/Controls/Grid.vue'
 import { GridColumn, GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
 import {

From e354ed5e556ccf4e7015990d16921c05d5699306 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 22:05:11 +0530
Subject: [PATCH 08/24] fix: grid columns layout fix

---
 frontend/src/components/Controls/Grid.vue | 290 +++++++++++-----------
 1 file changed, 147 insertions(+), 143 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 64130fa4..0a42d7b4 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -7,39 +7,45 @@
     <div class="rounded border border-gray-100">
       <!-- Header -->
       <div
-        class="grid items-center rounded-t-sm bg-gray-100 text-gray-600"
-        :style="{ gridTemplateColumns: gridTemplateColumns }"
+        class="grid-header flex items-center rounded-t-sm bg-gray-100 text-gray-600 truncate"
       >
-        <div class="inline-flex items-center justify-center border-r p-2">
+        <div class="inline-flex items-center justify-center border-r p-2 w-12">
           <Checkbox
             class="cursor-pointer duration-300"
             :modelValue="allRowsSelected"
             @click.stop="toggleSelectAllRows($event.target.checked)"
           />
         </div>
-        <div class="inline-flex items-center justify-center border-r py-2 px-1">
-          {{ __('No.') }}
+        <div
+          class="inline-flex items-center justify-center border-r py-2 px-1 w-12"
+        >
+          {{ __('No') }}
         </div>
         <div
-          v-if="gridFields?.length"
-          class="inline-flex items-center border-r p-2"
-          v-for="field in gridFields"
-          :key="field.name"
+          class="grid w-full truncate"
+          :style="{ gridTemplateColumns: gridTemplateColumns }"
         >
-          {{ field.label }}
+          <div
+            v-if="gridFields?.length"
+            class="border-r p-2 truncate"
+            v-for="field in gridFields"
+            :key="field.name"
+            :title="field.label"
+          >
+            {{ __(field.label) }}
+          </div>
         </div>
-        <div class="p-2" />
+        <div class="w-12" />
       </div>
       <!-- Rows -->
       <template v-if="rows.length">
         <Draggable class="w-full" v-model="rows" group="rows" item-key="name">
           <template #item="{ element: row, index }">
             <div
-              class="grid-row grid cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
-              :style="{ gridTemplateColumns: gridTemplateColumns }"
+              class="grid-row flex cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
             >
               <div
-                class="inline-flex h-full items-center justify-center border-r p-2"
+                class="inline-flex h-9.5 items-center justify-center border-r p-2 w-12"
               >
                 <Checkbox
                   class="cursor-pointer duration-300"
@@ -48,148 +54,150 @@
                 />
               </div>
               <div
-                class="flex h-full items-center justify-center border-r p-2 text-sm text-gray-800"
+                class="flex h-9.5 items-center justify-center border-r py-2 px-1 text-sm text-gray-800 w-12"
               >
                 {{ index + 1 }}
               </div>
               <div
-                v-if="gridFields?.length"
-                class="border-r border-gray-100 h-full"
-                v-for="field in gridFields"
-                :key="field.name"
+                class="grid w-full h-9.5"
+                :style="{ gridTemplateColumns: gridTemplateColumns }"
               >
-                <Link
-                  v-if="field.type === 'Link'"
-                  class="text-sm text-gray-800"
-                  :value="row[field.name]"
-                  :doctype="field.options"
-                  :filters="field.filters"
-                  @change="
-                    (data: String) =>
-                      field.onChange && field.onChange(data, index)
-                  "
-                />
-                <Grid
-                  v-else-if="field.type === 'Table'"
-                  v-model="data[field.name]"
-                  :fields="field.fields || []"
-                  :gridFields="field.gridFields || []"
-                />
                 <div
-                  v-else-if="field.type === 'Check'"
-                  class="flex h-full justify-center items-center"
+                  v-if="gridFields?.length"
+                  class="border-r border-gray-100 h-full"
+                  v-for="field in gridFields"
+                  :key="field.name"
                 >
-                  <Checkbox
-                    class="cursor-pointer duration-300"
+                  <Link
+                    v-if="field.type === 'Link'"
+                    class="text-sm text-gray-800"
+                    :value="row[field.name]"
+                    :doctype="field.options"
+                    :filters="field.filters"
+                    @change="
+                      (data: String) =>
+                        field.onChange && field.onChange(data, index)
+                    "
+                  />
+                  <Grid
+                    v-else-if="field.type === 'Table'"
+                    v-model="data[field.name]"
+                    :fields="field.fields || []"
+                    :gridFields="field.gridFields || []"
+                  />
+                  <div
+                    v-else-if="field.type === 'Check'"
+                    class="flex h-full justify-center items-center"
+                  >
+                    <Checkbox
+                      class="cursor-pointer duration-300"
+                      v-model="row[field.name]"
+                      @change="
+                        (e: Event) =>
+                          field.onChange &&
+                          field.onChange(
+                            (e.target as HTMLInputElement).checked,
+                            index,
+                          )
+                      "
+                    />
+                  </div>
+                  <DatePicker
+                    v-else-if="field.type === 'Date'"
+                    :value="row[field.name]"
+                    icon-left=""
+                    variant="outline"
+                    :formatter="(date) => getFormat(date, '', true)"
+                    input-class="border-none text-sm text-gray-800"
+                    @change="
+                      (data: String) =>
+                        field.onChange && field.onChange(data, index)
+                    "
+                  />
+                  <DateTimePicker
+                    v-else-if="field.type === 'Datetime'"
+                    :value="row[field.name]"
+                    icon-left=""
+                    variant="outline"
+                    :formatter="(date) => getFormat(date, '', true, true)"
+                    input-class="border-none text-sm text-gray-800"
+                    @change="
+                      (data: String) =>
+                        field.onChange && field.onChange(data, index)
+                    "
+                  />
+                  <FormControl
+                    v-else-if="
+                      ['Small Text', 'Text', 'Long Text', 'Code'].includes(
+                        field.type,
+                      )
+                    "
+                    type="textarea"
                     v-model="row[field.name]"
+                    variant="outline"
                     @change="
                       (e: Event) =>
                         field.onChange &&
                         field.onChange(
-                          (e.target as HTMLInputElement).checked,
+                          (e.target as HTMLInputElement).value,
+                          index,
+                        )
+                    "
+                  />
+                  <FormControl
+                    v-else-if="['Int'].includes(field.type)"
+                    type="number"
+                    v-model="row[field.name]"
+                    variant="outline"
+                    @change="
+                      (e: Event) =>
+                        field.onChange &&
+                        field.onChange(
+                          (e.target as HTMLInputElement).value,
+                          index,
+                        )
+                    "
+                  />
+                  <FormControl
+                    v-else-if="field.type === 'Select'"
+                    class="text-sm text-gray-800"
+                    v-model="row[field.name]"
+                    type="select"
+                    :options="field.options"
+                    variant="outline"
+                    @change="
+                      (e: Event) =>
+                        field.onChange &&
+                        field.onChange(
+                          (e.target as HTMLInputElement).value,
+                          index,
+                        )
+                    "
+                  />
+                  <FormControl
+                    v-else
+                    class="text-sm text-gray-800"
+                    v-model="row[field.name]"
+                    type="text"
+                    :options="field.options"
+                    variant="outline"
+                    @change="
+                      (e: Event) =>
+                        field.onChange &&
+                        field.onChange(
+                          (e.target as HTMLInputElement).value,
                           index,
                         )
                     "
                   />
                 </div>
-                <DatePicker
-                  v-else-if="field.type === 'Date'"
-                  :value="row[field.name]"
-                  icon-left=""
-                  variant="outline"
-                  :formatter="(date) => getFormat(date, '', true)"
-                  input-class="border-none text-sm text-gray-800"
-                  @change="
-                    (data: String) =>
-                      field.onChange && field.onChange(data, index)
-                  "
-                />
-                <DateTimePicker
-                  v-else-if="field.type === 'Datetime'"
-                  :value="row[field.name]"
-                  icon-left=""
-                  variant="outline"
-                  :formatter="(date) => getFormat(date, '', true, true)"
-                  input-class="border-none text-sm text-gray-800"
-                  @change="
-                    (data: String) =>
-                      field.onChange && field.onChange(data, index)
-                  "
-                />
-                <FormControl
-                  v-else-if="
-                    ['Small Text', 'Text', 'Long Text', 'Code'].includes(
-                      field.type,
-                    )
-                  "
-                  type="textarea"
-                  v-model="row[field.name]"
-                  variant="outline"
-                  @change="
-                    (e: Event) =>
-                      field.onChange &&
-                      field.onChange(
-                        (e.target as HTMLInputElement).value,
-                        index,
-                      )
-                  "
-                />
-                <FormControl
-                  v-else-if="['Int'].includes(field.type)"
-                  type="number"
-                  v-model="row[field.name]"
-                  variant="outline"
-                  @change="
-                    (e: Event) =>
-                      field.onChange &&
-                      field.onChange(
-                        (e.target as HTMLInputElement).value,
-                        index,
-                      )
-                  "
-                />
-                <FormControl
-                  v-else-if="field.type === 'Select'"
-                  class="text-sm text-gray-800"
-                  v-model="row[field.name]"
-                  type="select"
-                  :options="field.options"
-                  variant="outline"
-                  @change="
-                    (e: Event) =>
-                      field.onChange &&
-                      field.onChange(
-                        (e.target as HTMLInputElement).value,
-                        index,
-                      )
-                  "
-                />
-                <FormControl
-                  v-else
-                  class="text-sm text-gray-800"
-                  v-model="row[field.name]"
-                  type="text"
-                  :options="field.options"
-                  variant="outline"
-                  @change="
-                    (e: Event) =>
-                      field.onChange &&
-                      field.onChange(
-                        (e.target as HTMLInputElement).value,
-                        index,
-                      )
-                  "
-                />
               </div>
-              <div class="edit-row">
+              <div class="edit-row w-12">
                 <Button
                   class="flex w-full items-center justify-center rounded"
                   @click="showRowList[index] = true"
                 >
-                  <FeatherIcon
-                    name="edit-2"
-                    class="h-3.5 w-3.5 text-gray-700"
-                  />
+                  <EditIcon class="h-4 w-4 text-gray-700" />
                 </Button>
               </div>
               <Dialog
@@ -234,6 +242,7 @@
 </template>
 
 <script setup lang="ts">
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import Link from '@/components/Controls/Link.vue'
 import Grid from '@/components/Controls/Grid.vue'
@@ -263,16 +272,11 @@ const showRowList = ref(new Array(rows.value.length).fill(false))
 const selectedRows = reactive(new Set<string>())
 
 const gridTemplateColumns = computed(() => {
-  if (!props.gridFields?.length) return '1fr 1fr 9fr'
+  if (!props.gridFields?.length) return '1fr'
   // for the checkbox & sr no. columns
-  let columns = '0.5fr 0.5fr'
-  columns +=
-    ' ' +
-    props.gridFields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
-  // for the edit button column
-  columns += ' 0.5fr'
-
-  return columns
+  return props.gridFields
+    .map((col) => `minmax(0, ${col.width || 2}fr)`)
+    .join(' ')
 })
 
 const allRowsSelected = computed(() => {

From 545b60185226b20d3bb7c0fe51c77cd3da12fd44 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 22:24:21 +0530
Subject: [PATCH 09/24] fix: replaced preview switch with button

---
 .../src/components/Modals/DataFieldsModal.vue | 34 +++++++------------
 .../src/components/Modals/SidePanelModal.vue  | 34 +++++++------------
 2 files changed, 24 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/Modals/DataFieldsModal.vue b/frontend/src/components/Modals/DataFieldsModal.vue
index 1b7b9f40..87b4ce62 100644
--- a/frontend/src/components/Modals/DataFieldsModal.vue
+++ b/frontend/src/components/Modals/DataFieldsModal.vue
@@ -16,18 +16,19 @@
     <template #body-content>
       <div class="flex flex-col gap-3">
         <div class="flex justify-between gap-2">
-          <FormControl
-            type="select"
-            class="w-1/4"
-            v-model="_doctype"
-            :options="['CRM Lead', 'CRM Deal']"
-            @change="reload"
-          />
-          <Switch
-            v-model="preview"
+          <Button
             :label="preview ? __('Hide preview') : __('Show preview')"
-            size="sm"
+            @click="preview = !preview"
           />
+          <div class="flex flex-row-reverse gap-2">
+            <Button
+              :loading="loading"
+              :label="__('Save')"
+              variant="solid"
+              @click="saveChanges"
+            />
+            <Button :label="__('Reset')" @click="reload" />
+          </div>
         </div>
         <div v-if="tabs?.data">
           <FieldLayoutEditor
@@ -39,17 +40,6 @@
         </div>
       </div>
     </template>
-    <template #actions>
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          :loading="loading"
-          :label="__('Save')"
-          variant="solid"
-          @click="saveChanges"
-        />
-        <Button :label="__('Reset')" @click="reload" />
-      </div>
-    </template>
   </Dialog>
 </template>
 <script setup>
@@ -57,7 +47,7 @@ import FieldLayout from '@/components/FieldLayout.vue'
 import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { capture } from '@/telemetry'
-import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
 import { ref, watch, onMounted, nextTick } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
index 53a2a938..2302cb00 100644
--- a/frontend/src/components/Modals/SidePanelModal.vue
+++ b/frontend/src/components/Modals/SidePanelModal.vue
@@ -16,18 +16,19 @@
     <template #body-content>
       <div class="flex flex-col gap-5.5">
         <div class="flex justify-between gap-2">
-          <FormControl
-            type="select"
-            class="w-1/4"
-            v-model="_doctype"
-            :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
-            @change="reload"
-          />
-          <Switch
-            v-model="preview"
+          <Button
             :label="preview ? __('Hide preview') : __('Show preview')"
-            size="sm"
+            @click="preview = !preview"
           />
+          <div class="flex flex-row-reverse gap-2">
+            <Button
+              :loading="loading"
+              :label="__('Save')"
+              variant="solid"
+              @click="saveChanges"
+            />
+            <Button :label="__('Reset')" @click="reload" />
+          </div>
         </div>
         <div v-if="tabs.data?.[0]?.sections" class="flex gap-4">
           <SidePanelLayoutEditor
@@ -66,17 +67,6 @@
         </div>
       </div>
     </template>
-    <template #actions>
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          :loading="loading"
-          :label="__('Save')"
-          variant="solid"
-          @click="saveChanges"
-        />
-        <Button :label="__('Reset')" @click="reload" />
-      </div>
-    </template>
   </Dialog>
 </template>
 <script setup>
@@ -85,7 +75,7 @@ import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SidePanelLayoutEditor from '@/components/SidePanelLayoutEditor.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { capture } from '@/telemetry'
-import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
 import { ref, watch, onMounted, nextTick } from 'vue'
 
 const props = defineProps({

From 6a06cbd08dee2dbc2933e7e1efc1ca4334ba5e89 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 23:11:12 +0530
Subject: [PATCH 10/24] fix: moved dropdown option to tab

---
 frontend/src/components/FieldLayoutEditor.vue | 126 +++++++++---------
 1 file changed, 66 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index dd5780c9..15df2f2b 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -1,70 +1,70 @@
 <template>
   <div class="flex flex-col gap-5.5">
     <div
-      class="flex justify-between items-center gap-1 text-base bg-surface-gray-2 rounded py-2 px-2.5"
+      class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5"
     >
-      <div class="flex items-center gap-1">
-        <Draggable
-          v-if="tabs.length && !tabs[tabIndex].no_tabs"
-          :list="tabs"
-          item-key="label"
-          class="flex items-center gap-1"
-          @end="(e) => (tabIndex = e.newIndex)"
-        >
-          <template #item="{ element: tab, index: i }">
-            <div
-              class="cursor-pointer rounded"
-              :class="[
-                tabIndex == i
-                  ? 'text-ink-gray-9 bg-surface-white shadow-sm'
-                  : 'text-ink-gray-5 hover:text-ink-gray-9 hover:bg-surface-white hover:shadow-sm',
-                tab.editingLabel ? 'p-1' : 'px-2 py-1',
-              ]"
-              @click="tabIndex = i"
-            >
-              <div @dblclick="() => (tab.editingLabel = true)">
-                <div v-if="!tab.editingLabel" class="flex items-center gap-2">
-                  {{ __(tab.label) || __('Untitled') }}
-                </div>
-                <div v-else class="flex gap-1 items-center">
-                  <Input
-                    v-model="tab.label"
-                    @keydown.enter="tab.editingLabel = false"
-                    @blur="tab.editingLabel = false"
-                    @click.stop
-                  />
-                  <Button
-                    v-if="tab.editingLabel"
-                    icon="check"
-                    variant="ghost"
-                    @click="tab.editingLabel = false"
-                  />
-                </div>
+      <Draggable
+        v-if="tabs.length && !tabs[tabIndex].no_tabs"
+        :list="tabs"
+        item-key="label"
+        class="flex items-center gap-2"
+        @end="(e) => (tabIndex = e.newIndex)"
+      >
+        <template #item="{ element: tab, index: i }">
+          <div
+            class="flex items-center gap-2 cursor-pointer rounded"
+            :class="[
+              tabIndex == i
+                ? 'text-ink-gray-9 bg-surface-white shadow-sm'
+                : 'text-ink-gray-5 hover:text-ink-gray-9 hover:bg-surface-white hover:shadow-sm',
+              tab.editingLabel ? 'p-1' : 'px-2 py-1',
+            ]"
+            @click="tabIndex = i"
+          >
+            <div @dblclick="() => (tab.editingLabel = true)">
+              <div v-if="!tab.editingLabel" class="flex items-center gap-2">
+                {{ __(tab.label) || __('Untitled') }}
+              </div>
+              <div v-else class="flex gap-1 items-center">
+                <Input
+                  v-model="tab.label"
+                  @keydown.enter="tab.editingLabel = false"
+                  @blur="tab.editingLabel = false"
+                  @click.stop
+                />
+                <Button
+                  v-if="tab.editingLabel"
+                  icon="check"
+                  variant="ghost"
+                  @click="tab.editingLabel = false"
+                />
               </div>
             </div>
-          </template>
-        </Draggable>
-        <Button
-          variant="ghost"
-          class="!h-6.5 !text-ink-gray-5 hover:!text-ink-gray-9"
-          @click="addTab"
-          :label="__('Add Tab')"
-        >
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4" />
-          </template>
-        </Button>
-      </div>
-      <Dropdown
-        v-if="tabs.length && !tabs[tabIndex].no_tabs"
-        :options="getTabOptions(tabs[tabIndex])"
-      >
-        <template #default>
-          <Button variant="ghost">
-            <FeatherIcon name="more-horizontal" class="h-4" />
-          </Button>
+            <Dropdown
+              v-if="!tab.no_tabs && tabIndex == i"
+              :options="getTabOptions(tab)"
+              class="!h-4"
+              @click.stop
+            >
+              <template #default>
+                <Button variant="ghost" class="!p-1 !h-4">
+                  <FeatherIcon name="more-horizontal" class="h-4" />
+                </Button>
+              </template>
+            </Dropdown>
+          </div>
         </template>
-      </Dropdown>
+      </Draggable>
+      <Button
+        variant="ghost"
+        class="!h-6.5 !text-ink-gray-5 hover:!text-ink-gray-9"
+        @click="addTab"
+        :label="__('Add Tab')"
+      >
+        <template v-slot:[slotName]>
+          <FeatherIcon name="plus" class="h-4" />
+        </template>
+      </Button>
     </div>
     <div v-show="tabIndex == i" v-for="(tab, i) in tabs" :key="tab.label">
       <Draggable
@@ -207,6 +207,12 @@ const props = defineProps({
 })
 
 const tabIndex = ref(0)
+const slotName = computed(() => {
+  if (props.tabs.length == 1 && props.tabs[0].no_tabs) {
+    return 'prefix'
+  }
+  return 'default'
+})
 
 const restrictedFieldTypes = [
   'Geolocation',

From 0b6187c94825354e22903a3d9d70403c638a4b80 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 24 Dec 2024 01:28:49 +0530
Subject: [PATCH 11/24] chore: truncate field name

---
 frontend/src/components/FieldLayoutEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index 15df2f2b..b6a825b3 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -126,9 +126,9 @@
                 <div
                   class="px-2.5 py-2 border border-outline-gray-2 rounded text-base bg-surface-modal text-ink-gray-8 flex items-center leading-4 justify-between gap-2"
                 >
-                  <div class="flex items-center gap-2">
+                  <div class="flex items-center gap-2 truncate">
                     <DragVerticalIcon class="h-3.5 cursor-grab" />
-                    <div>{{ field.label }}</div>
+                    <div class="truncate">{{ field.label }}</div>
                   </div>
                   <Button
                     variant="ghost"

From 121d93adeae43ad67ecbcd39144c17738fdbfbbf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 11:41:25 +0530
Subject: [PATCH 12/24] build(deps): bump frappeui to 0.1.94

---
 frappe-ui             |  2 +-
 frontend/package.json |  2 +-
 yarn.lock             | 10 ++++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 5a4f3c8d..46086c52 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 5a4f3c8d4f12efba37b9a83a51a59b53fa758be0
+Subproject commit 46086c524bc218d989c68ca54cd13a37e693fab9
diff --git a/frontend/package.json b/frontend/package.json
index 2782be37..5e247fa7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.91",
+    "frappe-ui": "^0.1.94",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 5d9a0c54..43982d5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,10 +2388,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@^0.1.91:
-  version "0.1.93"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.93.tgz#0443800e195cddcff88ba875989148a92a270206"
-  integrity sha512-21VUcBBB9g1o7Iv/TW8ng3SdCxsm9G/g0rEdC9Y1Vqx1A1Ucf8VtVFECX2MgoDrLAwVOBKayU5BMaS1fuphcnA==
+frappe-ui@^0.1.94:
+  version "0.1.94"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.94.tgz#574a193ce51b47cb2747a5d5f9e9fe91b164e3a6"
+  integrity sha512-WV7nApCrDBqtKPPiVVxqFgA0JdWQz9kATZylfmMJQrSWszHCx0k0eriTSvT9+0vmtT0T9UYqLfXnhNj0lnqYNA==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"
@@ -3940,6 +3940,7 @@ sourcemap-codec@^1.4.8:
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4024,6 +4025,7 @@ stringify-object@^3.3.0:
     is-regexp "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

From 437847a62e0cdf9a2ccbcf01de950951dd1a0f0b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 11:49:37 +0530
Subject: [PATCH 13/24] fix: rearrange quick entry editor action buttons

---
 .../src/components/Modals/QuickEntryModal.vue | 38 ++++++-------------
 1 file changed, 11 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Modals/QuickEntryModal.vue b/frontend/src/components/Modals/QuickEntryModal.vue
index f80ea32e..4f32a7e5 100644
--- a/frontend/src/components/Modals/QuickEntryModal.vue
+++ b/frontend/src/components/Modals/QuickEntryModal.vue
@@ -16,24 +16,19 @@
     <template #body-content>
       <div class="flex flex-col gap-3">
         <div class="flex justify-between gap-2">
-          <FormControl
-            type="select"
-            class="w-1/4"
-            v-model="_doctype"
-            :options="[
-              'CRM Lead',
-              'CRM Deal',
-              'Contact',
-              'CRM Organization',
-              'Address',
-            ]"
-            @change="reload"
-          />
-          <Switch
-            v-model="preview"
+          <Button
             :label="preview ? __('Hide preview') : __('Show preview')"
-            size="sm"
+            @click="preview = !preview"
           />
+          <div class="flex flex-row-reverse gap-2">
+            <Button
+              :loading="loading"
+              :label="__('Save')"
+              variant="solid"
+              @click="saveChanges"
+            />
+            <Button :label="__('Reset')" @click="reload" />
+          </div>
         </div>
         <div v-if="tabs?.data">
           <FieldLayoutEditor
@@ -45,17 +40,6 @@
         </div>
       </div>
     </template>
-    <template #actions>
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          :loading="loading"
-          :label="__('Save')"
-          variant="solid"
-          @click="saveChanges"
-        />
-        <Button :label="__('Reset')" @click="reload" />
-      </div>
-    </template>
   </Dialog>
 </template>
 <script setup>

From 6990723ee5918d20d0addc255b04d126fd830bd9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 12:34:31 +0530
Subject: [PATCH 14/24] fix: dark mode in grid

---
 frontend/src/components/Controls/Grid.vue | 45 ++++++++++++-----------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 0a42d7b4..edbc1519 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="flex flex-col text-base">
-    <div v-if="label" class="mb-1.5 text-sm text-gray-600">
+    <div v-if="label" class="mb-1.5 text-sm text-ink-gray-5">
       {{ __(label) }}
     </div>
 
-    <div class="rounded border border-gray-100">
+    <div class="rounded border border-outline-gray-modals">
       <!-- Header -->
       <div
-        class="grid-header flex items-center rounded-t-sm bg-gray-100 text-gray-600 truncate"
+        class="grid-header flex items-center rounded-t-[7px] bg-surface-gray-2 text-ink-gray-5 truncate"
       >
-        <div class="inline-flex items-center justify-center border-r p-2 w-12">
+        <div
+          class="inline-flex items-center justify-center border-r border-outline-gray-2 h-8 p-2 w-12"
+        >
           <Checkbox
             class="cursor-pointer duration-300"
             :modelValue="allRowsSelected"
@@ -17,7 +19,7 @@
           />
         </div>
         <div
-          class="inline-flex items-center justify-center border-r py-2 px-1 w-12"
+          class="inline-flex items-center justify-center border-r border-outline-gray-2 py-2 px-1 w-12"
         >
           {{ __('No') }}
         </div>
@@ -27,7 +29,7 @@
         >
           <div
             v-if="gridFields?.length"
-            class="border-r p-2 truncate"
+            class="border-r border-outline-gray-2 p-2 truncate"
             v-for="field in gridFields"
             :key="field.name"
             :title="field.label"
@@ -42,10 +44,10 @@
         <Draggable class="w-full" v-model="rows" group="rows" item-key="name">
           <template #item="{ element: row, index }">
             <div
-              class="grid-row flex cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
+              class="grid-row flex cursor-pointer items-center border-b border-outline-gray-modals bg-surface-modals last:rounded-b last:border-b-0"
             >
               <div
-                class="inline-flex h-9.5 items-center justify-center border-r p-2 w-12"
+                class="inline-flex h-9.5 items-center justify-center border-r border-outline-gray-modals p-2 w-12"
               >
                 <Checkbox
                   class="cursor-pointer duration-300"
@@ -54,7 +56,7 @@
                 />
               </div>
               <div
-                class="flex h-9.5 items-center justify-center border-r py-2 px-1 text-sm text-gray-800 w-12"
+                class="flex h-9.5 items-center justify-center border-r border-outline-gray-modals py-2 px-1 text-sm text-ink-gray-8 w-12"
               >
                 {{ index + 1 }}
               </div>
@@ -64,13 +66,13 @@
               >
                 <div
                   v-if="gridFields?.length"
-                  class="border-r border-gray-100 h-full"
+                  class="border-r border-outline-gray-modals h-full"
                   v-for="field in gridFields"
                   :key="field.name"
                 >
                   <Link
                     v-if="field.type === 'Link'"
-                    class="text-sm text-gray-800"
+                    class="text-sm text-ink-gray-8"
                     :value="row[field.name]"
                     :doctype="field.options"
                     :filters="field.filters"
@@ -108,7 +110,7 @@
                     icon-left=""
                     variant="outline"
                     :formatter="(date) => getFormat(date, '', true)"
-                    input-class="border-none text-sm text-gray-800"
+                    input-class="border-none text-sm text-ink-gray-8"
                     @change="
                       (data: String) =>
                         field.onChange && field.onChange(data, index)
@@ -120,7 +122,7 @@
                     icon-left=""
                     variant="outline"
                     :formatter="(date) => getFormat(date, '', true, true)"
-                    input-class="border-none text-sm text-gray-800"
+                    input-class="border-none text-sm text-ink-gray-8"
                     @change="
                       (data: String) =>
                         field.onChange && field.onChange(data, index)
@@ -160,7 +162,7 @@
                   />
                   <FormControl
                     v-else-if="field.type === 'Select'"
-                    class="text-sm text-gray-800"
+                    class="text-sm text-ink-gray-8"
                     v-model="row[field.name]"
                     type="select"
                     :options="field.options"
@@ -176,7 +178,7 @@
                   />
                   <FormControl
                     v-else
-                    class="text-sm text-gray-800"
+                    class="text-sm text-ink-gray-8"
                     v-model="row[field.name]"
                     type="text"
                     :options="field.options"
@@ -195,9 +197,10 @@
               <div class="edit-row w-12">
                 <Button
                   class="flex w-full items-center justify-center rounded"
+                  variant="outline"
                   @click="showRowList[index] = true"
                 >
-                  <EditIcon class="h-4 w-4 text-gray-700" />
+                  <EditIcon class="h-4 w-4 text-ink-gray-7" />
                 </Button>
               </div>
               <Dialog
@@ -222,7 +225,7 @@
 
       <div
         v-else
-        class="flex flex-col items-center rounded p-5 text-sm text-gray-600"
+        class="flex flex-col items-center rounded p-5 text-sm text-ink-gray-5"
       >
         {{ __('No Data') }}
       </div>
@@ -334,7 +337,7 @@ const deleteRows = () => {
 }
 
 :deep(.grid-row input:focus-within) {
-  border: 1px solid #d1d8dd;
+  border: 1px solid var(--outline-gray-2);
 }
 
 /* For select field */
@@ -348,7 +351,7 @@ const deleteRows = () => {
 :deep(.grid-row button) {
   border: none;
   border-radius: 0;
-  background-color: white;
+  background-color: var(--surface-white);
   height: 38px;
 }
 
@@ -358,10 +361,10 @@ const deleteRows = () => {
 
 :deep(.grid-row button:focus, .grid-row button:hover) {
   box-shadow: none;
-  background-color: white;
+  background-color: var(--surface-white);
 }
 
 :deep(.grid-row button:focus-within) {
-  border: 1px solid #d1d8dd;
+  border: 1px solid var(--outline-gray-2);
 }
 </style>

From 789160fddc5e345212e8beb1ac714ed41b0025ba Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 12:36:57 +0530
Subject: [PATCH 15/24] chore: removed unused grid control in grid

---
 frontend/src/components/Controls/Grid.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index edbc1519..14a54c9c 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -81,12 +81,6 @@
                         field.onChange && field.onChange(data, index)
                     "
                   />
-                  <Grid
-                    v-else-if="field.type === 'Table'"
-                    v-model="data[field.name]"
-                    :fields="field.fields || []"
-                    :gridFields="field.gridFields || []"
-                  />
                   <div
                     v-else-if="field.type === 'Check'"
                     class="flex h-full justify-center items-center"
@@ -248,7 +242,6 @@
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import Link from '@/components/Controls/Link.vue'
-import Grid from '@/components/Controls/Grid.vue'
 import { GridColumn, GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
 import {

From 59589759c4c66f1e0b32c4bc392da69e3b569697 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 13:25:55 +0530
Subject: [PATCH 16/24] fix: added Grid Row option in Fields Layout doctype to
 store grid row fields layout

---
 crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
index d31df954..7094e58d 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.json
@@ -27,7 +27,7 @@
    "in_list_view": 1,
    "in_standard_filter": 1,
    "label": "Type",
-   "options": "Quick Entry\nSide Panel\nData Fields"
+   "options": "Quick Entry\nSide Panel\nData Fields\nGrid Row"
   },
   {
    "fieldname": "section_break_ttpm",
@@ -46,7 +46,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-12-05 13:29:37.021412",
+ "modified": "2024-12-29 12:58:54.280569",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Fields Layout",

From 8471cbd0449ff46a6a8294edc8dc684591373261 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 13:27:44 +0530
Subject: [PATCH 17/24] fix: allow editing grid row fields layout

---
 frontend/src/components/Controls/Grid.vue     |  40 +++---
 .../Controls/GridRowFieldsModal.vue           | 125 ++++++++++++++++++
 .../src/components/Controls/GridRowModal.vue  |  62 +++++++++
 frontend/src/components/FieldLayout.vue       |   1 +
 4 files changed, 206 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/Controls/GridRowFieldsModal.vue
 create mode 100644 frontend/src/components/Controls/GridRowModal.vue

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 14a54c9c..0033d5b1 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -197,21 +197,14 @@
                   <EditIcon class="h-4 w-4 text-ink-gray-7" />
                 </Button>
               </div>
-              <Dialog
+              <GridRowModal
+                v-if="showRowList[index]"
                 v-model="showRowList[index]"
-                :options="{
-                  title: __('Editing Row {0}', [index + 1]),
-                  size: '4xl',
-                }"
-              >
-                <template #body-content>
-                  <FieldLayout
-                    v-if="fields?.length"
-                    :tabs="fields"
-                    :data="row"
-                  />
-                </template>
-              </Dialog>
+                v-model:showGridRowFieldsModal="showGridRowFieldsModal"
+                :index="index"
+                :data="row"
+                :doctype="doctype"
+              />
             </div>
           </template>
         </Draggable>
@@ -236,21 +229,21 @@
       <Button :label="__('Add Row')" @click="addRow" />
     </div>
   </div>
+  <GridRowFieldsModal
+    v-if="showGridRowFieldsModal"
+    v-model="showGridRowFieldsModal"
+    :doctype="doctype"
+  />
 </template>
 
 <script setup lang="ts">
+import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
+import GridRowModal from '@/components/Controls/GridRowModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
 import Link from '@/components/Controls/Link.vue'
 import { GridColumn, GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
-import {
-  Dialog,
-  FormControl,
-  Checkbox,
-  DateTimePicker,
-  DatePicker,
-} from 'frappe-ui'
+import { FormControl, Checkbox, DateTimePicker, DatePicker } from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { ref, reactive, computed, PropType } from 'vue'
 
@@ -258,6 +251,7 @@ const props = defineProps<{
   label?: string
   gridFields: GridColumn[]
   fields: GridColumn[]
+  doctype: string
 }>()
 
 const rows = defineModel({
@@ -267,6 +261,8 @@ const rows = defineModel({
 const showRowList = ref(new Array(rows.value.length).fill(false))
 const selectedRows = reactive(new Set<string>())
 
+const showGridRowFieldsModal = ref(false)
+
 const gridTemplateColumns = computed(() => {
   if (!props.gridFields?.length) return '1fr'
   // for the checkbox & sr no. columns
diff --git a/frontend/src/components/Controls/GridRowFieldsModal.vue b/frontend/src/components/Controls/GridRowFieldsModal.vue
new file mode 100644
index 00000000..4c18383f
--- /dev/null
+++ b/frontend/src/components/Controls/GridRowFieldsModal.vue
@@ -0,0 +1,125 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body-title>
+      <h3
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
+      >
+        <div>{{ __('Edit Grid Row Fields Layout') }}</div>
+        <Badge
+          v-if="dirty"
+          :label="__('Not Saved')"
+          variant="subtle"
+          theme="orange"
+        />
+      </h3>
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-3">
+        <div class="flex justify-between gap-2">
+          <Button
+            :label="preview ? __('Hide preview') : __('Show preview')"
+            @click="preview = !preview"
+          />
+          <div class="flex flex-row-reverse gap-2">
+            <Button
+              :loading="loading"
+              :label="__('Save')"
+              variant="solid"
+              @click="saveChanges"
+            />
+            <Button :label="__('Reset')" @click="reload" />
+          </div>
+        </div>
+        <div v-if="tabs?.data">
+          <FieldLayoutEditor
+            v-if="!preview"
+            :tabs="tabs.data"
+            :doctype="_doctype"
+          />
+          <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { capture } from '@/telemetry'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const emit = defineEmits(['reload'])
+
+const show = defineModel()
+const _doctype = ref(props.doctype)
+const loading = ref(false)
+const dirty = ref(false)
+const preview = ref(false)
+
+function getParams() {
+  return { doctype: _doctype.value, type: 'Grid Row' }
+}
+
+const tabs = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['GridRowFieldsModal', _doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    tabs.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+watch(
+  () => tabs?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
+  },
+  { deep: true },
+)
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  nextTick(() => {
+    tabs.params = getParams()
+    tabs.reload()
+  })
+}
+
+function saveChanges() {
+  let _tabs = JSON.parse(JSON.stringify(tabs.data))
+  _tabs.forEach((tab) => {
+    if (!tab.sections) return
+    tab.sections.forEach((section) => {
+      if (!section.fields) return
+      section.fields = section.fields.map(
+        (field) => field.fieldname || field.name,
+      )
+    })
+  })
+  loading.value = true
+  call(
+    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
+    {
+      doctype: _doctype.value,
+      type: 'Grid Row',
+      layout: JSON.stringify(_tabs),
+    },
+  ).then(() => {
+    loading.value = false
+    show.value = false
+    capture('data_fields_layout_builder', { doctype: _doctype.value })
+    emit('reload')
+  })
+}
+</script>
diff --git a/frontend/src/components/Controls/GridRowModal.vue b/frontend/src/components/Controls/GridRowModal.vue
new file mode 100644
index 00000000..69351f22
--- /dev/null
+++ b/frontend/src/components/Controls/GridRowModal.vue
@@ -0,0 +1,62 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '4xl' }">
+    <template #body>
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
+              {{ __('Editing Row {0}', [index + 1]) }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button
+              v-if="isManager()"
+              variant="ghost"
+              class="w-7"
+              @click="openGridRowFieldsModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div>
+          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data" />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import FieldLayout from '@/components/FieldLayout.vue'
+import { usersStore } from '@/stores/users'
+import { createResource } from 'frappe-ui'
+import { nextTick } from 'vue'
+
+const props = defineProps({
+  index: Number,
+  data: Object,
+  doctype: String,
+})
+
+const { isManager } = usersStore()
+
+const show = defineModel()
+const showGridRowFieldsModal = defineModel('showGridRowFieldsModal')
+
+const tabs = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['GridRow', props.doctype],
+  params: { doctype: props.doctype, type: 'Grid Row' },
+  auto: true,
+})
+
+function openGridRowFieldsModal() {
+  showGridRowFieldsModal.value = true
+  nextTick(() => (show.value = false))
+}
+</script>
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 61f4630d..95408634 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -81,6 +81,7 @@
                     v-model="data[field.name]"
                     :fields="field.fields"
                     :gridFields="field.gridFields"
+                    :doctype="field.options"
                   />
                   <FormControl
                     v-else-if="field.type === 'Select'"

From ecd10fb73bb8ad423e15dd5eb76343362671b78b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 13:43:54 +0530
Subject: [PATCH 18/24] refactor: change event is not needed in grid row fields

---
 .../src/components/Activities/DataFields.vue  | 23 +----
 frontend/src/components/Controls/Grid.vue     | 89 ++++---------------
 frontend/src/components/FieldLayout.vue       |  5 +-
 3 files changed, 24 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index b4b58ffb..cca10e04 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -90,7 +90,7 @@ const data = createDocumentResource({
       createToast({
         title: 'Data Updated',
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
     },
     onError: (err) => {
@@ -117,24 +117,9 @@ function parseTabs(_tabs) {
     tab.sections.forEach((section) => {
       section.fields.forEach((field) => {
         if (field.type === 'Table') {
-          let name = props.meta[field.name].df.fieldname
-          let fields = props.meta[field.name].fields
-          let _fields = fields.map((field) => {
-            return {
-              ...getFieldObj(field),
-              onChange: (value, index) => {
-                data.doc[name][index][field.fieldname] = value
-              },
-            }
-          })
-
-          field.fields = [
-            {
-              no_tabs: true,
-              sections: [{ columns: 3, hideLabel: true, fields: _fields }],
-            },
-          ]
-          field.gridFields = _fields.filter((field) => field.in_list_view)
+          field.fields = props.meta[field.name].fields
+            .filter((field) => field.in_list_view)
+            .map((field) => getFieldObj(field))
         }
       })
     })
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 0033d5b1..caf3e3e3 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -28,9 +28,9 @@
           :style="{ gridTemplateColumns: gridTemplateColumns }"
         >
           <div
-            v-if="gridFields?.length"
+            v-if="fields?.length"
             class="border-r border-outline-gray-2 p-2 truncate"
-            v-for="field in gridFields"
+            v-for="field in fields"
             :key="field.name"
             :title="field.label"
           >
@@ -65,21 +65,17 @@
                 :style="{ gridTemplateColumns: gridTemplateColumns }"
               >
                 <div
-                  v-if="gridFields?.length"
+                  v-if="fields?.length"
                   class="border-r border-outline-gray-modals h-full"
-                  v-for="field in gridFields"
+                  v-for="field in fields"
                   :key="field.name"
                 >
                   <Link
                     v-if="field.type === 'Link'"
                     class="text-sm text-ink-gray-8"
-                    :value="row[field.name]"
+                    v-model="row[field.name]"
                     :doctype="field.options"
                     :filters="field.filters"
-                    @change="
-                      (data: String) =>
-                        field.onChange && field.onChange(data, index)
-                    "
                   />
                   <div
                     v-else-if="field.type === 'Check'"
@@ -88,39 +84,23 @@
                     <Checkbox
                       class="cursor-pointer duration-300"
                       v-model="row[field.name]"
-                      @change="
-                        (e: Event) =>
-                          field.onChange &&
-                          field.onChange(
-                            (e.target as HTMLInputElement).checked,
-                            index,
-                          )
-                      "
                     />
                   </div>
                   <DatePicker
                     v-else-if="field.type === 'Date'"
-                    :value="row[field.name]"
+                    v-model="row[field.name]"
                     icon-left=""
                     variant="outline"
                     :formatter="(date) => getFormat(date, '', true)"
                     input-class="border-none text-sm text-ink-gray-8"
-                    @change="
-                      (data: String) =>
-                        field.onChange && field.onChange(data, index)
-                    "
                   />
                   <DateTimePicker
                     v-else-if="field.type === 'Datetime'"
-                    :value="row[field.name]"
+                    v-model="row[field.name]"
                     icon-left=""
                     variant="outline"
                     :formatter="(date) => getFormat(date, '', true, true)"
                     input-class="border-none text-sm text-ink-gray-8"
-                    @change="
-                      (data: String) =>
-                        field.onChange && field.onChange(data, index)
-                    "
                   />
                   <FormControl
                     v-else-if="
@@ -129,62 +109,30 @@
                       )
                     "
                     type="textarea"
-                    v-model="row[field.name]"
                     variant="outline"
-                    @change="
-                      (e: Event) =>
-                        field.onChange &&
-                        field.onChange(
-                          (e.target as HTMLInputElement).value,
-                          index,
-                        )
-                    "
+                    v-model="row[field.name]"
                   />
                   <FormControl
                     v-else-if="['Int'].includes(field.type)"
                     type="number"
-                    v-model="row[field.name]"
                     variant="outline"
-                    @change="
-                      (e: Event) =>
-                        field.onChange &&
-                        field.onChange(
-                          (e.target as HTMLInputElement).value,
-                          index,
-                        )
-                    "
+                    v-model="row[field.name]"
                   />
                   <FormControl
                     v-else-if="field.type === 'Select'"
                     class="text-sm text-ink-gray-8"
-                    v-model="row[field.name]"
                     type="select"
-                    :options="field.options"
                     variant="outline"
-                    @change="
-                      (e: Event) =>
-                        field.onChange &&
-                        field.onChange(
-                          (e.target as HTMLInputElement).value,
-                          index,
-                        )
-                    "
+                    v-model="row[field.name]"
+                    :options="field.options"
                   />
                   <FormControl
                     v-else
                     class="text-sm text-ink-gray-8"
-                    v-model="row[field.name]"
                     type="text"
-                    :options="field.options"
                     variant="outline"
-                    @change="
-                      (e: Event) =>
-                        field.onChange &&
-                        field.onChange(
-                          (e.target as HTMLInputElement).value,
-                          index,
-                        )
-                    "
+                    v-model="row[field.name]"
+                    :options="field.options"
                   />
                 </div>
               </div>
@@ -218,7 +166,7 @@
       </div>
     </div>
 
-    <div v-if="gridFields?.length" class="mt-2 flex flex-row gap-2">
+    <div v-if="fields?.length" class="mt-2 flex flex-row gap-2">
       <Button
         v-if="showDeleteBtn"
         :label="__('Delete')"
@@ -249,7 +197,6 @@ import { ref, reactive, computed, PropType } from 'vue'
 
 const props = defineProps<{
   label?: string
-  gridFields: GridColumn[]
   fields: GridColumn[]
   doctype: string
 }>()
@@ -264,11 +211,9 @@ const selectedRows = reactive(new Set<string>())
 const showGridRowFieldsModal = ref(false)
 
 const gridTemplateColumns = computed(() => {
-  if (!props.gridFields?.length) return '1fr'
+  if (!props.fields?.length) return '1fr'
   // for the checkbox & sr no. columns
-  return props.gridFields
-    .map((col) => `minmax(0, ${col.width || 2}fr)`)
-    .join(' ')
+  return props.fields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
 })
 
 const allRowsSelected = computed(() => {
@@ -296,7 +241,7 @@ const toggleSelectRow = (row: GridRow) => {
 
 const addRow = () => {
   const newRow = {} as GridRow
-  props.gridFields?.forEach((field) => {
+  props.fields?.forEach((field) => {
     if (field.type === 'Check') newRow[field.name] = false
     else newRow[field.name] = ''
   })
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 95408634..31c9ecf9 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -80,7 +80,6 @@
                     v-else-if="field.type === 'Table'"
                     v-model="data[field.name]"
                     :fields="field.fields"
-                    :gridFields="field.gridFields"
                     :doctype="field.options"
                   />
                   <FormControl
@@ -185,7 +184,9 @@
                   />
                   <FormControl
                     v-else-if="
-                      ['Small Text', 'Text', 'Long Text', 'Code'].includes(field.type)
+                      ['Small Text', 'Text', 'Long Text', 'Code'].includes(
+                        field.type,
+                      )
                     "
                     type="textarea"
                     :placeholder="getPlaceholder(field)"

From 2cd47e66315088ac6bc2def47d9ad002937faaee Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 16:26:03 +0530
Subject: [PATCH 19/24] fix: use getMeta to get child table fields meta

---
 .../src/components/Activities/Activities.vue  |  6 +-
 .../src/components/Activities/DataFields.vue  | 39 ------------
 frontend/src/components/Controls/Grid.vue     | 61 +++++++++++++++----
 .../src/components/Kanban/KanbanSettings.vue  |  3 -
 frontend/src/stores/meta.js                   | 29 ++++++++-
 5 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 169ef24d..baf28de0 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -365,11 +365,7 @@
       </div>
     </div>
     <div v-else-if="title == 'Data'" class="h-full flex flex-col px-3 sm:px-10">
-      <DataFields
-        :doctype="doctype"
-        :docname="doc.data.name"
-        :meta="doc.data.fields_meta"
-      />
+      <DataFields :doctype="doctype" :docname="doc.data.name" />
     </div>
     <div
       v-else
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index cca10e04..851bf2ad 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -71,10 +71,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  meta: {
-    type: Object,
-    required: true,
-  },
 })
 
 const { isManager } = usersStore()
@@ -109,43 +105,8 @@ const tabs = createResource({
   cache: ['DataFields', props.doctype],
   params: { doctype: props.doctype, type: 'Data Fields' },
   auto: true,
-  transform: (_tabs) => parseTabs(_tabs),
 })
 
-function parseTabs(_tabs) {
-  _tabs.forEach((tab) => {
-    tab.sections.forEach((section) => {
-      section.fields.forEach((field) => {
-        if (field.type === 'Table') {
-          field.fields = props.meta[field.name].fields
-            .filter((field) => field.in_list_view)
-            .map((field) => getFieldObj(field))
-        }
-      })
-    })
-  })
-
-  return _tabs
-}
-
-function getFieldObj(field) {
-  if (field.fieldtype === 'Select' && typeof field.options === 'string') {
-    field.options = field.options.split('\n').map((option) => {
-      return {
-        label: option,
-        value: option,
-      }
-    })
-  }
-  return {
-    label: field.label,
-    name: field.fieldname,
-    type: field.fieldtype,
-    options: field.options,
-    in_list_view: field.in_list_view,
-  }
-}
-
 function saveChanges() {
   data.save.submit()
 }
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index caf3e3e3..0d602d2d 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -108,6 +108,7 @@
                         field.type,
                       )
                     "
+                    rows="1"
                     type="textarea"
                     variant="outline"
                     v-model="row[field.name]"
@@ -138,7 +139,7 @@
               </div>
               <div class="edit-row w-12">
                 <Button
-                  class="flex w-full items-center justify-center rounded"
+                  class="flex w-full items-center justify-center rounded border-0"
                   variant="outline"
                   @click="showRowList[index] = true"
                 >
@@ -189,18 +190,26 @@ import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
 import GridRowModal from '@/components/Controls/GridRowModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
-import { GridColumn, GridRow } from '@/types/controls'
+import { GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
-import { FormControl, Checkbox, DateTimePicker, DatePicker } from 'frappe-ui'
+import { getMeta } from '@/stores/meta'
+import {
+  FeatherIcon,
+  FormControl,
+  Checkbox,
+  DateTimePicker,
+  DatePicker,
+} from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { ref, reactive, computed, PropType } from 'vue'
 
 const props = defineProps<{
   label?: string
-  fields: GridColumn[]
   doctype: string
 }>()
 
+const { getGridSettings, getFields } = getMeta(props.doctype)
+
 const rows = defineModel({
   type: Array as PropType<GridRow[]>,
   default: () => [],
@@ -210,10 +219,36 @@ const selectedRows = reactive(new Set<string>())
 
 const showGridRowFieldsModal = ref(false)
 
+const fields = computed(() => {
+  let gridSettings = getGridSettings()
+  let gridFields = getFields()
+  if (gridSettings.length) {
+    let d = gridSettings.map((gs) =>
+      getFieldObj(gridFields.find((f) => f.fieldname === gs.fieldname)),
+    )
+    return d
+  }
+  return gridFields?.map((f) => getFieldObj(f)) || []
+})
+
+function getFieldObj(field) {
+  return {
+    label: field.label,
+    name: field.fieldname,
+    type: field.fieldtype,
+    options: field.options,
+    in_list_view: field.in_list_view,
+  }
+}
+
 const gridTemplateColumns = computed(() => {
-  if (!props.fields?.length) return '1fr'
+  if (!fields.value?.length) return '1fr'
   // for the checkbox & sr no. columns
-  return props.fields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
+  let gridSettings = getGridSettings()
+  if (gridSettings.length) {
+    return gridSettings.map((gs) => `minmax(0, ${gs.columns || 2}fr)`).join(' ')
+  }
+  return fields.value.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
 })
 
 const allRowsSelected = computed(() => {
@@ -241,7 +276,7 @@ const toggleSelectRow = (row: GridRow) => {
 
 const addRow = () => {
   const newRow = {} as GridRow
-  props.fields?.forEach((field) => {
+  fields.value?.forEach((field) => {
     if (field.type === 'Check') newRow[field.name] = false
     else newRow[field.name] = ''
   })
@@ -260,17 +295,21 @@ const deleteRows = () => {
 
 <style scoped>
 /* For Input fields */
-:deep(.grid-row input:not([type='checkbox'])) {
+:deep(.grid-row input:not([type='checkbox'])),
+:deep(.grid-row textarea) {
   border: none;
   border-radius: 0;
   height: 38px;
 }
 
-:deep(.grid-row input:focus, .grid-row input:hover) {
+:deep(.grid-row input:focus),
+:deep(.grid-row input:hover),
+:deep(.grid-row textarea:focus),
+:deep(.grid-row textarea:hover) {
   box-shadow: none;
 }
 
-:deep(.grid-row input:focus-within) {
+:deep(.grid-row input:focus-within) :deep(.grid-row textarea:focus-within) {
   border: 1px solid var(--outline-gray-2);
 }
 
@@ -293,7 +332,7 @@ const deleteRows = () => {
   border-bottom-right-radius: 7px;
 }
 
-:deep(.grid-row button:focus, .grid-row button:hover) {
+:deep(.grid-row button:focus) :deep(.grid-row button:hover) {
   box-shadow: none;
   background-color: var(--surface-white);
 }
diff --git a/frontend/src/components/Kanban/KanbanSettings.vue b/frontend/src/components/Kanban/KanbanSettings.vue
index 1fba9922..23f3faa0 100644
--- a/frontend/src/components/Kanban/KanbanSettings.vue
+++ b/frontend/src/components/Kanban/KanbanSettings.vue
@@ -166,9 +166,6 @@ const fields = createResource({
   params: { doctype: props.doctype, as_array: true },
   cache: ['kanban_fields', props.doctype],
   auto: true,
-  onSuccess: (data) => {
-    data
-  },
 })
 
 const allFields = computed({
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index af235059..5d972aad 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -1,8 +1,9 @@
 import { createResource } from 'frappe-ui'
 import { formatCurrency, formatNumber } from '@/utils/numberFormat.js'
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 
 const doctypeMeta = reactive({})
+const userSettings = ref({})
 
 export function getMeta(doctype) {
   const meta = createResource({
@@ -18,6 +19,8 @@ export function getMeta(doctype) {
       for (let dtMeta of dtMetas) {
         doctypeMeta[dtMeta.name] = dtMeta
       }
+
+      userSettings.value = JSON.parse(res.user_settings)
     },
   })
 
@@ -52,9 +55,33 @@ export function getMeta(doctype) {
     return formatCurrency(doc[fieldname], '', currency, precision)
   }
 
+  function getGridSettings(dt = null) {
+    dt = dt || doctype
+    if (!userSettings.value['GridView']?.[doctype]) return {}
+    return userSettings.value['GridView'][doctype]
+  }
+
+  function getFields(dt = null) {
+    dt = dt || doctype
+    return doctypeMeta[dt]?.fields.map((f) => {
+      if (f.fieldtype === 'Select' && typeof f.options === 'string') {
+        f.options = f.options.split('\n').map((option) => {
+          return {
+            label: option,
+            value: option,
+          }
+        })
+      }
+      return f
+    })
+  }
+
   return {
     meta,
     doctypeMeta,
+    userSettings,
+    getFields,
+    getGridSettings,
     getFormattedFloat,
     getFormattedPercent,
     getFormattedCurrency,

From 6d867d2d759738ce41b6364941990fd593726d1e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 16:29:41 +0530
Subject: [PATCH 20/24] fix: removed typescript for now

---
 frontend/src/components/Controls/Grid.vue | 32 ++++++++-------
 frontend/src/types/controls.ts            | 49 -----------------------
 2 files changed, 17 insertions(+), 64 deletions(-)
 delete mode 100644 frontend/src/types/controls.ts

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 0d602d2d..00f762d8 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -185,12 +185,11 @@
   />
 </template>
 
-<script setup lang="ts">
+<script setup>
 import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
 import GridRowModal from '@/components/Controls/GridRowModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
-import { GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
 import { getMeta } from '@/stores/meta'
 import {
@@ -203,19 +202,22 @@ import {
 import Draggable from 'vuedraggable'
 import { ref, reactive, computed, PropType } from 'vue'
 
-const props = defineProps<{
-  label?: string
-  doctype: string
-}>()
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
 
 const { getGridSettings, getFields } = getMeta(props.doctype)
 
-const rows = defineModel({
-  type: Array as PropType<GridRow[]>,
-  default: () => [],
-})
+const rows = defineModel()
 const showRowList = ref(new Array(rows.value.length).fill(false))
-const selectedRows = reactive(new Set<string>())
+const selectedRows = reactive(new Set())
 
 const showGridRowFieldsModal = ref(false)
 
@@ -258,15 +260,15 @@ const allRowsSelected = computed(() => {
 
 const showDeleteBtn = computed(() => selectedRows.size > 0)
 
-const toggleSelectAllRows = (iSelected: boolean) => {
+const toggleSelectAllRows = (iSelected) => {
   if (iSelected) {
-    rows.value.forEach((row: GridRow) => selectedRows.add(row.name))
+    rows.value.forEach((row) => selectedRows.add(row.name))
   } else {
     selectedRows.clear()
   }
 }
 
-const toggleSelectRow = (row: GridRow) => {
+const toggleSelectRow = (row) => {
   if (selectedRows.has(row.name)) {
     selectedRows.delete(row.name)
   } else {
@@ -275,7 +277,7 @@ const toggleSelectRow = (row: GridRow) => {
 }
 
 const addRow = () => {
-  const newRow = {} as GridRow
+  const newRow = {}
   fields.value?.forEach((field) => {
     if (field.type === 'Check') newRow[field.name] = false
     else newRow[field.name] = ''
diff --git a/frontend/src/types/controls.ts b/frontend/src/types/controls.ts
deleted file mode 100644
index 9d27299e..00000000
--- a/frontend/src/types/controls.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export type FieldTypes =
-  | 'Data'
-  | 'Int'
-  | 'Float'
-  | 'Currency'
-  | 'Check'
-  | 'Text'
-  | 'Small Text'
-  | 'Long Text'
-  | 'Code'
-  | 'Text Editor'
-  | 'Date'
-  | 'Datetime'
-  | 'Time'
-  | 'HTML'
-  | 'Image'
-  | 'Attach'
-  | 'Select'
-  | 'Read Only'
-  | 'Section Break'
-  | 'Column Break'
-  | 'Table'
-  | 'Button'
-  | 'Link'
-  | 'Dynamic Link'
-  | 'Password'
-  | 'Signature'
-  | 'Color'
-  | 'Barcode'
-  | 'Geolocation'
-  | 'Duration'
-  | 'Percent'
-  | 'Rating'
-  | 'Icon'
-
-// Grid / Child Table
-export interface GridColumn {
-  label: string
-  fieldname: string
-  fieldtype: FieldTypes
-  options?: string | string[]
-  width?: number
-  onChange?: (value: string, index: number) => void
-}
-
-export interface GridRow {
-  name: string
-  [fieldname: string]: string | number | boolean
-}

From 721c5321e3c2b7f4897bb542ce306ad6cce02b4c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 18:01:21 +0530
Subject: [PATCH 21/24] feat: update table columns in user settings

---
 crm/api/doc.py                                |   9 +-
 .../src/components/Activities/DataFields.vue  |   2 +-
 frontend/src/components/Controls/Grid.vue     |  26 ++-
 .../Controls/GridFieldsEditorModal.vue        | 158 ++++++++++++++++++
 frontend/src/components/FieldLayout.vue       |   1 +
 frontend/src/stores/meta.js                   |  26 +++
 6 files changed, 214 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/Controls/GridFieldsEditorModal.vue

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 266db1cc..64d14f6f 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -1,10 +1,11 @@
-import frappe
 import json
+
+import frappe
 from frappe import _
-from frappe.model.document import get_controller
 from frappe.model import no_value_fields
-from pypika import Criterion
+from frappe.model.document import get_controller
 from frappe.utils import make_filter_tuple
+from pypika import Criterion
 
 from crm.api.views import get_views
 from crm.fcrm.doctype.crm_form_script.crm_form_script import get_form_script
@@ -675,7 +676,7 @@ def get_assigned_users(doctype, name, default_assigned_to=None):
 
 @frappe.whitelist()
 def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
-	not_allowed_fieldtypes = list(frappe.model.no_value_fields) + ["Read Only"]
+	not_allowed_fieldtypes = [*list(frappe.model.no_value_fields), "Read Only"]
 	if allow_all_fieldtypes:
 		not_allowed_fieldtypes = []
 	fields = frappe.get_meta(doctype).fields
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 851bf2ad..7d3d7380 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -31,7 +31,7 @@
     <LoadingIndicator class="h-6 w-6" />
     <span>{{ __('Loading...') }}</span>
   </div>
-  <div v-else>
+  <div v-else class="pb-8">
     <FieldLayout
       v-if="tabs.data"
       :tabs="tabs.data"
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 00f762d8..d5a3b9ab 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -37,7 +37,15 @@
             {{ __(field.label) }}
           </div>
         </div>
-        <div class="w-12" />
+        <div class="w-12">
+          <Button
+            class="flex w-full items-center justify-center rounded !bg-surface-gray-2 border-0"
+            variant="outline"
+            @click="showGridFieldsEditorModal = true"
+          >
+            <FeatherIcon name="settings" class="h-4 w-4 text-ink-gray-7" />
+          </Button>
+        </div>
       </div>
       <!-- Rows -->
       <template v-if="rows.length">
@@ -183,9 +191,16 @@
     v-model="showGridRowFieldsModal"
     :doctype="doctype"
   />
+  <GridFieldsEditorModal
+    v-if="showGridFieldsEditorModal"
+    v-model="showGridFieldsEditorModal"
+    :doctype="doctype"
+    :parentDoctype="parentDoctype"
+  />
 </template>
 
 <script setup>
+import GridFieldsEditorModal from '@/components/Controls/GridFieldsEditorModal.vue'
 import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
 import GridRowModal from '@/components/Controls/GridRowModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
@@ -200,7 +215,7 @@ import {
   DatePicker,
 } from 'frappe-ui'
 import Draggable from 'vuedraggable'
-import { ref, reactive, computed, PropType } from 'vue'
+import { ref, reactive, computed } from 'vue'
 
 const props = defineProps({
   label: {
@@ -211,6 +226,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  parentDoctype: {
+    type: String,
+    required: true,
+  },
 })
 
 const { getGridSettings, getFields } = getMeta(props.doctype)
@@ -219,6 +238,7 @@ const rows = defineModel()
 const showRowList = ref(new Array(rows.value.length).fill(false))
 const selectedRows = reactive(new Set())
 
+const showGridFieldsEditorModal = ref(false)
 const showGridRowFieldsModal = ref(false)
 
 const fields = computed(() => {
@@ -250,7 +270,7 @@ const gridTemplateColumns = computed(() => {
   if (gridSettings.length) {
     return gridSettings.map((gs) => `minmax(0, ${gs.columns || 2}fr)`).join(' ')
   }
-  return fields.value.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
+  return fields.value.map(() => `minmax(0, 2fr)`).join(' ')
 })
 
 const allRowsSelected = computed(() => {
diff --git a/frontend/src/components/Controls/GridFieldsEditorModal.vue b/frontend/src/components/Controls/GridFieldsEditorModal.vue
new file mode 100644
index 00000000..f03e2488
--- /dev/null
+++ b/frontend/src/components/Controls/GridFieldsEditorModal.vue
@@ -0,0 +1,158 @@
+<template>
+  <Dialog v-model="show">
+    <template #body-title>
+      <h3
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
+      >
+        <div>{{ __('Edit Grid Fields Layout') }}</div>
+        <Badge
+          v-if="dirty"
+          :label="__('Not Saved')"
+          variant="subtle"
+          theme="orange"
+        />
+      </h3>
+    </template>
+    <template #body-content>
+      <div class="mt-4">
+        <div class="text-base text-ink-gray-8 mb-2">
+          {{ __('Fields Order') }}
+        </div>
+        <Draggable
+          v-if="oldFields.length"
+          :list="fields"
+          @end="reorder"
+          group="fields"
+          item-key="name"
+          class="flex flex-col gap-1"
+        >
+          <template #item="{ element: field }">
+            <div
+              class="px-1 py-0.5 border border-outline-gray-modals rounded text-base text-ink-gray-8 flex items-center justify-between gap-2"
+            >
+              <div class="flex items-center gap-2">
+                <DragVerticalIcon class="h-3.5 cursor-grab" />
+                <div>{{ field.label }}</div>
+              </div>
+              <div>
+                <Button variant="ghost" icon="x" @click="removeField(field)" />
+              </div>
+            </div>
+          </template>
+        </Draggable>
+        <Autocomplete
+          v-if="fields"
+          value=""
+          :options="fields"
+          @change="(e) => addField(e)"
+        >
+          <template #target="{ togglePopover }">
+            <Button
+              class="w-full mt-2"
+              @click="togglePopover()"
+              :label="__('Add Field')"
+            >
+              <template #prefix>
+                <FeatherIcon name="plus" class="h-4" />
+              </template>
+            </Button>
+          </template>
+          <template #item-label="{ option }">
+            <div class="flex flex-col gap-1">
+              <div>{{ option.label }}</div>
+              <div class="text-ink-gray-4 text-sm">
+                {{ `${option.fieldname} - ${option.fieldtype}` }}
+              </div>
+            </div>
+          </template>
+        </Autocomplete>
+      </div>
+    </template>
+    <template #actions>
+      <div class="flex flex-col gap-2">
+        <Button
+          v-if="dirty"
+          class="w-full"
+          :label="__('Reset')"
+          @click="reset"
+        />
+        <Button
+          class="w-full"
+          :label="__('Save')"
+          variant="solid"
+          @click="update"
+          :loading="loading"
+          :disabled="!dirty"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import { getMeta } from '@/stores/meta'
+import Draggable from 'vuedraggable'
+import { Dialog } from 'frappe-ui'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  doctype: String,
+  parentDoctype: String,
+})
+
+const { userSettings, getFields, getGridSettings, saveUserSettings } = getMeta(
+  props.doctype,
+)
+
+const show = defineModel()
+
+const loading = ref(false)
+
+const dirty = computed(() => {
+  return JSON.stringify(fields.value) !== JSON.stringify(oldFields.value)
+})
+
+const oldFields = computed(() => {
+  let _fields = getFields()
+  let gridSettings = getGridSettings()
+
+  if (gridSettings.length) {
+    return gridSettings.map((field) => {
+      return _fields.find((f) => f.fieldname === field.fieldname)
+    })
+  }
+  return _fields?.filter((field) => field.in_list_view)
+})
+
+const fields = ref(JSON.parse(JSON.stringify(oldFields.value)) || [])
+
+function reset() {
+  fields.value = JSON.parse(JSON.stringify(oldFields.value))
+}
+
+function addField(field) {
+  fields.value.push(field)
+}
+
+function removeField(field) {
+  const index = fields.value.findIndex((f) => f.name === field.name)
+  fields.value.splice(index, 1)
+}
+
+const update = () => {
+  loading.value = true
+
+  let updateFields = fields.value.map((field, idx) => {
+    return {
+      fieldname: field.fieldname,
+      columns: 2,
+    }
+  })
+
+  saveUserSettings(props.parentDoctype, 'GridView', updateFields, () => {
+    loading.value = false
+    show.value = false
+    userSettings.value['GridView'][props.doctype] = updateFields
+  })
+}
+</script>
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 31c9ecf9..f26a2146 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -81,6 +81,7 @@
                     v-model="data[field.name]"
                     :fields="field.fields"
                     :doctype="field.options"
+                    :parentDoctype="doctype"
                   />
                   <FormControl
                     v-else-if="field.type === 'Select'"
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index 5d972aad..06af4334 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -76,12 +76,38 @@ export function getMeta(doctype) {
     })
   }
 
+  function saveUserSettings(parentDoctype, key, value, callback) {
+    let oldUserSettings = userSettings.value
+    let newUserSettings = JSON.parse(JSON.stringify(oldUserSettings))
+
+    if (typeof value === 'object') {
+      newUserSettings[key][doctype] = newUserSettings[key][doctype] || {}
+      Object.assign(newUserSettings[key][doctype], value)
+    } else {
+      newUserSettings[key][doctype] = value
+    }
+
+    if (JSON.stringify(oldUserSettings) !== JSON.stringify(newUserSettings)) {
+      return createResource({
+        url: 'frappe.model.utils.user_settings.save',
+        params: {
+          doctype: parentDoctype,
+          user_settings: JSON.stringify(newUserSettings),
+        },
+        auto: true,
+        onSuccess: () => callback?.(),
+      })
+    }
+    return callback?.()
+  }
+
   return {
     meta,
     doctypeMeta,
     userSettings,
     getFields,
     getGridSettings,
+    saveUserSettings,
     getFormattedFloat,
     getFormattedPercent,
     getFormattedCurrency,

From 625b8cc4fe608e5afc405b4fd638ccfe0e791bab Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 18:45:01 +0530
Subject: [PATCH 22/24] fix: add/remove field & update columns

---
 .../Controls/GridFieldsEditorModal.vue        | 67 ++++++++++++++-----
 .../src/components/Kanban/KanbanSettings.vue  |  2 +-
 frontend/src/stores/meta.js                   |  7 +-
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Controls/GridFieldsEditorModal.vue b/frontend/src/components/Controls/GridFieldsEditorModal.vue
index f03e2488..961ea639 100644
--- a/frontend/src/components/Controls/GridFieldsEditorModal.vue
+++ b/frontend/src/components/Controls/GridFieldsEditorModal.vue
@@ -19,31 +19,37 @@
           {{ __('Fields Order') }}
         </div>
         <Draggable
-          v-if="oldFields.length"
+          v-if="oldFields?.length"
           :list="fields"
           @end="reorder"
           group="fields"
-          item-key="name"
+          item-key="fieldname"
           class="flex flex-col gap-1"
         >
           <template #item="{ element: field }">
             <div
-              class="px-1 py-0.5 border border-outline-gray-modals rounded text-base text-ink-gray-8 flex items-center justify-between gap-2"
+              class="px-1 py-0.5 bg-surface-gray-2 border border-outline-gray-modals rounded text-base text-ink-gray-8 flex items-center justify-between gap-2"
             >
               <div class="flex items-center gap-2">
                 <DragVerticalIcon class="h-3.5 cursor-grab" />
                 <div>{{ field.label }}</div>
               </div>
-              <div>
+              <div class="flex items-center gap-2">
+                <TextInput
+                  variant="outline"
+                  type="number"
+                  v-model="field.columns"
+                  class="w-20"
+                />
                 <Button variant="ghost" icon="x" @click="removeField(field)" />
               </div>
             </div>
           </template>
         </Draggable>
         <Autocomplete
-          v-if="fields"
+          v-if="dropdownFields?.length"
           value=""
-          :options="fields"
+          :options="dropdownFields"
           @change="(e) => addField(e)"
         >
           <template #target="{ togglePopover }">
@@ -58,7 +64,7 @@
             </Button>
           </template>
           <template #item-label="{ option }">
-            <div class="flex flex-col gap-1">
+            <div class="flex flex-col gap-1 text-ink-gray-9">
               <div>{{ option.label }}</div>
               <div class="text-ink-gray-4 text-sm">
                 {{ `${option.fieldname} - ${option.fieldtype}` }}
@@ -66,6 +72,7 @@
             </div>
           </template>
         </Autocomplete>
+        <ErrorMessage class="mt-3" v-if="error" :message="error" />
       </div>
     </template>
     <template #actions>
@@ -89,10 +96,11 @@
   </Dialog>
 </template>
 <script setup>
+import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { getMeta } from '@/stores/meta'
 import Draggable from 'vuedraggable'
-import { Dialog } from 'frappe-ui'
+import { Dialog, ErrorMessage } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const props = defineProps({
@@ -107,6 +115,7 @@ const { userSettings, getFields, getGridSettings, saveUserSettings } = getMeta(
 const show = defineModel()
 
 const loading = ref(false)
+const error = ref(null)
 
 const dirty = computed(() => {
   return JSON.stringify(fields.value) !== JSON.stringify(oldFields.value)
@@ -118,41 +127,67 @@ const oldFields = computed(() => {
 
   if (gridSettings.length) {
     return gridSettings.map((field) => {
-      return _fields.find((f) => f.fieldname === field.fieldname)
+      let f = _fields.find((f) => f.fieldname === field.fieldname)
+      if (f) {
+        f.columns = field.columns
+        return fieldObj(f)
+      }
     })
   }
-  return _fields?.filter((field) => field.in_list_view)
+  return _fields?.filter((field) => field.in_list_view).map((f) => fieldObj(f))
 })
 
-const fields = ref(JSON.parse(JSON.stringify(oldFields.value)) || [])
+const fields = ref(JSON.parse(JSON.stringify(oldFields.value || [])))
+
+const dropdownFields = computed(() => {
+  return getFields()?.filter(
+    (field) => !fields.value.find((f) => f.fieldname === field.fieldname),
+  )
+})
 
 function reset() {
-  fields.value = JSON.parse(JSON.stringify(oldFields.value))
+  fields.value = JSON.parse(JSON.stringify(oldFields.value || []))
 }
 
 function addField(field) {
-  fields.value.push(field)
+  fields.value.push(fieldObj(field))
 }
 
 function removeField(field) {
-  const index = fields.value.findIndex((f) => f.name === field.name)
+  const index = fields.value.findIndex((f) => f.fieldname === field.fieldname)
   fields.value.splice(index, 1)
 }
 
-const update = () => {
+function update() {
   loading.value = true
 
   let updateFields = fields.value.map((field, idx) => {
     return {
       fieldname: field.fieldname,
-      columns: 2,
+      columns: field.columns,
     }
   })
 
+  if (updateFields.length === 0) {
+    error.value = __('At least one field is required')
+    return
+  }
+
   saveUserSettings(props.parentDoctype, 'GridView', updateFields, () => {
     loading.value = false
     show.value = false
     userSettings.value['GridView'][props.doctype] = updateFields
   })
 }
+
+function fieldObj(field) {
+  return {
+    label: field.label,
+    fieldname: field.fieldname,
+    fieldtype: field.fieldtype,
+    options: field.options,
+    in_list_view: field.in_list_view,
+    columns: field.columns || 2,
+  }
+}
 </script>
diff --git a/frontend/src/components/Kanban/KanbanSettings.vue b/frontend/src/components/Kanban/KanbanSettings.vue
index 23f3faa0..bfe6347d 100644
--- a/frontend/src/components/Kanban/KanbanSettings.vue
+++ b/frontend/src/components/Kanban/KanbanSettings.vue
@@ -89,7 +89,7 @@
             </Button>
           </template>
           <template #item-label="{ option }">
-            <div class="flex flex-col gap-1">
+            <div class="flex flex-col gap-1 text-ink-gray-9">
               <div>{{ option.label }}</div>
               <div class="text-ink-gray-4 text-sm">
                 {{ `${option.fieldname} - ${option.fieldtype}` }}
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index 06af4334..80ced62f 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -80,12 +80,7 @@ export function getMeta(doctype) {
     let oldUserSettings = userSettings.value
     let newUserSettings = JSON.parse(JSON.stringify(oldUserSettings))
 
-    if (typeof value === 'object') {
-      newUserSettings[key][doctype] = newUserSettings[key][doctype] || {}
-      Object.assign(newUserSettings[key][doctype], value)
-    } else {
-      newUserSettings[key][doctype] = value
-    }
+    newUserSettings[key][doctype] = value
 
     if (JSON.stringify(oldUserSettings) !== JSON.stringify(newUserSettings)) {
       return createResource({

From 07f1f4887f219e753dfdcafd824ff2511be7ce87 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 21:19:09 +0530
Subject: [PATCH 23/24] fix: cache user settings

---
 frontend/src/components/Controls/Grid.vue           | 13 +++++++------
 .../components/Controls/GridFieldsEditorModal.vue   |  6 +++---
 frontend/src/stores/meta.js                         | 12 ++++++------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index d5a3b9ab..9aff9133 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -4,7 +4,10 @@
       {{ __(label) }}
     </div>
 
-    <div class="rounded border border-outline-gray-modals">
+    <div
+      v-if="fields?.length"
+      class="rounded border border-outline-gray-modals"
+    >
       <!-- Header -->
       <div
         class="grid-header flex items-center rounded-t-[7px] bg-surface-gray-2 text-ink-gray-5 truncate"
@@ -28,9 +31,8 @@
           :style="{ gridTemplateColumns: gridTemplateColumns }"
         >
           <div
-            v-if="fields?.length"
-            class="border-r border-outline-gray-2 p-2 truncate"
             v-for="field in fields"
+            class="border-r border-outline-gray-2 p-2 truncate"
             :key="field.name"
             :title="field.label"
           >
@@ -73,7 +75,6 @@
                 :style="{ gridTemplateColumns: gridTemplateColumns }"
               >
                 <div
-                  v-if="fields?.length"
                   class="border-r border-outline-gray-modals h-full"
                   v-for="field in fields"
                   :key="field.name"
@@ -242,7 +243,7 @@ const showGridFieldsEditorModal = ref(false)
 const showGridRowFieldsModal = ref(false)
 
 const fields = computed(() => {
-  let gridSettings = getGridSettings()
+  let gridSettings = getGridSettings(props.parentDoctype)
   let gridFields = getFields()
   if (gridSettings.length) {
     let d = gridSettings.map((gs) =>
@@ -266,7 +267,7 @@ function getFieldObj(field) {
 const gridTemplateColumns = computed(() => {
   if (!fields.value?.length) return '1fr'
   // for the checkbox & sr no. columns
-  let gridSettings = getGridSettings()
+  let gridSettings = getGridSettings(props.parentDoctype)
   if (gridSettings.length) {
     return gridSettings.map((gs) => `minmax(0, ${gs.columns || 2}fr)`).join(' ')
   }
diff --git a/frontend/src/components/Controls/GridFieldsEditorModal.vue b/frontend/src/components/Controls/GridFieldsEditorModal.vue
index 961ea639..28639ad0 100644
--- a/frontend/src/components/Controls/GridFieldsEditorModal.vue
+++ b/frontend/src/components/Controls/GridFieldsEditorModal.vue
@@ -123,7 +123,7 @@ const dirty = computed(() => {
 
 const oldFields = computed(() => {
   let _fields = getFields()
-  let gridSettings = getGridSettings()
+  let gridSettings = getGridSettings(props.parentDoctype)
 
   if (gridSettings.length) {
     return gridSettings.map((field) => {
@@ -161,7 +161,7 @@ function removeField(field) {
 function update() {
   loading.value = true
 
-  let updateFields = fields.value.map((field, idx) => {
+  let updateFields = fields.value.map((field) => {
     return {
       fieldname: field.fieldname,
       columns: field.columns,
@@ -176,7 +176,7 @@ function update() {
   saveUserSettings(props.parentDoctype, 'GridView', updateFields, () => {
     loading.value = false
     show.value = false
-    userSettings.value['GridView'][props.doctype] = updateFields
+    userSettings[props.parentDoctype]['GridView'][props.doctype] = updateFields
   })
 }
 
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index 80ced62f..8b34777f 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -3,7 +3,7 @@ import { formatCurrency, formatNumber } from '@/utils/numberFormat.js'
 import { ref, reactive } from 'vue'
 
 const doctypeMeta = reactive({})
-const userSettings = ref({})
+const userSettings = reactive({})
 
 export function getMeta(doctype) {
   const meta = createResource({
@@ -20,7 +20,7 @@ export function getMeta(doctype) {
         doctypeMeta[dtMeta.name] = dtMeta
       }
 
-      userSettings.value = JSON.parse(res.user_settings)
+      userSettings[doctype] = JSON.parse(res.user_settings)
     },
   })
 
@@ -55,10 +55,10 @@ export function getMeta(doctype) {
     return formatCurrency(doc[fieldname], '', currency, precision)
   }
 
-  function getGridSettings(dt = null) {
+  function getGridSettings(parentDoctype, dt = null) {
     dt = dt || doctype
-    if (!userSettings.value['GridView']?.[doctype]) return {}
-    return userSettings.value['GridView'][doctype]
+    if (!userSettings[parentDoctype]['GridView']?.[doctype]) return {}
+    return userSettings[parentDoctype]['GridView'][doctype]
   }
 
   function getFields(dt = null) {
@@ -77,7 +77,7 @@ export function getMeta(doctype) {
   }
 
   function saveUserSettings(parentDoctype, key, value, callback) {
-    let oldUserSettings = userSettings.value
+    let oldUserSettings = userSettings[parentDoctype]
     let newUserSettings = JSON.parse(JSON.stringify(oldUserSettings))
 
     newUserSettings[key][doctype] = value

From a70d875ed8f211a23c04498bd757527e932223f3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 21:24:31 +0530
Subject: [PATCH 24/24] fix: build failing

---
 yarn.lock | 2 --
 1 file changed, 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 43982d5c..0b74764f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3940,7 +3940,6 @@ sourcemap-codec@^1.4.8:
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4025,7 +4024,6 @@ stringify-object@^3.3.0:
     is-regexp "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==