From b9bfa5546bfb6029d351c8308a218a425a0fb8b6 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 15:56:41 +0530
Subject: [PATCH 01/12] feat: add form and team type definitions

Introduced new TypeScript type definitions for forms and teams, including `Form`, `FormField`, `FPTeam`, and `FPTeamMember`. These definitions enhance type safety and structure for managing forms and team data within the application.
---
 frontend/src/types/FormsPro/form.types.ts     | 38 ++++++++++++++
 .../src/types/FormsPro/form_field.types.ts    | 52 +++++++++++++++++++
 frontend/src/types/FormsPro/fpteam.types.ts   | 20 +++++++
 .../src/types/FormsPro/fpteam_member.types.ts | 14 +++++
 4 files changed, 124 insertions(+)
 create mode 100644 frontend/src/types/FormsPro/form.types.ts
 create mode 100644 frontend/src/types/FormsPro/form_field.types.ts
 create mode 100644 frontend/src/types/FormsPro/fpteam.types.ts
 create mode 100644 frontend/src/types/FormsPro/fpteam_member.types.ts

diff --git a/frontend/src/types/FormsPro/form.types.ts b/frontend/src/types/FormsPro/form.types.ts
new file mode 100644
index 0000000..1293ece
--- /dev/null
+++ b/frontend/src/types/FormsPro/form.types.ts
@@ -0,0 +1,38 @@
+import { FormField } from "./form_field.types";
+
+export interface Form {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	Is Published? : Check	*/
+  is_published?: 0 | 1;
+  /**	Route : Data	*/
+  route?: string;
+  /**	Title : Data	*/
+  title: string;
+  /**	Linked Doctype : Link - DocType	*/
+  linked_doctype: string;
+  /**	Linked Team : Link - FP Team	*/
+  linked_team_id: string;
+  /**	Login Required : Check	*/
+  login_required?: 0 | 1;
+  /**	Allow Incomplete Forms : Check - Allow saving Draft forms	*/
+  allow_incomplete?: 0 | 1;
+  /**	Success Title : Data	*/
+  success_title?: string;
+  /**	Success Description : Text Editor	*/
+  success_description?: string;
+  /**	Description : Text Editor	*/
+  description?: string;
+  /**	Fields : Table - Form Field	*/
+  fields?: FormField[];
+  /**	Meta Data : Code	*/
+  metadata?: string;
+}
diff --git a/frontend/src/types/FormsPro/form_field.types.ts b/frontend/src/types/FormsPro/form_field.types.ts
new file mode 100644
index 0000000..4d9ffe9
--- /dev/null
+++ b/frontend/src/types/FormsPro/form_field.types.ts
@@ -0,0 +1,52 @@
+export enum Fieldtype {
+  "ATTACH" = "Attach",
+  "DATA" = "Data",
+  "NUMBER" = "Number",
+  "EMAIL" = "Email",
+  "DATE" = "Date",
+  "DATE_TIME" = "Date Time",
+  "DATE_RANGE" = "Date Range",
+  "TIME_PICKER" = "Time Picker",
+  "PASSWORD" = "Password",
+  "SELECT" = "Select",
+  "MULTISELECT" = "Multiselect",
+  "SWITCH" = "Switch",
+  "TEXTAREA" = "Textarea",
+  "TEXT_EDITOR" = "Text Editor",
+  "LINK" = "Link",
+  "CHECKBOX" = "Checkbox",
+  "RATING" = "Rating",
+  "PHONE" = "Phone",
+  "TABLE" = "Table",
+}
+
+export interface FormField {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	Mandatory : Check	*/
+  reqd?: 0 | 1;
+  /**	Hidden : Check	*/
+  hidden?: 0 | 1;
+  /**	Label : Data	*/
+  label: string;
+  /**	Fieldtype : Select	*/
+  fieldtype: Fieldtype;
+  /**	Fieldname : Data	*/
+  fieldname: string;
+  /**	Description : Small Text	*/
+  description?: string;
+  /**	Options : Small Text	*/
+  options?: string;
+  /**	Default : Small Text	*/
+  default?: string;
+  /**	Conditional Logic : Code	*/
+  conditional_logic?: string;
+}
diff --git a/frontend/src/types/FormsPro/fpteam.types.ts b/frontend/src/types/FormsPro/fpteam.types.ts
new file mode 100644
index 0000000..faa490d
--- /dev/null
+++ b/frontend/src/types/FormsPro/fpteam.types.ts
@@ -0,0 +1,20 @@
+import { FPTeamMember } from "./fpteam_member.types";
+
+export interface FPTeam {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	Logo : Attach Image	*/
+  logo?: string;
+  /**	Team Name : Data	*/
+  team_name: string;
+  /**	Users : Table MultiSelect - FP Team Member	*/
+  users?: FPTeamMember[];
+}
diff --git a/frontend/src/types/FormsPro/fpteam_member.types.ts b/frontend/src/types/FormsPro/fpteam_member.types.ts
new file mode 100644
index 0000000..1fe67e6
--- /dev/null
+++ b/frontend/src/types/FormsPro/fpteam_member.types.ts
@@ -0,0 +1,14 @@
+export interface FPTeamMember {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	User : Link - User	*/
+  user?: string;
+}

From e921e261042ebbca9ce7e8f91710b0728a8f864d Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 16:34:59 +0530
Subject: [PATCH 02/12] refactor: centralise field type metadata into a single
 registry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce `frontend/src/config/fieldTypes.ts` as the single source of
truth for field-type-specific metadata (component, layout, Frappe
fieldtype mapping, boolean/date semantics).  Everything that previously
required touching 5+ files now lives in one place.

- Replace scattered `FormFieldTypes` enum with the auto-generated
  `Fieldtype` enum from `form_field.types.ts` (frappe-types output),
  so `form_field.json` is the ground truth for valid names.
- Rewrite `form_fields.ts` to re-export from the registry; remove the
  unused individual named field exports.
- `mapDoctypeFieldForForm` now maps to typed `Fieldtype` values.
- Replace the 8-branch `to_frappe_field` if/elif chain in `form_field.py`
  with a declarative `FORM_TO_FRAPPE_FIELDTYPE` dict — adding a new
  field type is one line.
- Fieldtype dropdown in `FieldPropertiesForm` is derived from the
  registry, so only implemented types are offered.
---
 .../doctype/form_field/form_field.py          |  49 ++--
 .../field-editor/FieldPropertiesForm.vue      |   5 +-
 .../form/submissions/SubmissionFieldValue.vue |  39 +--
 frontend/src/config/fieldTypes.ts             | 266 +++++++++++++++++
 frontend/src/stores/editForm.ts               |   4 +-
 frontend/src/types/formfield.ts               |  24 +-
 frontend/src/utils/form_fields.ts             | 274 ++++--------------
 7 files changed, 370 insertions(+), 291 deletions(-)
 create mode 100644 frontend/src/config/fieldTypes.ts

diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index f347b6d..209b21d 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -4,6 +4,32 @@
 # import frappe
 from frappe.model.document import Document
 
+# Maps Forms Pro field types to Frappe CustomField fieldtypes.
+# When adding a new field type:
+#   1. Add the option to form_field.json  →  DF.Literal regenerates automatically
+#   2. Add an entry here
+#   3. Add an entry to FIELD_TYPE_DEFINITIONS in frontend/src/config/fieldTypes.ts
+FORM_TO_FRAPPE_FIELDTYPE: dict[str, dict] = {
+    "Attach": {"fieldtype": "Attach"},
+    "Data": {"fieldtype": "Data"},
+    "Number": {"fieldtype": "Int"},
+    "Email": {"fieldtype": "Data", "options": "Email"},
+    "Date": {"fieldtype": "Date"},
+    "Date Time": {"fieldtype": "Datetime"},
+    "Date Range": {"fieldtype": "Data"},
+    "Time Picker": {"fieldtype": "Time"},
+    "Password": {"fieldtype": "Password"},
+    "Select": {"fieldtype": "Select"},
+    "Phone": {"fieldtype": "Phone"},
+    "Switch": {"fieldtype": "Check"},
+    "Textarea": {"fieldtype": "Text"},
+    "Text Editor": {"fieldtype": "Text Editor"},
+    "Link": {"fieldtype": "Link"},
+    "Checkbox": {"fieldtype": "Check"},
+    "Rating": {"fieldtype": "Rating"},
+    "Table": {"fieldtype": "Table"},
+}
+
 
 class FormField(Document):
     # begin: auto-generated types
@@ -49,30 +75,13 @@ class FormField(Document):
 
     @property
     def to_frappe_field(self) -> dict:
-        _fieldtype = self.fieldtype
-
-        if self.fieldtype == "Email":
-            _fieldtype = "Data"
-            self.options = "Email"
-        elif self.fieldtype == "Number":
-            _fieldtype = "Int"
-        elif self.fieldtype == "Date Time":
-            _fieldtype = "Datetime"
-        elif self.fieldtype == "Date Range":
-            _fieldtype = "Data"
-        elif self.fieldtype == "Time Picker":
-            _fieldtype = "Time"
-        elif self.fieldtype == "Switch" or self.fieldtype == "Checkbox":
-            _fieldtype = "Check"
-        elif self.fieldtype == "Textarea":
-            _fieldtype = "Text"
-
+        mapping = FORM_TO_FRAPPE_FIELDTYPE.get(self.fieldtype, {})
         return {
             "fieldname": self.fieldname,
-            "fieldtype": _fieldtype,
+            "fieldtype": mapping.get("fieldtype", self.fieldtype),
             "label": self.label,
             "reqd": self.reqd,
-            "options": self.options,
+            "options": mapping.get("options", self.options),
             "description": self.description,
             "default": self.default,
         }
diff --git a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
index 4183359..38cc19a 100644
--- a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
+++ b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useEditForm } from "@/stores/editForm";
 import { FormControl } from "frappe-ui";
-import { FormField, FormFieldTypes } from "@/types/formfield";
+import { FormField } from "@/types/formfield";
+import { FIELD_TYPE_DEFINITIONS } from "@/config/fieldTypes";
 import { computed } from "vue";
 import type { Component } from "vue";
 import ConditionalLogicSection from "./ConditionalLogicSection.vue";
@@ -44,7 +45,7 @@ const fieldProperties = computed(() => {
                 label: "Fieldtype",
                 required: true,
                 variant: "outline",
-                options: Object.values(FormFieldTypes),
+                options: FIELD_TYPE_DEFINITIONS.map((d) => d.name),
             },
         },
         {
diff --git a/frontend/src/components/form/submissions/SubmissionFieldValue.vue b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
index c788458..b1af7ce 100644
--- a/frontend/src/components/form/submissions/SubmissionFieldValue.vue
+++ b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Checkbox, Switch, Rating, TextEditor } from "frappe-ui";
-import { FormFieldTypes } from "@/types/formfield";
+import { Fieldtype } from "@/types/formfield";
 import { formatDate, formatDateTime, formatTime } from "@/utils/date";
 import { computed } from "vue";
 
@@ -8,20 +8,20 @@ const props = defineProps<{
     fieldname: string;
     label: string;
     description?: string;
-    fieldtype: FormFieldTypes;
+    fieldtype: Fieldtype;
     value: any;
 }>();
 
 const formattedDateValue = computed(() => {
     if (!props.value) return "";
     switch (props.fieldtype) {
-        case FormFieldTypes.Date:
+        case Fieldtype.DATE:
             return formatDate(props.value);
-        case FormFieldTypes.DateTime:
+        case Fieldtype.DATE_TIME:
             return formatDateTime(props.value);
-        case FormFieldTypes.TimePicker:
+        case Fieldtype.TIME_PICKER:
             return formatTime(props.value);
-        case FormFieldTypes.DateRange:
+        case Fieldtype.DATE_RANGE:
             try {
                 const dates = JSON.parse(props.value);
                 if (Array.isArray(dates) && dates.length === 2) {
@@ -37,16 +37,13 @@ const formattedDateValue = computed(() => {
 });
 
 const isDateField = computed(() =>
-    [
-        FormFieldTypes.Date,
-        FormFieldTypes.DateTime,
-        FormFieldTypes.DateRange,
-        FormFieldTypes.TimePicker,
-    ].includes(props.fieldtype)
+    [Fieldtype.DATE, Fieldtype.DATE_TIME, Fieldtype.DATE_RANGE, Fieldtype.TIME_PICKER].includes(
+        props.fieldtype
+    )
 );
 
 const classNames = computed<string>(() => {
-    if ([FormFieldTypes.Switch, FormFieldTypes.Checkbox].includes(props.fieldtype)) {
+    if ([Fieldtype.SWITCH, Fieldtype.CHECKBOX].includes(props.fieldtype)) {
         return "flex gap-1 flex-row-reverse items-start justify-end";
     }
     return "flex flex-col gap-1";
@@ -61,20 +58,16 @@ const classNames = computed<string>(() => {
         </div>
 
         <Checkbox
-            v-if="fieldtype === FormFieldTypes.Checkbox"
+            v-if="fieldtype === Fieldtype.CHECKBOX"
             class="mt-1"
             :modelValue="Boolean(value)"
             disabled
         />
 
-        <Switch
-            v-else-if="fieldtype === FormFieldTypes.Switch"
-            :modelValue="Boolean(value)"
-            disabled
-        />
+        <Switch v-else-if="fieldtype === Fieldtype.SWITCH" :modelValue="Boolean(value)" disabled />
 
         <TextEditor
-            v-else-if="fieldtype === FormFieldTypes.TextEditor"
+            v-else-if="fieldtype === Fieldtype.TEXT_EDITOR"
             :content="value"
             :editable="false"
             :bubbleMenu="false"
@@ -82,10 +75,10 @@ const classNames = computed<string>(() => {
             editorClass="prose-sm !border-none !p-0 !shadow-none"
         />
 
-        <Rating v-else-if="fieldtype === FormFieldTypes.Rating" :modelValue="value" readonly />
+        <Rating v-else-if="fieldtype === Fieldtype.RATING" :modelValue="value" readonly />
 
         <a
-            v-else-if="fieldtype === FormFieldTypes.Attach && value"
+            v-else-if="fieldtype === Fieldtype.ATTACH && value"
             :href="value"
             target="_blank"
             class="text-sm text-blue-600 hover:text-blue-700 underline truncate"
@@ -94,7 +87,7 @@ const classNames = computed<string>(() => {
         </a>
 
         <span
-            v-else-if="fieldtype === FormFieldTypes.Textarea"
+            v-else-if="fieldtype === Fieldtype.TEXTAREA"
             class="text-sm text-ink-gray-7 whitespace-pre-wrap"
         >
             {{ value ?? "–" }}
diff --git a/frontend/src/config/fieldTypes.ts b/frontend/src/config/fieldTypes.ts
new file mode 100644
index 0000000..3a42981
--- /dev/null
+++ b/frontend/src/config/fieldTypes.ts
@@ -0,0 +1,266 @@
+/**
+ * SINGLE SOURCE OF TRUTH for field type metadata.
+ *
+ * Every property that varies by field type — Vue component, layout behaviour,
+ * Frappe fieldtype mapping, boolean/date semantics — lives here. Nothing else
+ * in the frontend should hardcode field-type-specific logic; import from this
+ * file and derive from the registry instead.
+ *
+ * The `Fieldtype` enum itself is auto-generated from `form_field.json` via
+ * frappe-types, so the JSON is the ground truth for the list of valid names.
+ * This registry owns everything that can't be auto-generated.
+ *
+ * To add a new field type:
+ *   1. Add the option to `form_field.json`
+ *      → `DF.Literal` (Python) and `Fieldtype` (TS) regenerate automatically.
+ *   2. TypeScript will error in FIELD_TYPE_DEFINITIONS below until you add an entry.
+ *   3. Add a matching entry to `FORM_TO_FRAPPE_FIELDTYPE` in `form_field.py`.
+ *   4. Create a Vue component if the type needs a new input widget.
+ */
+
+import type { Component } from "vue";
+import {
+  Checkbox,
+  DatePicker,
+  DateRangePicker,
+  DateTimePicker,
+  Password,
+  Rating,
+  Select,
+  Switch,
+  Textarea,
+  TextEditor,
+  TimePicker,
+  FormControl,
+} from "frappe-ui";
+import Attachment from "@/components/fields/Attachment.vue";
+import Phone from "@/components/fields/Phone.vue";
+import Table from "@/components/fields/Table.vue";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+
+export { Fieldtype };
+
+/**
+ * Controls how FieldRenderer positions the label relative to the input widget.
+ *
+ * - "default"      label on top, input below, description at the bottom
+ * - "inline"       input first, label to the right (Switch, Checkbox)
+ * - "below-label"  label on top, input immediately below before description (Text Editor, Attach)
+ * - "custom"       the component handles its own full layout (Table)
+ */
+export type FieldLayout = "default" | "inline" | "below-label" | "custom";
+
+export type FieldTypeDefinition = {
+  /** Canonical name — must match a Fieldtype enum value */
+  name: Fieldtype;
+  /** Vue component used to render this field in input mode */
+  component: Component;
+  /** Default props forwarded to the component */
+  props: Record<string, unknown>;
+  /** How FieldRenderer lays out the label relative to the input */
+  layout: FieldLayout;
+  /** Frappe fieldtype to use when syncing this field to a DocType */
+  frappeFieldtype: string;
+  /** Override the `options` value on the Frappe CustomField (e.g. "Email" for Data fields) */
+  frappeOptions?: string;
+  /** True for Switch / Checkbox — affects conditional logic evaluation and display */
+  isBoolean: boolean;
+  /** True for Date / DateTime / DateRange / TimePicker — affects display formatting */
+  isDate: boolean;
+};
+
+export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
+  {
+    name: Fieldtype.ATTACH,
+    component: Attachment,
+    props: {
+      variant: "outline",
+      filetypes: ["image/*", ".jpg", ".gif", ".pdf"],
+    },
+    layout: "custom",
+    frappeFieldtype: "Attach",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.DATA,
+    component: FormControl,
+    props: { type: "text", variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Data",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.NUMBER,
+    component: FormControl,
+    props: { type: "number", variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Int",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.EMAIL,
+    component: FormControl,
+    props: { type: "email", variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Data",
+    frappeOptions: "Email",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.DATE,
+    component: DatePicker,
+    props: { variant: "outline", clearable: true, format: "D MMM YYYY" },
+    layout: "default",
+    frappeFieldtype: "Date",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.DATE_TIME,
+    component: DateTimePicker,
+    props: {
+      format: "DD MMM YYYY, hh:mm A",
+      clearable: true,
+      variant: "outline",
+    },
+    layout: "default",
+    frappeFieldtype: "Datetime",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.DATE_RANGE,
+    component: DateRangePicker,
+    props: { clearable: true, variant: "outline", format: "DD MMM 'YY" },
+    layout: "default",
+    frappeFieldtype: "Data",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.TIME_PICKER,
+    component: TimePicker,
+    props: { variant: "outline", use12Hour: true, clearable: true },
+    layout: "default",
+    frappeFieldtype: "Time",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.PASSWORD,
+    component: Password,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Password",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.SELECT,
+    component: Select,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Select",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.PHONE,
+    component: Phone,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Phone",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.SWITCH,
+    component: Switch,
+    props: {},
+    layout: "inline",
+    frappeFieldtype: "Check",
+    isBoolean: true,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.TEXTAREA,
+    component: Textarea,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Text",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.TEXT_EDITOR,
+    component: TextEditor,
+    props: {
+      editorClass:
+        "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
+      fixedMenu: true,
+      bubbleMenu: true,
+      starterkitOptions: { heading: { levels: [2, 3, 4] } },
+    },
+    layout: "below-label",
+    frappeFieldtype: "Text Editor",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.LINK,
+    component: Select,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Link",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.CHECKBOX,
+    component: Checkbox,
+    props: {},
+    layout: "inline",
+    frappeFieldtype: "Check",
+    isBoolean: true,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.RATING,
+    component: Rating,
+    props: {},
+    layout: "default",
+    frappeFieldtype: "Rating",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.TABLE,
+    component: Table,
+    props: {
+      options: {
+        emptyState: {
+          title: "This is a table field",
+          description: "Use this field to input a list of items.",
+        },
+      },
+    },
+    layout: "custom",
+    frappeFieldtype: "Table",
+    isBoolean: false,
+    isDate: false,
+  },
+];
+
+export const FIELD_TYPE_MAP = new Map<Fieldtype, FieldTypeDefinition>(
+  FIELD_TYPE_DEFINITIONS.map((d) => [d.name, d])
+);
+
+export function getFieldTypeDef(
+  name: Fieldtype
+): FieldTypeDefinition | undefined {
+  return FIELD_TYPE_MAP.get(name);
+}
diff --git a/frontend/src/stores/editForm.ts b/frontend/src/stores/editForm.ts
index 4425f7b..4044ad4 100644
--- a/frontend/src/stores/editForm.ts
+++ b/frontend/src/stores/editForm.ts
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { ref, computed } from "vue";
 import { createDocumentResource, createResource } from "frappe-ui";
 import { mapDoctypeFieldForForm } from "@/utils/form_fields";
-import { FormField, FormFieldTypes } from "@/types/formfield";
+import { FormField, Fieldtype } from "@/types/formfield";
 import { Form } from "@/types/form";
 import { toast } from "vue-sonner";
 
@@ -155,7 +155,7 @@ export const useEditForm = defineStore("editForm", () => {
     if (formResource.value?.doc) {
       const newField: FormField = {
         idx: formResource.value.doc.fields.length + 1,
-        fieldtype: fieldtype as FormFieldTypes,
+        fieldtype: fieldtype as Fieldtype,
         label: "",
         fieldname: "",
         options: "",
diff --git a/frontend/src/types/formfield.ts b/frontend/src/types/formfield.ts
index 32c26ca..edfa075 100644
--- a/frontend/src/types/formfield.ts
+++ b/frontend/src/types/formfield.ts
@@ -1,28 +1,10 @@
-export enum FormFieldTypes {
-  Attach = "Attach",
-  Data = "Data",
-  Number = "Number",
-  Email = "Email",
-  Date = "Date",
-  DateTime = "Date Time",
-  DateRange = "Date Range",
-  TimePicker = "Time Picker",
-  Password = "Password",
-  Select = "Select",
-  Phone = "Phone",
-  Switch = "Switch",
-  Textarea = "Textarea",
-  TextEditor = "Text Editor",
-  Link = "Link",
-  Checkbox = "Checkbox",
-  Rating = "Rating",
-  Table = "Table",
-}
+export { Fieldtype } from "@/types/FormsPro/form_field.types";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
 
 export type FormField = {
   label: string;
   fieldname: string;
-  fieldtype: FormFieldTypes;
+  fieldtype: Fieldtype;
   description?: string;
   reqd?: boolean;
   hidden?: boolean;
diff --git a/frontend/src/utils/form_fields.ts b/frontend/src/utils/form_fields.ts
index c4e6eec..13cf2e7 100644
--- a/frontend/src/utils/form_fields.ts
+++ b/frontend/src/utils/form_fields.ts
@@ -1,229 +1,57 @@
 import {
-  Checkbox,
-  FormControl,
-  DatePicker,
-  DateRangePicker,
-  DateTimePicker,
-  Rating,
-  Select,
-  Switch,
-  Textarea,
-  TextEditor,
-  TimePicker,
-  Password,
-} from "frappe-ui";
-import { Component } from "vue";
-import Attachment from "@/components/fields/Attachment.vue";
-import Phone from "@/components/fields/Phone.vue";
-import Table from "@/components/fields/Table.vue";
-
+  FIELD_TYPE_DEFINITIONS,
+  FIELD_TYPE_MAP,
+  getFieldTypeDef,
+} from "@/config/fieldTypes";
+import type { FieldTypeDefinition } from "@/config/fieldTypes";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+import type { Component } from "vue";
+
+// Re-export the registry under the names the rest of the codebase uses
+export {
+  FIELD_TYPE_DEFINITIONS as formFields,
+  getFieldTypeDef,
+  FIELD_TYPE_MAP,
+};
+export type { FieldTypeDefinition as FormFields };
+
+// Subset type used by RenderField.vue
 export type FormFieldType = {
   component: Component;
-  props: Record<string, any>;
-};
-
-export type FormFields = FormFieldType & {
-  name: string;
-};
-
-// Individual form field components as dictionaries
-
-export const AttachmentField: FormFieldType = {
-  component: Attachment,
-  props: {
-    variant: "outline",
-    filetypes: ["image/*", ".jpg", ".gif", ".pdf"],
-  },
-};
-
-export const DataField: FormFieldType = {
-  component: FormControl,
-  props: { type: "text", variant: "outline" },
-};
-
-export const NumberField: FormFieldType = {
-  component: FormControl,
-  props: { type: "number", variant: "outline" },
-};
-
-export const EmailField: FormFieldType = {
-  component: FormControl,
-  props: { type: "email", variant: "outline" },
-};
-
-export const DateField: FormFieldType = {
-  component: DatePicker,
-  props: {
-    variant: "outline",
-    clearable: true,
-    format: "D MMM YYYY",
-  },
-};
-
-export const DateTimeField: FormFieldType = {
-  component: DateTimePicker,
-  props: {
-    format: "DD MMM YYYY, hh:mm A",
-    clearable: true,
-    variant: "outline",
-  },
-};
-
-export const DateRangeField: FormFieldType = {
-  component: DateRangePicker,
-  props: {
-    clearable: true,
-    variant: "outline",
-    format: "DD MMM 'YY",
-  },
-};
-
-export const TimeField: FormFieldType = {
-  component: TimePicker,
-  props: {
-    variant: "outline",
-    use12Hour: true,
-    clearable: true,
-  },
-};
-
-export const PasswordField: FormFieldType = {
-  component: Password,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const RatingField: FormFieldType = {
-  component: Rating,
-  props: {},
-};
-
-export const SelectField: FormFieldType = {
-  component: Select,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const SwitchField: FormFieldType = {
-  component: Switch,
-  props: {},
-};
-
-export const TextareaField: FormFieldType = {
-  component: Textarea,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const TextEditorField: FormFieldType = {
-  component: TextEditor,
-  props: {
-    editorClass:
-      "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
-    fixedMenu: true,
-    bubbleMenu: true,
-    starterkitOptions: {
-      heading: {
-        levels: [2, 3, 4],
-      },
-    },
-  },
-};
-
-export const CheckboxField: FormFieldType = {
-  component: Checkbox,
-  props: {},
-};
-
-export const PhoneField: FormFieldType = {
-  component: Phone,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const TableField: FormFieldType = {
-  component: Table,
-  props: {
-    options: {
-      emptyState: {
-        title: "This is a table field",
-        description: "Use this field to input a list of items.",
-      },
-    },
-  },
-};
-
-export const formFields: FormFields[] = [
-  { name: "Attach", ...AttachmentField },
-  { name: "Data", ...DataField },
-  { name: "Link", ...SelectField },
-  { name: "Number", ...NumberField },
-  { name: "Email", ...EmailField },
-  { name: "Date", ...DateField },
-  { name: "Date Time", ...DateTimeField },
-  { name: "Date Range", ...DateRangeField },
-  { name: "Time Picker", ...TimeField },
-  { name: "Password", ...PasswordField },
-  { name: "Rating", ...RatingField },
-  { name: "Select", ...SelectField },
-  { name: "Switch", ...SwitchField },
-  { name: "Textarea", ...TextareaField },
-  { name: "Text Editor", ...TextEditorField },
-  { name: "Checkbox", ...CheckboxField },
-  { name: "Phone", ...PhoneField },
-  { name: "Table", ...TableField },
-];
-
-export const mapDoctypeFieldForForm = (fieldtype: string): string => {
-  const FIELD_TYPE_MAP = {
-    Autocomplete: "Data",
-    Attach: "Attach",
-    "Attach Image": "Attach",
-    Barcode: "Barcode",
-    Button: "Button",
-    Check: "Checkbox",
-    Code: "Code",
-    Color: "Color",
-    "Column Break": "Column Break",
-    Currency: "Number",
-    Data: "Data",
-    Date: "Date",
-    Datetime: "Date Time",
-    Duration: "Duration",
-    "Dynamic Link": "Dynamic Link",
-    Float: "Number",
-    Fold: "Fold",
-    Geolocation: "Geolocation",
-    Heading: "Heading",
-    HTML: "HTML",
-    "HTML Editor": "Text Editor",
-    Icon: "Icon",
-    Image: "Image",
-    Int: "Number",
-    JSON: "JSON",
-    Link: "Link",
-    "Long Text": "Textarea",
-    "Markdown Editor": "Text Editor",
-    Password: "Password",
-    Percent: "Number",
-    Phone: "Phone",
-    "Read Only": "Read Only",
-    Rating: "Rating",
-    "Section Break": "Section Break",
-    Select: "Select",
-    Signature: "Signature",
-    "Small Text": "Textarea",
-    "Tab Break": "Tab Break",
-    Table: "Table",
-    "Table MultiSelect": "Table MultiSelect",
-    Text: "Textarea",
-    "Text Editor": "Text Editor",
-    Time: "Time",
+  props: Record<string, unknown>;
+};
+
+// Maps Frappe DocType fieldtypes to the equivalent Forms Pro fieldtype.
+// Used when importing fields from an existing DocType into a form.
+export const mapDoctypeFieldForForm = (
+  fieldtype: string
+): string | undefined => {
+  const FRAPPE_TO_FORM_TYPE: Partial<Record<string, Fieldtype>> = {
+    Autocomplete: Fieldtype.DATA,
+    Attach: Fieldtype.ATTACH,
+    "Attach Image": Fieldtype.ATTACH,
+    Check: Fieldtype.CHECKBOX,
+    Currency: Fieldtype.NUMBER,
+    Data: Fieldtype.DATA,
+    Date: Fieldtype.DATE,
+    Datetime: Fieldtype.DATE_TIME,
+    Float: Fieldtype.NUMBER,
+    "HTML Editor": Fieldtype.TEXT_EDITOR,
+    Int: Fieldtype.NUMBER,
+    Link: Fieldtype.LINK,
+    "Long Text": Fieldtype.TEXTAREA,
+    "Markdown Editor": Fieldtype.TEXT_EDITOR,
+    Password: Fieldtype.PASSWORD,
+    Percent: Fieldtype.NUMBER,
+    Phone: Fieldtype.PHONE,
+    Rating: Fieldtype.RATING,
+    Select: Fieldtype.SELECT,
+    "Small Text": Fieldtype.TEXTAREA,
+    Table: Fieldtype.TABLE,
+    Text: Fieldtype.TEXTAREA,
+    "Text Editor": Fieldtype.TEXT_EDITOR,
+    Time: Fieldtype.TIME_PICKER,
   };
 
-  return FIELD_TYPE_MAP[fieldtype as keyof typeof FIELD_TYPE_MAP];
+  return FRAPPE_TO_FORM_TYPE[fieldtype];
 };

From 73747114e16e31cf0dc61050c138f16fc6d8efa5 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 16:43:20 +0530
Subject: [PATCH 03/12] refactor: simplify FieldRenderer using layout registry
 and extract FieldLabel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the 6 hardcoded v-if/v-else-if branches in FieldRenderer (Switch,
Checkbox, Text Editor, Attach, Table, default) with 4 layout-driven
branches derived from the field type registry.  The repeated label/
required-asterisk block is extracted into a FieldLabel sub-component.

- Add FieldLabel.vue — editable label input + required asterisk
- FieldRenderer branches on registry layout: "inline", "description-first",
  "custom" (Attach + Table), "default"
- Update FieldLayout type: rename "below-label" → "description-first"
- Attach keeps its original :value/@update:value binding (custom layout)
---
 .../src/components/builder/FieldLabel.vue     |  30 +++
 .../src/components/builder/FieldRenderer.vue  | 174 ++++++------------
 frontend/src/config/fieldTypes.ts             |  12 +-
 3 files changed, 88 insertions(+), 128 deletions(-)
 create mode 100644 frontend/src/components/builder/FieldLabel.vue

diff --git a/frontend/src/components/builder/FieldLabel.vue b/frontend/src/components/builder/FieldLabel.vue
new file mode 100644
index 0000000..8572ffa
--- /dev/null
+++ b/frontend/src/components/builder/FieldLabel.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Asterisk } from "lucide-vue-next";
+
+defineProps<{
+    field: {
+        label?: string;
+        reqd?: boolean;
+    };
+    inEditMode: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:label": [value: string];
+}>();
+</script>
+
+<template>
+    <div class="flex gap-2 items-start">
+        <input
+            v-if="inEditMode"
+            placeholder="Label"
+            type="text"
+            :value="field.label"
+            @input="emit('update:label', ($event.target as HTMLInputElement).value)"
+            class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
+        />
+        <label class="text-base" v-else>{{ field.label }}</label>
+        <Asterisk v-if="field.reqd" class="w-4 h-4 text-red-400" />
+    </div>
+</template>
diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index 9af4ea7..38fc1a4 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { Asterisk } from "lucide-vue-next";
 import RenderField from "../RenderField.vue";
+import FieldLabel from "./FieldLabel.vue";
 import Table from "@/components/fields/Table.vue";
 import { useFieldOptions } from "@/utils/selectOptions";
+import { getFieldTypeDef, Fieldtype } from "@/config/fieldTypes";
 
 const props = defineProps({
     field: {
@@ -22,11 +23,8 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:field"]);
-
-// Add v-model support
 const modelValue = defineModel();
 
-// Create a computed property for two-way binding
 const fieldData = computed({
     get() {
         return props.field;
@@ -36,108 +34,55 @@ const fieldData = computed({
     },
 });
 
-const getClasses = computed(() => {
-    switch (fieldData.value.fieldtype) {
-        case "Text Editor":
-            return "w-fit";
-        case "Switch":
-            return "w-full flex gap-4 my-2";
-        case "Checkbox":
-            return "w-full flex gap-2";
-        default:
-            return "w-full flex flex-col gap-2";
-    }
-});
+const layout = computed(
+    () => getFieldTypeDef(fieldData.value.fieldtype as Fieldtype)?.layout ?? "default"
+);
 
 const { options: selectOptions } = useFieldOptions(fieldData);
 </script>
+
 <template>
-    <div :class="getClasses" v-if="fieldData.fieldtype == 'Switch'">
+    <!-- inline: Switch / Checkbox — input precedes label -->
+    <div v-if="layout === 'inline'" class="w-full flex gap-2 my-2">
         <RenderField
             v-model="modelValue"
             :field="fieldData"
-            :class="{ 'pointer-events-none': inEditMode }"
+            :class="{ 'pointer-events-none mt-1': inEditMode }"
             :disabled="disabled"
         />
-        <div class="flex flex-col gap-1">
-            <div class="flex gap-2 items-start">
-                <input
-                    v-if="inEditMode"
-                    placeholder="Label"
-                    type="text"
-                    v-model="fieldData.label"
-                    class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-                />
-                <label class="text-base" v-else>{{ fieldData.label }}</label>
-                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-            </div>
-            <small class="text-gray-500">
-                {{ fieldData.description }}
-            </small>
+        <div class="flex flex-col gap-1 w-full">
+            <FieldLabel
+                :field="fieldData"
+                :in-edit-mode="inEditMode"
+                @update:label="fieldData.label = $event"
+            />
+            <small class="text-gray-500">{{ fieldData.description }}</small>
         </div>
     </div>
-    <div :class="getClasses" v-else-if="fieldData.fieldtype == 'Checkbox'">
+
+    <!-- description-first: Text Editor — description sits above the input -->
+    <div v-else-if="layout === 'description-first'" class="flex flex-col gap-1">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
+        <small class="text-gray-500">{{ fieldData.description }}</small>
         <RenderField
             v-model="modelValue"
             :field="fieldData"
-            :class="{ 'pointer-events-none mt-1': inEditMode }"
+            :class="{ 'pointer-events-none': inEditMode }"
             :disabled="disabled"
         />
-        <div class="flex flex-col gap-1 w-full">
-            <div class="flex gap-2 items-start">
-                <input
-                    v-if="inEditMode"
-                    :id="fieldData.name + '_label'"
-                    placeholder="Label"
-                    type="text"
-                    v-model="fieldData.label"
-                    class="bg-transparent border-none outline-none text-base focus:ring-0 px-0 py-1 !w-full"
-                />
-                <label class="text-base" v-else>{{ fieldData.label }}</label>
-                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-            </div>
-            <small v-if="fieldData.description" class="text-gray-500">
-                {{ fieldData.description }}
-            </small>
-        </div>
-    </div>
-    <div v-else-if="fieldData.fieldtype == 'Text Editor'">
-        <div class="flex flex-col gap-1">
-            <div class="flex gap-2 items-start">
-                <input
-                    v-if="inEditMode"
-                    placeholder="Label"
-                    type="text"
-                    v-model="fieldData.label"
-                    class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-                />
-                <label class="text-base" v-else>{{ fieldData.label }}</label>
-                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-            </div>
-            <small class="text-gray-500">
-                {{ fieldData.description }}
-            </small>
-            <RenderField
-                :model-value="modelValue"
-                :field="fieldData"
-                @change="(value: any) => (modelValue = value)"
-                :class="{ 'pointer-events-none': inEditMode }"
-                :disabled="disabled"
-            />
-        </div>
     </div>
-    <div v-else-if="fieldData.fieldtype == 'Attach'">
-        <div class="flex gap-2 items-start">
-            <input
-                v-if="inEditMode"
-                placeholder="Label"
-                type="text"
-                v-model="fieldData.label"
-                class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-            />
-            <label class="text-base" v-else>{{ fieldData.label }}</label>
-            <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-        </div>
+
+    <!-- custom: Attach and Table each need their own binding/widget -->
+    <div v-else-if="layout === 'custom' && fieldData.fieldtype === 'Attach'">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
         <RenderField
             :value="modelValue"
             @update:value="(value: string) => (modelValue = value)"
@@ -145,43 +90,30 @@ const { options: selectOptions } = useFieldOptions(fieldData);
             :class="{ 'pointer-events-none': inEditMode }"
             :disabled="disabled"
         />
-        <small class="text-gray-500">
-            {{ fieldData.description }}
-        </small>
+        <small class="text-gray-500">{{ fieldData.description }}</small>
     </div>
-    <div v-else-if="fieldData.fieldtype == 'Table'" class="w-full space-y-4">
-        <div class="flex gap-2 items-start">
-            <input
-                v-if="inEditMode"
-                placeholder="Label"
-                type="text"
-                v-model="fieldData.label"
-                class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-            />
-            <label class="text-base" v-else>{{ fieldData.label }}</label>
-            <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-        </div>
-        <small class="text-gray-500">
-            {{ fieldData.description }}
-        </small>
+
+    <div v-else-if="layout === 'custom'" class="w-full space-y-4">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
+        <small class="text-gray-500">{{ fieldData.description }}</small>
         <Table
             v-model="modelValue as undefined"
             :in-edit-mode="inEditMode"
             :doctype="fieldData.options"
         />
     </div>
-    <div v-else :class="getClasses">
-        <div class="flex gap-2 items-start">
-            <input
-                v-if="inEditMode"
-                placeholder="Label"
-                type="text"
-                v-model="fieldData.label"
-                class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-            />
-            <label class="text-base" v-else>{{ fieldData.label }}</label>
-            <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-        </div>
+
+    <!-- default: label → input → description -->
+    <div v-else class="w-full flex flex-col gap-2">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
         <RenderField
             v-model="modelValue"
             :field="fieldData"
@@ -189,8 +121,6 @@ const { options: selectOptions } = useFieldOptions(fieldData);
             :disabled="disabled"
             :options="selectOptions"
         />
-        <small class="text-gray-500">
-            {{ fieldData.description }}
-        </small>
+        <small class="text-gray-500">{{ fieldData.description }}</small>
     </div>
 </template>
diff --git a/frontend/src/config/fieldTypes.ts b/frontend/src/config/fieldTypes.ts
index 3a42981..a83a6ed 100644
--- a/frontend/src/config/fieldTypes.ts
+++ b/frontend/src/config/fieldTypes.ts
@@ -43,12 +43,12 @@ export { Fieldtype };
 /**
  * Controls how FieldRenderer positions the label relative to the input widget.
  *
- * - "default"      label on top, input below, description at the bottom
- * - "inline"       input first, label to the right (Switch, Checkbox)
- * - "below-label"  label on top, input immediately below before description (Text Editor, Attach)
- * - "custom"       the component handles its own full layout (Table)
+ * - "default"           label on top, input below, description at the bottom
+ * - "inline"            input first, label to the right (Switch, Checkbox)
+ * - "description-first" label on top, description below label, input at the bottom (Text Editor)
+ * - "custom"            the component handles its own full layout (Table)
  */
-export type FieldLayout = "default" | "inline" | "below-label" | "custom";
+export type FieldLayout = "default" | "inline" | "description-first" | "custom";
 
 export type FieldTypeDefinition = {
   /** Canonical name — must match a Fieldtype enum value */
@@ -205,7 +205,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
       bubbleMenu: true,
       starterkitOptions: { heading: { levels: [2, 3, 4] } },
     },
-    layout: "below-label",
+    layout: "description-first",
     frappeFieldtype: "Text Editor",
     isBoolean: false,
     isDate: false,

From 3a011700ae3b17443b441346f8e054198a113f71 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 16:47:26 +0530
Subject: [PATCH 04/12] refactor: derive boolean/date field behaviour from
 registry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace hardcoded field type arrays and string comparisons in
conditionals.ts and SubmissionFieldValue.vue with registry lookups.

- conditionals.ts: getFieldValue uses isBoolean flag instead of
  explicit Switch/Checkbox check; Number coercion uses Fieldtype enum
- SubmissionFieldValue: isDateField and classNames derived from
  typeDef.isDate and typeDef.isBoolean — new field types with these
  flags set get correct behaviour automatically
---
 .../form/submissions/SubmissionFieldValue.vue | 19 ++++++++-----------
 frontend/src/utils/conditionals.ts            | 10 ++++++----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/form/submissions/SubmissionFieldValue.vue b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
index b1af7ce..86ed8fb 100644
--- a/frontend/src/components/form/submissions/SubmissionFieldValue.vue
+++ b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Checkbox, Switch, Rating, TextEditor } from "frappe-ui";
 import { Fieldtype } from "@/types/formfield";
+import { getFieldTypeDef } from "@/config/fieldTypes";
 import { formatDate, formatDateTime, formatTime } from "@/utils/date";
 import { computed } from "vue";
 
@@ -36,18 +37,14 @@ const formattedDateValue = computed(() => {
     }
 });
 
-const isDateField = computed(() =>
-    [Fieldtype.DATE, Fieldtype.DATE_TIME, Fieldtype.DATE_RANGE, Fieldtype.TIME_PICKER].includes(
-        props.fieldtype
-    )
-);
+const typeDef = computed(() => getFieldTypeDef(props.fieldtype));
+const isDateField = computed(() => typeDef.value?.isDate ?? false);
 
-const classNames = computed<string>(() => {
-    if ([Fieldtype.SWITCH, Fieldtype.CHECKBOX].includes(props.fieldtype)) {
-        return "flex gap-1 flex-row-reverse items-start justify-end";
-    }
-    return "flex flex-col gap-1";
-});
+const classNames = computed<string>(() =>
+    typeDef.value?.isBoolean
+        ? "flex gap-1 flex-row-reverse items-start justify-end"
+        : "flex flex-col gap-1"
+);
 </script>
 
 <template>
diff --git a/frontend/src/utils/conditionals.ts b/frontend/src/utils/conditionals.ts
index 8fae4f0..28f4bd4 100644
--- a/frontend/src/utils/conditionals.ts
+++ b/frontend/src/utils/conditionals.ts
@@ -4,7 +4,8 @@ import {
   Condition,
   Actions,
 } from "@/types/conditional-render.types";
-import { FormField } from "@/types/formfield";
+import { FormField, Fieldtype } from "@/types/formfield";
+import { getFieldTypeDef } from "@/config/fieldTypes";
 
 /**
  * Parse conditional_logic string into ConditionalLogic object
@@ -35,13 +36,14 @@ function getFieldValue(
     return null;
   }
 
-  // Handle boolean/switch fields
-  if (fieldType === "Switch" || fieldType === "Checkbox") {
+  const typeDef = getFieldTypeDef(fieldType as Fieldtype);
+
+  if (typeDef?.isBoolean) {
     return Boolean(fieldValue);
   }
 
   // Handle number fields
-  if (fieldType === "Number") {
+  if (fieldType === Fieldtype.NUMBER) {
     const num = Number(fieldValue);
     return isNaN(num) ? null : num;
   }

From d82875199d5a090c9fd04fbca9494807ea176533 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 16:59:59 +0530
Subject: [PATCH 05/12] feat(validation): add server-side form response
 validation

Mirror frontend conditional logic server-side so required-field checks
cannot be bypassed via direct API calls. Extracts shared field type
constants into utils/constants.py and covers all new helpers with
pure-unit tests (no DB required).
---
 forms_pro/api/form.py                         |  23 +--
 forms_pro/api/submission.py                   | 104 +++++++++-
 forms_pro/tests/test_submission_validation.py | 183 ++++++++++++++++++
 forms_pro/utils/constants.py                  |  27 +++
 4 files changed, 316 insertions(+), 21 deletions(-)
 create mode 100644 forms_pro/tests/test_submission_validation.py
 create mode 100644 forms_pro/utils/constants.py

diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index 80700c4..2e73976 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -5,6 +5,7 @@
 
 from forms_pro.api.user import get_user
 from forms_pro.forms_pro.doctype.form.form import Form
+from forms_pro.utils.constants import FORMS_PRO_SYSTEM_FIELDNAMES, UNSUPPORTED_FRAPPE_FIELDTYPES
 
 
 class FormSharedWithResponse(BaseModel):
@@ -233,22 +234,10 @@ def get_doctype_list() -> list[str]:
 @frappe.whitelist(allow_guest=True)
 def get_doctype_fields(doctype: str) -> dict:
     doctype = frappe.get_doc("DocType", doctype)
-    fields = doctype.fields
-
-    FIELDTYPES_TO_REMOVE = [
-        "Section Break",
-        "HTML",
-        "Button",
-        "Column Break",
-        "Tab Break",
-        "Barcode",
-        "Dynamic Link",
-        "Fold",
+    fields = [
+        field
+        for field in doctype.fields
+        if field.fieldtype not in UNSUPPORTED_FRAPPE_FIELDTYPES
+        and field.fieldname not in FORMS_PRO_SYSTEM_FIELDNAMES
     ]
-
-    FIELDS_TO_REMOVE = ["fp_submission_status", "fp_linked_form"]
-
-    fields = [field for field in fields if field.fieldtype not in FIELDTYPES_TO_REMOVE]
-    fields = [field for field in fields if field.fieldname not in FIELDS_TO_REMOVE]
-
     return fields
diff --git a/forms_pro/api/submission.py b/forms_pro/api/submission.py
index 859389d..f14be16 100644
--- a/forms_pro/api/submission.py
+++ b/forms_pro/api/submission.py
@@ -1,3 +1,4 @@
+import json
 from datetime import datetime
 from typing import Any
 
@@ -32,11 +33,93 @@ def parse_datetime(cls, v: Any) -> datetime:
         raise ValueError(f"Invalid datetime value: {v}")
 
 
+def _coerce_field_value(value: Any, fieldtype: str) -> Any:
+    """Coerce a submitted value to its comparable type, matching frontend conditionals.ts logic."""
+    if value is None or value == "":
+        return None
+    # Matches isBoolean types in the frontend registry (Switch, Checkbox)
+    if fieldtype in ("Switch", "Checkbox"):
+        return bool(value)
+    if fieldtype == "Number":
+        try:
+            return int(value)
+        except (TypeError, ValueError):
+            return None
+    return str(value)
+
+
+def _evaluate_conditions(conditions: list[dict], form_data: dict, field_map: dict) -> bool:
+    """Evaluate AND-joined conditions against submitted form data."""
+    for condition in conditions:
+        fieldname = condition.get("fieldname")
+        operator = condition.get("operator")
+        expected = condition.get("value")
+        field = field_map.get(fieldname)
+        if not field:
+            return False
+        actual = _coerce_field_value(form_data.get(fieldname), field.fieldtype)
+        if operator == "is" and str(actual) != str(expected):
+            return False
+        if operator == "is_not" and str(actual) == str(expected):
+            return False
+        if operator == "is_empty" and actual is not None and actual != "":
+            return False
+        if operator == "is_not_empty" and (actual is None or actual == ""):
+            return False
+    return True
+
+
+def _validate_form_response(form: "Form", form_data: dict) -> None:
+    """
+    Validate required and conditionally-required fields server-side.
+
+    Mirrors the shouldFieldBeVisible / shouldFieldBeRequired logic in
+    frontend/src/utils/conditionals.ts so that direct API calls cannot
+    bypass frontend validation.
+    """
+    field_map = {f.fieldname: f for f in form.fields}
+    errors: list[str] = []
+
+    for field in form.fields:
+        is_visible = not field.hidden
+        is_required = bool(field.reqd)
+
+        for other in form.fields:
+            if not other.conditional_logic:
+                continue
+            try:
+                logic = json.loads(other.conditional_logic)
+            except (json.JSONDecodeError, TypeError):
+                continue
+
+            if logic.get("target_field") != field.fieldname:
+                continue
+
+            conditions_met = _evaluate_conditions(logic.get("conditions", []), form_data, field_map)
+            if conditions_met:
+                action = logic.get("action")
+                if action == "show_field":
+                    is_visible = True
+                elif action == "hide_field":
+                    is_visible = False
+                elif action == "require_answer":
+                    is_required = True
+
+        if not is_visible:
+            continue
+
+        if is_required and not form_data.get(field.fieldname):
+            errors.append(_("{0} is required").format(field.label))
+
+    if errors:
+        frappe.throw("\n".join(errors), frappe.ValidationError)
+
+
 @frappe.whitelist(allow_guest=True)
 def submit_form_response(
     form_id: str,
     form_data: list[dict],
-    submission_status: SubmissionStatus = SubmissionStatus.SUBMITTED,
+    submission_status: str = SubmissionStatus.SUBMITTED.value,
 ) -> str:
     """
     Submit a form response
@@ -49,6 +132,14 @@ def submit_form_response(
     Returns:
         The name of the submission
     """
+    try:
+        status = SubmissionStatus(submission_status)
+    except ValueError:
+        frappe.throw(
+            _("Invalid submission status: {0}").format(submission_status),
+            frappe.ValidationError,
+        )
+
     try:
         form: Form = frappe.get_doc("Form", form_id)
         linked_doctype = form.linked_doctype
@@ -59,12 +150,17 @@ def submit_form_response(
                 frappe.PermissionError,
             )
 
+        form_data_dict = {item["fieldname"]: item["value"] for item in form_data}
+
+        if status == SubmissionStatus.SUBMITTED:
+            _validate_form_response(form, form_data_dict)
+
         submission = frappe.new_doc(linked_doctype)
-        for data in form_data:
-            submission.set(data["fieldname"], data["value"])
+        for fieldname, value in form_data_dict.items():
+            submission.set(fieldname, value)
 
         submission.fp_linked_form = form_id
-        submission.fp_submission_status = submission_status.value
+        submission.fp_submission_status = status.value
         submission.insert(ignore_permissions=True, ignore_mandatory=True)
 
         # Share the submission with the owner
diff --git a/forms_pro/tests/test_submission_validation.py b/forms_pro/tests/test_submission_validation.py
new file mode 100644
index 0000000..413e60b
--- /dev/null
+++ b/forms_pro/tests/test_submission_validation.py
@@ -0,0 +1,183 @@
+# Copyright (c) 2025, harsh@buildwithhussain.com and contributors
+# For license information, please see license.txt
+
+import json
+import unittest
+from types import SimpleNamespace
+
+from forms_pro.api.submission import _coerce_field_value, _evaluate_conditions, _validate_form_response
+from forms_pro.utils.constants import FORMS_PRO_SYSTEM_FIELDNAMES, UNSUPPORTED_FRAPPE_FIELDTYPES
+from forms_pro.utils.form_generator import LINKED_FORM_FIELDOPTIONS, SUBMISSION_STATUS_FIELDOPTIONS
+
+
+def _field(fieldname, fieldtype="Data", label=None, reqd=0, hidden=0, conditional_logic=None):
+    """Build a minimal field stub matching what _validate_form_response expects."""
+    return SimpleNamespace(
+        fieldname=fieldname,
+        fieldtype=fieldtype,
+        label=label or fieldname.replace("_", " ").title(),
+        reqd=reqd,
+        hidden=hidden,
+        conditional_logic=conditional_logic,
+    )
+
+
+def _form(*fields):
+    """Build a minimal form stub."""
+    return SimpleNamespace(fields=list(fields))
+
+
+class TestCoerceFieldValue(unittest.TestCase):
+    def test_empty_string_returns_none(self):
+        self.assertIsNone(_coerce_field_value("", "Data"))
+
+    def test_none_returns_none(self):
+        self.assertIsNone(_coerce_field_value(None, "Data"))
+
+    def test_switch_coerces_to_bool(self):
+        self.assertTrue(_coerce_field_value(1, "Switch"))
+        self.assertFalse(_coerce_field_value(0, "Switch"))
+        self.assertFalse(_coerce_field_value("", "Switch"))
+
+    def test_checkbox_coerces_to_bool(self):
+        self.assertTrue(_coerce_field_value("true", "Checkbox"))
+        self.assertFalse(_coerce_field_value(0, "Checkbox"))
+
+    def test_number_coerces_to_int(self):
+        self.assertEqual(_coerce_field_value("42", "Number"), 42)
+        self.assertEqual(_coerce_field_value(7, "Number"), 7)
+
+    def test_number_invalid_returns_none(self):
+        self.assertIsNone(_coerce_field_value("abc", "Number"))
+
+    def test_data_returns_string(self):
+        self.assertEqual(_coerce_field_value("hello", "Data"), "hello")
+        self.assertEqual(_coerce_field_value(123, "Data"), "123")
+
+
+class TestEvaluateConditions(unittest.TestCase):
+    def _field_map(self, *fields):
+        return {f.fieldname: f for f in fields}
+
+    def test_is_operator_match(self):
+        fields = self._field_map(_field("status", "Data"))
+        conditions = [{"fieldname": "status", "operator": "is", "value": "Active"}]
+        self.assertTrue(_evaluate_conditions(conditions, {"status": "Active"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"status": "Inactive"}, fields))
+
+    def test_is_not_operator(self):
+        fields = self._field_map(_field("status", "Data"))
+        conditions = [{"fieldname": "status", "operator": "is_not", "value": "Active"}]
+        self.assertTrue(_evaluate_conditions(conditions, {"status": "Inactive"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"status": "Active"}, fields))
+
+    def test_is_empty_operator(self):
+        fields = self._field_map(_field("note", "Data"))
+        conditions = [{"fieldname": "note", "operator": "is_empty", "value": None}]
+        self.assertTrue(_evaluate_conditions(conditions, {"note": ""}, fields))
+        self.assertTrue(_evaluate_conditions(conditions, {"note": None}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"note": "some text"}, fields))
+
+    def test_is_not_empty_operator(self):
+        fields = self._field_map(_field("note", "Data"))
+        conditions = [{"fieldname": "note", "operator": "is_not_empty", "value": None}]
+        self.assertTrue(_evaluate_conditions(conditions, {"note": "hi"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"note": ""}, fields))
+
+    def test_all_conditions_must_pass(self):
+        """AND logic — all conditions must be true."""
+        fields = self._field_map(_field("a", "Data"), _field("b", "Data"))
+        conditions = [
+            {"fieldname": "a", "operator": "is", "value": "yes"},
+            {"fieldname": "b", "operator": "is", "value": "yes"},
+        ]
+        self.assertTrue(_evaluate_conditions(conditions, {"a": "yes", "b": "yes"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"a": "yes", "b": "no"}, fields))
+
+    def test_unknown_field_returns_false(self):
+        conditions = [{"fieldname": "nonexistent", "operator": "is", "value": "x"}]
+        self.assertFalse(_evaluate_conditions(conditions, {}, {}))
+
+
+class TestValidateFormResponse(unittest.TestCase):
+    def test_required_field_missing_raises(self):
+        import frappe
+
+        form = _form(_field("name", reqd=1))
+        with self.assertRaises(frappe.ValidationError):
+            _validate_form_response(form, {})
+
+    def test_required_field_present_passes(self):
+        form = _form(_field("name", reqd=1))
+        _validate_form_response(form, {"name": "John"})  # must not raise
+
+    def test_hidden_required_field_is_skipped(self):
+        """A hidden required field must not be validated."""
+        form = _form(_field("secret", reqd=1, hidden=1))
+        _validate_form_response(form, {})  # must not raise
+
+    def test_conditional_show_makes_field_required(self):
+        """A field conditionally required via require_answer must be checked."""
+        import frappe
+
+        logic = json.dumps(
+            {
+                "target_field": "phone",
+                "action": "require_answer",
+                "conditions": [{"fieldname": "contact_method", "operator": "is", "value": "Phone"}],
+            }
+        )
+        contact = _field("contact_method")
+        phone = _field("phone", reqd=0)
+        phone_with_logic = _field("contact_method", conditional_logic=logic)
+
+        form = _form(contact, phone, phone_with_logic)
+        with self.assertRaises(frappe.ValidationError):
+            _validate_form_response(form, {"contact_method": "Phone", "phone": ""})
+
+    def test_conditional_hide_skips_required_field(self):
+        """A conditionally hidden field must not be validated even if reqd=1."""
+        logic = json.dumps(
+            {
+                "target_field": "extra",
+                "action": "hide_field",
+                "conditions": [{"fieldname": "flag", "operator": "is", "value": "yes"}],
+            }
+        )
+        flag = _field("flag")
+        extra = _field("extra", reqd=1)
+        flag_with_logic = _field("flag", conditional_logic=logic)
+
+        form = _form(flag, extra, flag_with_logic)
+        # extra is required but should be hidden when flag=yes — no error expected
+        _validate_form_response(form, {"flag": "yes", "extra": ""})
+
+    def test_multiple_missing_fields_all_reported(self):
+        """All missing required fields should appear in the error, not just the first."""
+        import frappe
+
+        form = _form(
+            _field("first_name", reqd=1),
+            _field("last_name", reqd=1),
+        )
+        with self.assertRaises(frappe.ValidationError) as ctx:
+            _validate_form_response(form, {})
+
+        error_msg = str(ctx.exception)
+        self.assertIn("First Name", error_msg)
+        self.assertIn("Last Name", error_msg)
+
+
+class TestConstants(unittest.TestCase):
+    def test_system_fieldnames_derived_from_form_generator(self):
+        """Constants must stay in sync with form_generator field definitions."""
+        self.assertIn(SUBMISSION_STATUS_FIELDOPTIONS["fieldname"], FORMS_PRO_SYSTEM_FIELDNAMES)
+        self.assertIn(LINKED_FORM_FIELDOPTIONS["fieldname"], FORMS_PRO_SYSTEM_FIELDNAMES)
+
+    def test_unsupported_fieldtypes_contains_layout_types(self):
+        for fieldtype in ("Section Break", "Column Break", "Tab Break", "Fold"):
+            self.assertIn(fieldtype, UNSUPPORTED_FRAPPE_FIELDTYPES)
+
+    def test_unsupported_fieldtypes_contains_non_input_types(self):
+        for fieldtype in ("HTML", "Button", "Barcode", "Dynamic Link"):
+            self.assertIn(fieldtype, UNSUPPORTED_FRAPPE_FIELDTYPES)
diff --git a/forms_pro/utils/constants.py b/forms_pro/utils/constants.py
new file mode 100644
index 0000000..7675945
--- /dev/null
+++ b/forms_pro/utils/constants.py
@@ -0,0 +1,27 @@
+from forms_pro.utils.form_generator import LINKED_FORM_FIELDOPTIONS, SUBMISSION_STATUS_FIELDOPTIONS
+
+# Frappe fieldtypes that have no Forms Pro equivalent and must be excluded
+# when importing fields from an existing DocType into a form.
+# These are layout/structural types (Section Break, Column Break, etc.)
+# or types with no meaningful input representation (Button, Barcode, Fold).
+UNSUPPORTED_FRAPPE_FIELDTYPES: frozenset[str] = frozenset(
+    [
+        "Section Break",
+        "Column Break",
+        "Tab Break",
+        "Fold",
+        "HTML",
+        "Button",
+        "Barcode",
+        "Dynamic Link",
+    ]
+)
+
+# Fieldnames injected by Forms Pro itself — must never appear in the
+# user-visible field list returned to the form builder or submission page.
+FORMS_PRO_SYSTEM_FIELDNAMES: frozenset[str] = frozenset(
+    [
+        SUBMISSION_STATUS_FIELDOPTIONS["fieldname"],  # fp_submission_status
+        LINKED_FORM_FIELDOPTIONS["fieldname"],  # fp_linked_form
+    ]
+)

From ae3c6e200534699bae72193d0967325293331a44 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 17:08:12 +0530
Subject: [PATCH 06/12] chore: suppress semgrep guest-whitelist warnings on
 intentional public endpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both get_doctype_fields and submit_form_response are intentionally
guest-accessible — the former for form builder field introspection,
the latter for public form submissions.
---
 forms_pro/api/form.py       | 2 +-
 forms_pro/api/submission.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index 2e73976..47c5cab 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -231,7 +231,7 @@ def get_doctype_list() -> list[str]:
     )
 
 
-@frappe.whitelist(allow_guest=True)
+@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
 def get_doctype_fields(doctype: str) -> dict:
     doctype = frappe.get_doc("DocType", doctype)
     fields = [
diff --git a/forms_pro/api/submission.py b/forms_pro/api/submission.py
index f14be16..6054a63 100644
--- a/forms_pro/api/submission.py
+++ b/forms_pro/api/submission.py
@@ -115,7 +115,7 @@ def _validate_form_response(form: "Form", form_data: dict) -> None:
         frappe.throw("\n".join(errors), frappe.ValidationError)
 
 
-@frappe.whitelist(allow_guest=True)
+@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
 def submit_form_response(
     form_id: str,
     form_data: list[dict],

From 2d091374fa13897379825813a10063d45b6e4f3b Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 17:13:05 +0530
Subject: [PATCH 07/12] chore: remove multiselect from enum option

---
 frontend/src/types/FormsPro/form_field.types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/types/FormsPro/form_field.types.ts b/frontend/src/types/FormsPro/form_field.types.ts
index 4d9ffe9..ca9278c 100644
--- a/frontend/src/types/FormsPro/form_field.types.ts
+++ b/frontend/src/types/FormsPro/form_field.types.ts
@@ -9,7 +9,6 @@ export enum Fieldtype {
   "TIME_PICKER" = "Time Picker",
   "PASSWORD" = "Password",
   "SELECT" = "Select",
-  "MULTISELECT" = "Multiselect",
   "SWITCH" = "Switch",
   "TEXTAREA" = "Textarea",
   "TEXT_EDITOR" = "Text Editor",

From 982dec02ce4fd678a00533e8de0d5fe8f7a6dbe0 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 17:23:10 +0530
Subject: [PATCH 08/12] fix: address security and type safety issues from PR
 review

- Validate attachment URLs before rendering as links; reject javascript:
  and other unsafe schemes, add rel="noopener noreferrer"
- Fix required-field check to allow falsy-but-valid values (0, False)
- Whitelist form_data_dict keys to declared form fields only, preventing
  injection of system fields into the linked DocType
- Tighten addField() signature to Fieldtype, removing the unsafe string cast
- Remove invalid `as undefined` type assertion from Table v-model
- Add two new tests covering the falsy-value edge cases
---
 forms_pro/api/submission.py                   |  8 ++++++-
 forms_pro/tests/test_submission_validation.py | 10 ++++++++
 .../src/components/builder/FieldRenderer.vue  |  9 +++-----
 .../builder/sidebar/AddFieldsSection.vue      |  3 ++-
 .../form/submissions/SubmissionFieldValue.vue | 23 +++++++++++++++++--
 frontend/src/stores/editForm.ts               |  4 ++--
 6 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/forms_pro/api/submission.py b/forms_pro/api/submission.py
index 6054a63..49ce2f6 100644
--- a/forms_pro/api/submission.py
+++ b/forms_pro/api/submission.py
@@ -108,7 +108,8 @@ def _validate_form_response(form: "Form", form_data: dict) -> None:
         if not is_visible:
             continue
 
-        if is_required and not form_data.get(field.fieldname):
+        value = form_data.get(field.fieldname)
+        if is_required and (value is None or value == ""):
             errors.append(_("{0} is required").format(field.label))
 
     if errors:
@@ -152,6 +153,11 @@ def submit_form_response(
 
         form_data_dict = {item["fieldname"]: item["value"] for item in form_data}
 
+        # Whitelist to declared form fields only — prevents injecting system fields
+        # like owner, docstatus, etc. into the linked DocType.
+        allowed_fieldnames = {f.fieldname for f in form.fields}
+        form_data_dict = {k: v for k, v in form_data_dict.items() if k in allowed_fieldnames}
+
         if status == SubmissionStatus.SUBMITTED:
             _validate_form_response(form, form_data_dict)
 
diff --git a/forms_pro/tests/test_submission_validation.py b/forms_pro/tests/test_submission_validation.py
index 413e60b..e2dc51b 100644
--- a/forms_pro/tests/test_submission_validation.py
+++ b/forms_pro/tests/test_submission_validation.py
@@ -167,6 +167,16 @@ def test_multiple_missing_fields_all_reported(self):
         self.assertIn("First Name", error_msg)
         self.assertIn("Last Name", error_msg)
 
+    def test_required_field_with_zero_passes(self):
+        """Numeric 0 is a valid value and must not trigger a required-field error."""
+        form = _form(_field("score", fieldtype="Number", reqd=1))
+        _validate_form_response(form, {"score": 0})  # must not raise
+
+    def test_required_field_with_false_passes(self):
+        """Boolean False (unchecked Switch) is a valid value for a required field."""
+        form = _form(_field("agreed", fieldtype="Switch", reqd=1))
+        _validate_form_response(form, {"agreed": False})  # must not raise
+
 
 class TestConstants(unittest.TestCase):
     def test_system_fieldnames_derived_from_form_generator(self):
diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index 38fc1a4..3b41259 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -23,7 +23,8 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:field"]);
-const modelValue = defineModel();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const modelValue = defineModel<any>();
 
 const fieldData = computed({
     get() {
@@ -100,11 +101,7 @@ const { options: selectOptions } = useFieldOptions(fieldData);
             @update:label="fieldData.label = $event"
         />
         <small class="text-gray-500">{{ fieldData.description }}</small>
-        <Table
-            v-model="modelValue as undefined"
-            :in-edit-mode="inEditMode"
-            :doctype="fieldData.options"
-        />
+        <Table v-model="modelValue" :in-edit-mode="inEditMode" :doctype="fieldData.options" />
     </div>
 
     <!-- default: label → input → description -->
diff --git a/frontend/src/components/builder/sidebar/AddFieldsSection.vue b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
index 2ebad2e..3ae838d 100644
--- a/frontend/src/components/builder/sidebar/AddFieldsSection.vue
+++ b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { formFields, FormFields } from "@/utils/form_fields";
+import { Fieldtype } from "@/types/formfield";
 import { FormControl, Button } from "frappe-ui";
 import { useEditForm } from "@/stores/editForm";
 import RenderField from "@/components/RenderField.vue";
@@ -40,7 +41,7 @@ const editFormStore = useEditForm();
                         class="absolute top-4 -right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10"
                         variant="outline"
                         icon="plus"
-                        @click="editFormStore.addField(component)"
+                        @click="editFormStore.addField(component as Fieldtype)"
                     />
                 </div>
             </div>
diff --git a/frontend/src/components/form/submissions/SubmissionFieldValue.vue b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
index 86ed8fb..8eb8843 100644
--- a/frontend/src/components/form/submissions/SubmissionFieldValue.vue
+++ b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
@@ -40,6 +40,21 @@ const formattedDateValue = computed(() => {
 const typeDef = computed(() => getFieldTypeDef(props.fieldtype));
 const isDateField = computed(() => typeDef.value?.isDate ?? false);
 
+// Only allow safe attachment URLs (relative Frappe paths or http/https).
+// Rejects javascript: and other unsafe schemes.
+const safeAttachUrl = computed<string | null>(() => {
+    if (!props.value) return null;
+    const url = String(props.value);
+    if (url.startsWith("/")) return url;
+    try {
+        const { protocol } = new URL(url);
+        if (protocol === "https:" || protocol === "http:") return url;
+    } catch {
+        // unparseable — not a valid URL
+    }
+    return null;
+});
+
 const classNames = computed<string>(() =>
     typeDef.value?.isBoolean
         ? "flex gap-1 flex-row-reverse items-start justify-end"
@@ -75,13 +90,17 @@ const classNames = computed<string>(() =>
         <Rating v-else-if="fieldtype === Fieldtype.RATING" :modelValue="value" readonly />
 
         <a
-            v-else-if="fieldtype === Fieldtype.ATTACH && value"
-            :href="value"
+            v-else-if="fieldtype === Fieldtype.ATTACH && safeAttachUrl"
+            :href="safeAttachUrl"
             target="_blank"
+            rel="noopener noreferrer"
             class="text-sm text-blue-600 hover:text-blue-700 underline truncate"
         >
             {{ value }}
         </a>
+        <span v-else-if="fieldtype === Fieldtype.ATTACH && value" class="text-sm text-ink-gray-5">
+            {{ value }}
+        </span>
 
         <span
             v-else-if="fieldtype === Fieldtype.TEXTAREA"
diff --git a/frontend/src/stores/editForm.ts b/frontend/src/stores/editForm.ts
index 4044ad4..9ad5664 100644
--- a/frontend/src/stores/editForm.ts
+++ b/frontend/src/stores/editForm.ts
@@ -151,11 +151,11 @@ export const useEditForm = defineStore("editForm", () => {
     }
   }
 
-  function addField(fieldtype: string) {
+  function addField(fieldtype: Fieldtype) {
     if (formResource.value?.doc) {
       const newField: FormField = {
         idx: formResource.value.doc.fields.length + 1,
-        fieldtype: fieldtype as Fieldtype,
+        fieldtype,
         label: "",
         fieldname: "",
         options: "",

From edf30ac1c207fc0017dbe505caca36de690573a0 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 19:57:57 +0530
Subject: [PATCH 09/12] fix(validation): use float coercion and type-aware
 condition comparison

Number fields now coerce via float() matching frontend Number() behaviour,
so decimal values like 3.14 no longer cause conditions to silently fail.
Condition comparison now coerces expected through the same function as
actual, eliminating str(True)=="True" vs "true" and "3.0" vs "3" mismatches.
Adds five new tests covering float parity and type-aware boolean/number cases.
---
 forms_pro/api/submission.py                   | 10 +++++--
 forms_pro/tests/test_submission_validation.py | 28 +++++++++++++++++--
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/forms_pro/api/submission.py b/forms_pro/api/submission.py
index 49ce2f6..ce532d5 100644
--- a/forms_pro/api/submission.py
+++ b/forms_pro/api/submission.py
@@ -42,7 +42,7 @@ def _coerce_field_value(value: Any, fieldtype: str) -> Any:
         return bool(value)
     if fieldtype == "Number":
         try:
-            return int(value)
+            return float(value)
         except (TypeError, ValueError):
             return None
     return str(value)
@@ -58,9 +58,13 @@ def _evaluate_conditions(conditions: list[dict], form_data: dict, field_map: dic
         if not field:
             return False
         actual = _coerce_field_value(form_data.get(fieldname), field.fieldtype)
-        if operator == "is" and str(actual) != str(expected):
+        # Coerce the condition's expected value through the same function so
+        # types match — avoids str(True)=="True" vs "true" mismatches and
+        # str(3.0)=="3.0" vs "3" mismatches for Number fields.
+        expected_coerced = _coerce_field_value(expected, field.fieldtype)
+        if operator == "is" and actual != expected_coerced:
             return False
-        if operator == "is_not" and str(actual) == str(expected):
+        if operator == "is_not" and actual == expected_coerced:
             return False
         if operator == "is_empty" and actual is not None and actual != "":
             return False
diff --git a/forms_pro/tests/test_submission_validation.py b/forms_pro/tests/test_submission_validation.py
index e2dc51b..ffe2f67 100644
--- a/forms_pro/tests/test_submission_validation.py
+++ b/forms_pro/tests/test_submission_validation.py
@@ -43,9 +43,11 @@ def test_checkbox_coerces_to_bool(self):
         self.assertTrue(_coerce_field_value("true", "Checkbox"))
         self.assertFalse(_coerce_field_value(0, "Checkbox"))
 
-    def test_number_coerces_to_int(self):
-        self.assertEqual(_coerce_field_value("42", "Number"), 42)
-        self.assertEqual(_coerce_field_value(7, "Number"), 7)
+    def test_number_coerces_to_float(self):
+        self.assertEqual(_coerce_field_value("42", "Number"), 42.0)
+        self.assertEqual(_coerce_field_value(7, "Number"), 7.0)
+        self.assertEqual(_coerce_field_value("3.14", "Number"), 3.14)
+        self.assertEqual(_coerce_field_value(3.14, "Number"), 3.14)
 
     def test_number_invalid_returns_none(self):
         self.assertIsNone(_coerce_field_value("abc", "Number"))
@@ -98,6 +100,26 @@ def test_unknown_field_returns_false(self):
         conditions = [{"fieldname": "nonexistent", "operator": "is", "value": "x"}]
         self.assertFalse(_evaluate_conditions(conditions, {}, {}))
 
+    def test_number_condition_matches_float(self):
+        """float("3.14") must equal float(3.14) — old int() coercion would have failed."""
+        fields = self._field_map(_field("score", "Number"))
+        conditions = [{"fieldname": "score", "operator": "is", "value": 3.14}]
+        self.assertTrue(_evaluate_conditions(conditions, {"score": "3.14"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"score": "3.15"}, fields))
+
+    def test_number_condition_int_vs_float_parity(self):
+        """Condition value stored as int 42 must match submitted value "42"."""
+        fields = self._field_map(_field("age", "Number"))
+        conditions = [{"fieldname": "age", "operator": "is", "value": 42}]
+        self.assertTrue(_evaluate_conditions(conditions, {"age": "42"}, fields))
+
+    def test_boolean_condition_type_aware(self):
+        """True (bool) condition must match truthy submitted value without str() mismatch."""
+        fields = self._field_map(_field("agreed", "Switch"))
+        conditions = [{"fieldname": "agreed", "operator": "is", "value": True}]
+        self.assertTrue(_evaluate_conditions(conditions, {"agreed": 1}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"agreed": 0}, fields))
+
 
 class TestValidateFormResponse(unittest.TestCase):
     def test_required_field_missing_raises(self):

From f68417a036c583c6d5b77f96e40d6807248f8d99 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 20:34:08 +0530
Subject: [PATCH 10/12] fix: align operator/action strings with frontend enums
 and fix minor bugs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Operator and action values stored in conditional_logic JSON use the
frontend ConditionalOperators/Actions enum strings ("Is", "Is Not",
"Show Field", "Hide Field", "Require Answer"). The backend was checking
snake_case equivalents ("is", "hide_field", etc.) that never matched,
making server-side conditional validation completely inert. All operator
and action comparisons are updated to match the stored values, and all
tests are updated to use real-world JSON values rather than impossible
snake_case strings.

Also:
- get_form_by_route: throw DoesNotExistError when route not found
  instead of passing None to get_form and getting a confusing error
- get_doctype_fields: fix return type annotation dict → list
- saveAndPublish: return the save() promise instead of fire-and-forget
---
 forms_pro/api/form.py                         |  4 ++-
 forms_pro/api/submission.py                   | 14 +++++-----
 forms_pro/tests/test_submission_validation.py | 28 +++++++++----------
 frontend/src/stores/editForm.ts               |  2 +-
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index 47c5cab..0993a76 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -40,6 +40,8 @@ def is_login_required(route: str) -> bool:
 @frappe.whitelist(allow_guest=True)
 def get_form_by_route(route: str) -> dict:
     form_id = frappe.db.get_value("Form", {"route": route}, pluck="name")
+    if not form_id:
+        frappe.throw(_("Form not found"), frappe.DoesNotExistError)
     return get_form(form_id)
 
 
@@ -232,7 +234,7 @@ def get_doctype_list() -> list[str]:
 
 
 @frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
-def get_doctype_fields(doctype: str) -> dict:
+def get_doctype_fields(doctype: str) -> list:
     doctype = frappe.get_doc("DocType", doctype)
     fields = [
         field
diff --git a/forms_pro/api/submission.py b/forms_pro/api/submission.py
index ce532d5..73d303e 100644
--- a/forms_pro/api/submission.py
+++ b/forms_pro/api/submission.py
@@ -62,13 +62,13 @@ def _evaluate_conditions(conditions: list[dict], form_data: dict, field_map: dic
         # types match — avoids str(True)=="True" vs "true" mismatches and
         # str(3.0)=="3.0" vs "3" mismatches for Number fields.
         expected_coerced = _coerce_field_value(expected, field.fieldtype)
-        if operator == "is" and actual != expected_coerced:
+        if operator == "Is" and actual != expected_coerced:
             return False
-        if operator == "is_not" and actual == expected_coerced:
+        if operator == "Is Not" and actual == expected_coerced:
             return False
-        if operator == "is_empty" and actual is not None and actual != "":
+        if operator == "Is Empty" and actual is not None and actual != "":
             return False
-        if operator == "is_not_empty" and (actual is None or actual == ""):
+        if operator == "Is Not Empty" and (actual is None or actual == ""):
             return False
     return True
 
@@ -102,11 +102,11 @@ def _validate_form_response(form: "Form", form_data: dict) -> None:
             conditions_met = _evaluate_conditions(logic.get("conditions", []), form_data, field_map)
             if conditions_met:
                 action = logic.get("action")
-                if action == "show_field":
+                if action == "Show Field":
                     is_visible = True
-                elif action == "hide_field":
+                elif action == "Hide Field":
                     is_visible = False
-                elif action == "require_answer":
+                elif action == "Require Answer":
                     is_required = True
 
         if not is_visible:
diff --git a/forms_pro/tests/test_submission_validation.py b/forms_pro/tests/test_submission_validation.py
index ffe2f67..9aaff25 100644
--- a/forms_pro/tests/test_submission_validation.py
+++ b/forms_pro/tests/test_submission_validation.py
@@ -63,26 +63,26 @@ def _field_map(self, *fields):
 
     def test_is_operator_match(self):
         fields = self._field_map(_field("status", "Data"))
-        conditions = [{"fieldname": "status", "operator": "is", "value": "Active"}]
+        conditions = [{"fieldname": "status", "operator": "Is", "value": "Active"}]
         self.assertTrue(_evaluate_conditions(conditions, {"status": "Active"}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"status": "Inactive"}, fields))
 
     def test_is_not_operator(self):
         fields = self._field_map(_field("status", "Data"))
-        conditions = [{"fieldname": "status", "operator": "is_not", "value": "Active"}]
+        conditions = [{"fieldname": "status", "operator": "Is Not", "value": "Active"}]
         self.assertTrue(_evaluate_conditions(conditions, {"status": "Inactive"}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"status": "Active"}, fields))
 
     def test_is_empty_operator(self):
         fields = self._field_map(_field("note", "Data"))
-        conditions = [{"fieldname": "note", "operator": "is_empty", "value": None}]
+        conditions = [{"fieldname": "note", "operator": "Is Empty", "value": None}]
         self.assertTrue(_evaluate_conditions(conditions, {"note": ""}, fields))
         self.assertTrue(_evaluate_conditions(conditions, {"note": None}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"note": "some text"}, fields))
 
     def test_is_not_empty_operator(self):
         fields = self._field_map(_field("note", "Data"))
-        conditions = [{"fieldname": "note", "operator": "is_not_empty", "value": None}]
+        conditions = [{"fieldname": "note", "operator": "Is Not Empty", "value": None}]
         self.assertTrue(_evaluate_conditions(conditions, {"note": "hi"}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"note": ""}, fields))
 
@@ -90,33 +90,33 @@ def test_all_conditions_must_pass(self):
         """AND logic — all conditions must be true."""
         fields = self._field_map(_field("a", "Data"), _field("b", "Data"))
         conditions = [
-            {"fieldname": "a", "operator": "is", "value": "yes"},
-            {"fieldname": "b", "operator": "is", "value": "yes"},
+            {"fieldname": "a", "operator": "Is", "value": "yes"},
+            {"fieldname": "b", "operator": "Is", "value": "yes"},
         ]
         self.assertTrue(_evaluate_conditions(conditions, {"a": "yes", "b": "yes"}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"a": "yes", "b": "no"}, fields))
 
     def test_unknown_field_returns_false(self):
-        conditions = [{"fieldname": "nonexistent", "operator": "is", "value": "x"}]
+        conditions = [{"fieldname": "nonexistent", "operator": "Is", "value": "x"}]
         self.assertFalse(_evaluate_conditions(conditions, {}, {}))
 
     def test_number_condition_matches_float(self):
         """float("3.14") must equal float(3.14) — old int() coercion would have failed."""
         fields = self._field_map(_field("score", "Number"))
-        conditions = [{"fieldname": "score", "operator": "is", "value": 3.14}]
+        conditions = [{"fieldname": "score", "operator": "Is", "value": 3.14}]
         self.assertTrue(_evaluate_conditions(conditions, {"score": "3.14"}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"score": "3.15"}, fields))
 
     def test_number_condition_int_vs_float_parity(self):
         """Condition value stored as int 42 must match submitted value "42"."""
         fields = self._field_map(_field("age", "Number"))
-        conditions = [{"fieldname": "age", "operator": "is", "value": 42}]
+        conditions = [{"fieldname": "age", "operator": "Is", "value": 42}]
         self.assertTrue(_evaluate_conditions(conditions, {"age": "42"}, fields))
 
     def test_boolean_condition_type_aware(self):
         """True (bool) condition must match truthy submitted value without str() mismatch."""
         fields = self._field_map(_field("agreed", "Switch"))
-        conditions = [{"fieldname": "agreed", "operator": "is", "value": True}]
+        conditions = [{"fieldname": "agreed", "operator": "Is", "value": True}]
         self.assertTrue(_evaluate_conditions(conditions, {"agreed": 1}, fields))
         self.assertFalse(_evaluate_conditions(conditions, {"agreed": 0}, fields))
 
@@ -145,8 +145,8 @@ def test_conditional_show_makes_field_required(self):
         logic = json.dumps(
             {
                 "target_field": "phone",
-                "action": "require_answer",
-                "conditions": [{"fieldname": "contact_method", "operator": "is", "value": "Phone"}],
+                "action": "Require Answer",
+                "conditions": [{"fieldname": "contact_method", "operator": "Is", "value": "Phone"}],
             }
         )
         contact = _field("contact_method")
@@ -162,8 +162,8 @@ def test_conditional_hide_skips_required_field(self):
         logic = json.dumps(
             {
                 "target_field": "extra",
-                "action": "hide_field",
-                "conditions": [{"fieldname": "flag", "operator": "is", "value": "yes"}],
+                "action": "Hide Field",
+                "conditions": [{"fieldname": "flag", "operator": "Is", "value": "yes"}],
             }
         )
         flag = _field("flag")
diff --git a/frontend/src/stores/editForm.ts b/frontend/src/stores/editForm.ts
index 9ad5664..f6cc4f0 100644
--- a/frontend/src/stores/editForm.ts
+++ b/frontend/src/stores/editForm.ts
@@ -119,7 +119,7 @@ export const useEditForm = defineStore("editForm", () => {
   function saveAndPublish() {
     if (formResource.value) {
       formResource.value.doc.is_published = 1;
-      save();
+      return save();
     }
   }
 

From c487acc7725338fce09e8cf8e036fa016e137dd7 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 20:39:27 +0530
Subject: [PATCH 11/12] fix: semgrep

---
 forms_pro/api/form.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index 0993a76..730ef99 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -37,7 +37,7 @@ def is_login_required(route: str) -> bool:
     return bool(login_enabled)
 
 
-@frappe.whitelist(allow_guest=True)
+@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
 def get_form_by_route(route: str) -> dict:
     form_id = frappe.db.get_value("Form", {"route": route}, pluck="name")
     if not form_id:

From 2147ae0529b29b8d585800e5bfe40d3f34d34562 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sun, 12 Apr 2026 21:31:55 +0530
Subject: [PATCH 12/12] fix: Attach Field render

---
 frontend/src/components/builder/FieldRenderer.vue |  3 +--
 frontend/src/components/fields/Attachment.vue     | 15 ++++-----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index 3b41259..748c19f 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -85,8 +85,7 @@ const { options: selectOptions } = useFieldOptions(fieldData);
             @update:label="fieldData.label = $event"
         />
         <RenderField
-            :value="modelValue"
-            @update:value="(value: string) => (modelValue = value)"
+            v-model="modelValue"
             :field="fieldData"
             :class="{ 'pointer-events-none': inEditMode }"
             :disabled="disabled"
diff --git a/frontend/src/components/fields/Attachment.vue b/frontend/src/components/fields/Attachment.vue
index effaad4..aab9714 100644
--- a/frontend/src/components/fields/Attachment.vue
+++ b/frontend/src/components/fields/Attachment.vue
@@ -2,16 +2,13 @@
 import { ErrorMessage, FileUploader } from "frappe-ui";
 import { ref } from "vue";
 
-const props = defineProps({
+defineProps({
     field: {
         type: Object,
         required: true,
     },
 });
 
-const emit = defineEmits(["update:value"]);
-
-// @ts-ignore
 const value = defineModel<string>();
 
 const inPreview = ref(false);
@@ -51,24 +48,20 @@ const formatFileSize = (fileSize: number) => {
 const handleChange = (file: FileType) => {
     fileData.value = file;
     if (file.file_url) {
-        emit("update:value", file.file_url);
+        value.value = file.file_url;
     }
     inPreview.value = true;
 };
 
 const handleRemove = () => {
     fileData.value = null;
-    emit("update:value", "");
+    value.value = "";
     inPreview.value = false;
 };
 </script>
 <template>
     <div class="flex gap-2 flex-col mt-2">
-        <FileUploader
-            v-if="!inPreview"
-            v-bind="props.field"
-            @success="(file: FileType) => handleChange(file)"
-        >
+        <FileUploader v-if="!inPreview" @success="(file: FileType) => handleChange(file)">
             <!-- @vue-ignore -->
             <template #default="{ uploading, progress, error, openFileSelector }">
                 <Button @click="openFileSelector()" :loading="uploading">