From 1db70dfef6037d5af405ce8b98091d46040025a8 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 17 Feb 2023 21:05:06 +0530
Subject: [PATCH 1/7] feat: common form view

---
 schemas/types.ts                           |   2 +
 src/components/FormHeader.vue              |   1 +
 src/pages/CommonForm/CommonForm.vue        | 157 +++++++++++++++++++++
 src/pages/CommonForm/CommonFormSection.vue |  42 ++++++
 utils/translationHelpers.ts                |   8 +-
 5 files changed, 209 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/CommonForm/CommonForm.vue
 create mode 100644 src/pages/CommonForm/CommonFormSection.vue

diff --git a/schemas/types.ts b/schemas/types.ts
index 2cf49c28..ef028b26 100644
--- a/schemas/types.ts
+++ b/schemas/types.ts
@@ -64,6 +64,8 @@ export interface BaseField {
   inline?: boolean;              // UI Facing config, whether to display doc inline.
   filter?: boolean;               // UI Facing config, whether to be used to filter the List.
   computed?: boolean;            // Computed values are not stored in the database.
+  section?: string;              // UI Facing config, for grouping by sections
+  tab?: string;                  // UI Facing config, for grouping by tabs
 }
 
 export type SelectOption = { value: string; label: string };
diff --git a/src/components/FormHeader.vue b/src/components/FormHeader.vue
index 7664dd0b..993f1919 100644
--- a/src/components/FormHeader.vue
+++ b/src/components/FormHeader.vue
@@ -8,6 +8,7 @@
       justify-between
       h-row-large
       items-center
+      flex-shrink-0
     "
   >
     <h1>{{ formTitle }}</h1>
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
new file mode 100644
index 00000000..6c6bcc86
--- /dev/null
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -0,0 +1,157 @@
+<template>
+  <FormContainer>
+    <template #body>
+      <FormHeader
+        :form-title="title"
+        :form-sub-title="schema.label"
+        class="sticky top-0 bg-white border-b"
+      />
+
+      <!-- Section Container -->
+      <div v-if="hasDoc" class="overflow-auto custom-scroll">
+        <CommonFormSection
+          ref="section"
+          class="p-4"
+          v-for="[name, fields] of activeGroup.entries()"
+          :show-title="activeGroup.size > 1"
+          :title="name"
+          :fields="fields"
+          :key="name"
+          :doc="doc"
+        />
+      </div>
+
+      <!-- Tab Bar -->
+      <div
+        class="
+          mt-auto
+          px-4
+          pb-4
+          flex
+          gap-8
+          border-t
+          flex-shrink-0
+          sticky
+          bottom-0
+          bg-white
+        "
+        v-if="true || allGroups.size > 1"
+      >
+        <div
+          v-for="key of allGroups.keys()"
+          :key="key"
+          @click="activeTab = key"
+          class="text-sm cursor-pointer"
+          :class="
+            key === activeTab
+              ? 'text-blue-500 font-semibold border-t-2 border-blue-500'
+              : ''
+          "
+          :style="{
+            paddingTop: key === activeTab ? 'calc(1rem - 2px)' : '1rem',
+          }"
+        >
+          {{ key }}
+        </div>
+      </div>
+    </template>
+  </FormContainer>
+</template>
+
+<script lang="ts">
+import { Doc } from 'fyo/model/doc';
+import { ValidationError } from 'fyo/utils/errors';
+import { ModelNameEnum } from 'models/types';
+import { Field, Schema } from 'schemas/types';
+import FormContainer from 'src/components/FormContainer.vue';
+import FormHeader from 'src/components/FormHeader.vue';
+import { defineComponent } from 'vue';
+import CommonFormSection from './CommonFormSection.vue';
+
+type UIGroupedFields = Map<string, Map<string, Field[]>>;
+
+export default defineComponent({
+  props: {
+    name: { type: String, default: 'PAY-1008' },
+    schemaName: { type: String, default: ModelNameEnum.Payment },
+  },
+  data() {
+    return {
+      docOrNull: null,
+      activeTab: 'Default',
+    } as { docOrNull: null | Doc; activeTab: string };
+  },
+  async mounted() {
+    if (this.name && !this.docOrNull) {
+      this.docOrNull = await this.fyo.doc.getDoc(this.schemaName, this.name);
+    }
+
+    if (this.fyo.store.isDevelopment) {
+      // @ts-ignore
+      window.cf = this;
+    }
+  },
+  computed: {
+    hasDoc(): boolean {
+      return !!this.docOrNull;
+    },
+    doc(): Doc {
+      const doc = this.docOrNull as Doc | null;
+      if (!doc) {
+        throw new ValidationError(
+          this.t`Doc ${this.schema.label} ${this.name} not set`
+        );
+      }
+      return doc;
+    },
+    title(): string {
+      if (this.schema.isSubmittable && !this.docOrNull?.notInserted) {
+        return this.t`New Entry`;
+      }
+      return this.docOrNull?.name!;
+    },
+    schema(): Schema {
+      const schema = this.fyo.schemaMap[this.schemaName];
+      if (!schema) {
+        throw new ValidationError(`no schema found with ${this.schemaName}`);
+      }
+
+      return schema;
+    },
+    activeGroup(): Map<string, Field[]> {
+      const group = this.allGroups.get(this.activeTab);
+      if (!group) {
+        throw new ValidationError(
+          `Tab group ${this.activeTab} has no value set`
+        );
+      }
+
+      return group;
+    },
+    allGroups(): UIGroupedFields {
+      return getFieldsGroupedByTabAndSection(this.schema);
+    },
+  },
+  components: { FormContainer, FormHeader, CommonFormSection },
+});
+
+function getFieldsGroupedByTabAndSection(schema: Schema): UIGroupedFields {
+  const grouped: UIGroupedFields = new Map();
+  for (const field of schema?.fields ?? []) {
+    const tab = field.tab ?? 'Default';
+    const section = field.section ?? 'Default';
+    if (!grouped.has(tab)) {
+      grouped.set(tab, new Map());
+    }
+
+    const tabbed = grouped.get(tab)!;
+    if (!tabbed.has(section)) {
+      tabbed.set(section, []);
+    }
+
+    tabbed.get(section)!.push(field);
+  }
+
+  return grouped;
+}
+</script>
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
new file mode 100644
index 00000000..89ef06b7
--- /dev/null
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="grid gap-4 gap-x-8 grid-cols-2">
+    <FormControl
+      v-for="field of filteredFields"
+      :class="field.fieldtype === 'Table' ? 'col-span-2' : ''"
+      :show-label="true"
+      :border="true"
+      :key="field.fieldname"
+      :df="field"
+      :value="getRegularValue(field)"
+      @change="async (value) => await doc.set(field.fieldname, value)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { DocValue } from 'fyo/core/types';
+import { Doc } from 'fyo/model/doc';
+import { Field } from 'schemas/types';
+import FormControl from 'src/components/Controls/FormControl.vue';
+import { evaluateHidden } from 'src/utils/doc';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: String,
+    showTitle: Boolean,
+    doc: { type: Object as PropType<Doc>, required: true },
+    fields: Array as PropType<Field[]>,
+  },
+  computed: {
+    filteredFields(): Field[] {
+      return (this.fields ?? []).filter((f) => !evaluateHidden(f, this.doc));
+    },
+  },
+  methods: {
+    getRegularValue(field: Field): DocValue | Doc[] {
+      return this.doc.get(field.fieldname);
+    },
+  },
+  components: { FormControl },
+});
+</script>
diff --git a/utils/translationHelpers.ts b/utils/translationHelpers.ts
index c354d7e5..36fbaf03 100644
--- a/utils/translationHelpers.ts
+++ b/utils/translationHelpers.ts
@@ -2,7 +2,13 @@
  * Properties of a schema which are to be translated,
  * irrespective of nesting.
  */
-export const schemaTranslateables = ['label', 'description', 'placeholder'];
+export const schemaTranslateables = [
+  'label',
+  'description',
+  'placeholder',
+  'section',
+  'tab',
+];
 
 export function getIndexFormat(inp: string | string[]) {
   /**

From 7cfd0726d6c6d75659da1382d1d8a33fcecd6f42 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 17 Feb 2023 21:56:41 +0530
Subject: [PATCH 2/7] incr: add collapsible sections - table borders

---
 schemas/app/Payment.json                   | 114 +++++++++-------
 schemas/meta/base.json                     |  12 +-
 schemas/meta/submittable.json              |   6 +-
 src/components/Controls/Table.vue          | 149 +++++++++++----------
 src/pages/CommonForm/CommonForm.vue        |   8 +-
 src/pages/CommonForm/CommonFormSection.vue |  48 ++++---
 6 files changed, 191 insertions(+), 146 deletions(-)

diff --git a/schemas/app/Payment.json b/schemas/app/Payment.json
index c9e44c3e..fb9a2f34 100644
--- a/schemas/app/Payment.json
+++ b/schemas/app/Payment.json
@@ -11,7 +11,18 @@
       "fieldname": "name",
       "fieldtype": "Data",
       "required": true,
-      "readOnly": true
+      "readOnly": true,
+      "section": "Default"
+    },
+    {
+      "fieldname": "numberSeries",
+      "label": "Number Series",
+      "fieldtype": "Link",
+      "target": "NumberSeries",
+      "create": true,
+      "required": true,
+      "default": "PAY-",
+      "section": "Default"
     },
     {
       "fieldname": "party",
@@ -19,13 +30,15 @@
       "fieldtype": "Link",
       "target": "Party",
       "create": true,
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
       "fieldname": "date",
       "label": "Posting Date",
       "fieldtype": "Date",
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
       "fieldname": "paymentType",
@@ -42,16 +55,27 @@
           "label": "Pay"
         }
       ],
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
-      "fieldname": "numberSeries",
-      "label": "Number Series",
+      "fieldname": "account",
+      "label": "From Account",
       "fieldtype": "Link",
-      "target": "NumberSeries",
+      "target": "Account",
       "create": true,
       "required": true,
-      "default": "PAY-"
+      "section": "Details"
+    },
+    {
+      "fieldname": "paymentAccount",
+      "label": "To Account",
+      "placeholder": "To Account",
+      "fieldtype": "Link",
+      "target": "Account",
+      "create": true,
+      "required": true,
+      "section": "Details"
     },
     {
       "fieldname": "paymentMethod",
@@ -73,72 +97,64 @@
         }
       ],
       "default": "Cash",
-      "required": true
-    },
-    {
-      "fieldname": "account",
-      "label": "From Account",
-      "fieldtype": "Link",
-      "target": "Account",
-      "create": true,
-      "required": true
-    },
-    {
-      "fieldname": "paymentAccount",
-      "label": "To Account",
-      "placeholder": "To Account",
-      "fieldtype": "Link",
-      "target": "Account",
-      "create": true,
-      "required": true
-    },
-    {
-      "fieldname": "referenceId",
-      "label": "Ref. / Cheque No.",
-      "placeholder": "Ref. / Cheque No.",
-      "fieldtype": "Data"
-    },
-    {
-      "fieldname": "referenceDate",
-      "label": "Ref. Date",
-      "placeholder": "Ref. Date",
-      "fieldtype": "Date"
-    },
-    {
-      "fieldname": "clearanceDate",
-      "label": "Clearance Date",
-      "placeholder": "Clearance Date",
-      "fieldtype": "Date"
+      "required": true,
+      "section": "Details"
     },
     {
       "fieldname": "amount",
       "label": "Amount",
       "fieldtype": "Currency",
-      "required": true
+      "required": true,
+      "section": "Amounts"
     },
     {
       "fieldname": "writeoff",
       "label": "Write Off",
-      "fieldtype": "Currency"
+      "fieldtype": "Currency",
+      "section": "Amounts"
     },
     {
       "fieldname": "amountPaid",
       "label": "Amount Paid",
       "fieldtype": "Currency",
-      "computed": true
+      "computed": true,
+      "section": "Amounts"
+    },
+    {
+      "fieldname": "referenceId",
+      "label": "Ref. / Cheque No.",
+      "placeholder": "Ref. / Cheque No.",
+      "fieldtype": "Data",
+      "section": "References"
+    },
+    {
+      "fieldname": "referenceDate",
+      "label": "Reference Date",
+      "placeholder": "Ref. Date",
+      "fieldtype": "Date",
+      "section": "References"
+    },
+    {
+      "fieldname": "clearanceDate",
+      "label": "Clearance Date",
+      "placeholder": "Clearance Date",
+      "fieldtype": "Date",
+      "section": "References"
     },
     {
       "fieldname": "for",
       "label": "Payment Reference",
       "fieldtype": "Table",
       "target": "PaymentFor",
-      "required": false
+      "required": false,
+      "section": "References"
     },
     {
       "fieldname": "attachment",
       "placeholder": "Add attachment",
       "label": "Attachment",
-      "fieldtype": "Attachment"
+      "fieldtype": "Attachment",
+      "section": "References"
     }
   ],
   "quickEditFields": [
diff --git a/schemas/meta/base.json b/schemas/meta/base.json
index c596594b..763a3dbe 100644
--- a/schemas/meta/base.json
+++ b/schemas/meta/base.json
@@ -6,28 +6,32 @@
       "label": "Created By",
       "fieldtype": "Data",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "modifiedBy",
       "label": "Modified By",
       "fieldtype": "Data",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "created",
       "label": "Created",
       "fieldtype": "Datetime",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "modified",
       "label": "Modified",
       "fieldtype": "Datetime",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     }
   ]
 }
diff --git a/schemas/meta/submittable.json b/schemas/meta/submittable.json
index dbe6e524..f02772ac 100644
--- a/schemas/meta/submittable.json
+++ b/schemas/meta/submittable.json
@@ -6,14 +6,16 @@
       "label": "Submitted",
       "fieldtype": "Check",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "cancelled",
       "label": "Cancelled",
       "fieldtype": "Check",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     }
   ]
 }
diff --git a/src/components/Controls/Table.vue b/src/components/Controls/Table.vue
index bc589188..d239542a 100644
--- a/src/components/Controls/Table.vue
+++ b/src/components/Controls/Table.vue
@@ -4,79 +4,84 @@
       {{ df.label }}
     </div>
 
-    <!-- Title Row -->
-    <Row
-      :ratio="ratio"
-      class="border-b px-2 text-gray-600 w-full flex items-center"
-    >
-      <div class="flex items-center ps-2">#</div>
-      <div
-        class="items-center flex px-2 h-row-mid"
-        :class="{
-          'ms-auto': isNumeric(df),
-        }"
-        v-for="df in tableFields"
-        :key="df.fieldname"
-        :style="{
-          height: ``,
-        }"
+    <div :class="border ? 'border rounded-md' : ''">
+      <!-- Title Row -->
+      <Row
+        :ratio="ratio"
+        class="border-b px-2 text-gray-600 w-full flex items-center"
       >
-        {{ df.label }}
-      </div>
-    </Row>
-
-    <!-- Data Rows -->
-    <div
-      class="overflow-auto"
-      :style="{ 'max-height': maxHeight }"
-      v-if="value"
-    >
-      <TableRow
-        v-for="row in value"
-        ref="table-row"
-        :key="row.name"
-        v-bind="{ row, tableFields, size, ratio, isNumeric }"
-        :read-only="isReadOnly"
-        @remove="removeRow(row)"
-        :can-edit-row="canEditRow"
-      />
-    </div>
-
-    <!-- Add Row and Row Count -->
-    <Row
-      :ratio="ratio"
-      class="
-        text-gray-500
-        cursor-pointer
-        border-transparent
-        px-2
-        w-full
-        h-row-mid
-        flex
-        items-center
-      "
-      v-if="!isReadOnly"
-      @click="addRow"
-    >
-      <div class="flex items-center ps-1">
-        <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
-      </div>
-      <div class="flex justify-between px-2" :style="`grid-column: 2 / ${ratio.length + 1}`">
-        <p>
-          {{ t`Add Row` }}
-        </p>
-        <p
-          class="text-end px-2"
-          v-if="
-            value &&
-            maxRowsBeforeOverflow &&
-            value.length > maxRowsBeforeOverflow
-          "
+        <div class="flex items-center ps-2">#</div>
+        <div
+          class="items-center flex px-2 h-row-mid"
+          :class="{
+            'ms-auto': isNumeric(df),
+          }"
+          v-for="df in tableFields"
+          :key="df.fieldname"
+          :style="{
+            height: ``,
+          }"
         >
-          {{ t`${value.length} rows` }}
-        </p>
+          {{ df.label }}
+        </div>
+      </Row>
+
+      <!-- Data Rows -->
+      <div
+        class="overflow-auto"
+        :style="{ 'max-height': maxHeight }"
+        v-if="value"
+      >
+        <TableRow
+          v-for="row in value"
+          ref="table-row"
+          :key="row.name"
+          v-bind="{ row, tableFields, size, ratio, isNumeric }"
+          :read-only="isReadOnly"
+          @remove="removeRow(row)"
+          :can-edit-row="canEditRow"
+        />
       </div>
-    </Row>
+
+      <!-- Add Row and Row Count -->
+      <Row
+        :ratio="ratio"
+        class="
+          text-gray-500
+          cursor-pointer
+          border-transparent
+          px-2
+          w-full
+          h-row-mid
+          flex
+          items-center
+        "
+        v-if="!isReadOnly"
+        @click="addRow"
+      >
+        <div class="flex items-center ps-1">
+          <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
+        </div>
+        <div
+          class="flex justify-between px-2"
+          :style="`grid-column: 2 / ${ratio.length + 1}`"
+        >
+          <p>
+            {{ t`Add Row` }}
+          </p>
+          <p
+            class="text-end px-2"
+            v-if="
+              value &&
+              maxRowsBeforeOverflow &&
+              value.length > maxRowsBeforeOverflow
+            "
+          >
+            {{ t`${value.length} rows` }}
+          </p>
+        </div>
+      </Row>
+    </div>
   </div>
 </template>
 
@@ -101,6 +106,10 @@ export default {
       type: Number,
       default: 3,
     },
+    border: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     Row,
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index 6c6bcc86..539f6f0d 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -10,13 +10,14 @@
       <!-- Section Container -->
       <div v-if="hasDoc" class="overflow-auto custom-scroll">
         <CommonFormSection
+          v-for="([name, fields], idx) in activeGroup.entries()"
+          :key="name + idx"
           ref="section"
           class="p-4"
-          v-for="[name, fields] of activeGroup.entries()"
-          :show-title="activeGroup.size > 1"
+          :class="idx !== 0 && activeGroup.size > 1 ? 'border-t' : ''"
+          :show-title="activeGroup.size > 1 && name !== t`Default`"
           :title="name"
           :fields="fields"
-          :key="name"
           :doc="doc"
         />
       </div>
@@ -57,7 +58,6 @@
     </template>
   </FormContainer>
 </template>
-
 <script lang="ts">
 import { Doc } from 'fyo/model/doc';
 import { ValidationError } from 'fyo/utils/errors';
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index 89ef06b7..1820d7ae 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -1,19 +1,35 @@
 <template>
-  <div class="grid gap-4 gap-x-8 grid-cols-2">
-    <FormControl
-      v-for="field of filteredFields"
-      :class="field.fieldtype === 'Table' ? 'col-span-2' : ''"
-      :show-label="true"
-      :border="true"
-      :key="field.fieldname"
-      :df="field"
-      :value="getRegularValue(field)"
-      @change="async (value) => await doc.set(field.fieldname, value)"
-    />
+  <div>
+    <div
+      v-if="showTitle && title"
+      class="flex justify-between items-center cursor-pointer select-none"
+      :class="collapsed ? '' : 'mb-4'"
+      @click="collapsed = !collapsed"
+    >
+      <h2 class="text-base text-gray-900 font-semibold">
+        {{ title }}
+      </h2>
+      <feather-icon
+        :name="collapsed ? 'chevron-up' : 'chevron-down'"
+        class="w-4 h-4 text-gray-600"
+      />
+    </div>
+    <div class="grid gap-4 gap-x-8 grid-cols-2" v-if="!collapsed">
+      <FormControl
+        v-for="field of filteredFields"
+        class="mt-auto"
+        :class="field.fieldtype === 'Table' ? 'col-span-2 text-base' : ''"
+        :show-label="true"
+        :border="true"
+        :key="field.fieldname"
+        :df="field"
+        :value="doc[field.fieldname]"
+        @change="async (value) => await doc.set(field.fieldname, value)"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
@@ -27,16 +43,14 @@ export default defineComponent({
     doc: { type: Object as PropType<Doc>, required: true },
     fields: Array as PropType<Field[]>,
   },
+  data() {
+    return { collapsed: false };
+  },
   computed: {
     filteredFields(): Field[] {
       return (this.fields ?? []).filter((f) => !evaluateHidden(f, this.doc));
     },
   },
-  methods: {
-    getRegularValue(field: Field): DocValue | Doc[] {
-      return this.doc.get(field.fieldname);
-    },
-  },
   components: { FormControl },
 });
 </script>

From 01e197f4394af848a7d18913644d50b1d0edd795 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 20 Feb 2023 10:22:19 +0530
Subject: [PATCH 3/7] incr: status badge and action buttons

---
 src/components/Widgets/LinkedEntryWidget.vue |  14 ++-
 src/pages/CommonForm/CommonForm.vue          | 111 ++++++++++++++-----
 src/pages/CommonForm/CommonFormSection.vue   |   6 +-
 src/utils/types.ts                           |  22 ++--
 src/utils/ui.ts                              |  40 ++++---
 5 files changed, 135 insertions(+), 58 deletions(-)

diff --git a/src/components/Widgets/LinkedEntryWidget.vue b/src/components/Widgets/LinkedEntryWidget.vue
index 6a39eecd..9289eb86 100644
--- a/src/components/Widgets/LinkedEntryWidget.vue
+++ b/src/components/Widgets/LinkedEntryWidget.vue
@@ -56,7 +56,7 @@
 <script lang="ts">
 import { Money } from 'pesa';
 import { getCreateRoute } from 'src/router';
-import { getStatus, routeTo } from 'src/utils/ui';
+import { routeTo } from 'src/utils/ui';
 import { defineComponent, PropType } from 'vue';
 import Button from '../Button.vue';
 import StatusBadge from '../StatusBadge.vue';
@@ -78,7 +78,17 @@ export default defineComponent({
     linked: { type: Object as PropType<Linked>, required: true },
   },
   methods: {
-    getStatus,
+    getStatus(entry: { cancelled?: boolean; submitted?: boolean }) {
+      if (entry.cancelled) {
+        return 'Cancelled';
+      }
+
+      if (entry.submitted) {
+        return 'Submitted';
+      }
+
+      return 'Saved';
+    },
     async openEntry(name: string) {
       const route = getCreateRoute(this.linked.schemaName, name);
       await routeTo(route);
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index 539f6f0d..03cdae67 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -1,11 +1,35 @@
 <template>
   <FormContainer>
+    <template #header v-if="hasDoc">
+      <StatusBadge :status="status" />
+      <DropdownWithActions
+        v-for="group of groupedActions"
+        :key="group.label"
+        :type="group.type"
+        :actions="group.actions"
+      >
+        <p v-if="group.group">
+          {{ group.group }}
+        </p>
+        <feather-icon v-else name="more-horizontal" class="w-4 h-4" />
+      </DropdownWithActions>
+      <Button v-if="doc?.canSave" type="primary" @click="() => doc.sync()">
+        {{ t`Save` }}
+      </Button>
+      <Button
+        v-else-if="doc?.canSubmit"
+        type="primary"
+        @click="() => doc.submit()"
+        >{{ t`Submit` }}</Button
+      >
+    </template>
     <template #body>
       <FormHeader
         :form-title="title"
         :form-sub-title="schema.label"
         class="sticky top-0 bg-white border-b"
-      />
+      >
+      </FormHeader>
 
       <!-- Section Container -->
       <div v-if="hasDoc" class="overflow-auto custom-scroll">
@@ -61,20 +85,34 @@
 <script lang="ts">
 import { Doc } from 'fyo/model/doc';
 import { ValidationError } from 'fyo/utils/errors';
+import { getDocStatus } from 'models/helpers';
 import { ModelNameEnum } from 'models/types';
 import { Field, Schema } from 'schemas/types';
+import Button from 'src/components/Button.vue';
+import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import FormContainer from 'src/components/FormContainer.vue';
 import FormHeader from 'src/components/FormHeader.vue';
-import { defineComponent } from 'vue';
+import StatusBadge from 'src/components/StatusBadge.vue';
+import { ActionGroup, UIGroupedFields } from 'src/utils/types';
+import {
+  getFieldsGroupedByTabAndSection,
+  getGroupedActionsForDoc,
+} from 'src/utils/ui';
+import { computed, defineComponent } from 'vue';
 import CommonFormSection from './CommonFormSection.vue';
 
-type UIGroupedFields = Map<string, Map<string, Field[]>>;
-
 export default defineComponent({
   props: {
     name: { type: String, default: 'PAY-1008' },
     schemaName: { type: String, default: ModelNameEnum.Payment },
   },
+  provide() {
+    return {
+      schemaName: computed(() => this.docOrNull?.schemaName),
+      name: computed(() => this.docOrNull?.name),
+      doc: computed(() => this.docOrNull),
+    };
+  },
   data() {
     return {
       docOrNull: null,
@@ -82,19 +120,24 @@ export default defineComponent({
     } as { docOrNull: null | Doc; activeTab: string };
   },
   async mounted() {
-    if (this.name && !this.docOrNull) {
-      this.docOrNull = await this.fyo.doc.getDoc(this.schemaName, this.name);
-    }
-
     if (this.fyo.store.isDevelopment) {
       // @ts-ignore
       window.cf = this;
     }
+
+    await this.setDoc();
   },
   computed: {
     hasDoc(): boolean {
       return !!this.docOrNull;
     },
+    status(): string {
+      if (!this.hasDoc) {
+        return '';
+      }
+
+      return getDocStatus(this.doc);
+    },
     doc(): Doc {
       const doc = this.docOrNull as Doc | null;
       if (!doc) {
@@ -105,9 +148,10 @@ export default defineComponent({
       return doc;
     },
     title(): string {
-      if (this.schema.isSubmittable && !this.docOrNull?.notInserted) {
+      if (this.schema.isSubmittable && this.docOrNull?.notInserted) {
         return this.t`New Entry`;
       }
+
       return this.docOrNull?.name!;
     },
     schema(): Schema {
@@ -131,27 +175,34 @@ export default defineComponent({
     allGroups(): UIGroupedFields {
       return getFieldsGroupedByTabAndSection(this.schema);
     },
+    groupedActions(): ActionGroup[] {
+      if (!this.hasDoc) {
+        return [];
+      }
+
+      return getGroupedActionsForDoc(this.doc);
+    },
+  },
+  methods: {
+    async setDoc() {
+      if (this.hasDoc) {
+        return;
+      }
+
+      if (this.name) {
+        this.docOrNull = await this.fyo.doc.getDoc(this.schemaName, this.name);
+      } else {
+        this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
+      }
+    },
+  },
+  components: {
+    FormContainer,
+    FormHeader,
+    CommonFormSection,
+    StatusBadge,
+    Button,
+    DropdownWithActions,
   },
-  components: { FormContainer, FormHeader, CommonFormSection },
 });
-
-function getFieldsGroupedByTabAndSection(schema: Schema): UIGroupedFields {
-  const grouped: UIGroupedFields = new Map();
-  for (const field of schema?.fields ?? []) {
-    const tab = field.tab ?? 'Default';
-    const section = field.section ?? 'Default';
-    if (!grouped.has(tab)) {
-      grouped.set(tab, new Map());
-    }
-
-    const tabbed = grouped.get(tab)!;
-    if (!tabbed.has(section)) {
-      tabbed.set(section, []);
-    }
-
-    tabbed.get(section)!.push(field);
-  }
-
-  return grouped;
-}
 </script>
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index 1820d7ae..22c9fe05 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="filteredFields.length > 0">
     <div
       v-if="showTitle && title"
       class="flex justify-between items-center cursor-pointer select-none"
@@ -48,7 +48,9 @@ export default defineComponent({
   },
   computed: {
     filteredFields(): Field[] {
-      return (this.fields ?? []).filter((f) => !evaluateHidden(f, this.doc));
+      return (this.fields ?? []).filter(
+        (f) => !evaluateHidden(f, this.doc) && !f.meta
+      );
     },
   },
   components: { FormControl },
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 00e6c1a4..e24702ac 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,6 +1,7 @@
-import { Doc } from "fyo/model/doc";
-import { FieldType } from "schemas/types";
-import { QueryFilter } from "utils/db/types";
+import type { Doc } from 'fyo/model/doc';
+import type { Action } from 'fyo/model/types';
+import type { Field, FieldType } from 'schemas/types';
+import type { QueryFilter } from 'utils/db/types';
 
 export interface MessageDialogButton {
   label: string;
@@ -31,7 +32,7 @@ export interface QuickEditOptions {
   hideFields?: string[];
   showFields?: string[];
   defaults?: Record<string, unknown>;
-  listFilters?: QueryFilter
+  listFilters?: QueryFilter;
 }
 
 export type SidebarConfig = SidebarRoot[];
@@ -44,7 +45,7 @@ export interface SidebarRoot {
   iconHeight?: string;
   hidden?: () => boolean;
   items?: SidebarItem[];
-  filters?: QueryFilter
+  filters?: QueryFilter;
 }
 
 export interface SidebarItem {
@@ -55,7 +56,6 @@ export interface SidebarItem {
   hidden?: () => boolean;
 }
 
-
 export interface ExportField {
   fieldname: string;
   fieldtype: FieldType;
@@ -70,5 +70,13 @@ export interface ExportTableField {
   fields: ExportField[];
 }
 
+export type ActionGroup = {
+  group: string;
+  label: string;
+  type: string;
+  actions: Action[];
+};
+
+export type UIGroupedFields = Map<string, Map<string, Field[]>>;
 export type ExportFormat = 'csv' | 'json';
-export type PeriodKey = 'This Year' | 'This Quarter' | 'This Month'
\ No newline at end of file
+export type PeriodKey = 'This Year' | 'This Quarter' | 'This Month';
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 38a59c55..f2b178e5 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -9,6 +9,7 @@ import { Action } from 'fyo/model/types';
 import { getActions } from 'fyo/utils';
 import { getDbError, LinkValidationError, ValueError } from 'fyo/utils/errors';
 import { ModelNameEnum } from 'models/types';
+import { Schema } from 'schemas/types';
 import { handleErrorWithDialog } from 'src/errorHandling';
 import { fyo } from 'src/initFyo';
 import router from 'src/router';
@@ -17,10 +18,12 @@ import { App, createApp, h, ref } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { stringifyCircular } from './';
 import {
+  ActionGroup,
   MessageDialogOptions,
   QuickEditOptions,
   SettingsTab,
   ToastOptions,
+  UIGroupedFields,
 } from './types';
 
 export async function openQuickEdit({
@@ -274,14 +277,7 @@ export function getActionsForDoc(doc?: Doc): Action[] {
     });
 }
 
-export function getGroupedActionsForDoc(doc?: Doc) {
-  type Group = {
-    group: string;
-    label: string;
-    type: string;
-    actions: Action[];
-  };
-
+export function getGroupedActionsForDoc(doc?: Doc): ActionGroup[] {
   const actions = getActionsForDoc(doc);
   const actionsMap = actions.reduce((acc, ac) => {
     if (!ac.group) {
@@ -297,7 +293,7 @@ export function getGroupedActionsForDoc(doc?: Doc) {
 
     acc[ac.group].actions.push(ac);
     return acc;
-  }, {} as Record<string, Group>);
+  }, {} as Record<string, ActionGroup>);
 
   const grouped = Object.keys(actionsMap)
     .filter(Boolean)
@@ -393,14 +389,24 @@ function getDuplicateAction(doc: Doc): Action {
   };
 }
 
-export function getStatus(entry: { cancelled?: boolean; submitted?: boolean }) {
-  if (entry.cancelled) {
-    return 'Cancelled';
+export function getFieldsGroupedByTabAndSection(
+  schema: Schema
+): UIGroupedFields {
+  const grouped: UIGroupedFields = new Map();
+  for (const field of schema?.fields ?? []) {
+    const tab = field.tab ?? 'Default';
+    const section = field.section ?? 'Default';
+    if (!grouped.has(tab)) {
+      grouped.set(tab, new Map());
+    }
+
+    const tabbed = grouped.get(tab)!;
+    if (!tabbed.has(section)) {
+      tabbed.set(section, []);
+    }
+
+    tabbed.get(section)!.push(field);
   }
 
-  if (entry.submitted) {
-    return 'Submitted';
-  }
-
-  return 'Saved';
+  return grouped;
 }

From 0c077f09d23dd1b6e132e63d4390e032f512d92d Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 20 Feb 2023 11:22:48 +0530
Subject: [PATCH 4/7] incr: use legible temp name - fix table borders - enable
 edit row

---
 fyo/core/docHandler.ts                     | 17 +++++-
 schemas/app/Party.json                     |  3 +-
 src/components/Controls/Color.vue          |  2 +-
 src/components/Controls/Table.vue          |  5 +-
 src/components/Controls/TableRow.vue       |  1 -
 src/components/Row.vue                     |  2 +-
 src/pages/CommonForm/CommonForm.vue        | 62 ++++++++++++++++++----
 src/pages/CommonForm/CommonFormSection.vue | 18 +++++--
 src/pages/ListView/List.vue                |  4 +-
 9 files changed, 93 insertions(+), 21 deletions(-)

diff --git a/fyo/core/docHandler.ts b/fyo/core/docHandler.ts
index 2b98b88b..6026ae46 100644
--- a/fyo/core/docHandler.ts
+++ b/fyo/core/docHandler.ts
@@ -14,9 +14,11 @@ export class DocHandler {
   singles: SinglesMap = {};
   docs: Observable<DocMap | undefined> = new Observable();
   observer: Observable<never> = new Observable();
+  #temporaryNameCounters: Record<string, number>;
 
   constructor(fyo: Fyo) {
     this.fyo = fyo;
+    this.#temporaryNameCounters = {};
   }
 
   init() {
@@ -97,7 +99,7 @@ export class DocHandler {
     }
 
     const doc = new Model!(schema, data, this.fyo, isRawValueMap);
-    doc.name ??= getRandomString();
+    doc.name ??= this.#getTemporaryName(schema);
     if (cacheDoc) {
       this.#addToCache(doc);
     }
@@ -105,6 +107,19 @@ export class DocHandler {
     return doc;
   }
 
+  #getTemporaryName(schema: Schema): string {
+    if (schema.naming === 'random') {
+      return getRandomString();
+    }
+
+    this.#temporaryNameCounters[schema.name] ??= 1;
+
+    const idx = this.#temporaryNameCounters[schema.name];
+    this.#temporaryNameCounters[schema.name] = idx + 1;
+
+    return this.fyo.t`New ${schema.label ?? schema.name} - Temp No. ${idx}`;
+  }
+
   /**
    * Cache operations
    */
diff --git a/schemas/app/Party.json b/schemas/app/Party.json
index 820efd1d..2ee7d547 100644
--- a/schemas/app/Party.json
+++ b/schemas/app/Party.json
@@ -46,7 +46,8 @@
     {
       "fieldname": "outstandingAmount",
       "label": "Outstanding Amount",
-      "fieldtype": "Currency"
+      "fieldtype": "Currency",
+      "hidden": true
     },
     {
       "fieldname": "currency",
diff --git a/src/components/Controls/Color.vue b/src/components/Controls/Color.vue
index 4d5ac6c0..88fb579f 100644
--- a/src/components/Controls/Color.vue
+++ b/src/components/Controls/Color.vue
@@ -28,7 +28,7 @@
       <template #content>
         <div class="text-sm p-2 text-center">
           <div>
-            <Row class="border-none" :column-count="5" gap="0.5rem">
+            <Row :column-count="5" gap="0.5rem">
               <div
                 v-for="color in colors"
                 :key="color.value"
diff --git a/src/components/Controls/Table.vue b/src/components/Controls/Table.vue
index d239542a..324e00ab 100644
--- a/src/components/Controls/Table.vue
+++ b/src/components/Controls/Table.vue
@@ -33,7 +33,8 @@
         v-if="value"
       >
         <TableRow
-          v-for="row in value"
+          v-for="(row, idx) of value"
+          :class="idx < value.length - 1 ? 'border-b' : ''"
           ref="table-row"
           :key="row.name"
           v-bind="{ row, tableFields, size, ratio, isNumeric }"
@@ -49,13 +50,13 @@
         class="
           text-gray-500
           cursor-pointer
-          border-transparent
           px-2
           w-full
           h-row-mid
           flex
           items-center
         "
+        :class="value.length > 0 ? 'border-t' : ''"
         v-if="!isReadOnly"
         @click="addRow"
       >
diff --git a/src/components/Controls/TableRow.vue b/src/components/Controls/TableRow.vue
index bef30b88..638a4cc0 100644
--- a/src/components/Controls/TableRow.vue
+++ b/src/components/Controls/TableRow.vue
@@ -4,7 +4,6 @@
     class="
       w-full
       px-2
-      border-b
       hover:bg-gray-25
       group
       flex
diff --git a/src/components/Row.vue b/src/components/Row.vue
index 4bad1f25..e83079f5 100644
--- a/src/components/Row.vue
+++ b/src/components/Row.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-grid border-b" :style="style" v-bind="$attrs">
+  <div class="inline-grid" :style="style" v-bind="$attrs">
     <slot></slot>
   </div>
 </template>
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index 03cdae67..e4dd8511 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -35,6 +35,7 @@
       <div v-if="hasDoc" class="overflow-auto custom-scroll">
         <CommonFormSection
           v-for="([name, fields], idx) in activeGroup.entries()"
+          @editrow="(doc: Doc) => toggleQuickEditDoc(doc)"
           :key="name + idx"
           ref="section"
           class="p-4"
@@ -60,10 +61,10 @@
           bottom-0
           bg-white
         "
-        v-if="true || allGroups.size > 1"
+        v-if="groupedFields.size > 1"
       >
         <div
-          v-for="key of allGroups.keys()"
+          v-for="key of groupedFields.keys()"
           :key="key"
           @click="activeTab = key"
           class="text-sm cursor-pointer"
@@ -80,6 +81,22 @@
         </div>
       </div>
     </template>
+    <template #quickedit>
+      <Transition name="quickedit">
+        <QuickEditForm
+          v-if="hasQeDoc"
+          :name="qeDoc.name"
+          :show-name="false"
+          :show-save="false"
+          :source-doc="qeDoc"
+          :schema-name="qeDoc.schemaName"
+          :white="true"
+          :route-back="false"
+          :load-on-close="false"
+          @close="() => toggleQuickEditDoc(null)"
+        />
+      </Transition>
+    </template>
   </FormContainer>
 </template>
 <script lang="ts">
@@ -98,13 +115,14 @@ import {
   getFieldsGroupedByTabAndSection,
   getGroupedActionsForDoc,
 } from 'src/utils/ui';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, nextTick } from 'vue';
+import QuickEditForm from '../QuickEditForm.vue';
 import CommonFormSection from './CommonFormSection.vue';
 
 export default defineComponent({
   props: {
-    name: { type: String, default: 'PAY-1008' },
-    schemaName: { type: String, default: ModelNameEnum.Payment },
+    name: { type: String, default: '' },
+    schemaName: { type: String, default: ModelNameEnum.StockMovement },
   },
   provide() {
     return {
@@ -117,7 +135,12 @@ export default defineComponent({
     return {
       docOrNull: null,
       activeTab: 'Default',
-    } as { docOrNull: null | Doc; activeTab: string };
+      quickEditDoc: null,
+    } as {
+      docOrNull: null | Doc;
+      activeTab: string;
+      quickEditDoc: null | Doc;
+    };
   },
   async mounted() {
     if (this.fyo.store.isDevelopment) {
@@ -131,6 +154,9 @@ export default defineComponent({
     hasDoc(): boolean {
       return !!this.docOrNull;
     },
+    hasQeDoc(): boolean {
+      return !!this.quickEditDoc;
+    },
     status(): string {
       if (!this.hasDoc) {
         return '';
@@ -147,12 +173,21 @@ export default defineComponent({
       }
       return doc;
     },
+    qeDoc(): Doc {
+      const doc = this.quickEditDoc as Doc | null;
+      if (!doc) {
+        throw new ValidationError(
+          this.t`Doc ${this.schema.label} ${this.name} not set`
+        );
+      }
+      return doc;
+    },
     title(): string {
       if (this.schema.isSubmittable && this.docOrNull?.notInserted) {
         return this.t`New Entry`;
       }
 
-      return this.docOrNull?.name!;
+      return this.docOrNull?.name!?? this.t`New Entry`;
     },
     schema(): Schema {
       const schema = this.fyo.schemaMap[this.schemaName];
@@ -163,7 +198,7 @@ export default defineComponent({
       return schema;
     },
     activeGroup(): Map<string, Field[]> {
-      const group = this.allGroups.get(this.activeTab);
+      const group = this.groupedFields.get(this.activeTab);
       if (!group) {
         throw new ValidationError(
           `Tab group ${this.activeTab} has no value set`
@@ -172,7 +207,7 @@ export default defineComponent({
 
       return group;
     },
-    allGroups(): UIGroupedFields {
+    groupedFields(): UIGroupedFields {
       return getFieldsGroupedByTabAndSection(this.schema);
     },
     groupedActions(): ActionGroup[] {
@@ -195,6 +230,14 @@ export default defineComponent({
         this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
       }
     },
+    async toggleQuickEditDoc(doc: Doc | null) {
+      if (this.quickEditDoc && doc) {
+        this.quickEditDoc = null;
+        await nextTick();
+      }
+
+      this.quickEditDoc = doc;
+    },
   },
   components: {
     FormContainer,
@@ -203,6 +246,7 @@ export default defineComponent({
     StatusBadge,
     Button,
     DropdownWithActions,
+    QuickEditForm,
   },
 });
 </script>
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index 22c9fe05..9636c58f 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -24,6 +24,7 @@
         :key="field.fieldname"
         :df="field"
         :value="doc[field.fieldname]"
+        @editrow="(doc:Doc) => $emit('editrow', doc)"
         @change="async (value) => await doc.set(field.fieldname, value)"
       />
     </div>
@@ -37,6 +38,7 @@ import { evaluateHidden } from 'src/utils/doc';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
+  emits: ['editrow'],
   props: {
     title: String,
     showTitle: Boolean,
@@ -48,9 +50,19 @@ export default defineComponent({
   },
   computed: {
     filteredFields(): Field[] {
-      return (this.fields ?? []).filter(
-        (f) => !evaluateHidden(f, this.doc) && !f.meta
-      );
+      const fields: Field[] = [];
+      for (const field of this.fields ?? []) {
+        if (evaluateHidden(field, this.doc)) {
+          continue;
+        }
+
+        if (field.meta) {
+          continue;
+        }
+
+        fields.push(field);
+      }
+      return fields;
     },
   },
   components: { FormControl },
diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index db5dcc37..192328b2 100644
--- a/src/pages/ListView/List.vue
+++ b/src/pages/ListView/List.vue
@@ -9,7 +9,7 @@
     >
       <p class="w-8 text-end me-4 text-gray-700">#</p>
       <Row
-        class="flex-1 text-gray-700 border-none h-row-mid"
+        class="flex-1 text-gray-700 h-row-mid"
         :columnCount="columns.length"
         gap="1rem"
       >
@@ -45,7 +45,7 @@
           </p>
           <Row
             gap="1rem"
-            class="cursor-pointer text-gray-900 flex-1 border-none h-row-mid"
+            class="cursor-pointer text-gray-900 flex-1 h-row-mid"
             @click="$emit('openDoc', doc.name)"
             :columnCount="columns.length"
           >

From e0141b70d8bc823d428970e07f22e080026d19d0 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 21 Feb 2023 11:04:35 +0530
Subject: [PATCH 5/7] incr: use CommonForm for a few docs - show errors - shit
 setName to after validation

---
 fyo/core/docHandler.ts                     |   5 +-
 fyo/model/doc.ts                           |   2 +-
 models/baseModels/Item/Item.ts             |   1 +
 models/baseModels/Payment/Payment.ts       |   1 +
 models/inventory/StockMovement.ts          |   1 +
 schemas/app/Item.json                      | 103 ++++++++++++---------
 schemas/app/Payment.json                   |  42 ++++-----
 schemas/app/inventory/StockMovement.json   |  44 +++++----
 src/components/Controls/Link.vue           |   2 +-
 src/pages/CommonForm/CommonForm.vue        |  89 +++++++++++++++---
 src/pages/CommonForm/CommonFormSection.vue |  56 +++++------
 src/router.ts                              |  32 +++++++
 src/utils/search.ts                        |  21 ++---
 src/utils/ui.ts                            |  13 ++-
 14 files changed, 262 insertions(+), 150 deletions(-)

diff --git a/fyo/core/docHandler.ts b/fyo/core/docHandler.ts
index 6026ae46..b8fded44 100644
--- a/fyo/core/docHandler.ts
+++ b/fyo/core/docHandler.ts
@@ -117,7 +117,10 @@ export class DocHandler {
     const idx = this.#temporaryNameCounters[schema.name];
     this.#temporaryNameCounters[schema.name] = idx + 1;
 
-    return this.fyo.t`New ${schema.label ?? schema.name} - Temp No. ${idx}`;
+    return this.fyo.t`New ${schema.label ?? schema.name} ${String(idx).padStart(
+      2,
+      '0'
+    )}`;
   }
 
   /**
diff --git a/fyo/model/doc.ts b/fyo/model/doc.ts
index 18128bfd..c5902c12 100644
--- a/fyo/model/doc.ts
+++ b/fyo/model/doc.ts
@@ -868,9 +868,9 @@ export class Doc extends Observable<DocValue | Doc[]> {
   }
 
   async _insert() {
-    await setName(this, this.fyo);
     this._setBaseMetaValues();
     await this._preSync();
+    await setName(this, this.fyo);
 
     const validDict = this.getValidDict(false, true);
     let data: DocValueMap;
diff --git a/models/baseModels/Item/Item.ts b/models/baseModels/Item/Item.ts
index 61db702b..58b80747 100644
--- a/models/baseModels/Item/Item.ts
+++ b/models/baseModels/Item/Item.ts
@@ -111,6 +111,7 @@ export class Item extends Doc {
 
   static getListViewSettings(): ListViewSettings {
     return {
+      formRoute: ({ name }) => `/edit/Item/${name}`,
       columns: ['name', 'unit', 'tax', 'rate'],
     };
   }
diff --git a/models/baseModels/Payment/Payment.ts b/models/baseModels/Payment/Payment.ts
index 0f928138..176b7e95 100644
--- a/models/baseModels/Payment/Payment.ts
+++ b/models/baseModels/Payment/Payment.ts
@@ -617,6 +617,7 @@ export class Payment extends Transactional {
 
   static getListViewSettings(fyo: Fyo): ListViewSettings {
     return {
+      formRoute: ({ name }) => `/edit/Payment/${name}`,
       columns: ['name', getDocStatusListColumn(), 'party', 'date', 'amount'],
     };
   }
diff --git a/models/inventory/StockMovement.ts b/models/inventory/StockMovement.ts
index 2a157e83..b6d19a65 100644
--- a/models/inventory/StockMovement.ts
+++ b/models/inventory/StockMovement.ts
@@ -75,6 +75,7 @@ export class StockMovement extends Transfer {
 
   static getListViewSettings(fyo: Fyo): ListViewSettings {
     return {
+      formRoute: ({ name }) => `/edit/StockMovement/${name}`,
       columns: [
         'name',
         getDocStatusListColumn(),
diff --git a/schemas/app/Item.json b/schemas/app/Item.json
index b9d81b9d..deb74828 100644
--- a/schemas/app/Item.json
+++ b/schemas/app/Item.json
@@ -4,50 +4,20 @@
   "isSingle": false,
   "naming": "manual",
   "fields": [
+    {
+      "fieldname": "image",
+      "label": "Image",
+      "section": "Default",
+      "fieldtype": "AttachImage"
+    },
     {
       "fieldname": "name",
       "label": "Item Name",
       "fieldtype": "Data",
       "placeholder": "Item Name",
+      "section": "Default",
       "required": true
     },
-    {
-      "fieldname": "image",
-      "label": "Image",
-      "fieldtype": "AttachImage"
-    },
-    {
-      "fieldname": "description",
-      "label": "Description",
-      "placeholder": "Item Description",
-      "fieldtype": "Text"
-    },
-    {
-      "fieldname": "unit",
-      "label": "Unit Type",
-      "fieldtype": "Link",
-      "target": "UOM",
-      "create": true,
-      "default": "Unit",
-      "placeholder": "Unit Type"
-    },
-    {
-      "fieldname": "itemType",
-      "label": "Type",
-      "placeholder": "Type",
-      "fieldtype": "Select",
-      "default": "Product",
-      "options": [
-        {
-          "value": "Product",
-          "label": "Product"
-        },
-        {
-          "value": "Service",
-          "label": "Service"
-        }
-      ]
-    },
     {
       "fieldname": "for",
       "label": "For",
@@ -67,14 +37,57 @@
         }
       ],
       "required": true,
+      "section": "Default",
       "default": "Both"
     },
+    {
+      "fieldname": "itemType",
+      "label": "Type",
+      "placeholder": "Type",
+      "fieldtype": "Select",
+      "default": "Product",
+      "section": "Default",
+      "options": [
+        {
+          "value": "Product",
+          "label": "Product"
+        },
+        {
+          "value": "Service",
+          "label": "Service"
+        }
+      ]
+    },
+    {
+      "fieldname": "unit",
+      "label": "Unit Type",
+      "fieldtype": "Link",
+      "target": "UOM",
+      "create": true,
+      "default": "Unit",
+      "section": "Details",
+      "placeholder": "Unit Type"
+    },
+    {
+      "fieldname": "rate",
+      "label": "Rate",
+      "section": "Details",
+      "fieldtype": "Currency"
+    },
+    {
+      "fieldname": "description",
+      "label": "Description",
+      "placeholder": "Item Description",
+      "section": "Details",
+      "fieldtype": "Text"
+    },
     {
       "fieldname": "incomeAccount",
       "label": "Sales Acc.",
       "fieldtype": "Link",
       "target": "Account",
       "placeholder": "Income",
+      "section": "Accounts",
       "create": true,
       "required": true
     },
@@ -84,6 +97,7 @@
       "fieldtype": "Link",
       "target": "Account",
       "placeholder": "Expense",
+      "section": "Accounts",
       "create": true,
       "required": true
     },
@@ -92,31 +106,30 @@
       "label": "Tax",
       "fieldtype": "Link",
       "target": "Tax",
+      "section": "Accounts",
       "create": true,
       "placeholder": "Tax"
     },
-    {
-      "fieldname": "rate",
-      "label": "Rate",
-      "fieldtype": "Currency"
-    },
     {
       "fieldname": "hsnCode",
       "label": "HSN/SAC",
       "fieldtype": "Int",
-      "placeholder": "HSN/SAC Code"
+      "placeholder": "HSN/SAC Code",
+      "section": "Inventory"
     },
     {
       "fieldname": "barcode",
       "label": "Barcode",
       "fieldtype": "Data",
-      "placeholder": "Barcode"
+      "placeholder": "Barcode",
+      "section": "Inventory"
     },
     {
       "fieldname": "trackItem",
       "label": "Track Item",
       "fieldtype": "Check",
-      "default": false
+      "default": false,
+      "section": "Inventory"
     }
   ],
   "quickEditFields": [
diff --git a/schemas/app/Payment.json b/schemas/app/Payment.json
index fb9a2f34..336a9e8c 100644
--- a/schemas/app/Payment.json
+++ b/schemas/app/Payment.json
@@ -100,6 +100,27 @@
       "required": true,
       "section": "Details"
     },
+    {
+      "fieldname": "clearanceDate",
+      "label": "Clearance Date",
+      "placeholder": "Clearance Date",
+      "fieldtype": "Date",
+      "section": "Details"
+    },
+    {
+      "fieldname": "referenceId",
+      "label": "Ref. / Cheque No.",
+      "placeholder": "Ref. / Cheque No.",
+      "fieldtype": "Data",
+      "section": "Details"
+    },
+    {
+      "fieldname": "referenceDate",
+      "label": "Reference Date",
+      "placeholder": "Ref. Date",
+      "fieldtype": "Date",
+      "section": "Details"
+    },
     {
       "fieldname": "amount",
       "label": "Amount",
@@ -120,27 +141,6 @@
       "computed": true,
       "section": "Amounts"
     },
-    {
-      "fieldname": "referenceId",
-      "label": "Ref. / Cheque No.",
-      "placeholder": "Ref. / Cheque No.",
-      "fieldtype": "Data",
-      "section": "References"
-    },
-    {
-      "fieldname": "referenceDate",
-      "label": "Reference Date",
-      "placeholder": "Ref. Date",
-      "fieldtype": "Date",
-      "section": "References"
-    },
-    {
-      "fieldname": "clearanceDate",
-      "label": "Clearance Date",
-      "placeholder": "Clearance Date",
-      "fieldtype": "Date",
-      "section": "References"
-    },
     {
       "fieldname": "for",
       "label": "Payment Reference",
diff --git a/schemas/app/inventory/StockMovement.json b/schemas/app/inventory/StockMovement.json
index 99651250..9c6ed7cc 100644
--- a/schemas/app/inventory/StockMovement.json
+++ b/schemas/app/inventory/StockMovement.json
@@ -11,13 +11,18 @@
       "fieldname": "name",
       "fieldtype": "Data",
       "required": true,
-      "readOnly": true
+      "readOnly": true,
+      "section": "Default"
     },
     {
-      "fieldname": "date",
-      "label": "Date",
-      "fieldtype": "Datetime",
-      "required": true
+      "fieldname": "numberSeries",
+      "label": "Number Series",
+      "fieldtype": "Link",
+      "target": "NumberSeries",
+      "create": true,
+      "required": true,
+      "default": "SMOV-",
+      "section": "Default"
     },
     {
       "fieldname": "movementType",
@@ -41,29 +46,30 @@
           "label": "Manufacture"
         }
       ],
-      "required": true
-    },
-    {
-      "fieldname": "numberSeries",
-      "label": "Number Series",
-      "fieldtype": "Link",
-      "target": "NumberSeries",
-      "create": true,
       "required": true,
-      "default": "SMOV-"
+      "section": "Default"
     },
     {
-      "fieldname": "amount",
-      "label": "Total Amount",
-      "fieldtype": "Currency",
-      "readOnly": true
+      "fieldname": "date",
+      "label": "Date",
+      "fieldtype": "Datetime",
+      "required": true,
+      "section": "Default"
     },
     {
       "fieldname": "items",
       "label": "Items",
       "fieldtype": "Table",
       "target": "StockMovementItem",
-      "required": true
+      "required": true,
+      "section": "Items"
+    },
+    {
+      "fieldname": "amount",
+      "label": "Total Amount",
+      "fieldtype": "Currency",
+      "readOnly": true,
+      "section": "Items"
     }
   ],
   "quickEditFields": [
diff --git a/src/components/Controls/Link.vue b/src/components/Controls/Link.vue
index a6c73231..f654ee81 100644
--- a/src/components/Controls/Link.vue
+++ b/src/components/Controls/Link.vue
@@ -116,7 +116,7 @@ export default {
     },
     async openNewDoc() {
       const schemaName = this.df.target;
-      const doc = await fyo.doc.getNewDoc(schemaName);
+      const doc = fyo.doc.getNewDoc(schemaName);
 
       const filters = await this.getCreateFilters();
 
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index e4dd8511..5dd466d4 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -13,15 +13,12 @@
         </p>
         <feather-icon v-else name="more-horizontal" class="w-4 h-4" />
       </DropdownWithActions>
-      <Button v-if="doc?.canSave" type="primary" @click="() => doc.sync()">
+      <Button v-if="doc?.canSave" type="primary" @click="sync">
         {{ t`Save` }}
       </Button>
-      <Button
-        v-else-if="doc?.canSubmit"
-        type="primary"
-        @click="() => doc.submit()"
-        >{{ t`Submit` }}</Button
-      >
+      <Button v-else-if="doc?.canSubmit" type="primary" @click="submit">{{
+        t`Submit`
+      }}</Button>
     </template>
     <template #body>
       <FormHeader
@@ -44,6 +41,8 @@
           :title="name"
           :fields="fields"
           :doc="doc"
+          :errors="errors"
+          @value-change="onValueChange"
         />
       </div>
 
@@ -61,7 +60,7 @@
           bottom-0
           bg-white
         "
-        v-if="groupedFields.size > 1"
+        v-if="groupedFields && groupedFields.size > 1"
       >
         <div
           v-for="key of groupedFields.keys()"
@@ -100,6 +99,7 @@
   </FormContainer>
 </template>
 <script lang="ts">
+import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { ValidationError } from 'fyo/utils/errors';
 import { getDocStatus } from 'models/helpers';
@@ -110,6 +110,8 @@ import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import FormContainer from 'src/components/FormContainer.vue';
 import FormHeader from 'src/components/FormHeader.vue';
 import StatusBadge from 'src/components/StatusBadge.vue';
+import { handleErrorWithDialog } from 'src/errorHandling';
+import { getErrorMessage } from 'src/utils';
 import { ActionGroup, UIGroupedFields } from 'src/utils/types';
 import {
   getFieldsGroupedByTabAndSection,
@@ -122,7 +124,7 @@ import CommonFormSection from './CommonFormSection.vue';
 export default defineComponent({
   props: {
     name: { type: String, default: '' },
-    schemaName: { type: String, default: ModelNameEnum.StockMovement },
+    schemaName: { type: String, default: ModelNameEnum.SalesInvoice },
   },
   provide() {
     return {
@@ -133,12 +135,16 @@ export default defineComponent({
   },
   data() {
     return {
+      errors: {},
       docOrNull: null,
       activeTab: 'Default',
+      groupedFields: null,
       quickEditDoc: null,
     } as {
+      errors: Record<string, string>;
       docOrNull: null | Doc;
       activeTab: string;
+      groupedFields: null | UIGroupedFields;
       quickEditDoc: null | Doc;
     };
   },
@@ -149,6 +155,7 @@ export default defineComponent({
     }
 
     await this.setDoc();
+    this.groupedFields = this.getGroupedFields();
   },
   computed: {
     hasDoc(): boolean {
@@ -187,7 +194,7 @@ export default defineComponent({
         return this.t`New Entry`;
       }
 
-      return this.docOrNull?.name!?? this.t`New Entry`;
+      return this.docOrNull?.name! ?? this.t`New Entry`;
     },
     schema(): Schema {
       const schema = this.fyo.schemaMap[this.schemaName];
@@ -198,6 +205,10 @@ export default defineComponent({
       return schema;
     },
     activeGroup(): Map<string, Field[]> {
+      if (!this.groupedFields) {
+        return new Map();
+      }
+
       const group = this.groupedFields.get(this.activeTab);
       if (!group) {
         throw new ValidationError(
@@ -207,9 +218,6 @@ export default defineComponent({
 
       return group;
     },
-    groupedFields(): UIGroupedFields {
-      return getFieldsGroupedByTabAndSection(this.schema);
-    },
     groupedActions(): ActionGroup[] {
       if (!this.hasDoc) {
         return [];
@@ -219,17 +227,53 @@ export default defineComponent({
     },
   },
   methods: {
+    getGroupedFields(): UIGroupedFields {
+      if (!this.hasDoc) {
+        return new Map();
+      }
+
+      return getFieldsGroupedByTabAndSection(this.schema, this.doc);
+    },
+    async sync() {
+      try {
+        await this.doc.sync();
+      } catch (err) {
+        if (!(err instanceof Error)) {
+          return;
+        }
+
+        await handleErrorWithDialog(err, this.doc);
+      }
+    },
+    async submit() {
+      try {
+        await this.doc.submit();
+      } catch (err) {
+        if (!(err instanceof Error)) {
+          return;
+        }
+
+        await handleErrorWithDialog(err, this.doc);
+      }
+    },
     async setDoc() {
       if (this.hasDoc) {
         return;
       }
 
       if (this.name) {
-        this.docOrNull = await this.fyo.doc.getDoc(this.schemaName, this.name);
+        await this.setDocFromName(this.name);
       } else {
         this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
       }
     },
+    async setDocFromName(name: string) {
+      try {
+        this.docOrNull = await this.fyo.doc.getDoc(this.schemaName, name);
+      } catch (err) {
+        this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
+      }
+    },
     async toggleQuickEditDoc(doc: Doc | null) {
       if (this.quickEditDoc && doc) {
         this.quickEditDoc = null;
@@ -238,6 +282,23 @@ export default defineComponent({
 
       this.quickEditDoc = doc;
     },
+    async onValueChange(field: Field, value: DocValue) {
+      const { fieldname } = field;
+      console.log(fieldname, value);
+      delete this.errors[fieldname];
+
+      try {
+        await this.doc.set(fieldname, value);
+      } catch (err) {
+        if (!(err instanceof Error)) {
+          return;
+        }
+
+        this.errors[fieldname] = getErrorMessage(err, this.doc);
+      }
+
+      this.groupedFields = this.getGroupedFields();
+    },
   },
   components: {
     FormContainer,
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index 9636c58f..0fa80a87 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="filteredFields.length > 0">
+  <div v-if="(fields ?? []).length > 0">
     <div
       v-if="showTitle && title"
       class="flex justify-between items-center cursor-pointer select-none"
@@ -15,55 +15,47 @@
       />
     </div>
     <div class="grid gap-4 gap-x-8 grid-cols-2" v-if="!collapsed">
-      <FormControl
-        v-for="field of filteredFields"
-        class="mt-auto"
-        :class="field.fieldtype === 'Table' ? 'col-span-2 text-base' : ''"
-        :show-label="true"
-        :border="true"
+      <div
+        v-for="field of fields"
         :key="field.fieldname"
-        :df="field"
-        :value="doc[field.fieldname]"
-        @editrow="(doc:Doc) => $emit('editrow', doc)"
-        @change="async (value) => await doc.set(field.fieldname, value)"
-      />
+        class="mb-auto"
+        :class="field.fieldtype === 'Table' ? 'col-span-2 text-base' : ''"
+      >
+        <FormControl
+          :show-label="true"
+          :border="true"
+          :df="field"
+          :value="doc[field.fieldname]"
+          @editrow="(doc: Doc) => $emit('editrow', doc)"
+          @change="(value: DocValue) => $emit('value-change', field, value)"
+        />
+        <div v-if="errors?.[field.fieldname]" class="text-sm text-red-600">
+          {{ errors[field.fieldname] }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts">
+import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
-import { evaluateHidden } from 'src/utils/doc';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
-  emits: ['editrow'],
+  emits: ['editrow', 'value-change'],
   props: {
     title: String,
+    errors: Object as PropType<Record<string, string>>,
     showTitle: Boolean,
     doc: { type: Object as PropType<Doc>, required: true },
     fields: Array as PropType<Field[]>,
   },
   data() {
-    return { collapsed: false };
-  },
-  computed: {
-    filteredFields(): Field[] {
-      const fields: Field[] = [];
-      for (const field of this.fields ?? []) {
-        if (evaluateHidden(field, this.doc)) {
-          continue;
-        }
-
-        if (field.meta) {
-          continue;
-        }
-
-        fields.push(field);
-      }
-      return fields;
-    },
+    return { collapsed: false } as {
+      collapsed: boolean;
+    };
   },
   components: { FormControl },
 });
diff --git a/src/router.ts b/src/router.ts
index 5f862a01..d9e6aaad 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -9,6 +9,7 @@ import JournalEntryForm from 'src/pages/JournalEntryForm.vue';
 import ListView from 'src/pages/ListView/ListView.vue';
 import PrintView from 'src/pages/PrintView/PrintView.vue';
 import QuickEditForm from 'src/pages/QuickEditForm.vue';
+import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Report from 'src/pages/Report.vue';
 import Settings from 'src/pages/Settings/Settings.vue';
 import {
@@ -43,6 +44,33 @@ function getGeneralFormItems(): RouteRecordRaw[] {
   );
 }
 
+function getCommonFormItems(): RouteRecordRaw[] {
+  return [
+    ModelNameEnum.Payment,
+    ModelNameEnum.StockMovement,
+    ModelNameEnum.Item,
+  ].map((schemaName) => {
+    return {
+      path: `/edit/${schemaName}/:name`,
+      name: `${schemaName}Form`,
+      components: {
+        default: CommonForm,
+        edit: QuickEditForm,
+      },
+      props: {
+        default: (route) => {
+          route.params.schemaName = schemaName;
+          return {
+            schemaName,
+            name: route.params.name,
+          };
+        },
+        edit: (route) => route.query,
+      },
+    };
+  });
+}
+
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
@@ -53,6 +81,7 @@ const routes: RouteRecordRaw[] = [
     component: GetStarted,
   },
   ...getGeneralFormItems(),
+  ...getCommonFormItems(),
   {
     path: '/edit/JournalEntry/:name',
     name: 'JournalEntryForm',
@@ -167,6 +196,9 @@ export function getCreateRoute(
       ModelNameEnum.JournalEntry,
       ModelNameEnum.Shipment,
       ModelNameEnum.PurchaseReceipt,
+      ModelNameEnum.StockMovement,
+      ModelNameEnum.Payment,
+      ModelNameEnum.Item,
     ].includes(schemaName as ModelNameEnum)
   ) {
     return `/edit/${schemaName}/${name}`;
diff --git a/src/utils/search.ts b/src/utils/search.ts
index 95eb60cd..05832e73 100644
--- a/src/utils/search.ts
+++ b/src/utils/search.ts
@@ -93,25 +93,16 @@ async function openFormEditDoc(schemaName: string, fyo: Fyo) {
 
 function getCreateList(fyo: Fyo): SearchItem[] {
   const hasInventory = fyo.doc.singles.AccountingSettings?.enableInventory;
-  const quickEditCreateList = [
-    ...(hasInventory ? [ModelNameEnum.StockMovement] : []),
-  ].map(
-    (schemaName) =>
-      ({
-        label: fyo.schemaMap[schemaName]?.label,
-        group: 'Create',
-        action() {
-          openQuickEditDoc(schemaName, fyo);
-        },
-      } as SearchItem)
-  );
-
   const formEditCreateList = [
     ModelNameEnum.SalesInvoice,
     ModelNameEnum.PurchaseInvoice,
     ModelNameEnum.JournalEntry,
     ...(hasInventory
-      ? [ModelNameEnum.Shipment, ModelNameEnum.PurchaseReceipt]
+      ? [
+          ModelNameEnum.Shipment,
+          ModelNameEnum.PurchaseReceipt,
+          ModelNameEnum.StockMovement,
+        ]
       : []),
   ].map(
     (schemaName) =>
@@ -197,7 +188,7 @@ function getCreateList(fyo: Fyo): SearchItem[] {
     } as SearchItem;
   });
 
-  return [quickEditCreateList, formEditCreateList, filteredCreateList].flat();
+  return [formEditCreateList, filteredCreateList].flat();
 }
 
 function getReportList(fyo: Fyo): SearchItem[] {
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index f2b178e5..0f1013a6 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -17,6 +17,7 @@ import { IPC_ACTIONS } from 'utils/messages';
 import { App, createApp, h, ref } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { stringifyCircular } from './';
+import { evaluateHidden } from './doc';
 import {
   ActionGroup,
   MessageDialogOptions,
@@ -73,6 +74,7 @@ export async function openQuickEdit({
   if (forWhat[0] === 'not in' && forWhat[1] === 'Sales') {
     defaults = Object.assign({ for: 'Purchases' });
   }
+  console.log(method, schemaName, name);
 
   router[method]({
     query: {
@@ -390,7 +392,8 @@ function getDuplicateAction(doc: Doc): Action {
 }
 
 export function getFieldsGroupedByTabAndSection(
-  schema: Schema
+  schema: Schema,
+  doc: Doc
 ): UIGroupedFields {
   const grouped: UIGroupedFields = new Map();
   for (const field of schema?.fields ?? []) {
@@ -405,6 +408,14 @@ export function getFieldsGroupedByTabAndSection(
       tabbed.set(section, []);
     }
 
+    if (field.meta) {
+      continue;
+    }
+
+    if (evaluateHidden(field, doc)) {
+      continue;
+    }
+
     tabbed.get(section)!.push(field);
   }
 

From 332307bdd1ca6f9573bc7007ece8d081d6a26cfa Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 21 Feb 2023 11:51:32 +0530
Subject: [PATCH 6/7] incr: user common form for journal entries

---
 fyo/core/docHandler.ts                        |   4 +-
 fyo/model/doc.ts                              |   2 +-
 .../baseModels/JournalEntry/JournalEntry.ts   |  13 +-
 schemas/app/JournalEntry.json                 |  53 ++--
 src/components/Controls/Attachment.vue        |  81 +++---
 src/pages/CommonForm/CommonForm.vue           |  15 +-
 src/pages/CommonForm/CommonFormSection.vue    |  23 +-
 src/pages/JournalEntryForm.vue                | 269 ------------------
 src/router.ts                                 |  27 +-
 9 files changed, 126 insertions(+), 361 deletions(-)
 delete mode 100644 src/pages/JournalEntryForm.vue

diff --git a/fyo/core/docHandler.ts b/fyo/core/docHandler.ts
index b8fded44..620849e3 100644
--- a/fyo/core/docHandler.ts
+++ b/fyo/core/docHandler.ts
@@ -99,7 +99,7 @@ export class DocHandler {
     }
 
     const doc = new Model!(schema, data, this.fyo, isRawValueMap);
-    doc.name ??= this.#getTemporaryName(schema);
+    doc.name ??= this.getTemporaryName(schema);
     if (cacheDoc) {
       this.#addToCache(doc);
     }
@@ -107,7 +107,7 @@ export class DocHandler {
     return doc;
   }
 
-  #getTemporaryName(schema: Schema): string {
+  getTemporaryName(schema: Schema): string {
     if (schema.naming === 'random') {
       return getRandomString();
     }
diff --git a/fyo/model/doc.ts b/fyo/model/doc.ts
index c5902c12..ff276114 100644
--- a/fyo/model/doc.ts
+++ b/fyo/model/doc.ts
@@ -454,7 +454,7 @@ export class Doc extends Observable<DocValue | Doc[]> {
     convertToDocValue: boolean = false
   ): Doc {
     if (!this.name && this.schema.naming !== 'manual') {
-      this.name = getRandomString();
+      this.name = this.fyo.doc.getTemporaryName(this.schema);
     }
 
     docValueMap.name ??= getRandomString();
diff --git a/models/baseModels/JournalEntry/JournalEntry.ts b/models/baseModels/JournalEntry/JournalEntry.ts
index dced2554..2a844ba3 100644
--- a/models/baseModels/JournalEntry/JournalEntry.ts
+++ b/models/baseModels/JournalEntry/JournalEntry.ts
@@ -4,9 +4,9 @@ import {
   Action,
   DefaultMap,
   FiltersMap,
+  HiddenMap,
   ListViewSettings,
 } from 'fyo/model/types';
-import { DateTime } from 'luxon';
 import {
   getDocStatus,
   getLedgerLinkAction,
@@ -39,6 +39,17 @@ export class JournalEntry extends Transactional {
     return posting;
   }
 
+  hidden: HiddenMap = {
+    referenceNumber: () =>
+      !(this.referenceNumber || !(this.isSubmitted || this.isCancelled)),
+    referenceDate: () =>
+      !(this.referenceDate || !(this.isSubmitted || this.isCancelled)),
+    userRemark: () =>
+      !(this.userRemark || !(this.isSubmitted || this.isCancelled)),
+    attachment: () =>
+      !(this.attachment || !(this.isSubmitted || this.isCancelled)),
+  };
+
   static defaults: DefaultMap = {
     numberSeries: (doc) => getNumberSeries(doc.schemaName, doc.fyo),
     date: () => new Date(),
diff --git a/schemas/app/JournalEntry.json b/schemas/app/JournalEntry.json
index cf0210a8..4a7c1f4e 100644
--- a/schemas/app/JournalEntry.json
+++ b/schemas/app/JournalEntry.json
@@ -4,6 +4,24 @@
   "naming": "numberSeries",
   "isSubmittable": true,
   "fields": [
+    {
+      "label": "Entry No",
+      "fieldname": "name",
+      "fieldtype": "Data",
+      "required": true,
+      "readOnly": true,
+      "section": "Default"
+    },
+    {
+      "fieldname": "numberSeries",
+      "label": "Number Series",
+      "fieldtype": "Link",
+      "target": "NumberSeries",
+      "create": true,
+      "required": true,
+      "default": "JV-",
+      "section": "Default"
+    },
     {
       "fieldname": "entryType",
       "label": "Entry Type",
@@ -55,58 +73,49 @@
           "label": "Depreciation Entry"
         }
       ],
-      "required": true
-    },
-    {
-      "label": "Entry No",
-      "fieldname": "name",
-      "fieldtype": "Data",
       "required": true,
-      "readOnly": true
+      "section": "Default"
     },
     {
       "fieldname": "date",
       "label": "Date",
       "fieldtype": "Date",
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
       "fieldname": "accounts",
       "label": "Account Entries",
       "fieldtype": "Table",
       "target": "JournalEntryAccount",
-      "required": true
+      "required": true,
+      "section": "Accounts"
     },
     {
       "fieldname": "referenceNumber",
       "label": "Reference Number",
-      "fieldtype": "Data"
+      "fieldtype": "Data",
+      "section": "References"
     },
     {
       "fieldname": "referenceDate",
       "label": "Reference Date",
-      "fieldtype": "Date"
+      "fieldtype": "Date",
+      "section": "References"
     },
     {
       "fieldname": "userRemark",
       "label": "User Remark",
       "fieldtype": "Text",
-      "placeholder": "Add a remark"
-    },
-    {
-      "fieldname": "numberSeries",
-      "label": "Number Series",
-      "fieldtype": "Link",
-      "target": "NumberSeries",
-      "create": true,
-      "required": true,
-      "default": "JV-"
+      "placeholder": "Add a remark",
+      "section": "References"
     },
     {
       "fieldname": "attachment",
       "placeholder": "Add attachment",
       "label": "Attachment",
-      "fieldtype": "Attachment"
+      "fieldtype": "Attachment",
+      "section": "References"
     }
   ],
   "keywordFields": ["name", "entryType"]
diff --git a/src/components/Controls/Attachment.vue b/src/components/Controls/Attachment.vue
index c03ad11c..87760201 100644
--- a/src/components/Controls/Attachment.vue
+++ b/src/components/Controls/Attachment.vue
@@ -1,41 +1,50 @@
 <template>
-  <div :class="containerClasses" class="flex gap-2 items-center">
-    <label
-      for="attachment"
-      class="block whitespace-nowrap overflow-auto no-scrollbar"
-      :class="[inputClasses, !value ? 'text-gray-600' : 'cursor-default']"
-      >{{ label }}</label
-    >
-    <input
-      ref="fileInput"
-      id="attachment"
-      type="file"
-      accept="image/*,.pdf"
-      class="hidden"
-      :disabled="!!value"
-      @input="selectFile"
-    />
-
-    <!-- Buttons -->
-    <div class="me-2 flex gap-2">
-      <!-- Upload Button -->
-      <button v-if="!value" class="bg-gray-300 p-0.5 rounded" @click="upload">
-        <FeatherIcon name="upload" class="h-4 w-4 text-gray-600" />
-      </button>
-
-      <!-- Download Button -->
-      <button v-if="value" class="bg-gray-300 p-0.5 rounded" @click="download">
-        <FeatherIcon name="download" class="h-4 w-4 text-gray-600" />
-      </button>
-
-      <!-- Clear Button -->
-      <button
-        v-if="value && !isReadOnly"
-        class="bg-gray-300 p-0.5 rounded"
-        @click="clear"
+  <div>
+    <div :class="labelClasses" v-if="showLabel && df">
+      {{ df.label }}
+    </div>
+    <div :class="containerClasses" class="flex gap-2 items-center">
+      <label
+        for="attachment"
+        class="block whitespace-nowrap overflow-auto no-scrollbar"
+        :class="[inputClasses, !value ? 'text-gray-600' : 'cursor-default']"
+        >{{ label }}</label
       >
-        <FeatherIcon name="x" class="h-4 w-4 text-gray-600" />
-      </button>
+      <input
+        ref="fileInput"
+        id="attachment"
+        type="file"
+        accept="image/*,.pdf"
+        class="hidden"
+        :disabled="!!value"
+        @input="selectFile"
+      />
+
+      <!-- Buttons -->
+      <div class="me-2 flex gap-2">
+        <!-- Upload Button -->
+        <button v-if="!value" class="bg-gray-300 p-0.5 rounded" @click="upload">
+          <FeatherIcon name="upload" class="h-4 w-4 text-gray-600" />
+        </button>
+
+        <!-- Download Button -->
+        <button
+          v-if="value"
+          class="bg-gray-300 p-0.5 rounded"
+          @click="download"
+        >
+          <FeatherIcon name="download" class="h-4 w-4 text-gray-600" />
+        </button>
+
+        <!-- Clear Button -->
+        <button
+          v-if="value && !isReadOnly"
+          class="bg-gray-300 p-0.5 rounded"
+          @click="clear"
+        >
+          <FeatherIcon name="x" class="h-4 w-4 text-gray-600" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index 5dd466d4..c3a48031 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -155,7 +155,7 @@ export default defineComponent({
     }
 
     await this.setDoc();
-    this.groupedFields = this.getGroupedFields();
+    this.updateGroupedFields();
   },
   computed: {
     hasDoc(): boolean {
@@ -227,16 +227,20 @@ export default defineComponent({
     },
   },
   methods: {
-    getGroupedFields(): UIGroupedFields {
+    updateGroupedFields(): void {
       if (!this.hasDoc) {
-        return new Map();
+        return;
       }
 
-      return getFieldsGroupedByTabAndSection(this.schema, this.doc);
+      this.groupedFields = getFieldsGroupedByTabAndSection(
+        this.schema,
+        this.doc
+      );
     },
     async sync() {
       try {
         await this.doc.sync();
+        this.updateGroupedFields();
       } catch (err) {
         if (!(err instanceof Error)) {
           return;
@@ -248,6 +252,7 @@ export default defineComponent({
     async submit() {
       try {
         await this.doc.submit();
+        this.updateGroupedFields();
       } catch (err) {
         if (!(err instanceof Error)) {
           return;
@@ -297,7 +302,7 @@ export default defineComponent({
         this.errors[fieldname] = getErrorMessage(err, this.doc);
       }
 
-      this.groupedFields = this.getGroupedFields();
+      this.updateGroupedFields();
     },
   },
   components: {
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index 0fa80a87..dac5dce2 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -18,10 +18,11 @@
       <div
         v-for="field of fields"
         :key="field.fieldname"
-        class="mb-auto"
         :class="field.fieldtype === 'Table' ? 'col-span-2 text-base' : ''"
+        class="mb-auto"
       >
         <FormControl
+          :ref="field.fieldname === 'name' ? 'nameField' : 'fields'"
           :show-label="true"
           :border="true"
           :df="field"
@@ -29,7 +30,7 @@
           @editrow="(doc: Doc) => $emit('editrow', doc)"
           @change="(value: DocValue) => $emit('value-change', field, value)"
         />
-        <div v-if="errors?.[field.fieldname]" class="text-sm text-red-600">
+        <div v-if="errors?.[field.fieldname]" class="text-sm text-red-600 mt-1">
           {{ errors[field.fieldname] }}
         </div>
       </div>
@@ -57,6 +58,24 @@ export default defineComponent({
       collapsed: boolean;
     };
   },
+  mounted() {
+    this.focusOnNameField();
+  },
+  methods: {
+    focusOnNameField() {
+      const naming = this.fyo.schemaMap[this.doc.schemaName]?.naming;
+      if (naming !== 'manual') {
+        return;
+      }
+
+      const nameField = (this.$refs.nameField as { focus: Function }[])?.[0];
+      if (!nameField) {
+        return;
+      }
+
+      nameField.focus();
+    },
+  },
   components: { FormControl },
 });
 </script>
diff --git a/src/pages/JournalEntryForm.vue b/src/pages/JournalEntryForm.vue
deleted file mode 100644
index bc884acb..00000000
--- a/src/pages/JournalEntryForm.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-  <FormContainer>
-    <!-- Page Header (Title, Buttons, etc) -->
-    <template #header v-if="doc">
-      <StatusBadge :status="status" />
-      <DropdownWithActions
-        v-for="group of groupedActions"
-        :key="group.label"
-        :type="group.type"
-        :actions="group.actions"
-      >
-        <p v-if="group.group">
-          {{ group.group }}
-        </p>
-        <feather-icon v-else name="more-horizontal" class="w-4 h-4" />
-      </DropdownWithActions>
-      <Button
-        v-if="doc?.canSave"
-        type="primary"
-        class="text-white text-xs"
-        @click="sync"
-      >
-        {{ t`Save` }}
-      </Button>
-      <Button
-        v-else-if="doc.canSubmit"
-        type="primary"
-        class="text-white text-xs"
-        @click="submit"
-      >
-        {{ t`Submit` }}
-      </Button>
-    </template>
-
-    <!-- Journal Entry Form -->
-    <template #body v-if="doc">
-      <FormHeader
-        :form-title="doc.notInserted ? t`New Entry` : doc.name"
-        :form-sub-title="t`Journal Entry`"
-      />
-      <hr />
-      <div>
-        <div class="m-4 grid grid-cols-3 gap-y-4 gap-x-4">
-          <!-- First Column of Fields -->
-          <FormControl
-            :border="true"
-            :df="getField('numberSeries')"
-            :value="doc.numberSeries"
-            @change="(value) => doc.set('numberSeries', value)"
-            :read-only="!doc.notInserted || doc.submitted"
-          />
-          <FormControl
-            :border="true"
-            :df="getField('date')"
-            :value="doc.date"
-            :placeholder="'Date'"
-            @change="(value) => doc.set('date', value)"
-            :read-only="doc.submitted"
-          />
-          <FormControl
-            :border="true"
-            :df="getField('entryType')"
-            :value="doc.entryType"
-            placeholder="Entry Type"
-            @change="(value) => doc.set('entryType', value)"
-            :read-only="doc.submitted"
-          />
-          <FormControl
-            :border="true"
-            :df="getField('referenceNumber')"
-            :value="doc.referenceNumber"
-            :placeholder="'Reference Number'"
-            @change="(value) => doc.set('referenceNumber', value)"
-            :read-only="doc.submitted"
-          />
-          <FormControl
-            :border="true"
-            :df="getField('referenceDate')"
-            :value="doc.referenceDate"
-            :placeholder="'Reference Date'"
-            @change="(value) => doc.set('referenceDate', value)"
-            :read-only="doc.submitted"
-          />
-          <FormControl
-            v-if="doc.attachment || !(doc.isSubmitted || doc.isCancelled)"
-            :border="true"
-            :df="getField('attachment')"
-            :value="doc.attachment"
-            @change="(value) => doc.set('attachment', value)"
-            :read-only="doc?.submitted"
-          />
-        </div>
-        <hr />
-
-        <!-- Account Entries Table -->
-        <Table
-          class="text-base"
-          :df="getField('accounts')"
-          :value="doc.accounts"
-          :showHeader="true"
-          :max-rows-before-overflow="6"
-          :read-only="doc.submitted"
-        />
-      </div>
-
-      <!-- Footer -->
-      <div v-if="doc.accounts?.length ?? 0" class="mt-auto">
-        <hr />
-        <div class="flex justify-between text-base m-4 gap-12">
-          <!-- User Remark -->
-          <FormControl
-            :border="true"
-            v-if="!doc.submitted || doc.userRemark"
-            class="w-1/2 self-end"
-            :df="getField('userRemark')"
-            :value="doc.userRemark"
-            @change="(value) => doc.set('userRemark', value)"
-            :read-only="doc.submitted"
-          />
-
-          <!-- Debit and Credit -->
-          <div class="w-1/2 gap-2 flex flex-col self-end font-semibold ms-auto">
-            <div class="flex justify-between text-green-600">
-              <div>{{ t`Total Debit` }}</div>
-              <div>{{ totalDebit }}</div>
-            </div>
-            <hr />
-            <div class="flex justify-between text-red-600">
-              <div>{{ t`Total Credit` }}</div>
-              <div>{{ totalCredit }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </FormContainer>
-</template>
-<script>
-import { computed } from '@vue/reactivity';
-import { getDocStatus } from 'models/helpers';
-import { ModelNameEnum } from 'models/types';
-import Button from 'src/components/Button.vue';
-import FormControl from 'src/components/Controls/FormControl.vue';
-import Table from 'src/components/Controls/Table.vue';
-import DropdownWithActions from 'src/components/DropdownWithActions.vue';
-import FormContainer from 'src/components/FormContainer.vue';
-import FormHeader from 'src/components/FormHeader.vue';
-import StatusBadge from 'src/components/StatusBadge.vue';
-import { fyo } from 'src/initFyo';
-import { docsPathMap } from 'src/utils/misc';
-import { docsPathRef, focusedDocsRef } from 'src/utils/refs';
-import {
-  getGroupedActionsForDoc,
-  routeTo,
-  showMessageDialog,
-} from 'src/utils/ui';
-import { handleErrorWithDialog } from '../errorHandling';
-
-export default {
-  name: 'JournalEntryForm',
-  props: ['name'],
-  components: {
-    Button,
-    DropdownWithActions,
-    StatusBadge,
-    FormControl,
-    Table,
-    FormContainer,
-    FormHeader,
-  },
-  provide() {
-    return {
-      schemaName: this.schemaName,
-      name: this.name,
-      doc: computed(() => this.doc),
-    };
-  },
-  data() {
-    return {
-      schemaName: ModelNameEnum.JournalEntry,
-      doc: null,
-    };
-  },
-  activated() {
-    docsPathRef.value = docsPathMap.JournalEntry;
-    focusedDocsRef.add(this.doc);
-  },
-  deactivated() {
-    docsPathRef.value = '';
-    focusedDocsRef.delete(this.doc);
-  },
-  async mounted() {
-    try {
-      this.doc = await fyo.doc.getDoc(this.schemaName, this.name);
-      focusedDocsRef.add(this.doc);
-    } catch (error) {
-      if (error instanceof fyo.errors.NotFoundError) {
-        routeTo(`/list/${this.schemaName}`);
-        return;
-      }
-
-      await this.handleError(error);
-    }
-
-    if (fyo.store.isDevelopment) {
-      window.je = this;
-    }
-  },
-  computed: {
-    status() {
-      return getDocStatus(this.doc);
-    },
-    totalDebit() {
-      let value = 0;
-      if (this.doc.accounts) {
-        value = this.doc.getSum('accounts', 'debit');
-      }
-      return fyo.format(value, 'Currency');
-    },
-    totalCredit() {
-      let value = 0;
-      if (this.doc.accounts) {
-        value = this.doc.getSum('accounts', 'credit');
-      }
-      return fyo.format(value, 'Currency');
-    },
-    groupedActions() {
-      return getGroupedActionsForDoc(this.doc);
-    },
-  },
-  methods: {
-    getField(fieldname) {
-      return fyo.getField(ModelNameEnum.JournalEntry, fieldname);
-    },
-    async sync() {
-      try {
-        await this.doc.sync();
-      } catch (err) {
-        this.handleError(err);
-      }
-    },
-    async submit() {
-      const ref = this;
-      await showMessageDialog({
-        message: this.t`Submit Journal Entry?`,
-        buttons: [
-          {
-            label: this.t`Yes`,
-            async action() {
-              try {
-                await ref.doc.submit();
-              } catch (err) {
-                await ref.handleError(err);
-              }
-            },
-          },
-          {
-            label: this.t`No`,
-            action() {},
-          },
-        ],
-      });
-    },
-    async handleError(e) {
-      await handleErrorWithDialog(e, this.doc);
-    },
-  },
-};
-</script>
diff --git a/src/router.ts b/src/router.ts
index d9e6aaad..987de9d4 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,22 +1,21 @@
 import { ModelNameEnum } from 'models/types';
 import ChartOfAccounts from 'src/pages/ChartOfAccounts.vue';
+import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Dashboard from 'src/pages/Dashboard/Dashboard.vue';
-import ImportWizard from 'src/pages/ImportWizard.vue';
 import GeneralForm from 'src/pages/GeneralForm.vue';
 import GetStarted from 'src/pages/GetStarted.vue';
+import ImportWizard from 'src/pages/ImportWizard.vue';
 import InvoiceForm from 'src/pages/InvoiceForm.vue';
-import JournalEntryForm from 'src/pages/JournalEntryForm.vue';
 import ListView from 'src/pages/ListView/ListView.vue';
 import PrintView from 'src/pages/PrintView/PrintView.vue';
 import QuickEditForm from 'src/pages/QuickEditForm.vue';
-import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Report from 'src/pages/Report.vue';
 import Settings from 'src/pages/Settings/Settings.vue';
 import {
   createRouter,
   createWebHistory,
   RouteLocationRaw,
-  RouteRecordRaw,
+  RouteRecordRaw
 } from 'vue-router';
 
 function getGeneralFormItems(): RouteRecordRaw[] {
@@ -46,6 +45,7 @@ function getGeneralFormItems(): RouteRecordRaw[] {
 
 function getCommonFormItems(): RouteRecordRaw[] {
   return [
+    ModelNameEnum.JournalEntry,
     ModelNameEnum.Payment,
     ModelNameEnum.StockMovement,
     ModelNameEnum.Item,
@@ -82,25 +82,6 @@ const routes: RouteRecordRaw[] = [
   },
   ...getGeneralFormItems(),
   ...getCommonFormItems(),
-  {
-    path: '/edit/JournalEntry/:name',
-    name: 'JournalEntryForm',
-    components: {
-      default: JournalEntryForm,
-      edit: QuickEditForm,
-    },
-    props: {
-      default: (route) => {
-        // for sidebar item active state
-        route.params.schemaName = 'JournalEntry';
-        return {
-          schemaName: 'JournalEntry',
-          name: route.params.name,
-        };
-      },
-      edit: (route) => route.query,
-    },
-  },
   {
     path: '/edit/:schemaName/:name',
     name: 'InvoiceForm',

From d946c960a07f7f3c4bdf12bfd0ba75717f881e8d Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 21 Feb 2023 12:12:06 +0530
Subject: [PATCH 7/7] incr: move Shipments and PRec to common form - remove
 GeneralForm.vue

---
 models/inventory/StockTransfer.ts          |  16 +-
 schemas/app/inventory/PurchaseReceipt.json |  22 +-
 schemas/app/inventory/Shipment.json        |  23 +-
 schemas/app/inventory/StockTransfer.json   |  51 +++-
 schemas/types.ts                           |   1 +
 src/pages/CommonForm/CommonForm.vue        |   1 -
 src/pages/GeneralForm.vue                  | 320 ---------------------
 src/router.ts                              |  31 +-
 8 files changed, 80 insertions(+), 385 deletions(-)
 delete mode 100644 src/pages/GeneralForm.vue

diff --git a/models/inventory/StockTransfer.ts b/models/inventory/StockTransfer.ts
index ae0f992b..fce4f61e 100644
--- a/models/inventory/StockTransfer.ts
+++ b/models/inventory/StockTransfer.ts
@@ -1,7 +1,13 @@
 import { Fyo, t } from 'fyo';
 import { Attachment } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
-import { Action, DefaultMap, FiltersMap, FormulaMap } from 'fyo/model/types';
+import {
+  Action,
+  DefaultMap,
+  FiltersMap,
+  FormulaMap,
+  HiddenMap,
+} from 'fyo/model/types';
 import { ValidationError } from 'fyo/utils/errors';
 import { Defaults } from 'models/baseModels/Defaults/Defaults';
 import { Invoice } from 'models/baseModels/Invoice/Invoice';
@@ -33,6 +39,14 @@ export abstract class StockTransfer extends Transfer {
     },
   };
 
+  hidden: HiddenMap = {
+    backReference: () =>
+      !(this.backReference || !(this.isSubmitted || this.isCancelled)),
+    terms: () => !(this.terms || !(this.isSubmitted || this.isCancelled)),
+    attachment: () =>
+      !(this.attachment || !(this.isSubmitted || this.isCancelled)),
+  };
+
   static defaults: DefaultMap = {
     numberSeries: (doc) => getNumberSeries(doc.schemaName, doc.fyo),
     terms: (doc) => {
diff --git a/schemas/app/inventory/PurchaseReceipt.json b/schemas/app/inventory/PurchaseReceipt.json
index 33fcebfa..7b051053 100644
--- a/schemas/app/inventory/PurchaseReceipt.json
+++ b/schemas/app/inventory/PurchaseReceipt.json
@@ -5,14 +5,6 @@
   "naming": "numberSeries",
   "showTitle": true,
   "fields": [
-    {
-      "fieldname": "items",
-      "label": "Items",
-      "fieldtype": "Table",
-      "target": "PurchaseReceiptItem",
-      "required": true,
-      "edit": true
-    },
     {
       "fieldname": "numberSeries",
       "label": "Number Series",
@@ -20,14 +12,24 @@
       "target": "NumberSeries",
       "create": true,
       "required": true,
-      "default": "PREC-"
+      "default": "PREC-",
+      "section": "Default"
     },
     {
       "fieldname": "backReference",
       "label": "Back Reference",
       "fieldtype": "Link",
       "target": "PurchaseInvoice",
-      "readOnly": true
+      "readOnly": true,
+      "section": "References"
+    },
+    {
+      "fieldname": "items",
+      "label": "Items",
+      "fieldtype": "Table",
+      "target": "PurchaseReceiptItem",
+      "required": true,
+      "edit": true
     }
   ],
   "keywordFields": ["name", "party"]
diff --git a/schemas/app/inventory/Shipment.json b/schemas/app/inventory/Shipment.json
index 10df12dd..242a0d64 100644
--- a/schemas/app/inventory/Shipment.json
+++ b/schemas/app/inventory/Shipment.json
@@ -5,14 +5,6 @@
   "naming": "numberSeries",
   "showTitle": true,
   "fields": [
-    {
-      "fieldname": "items",
-      "label": "Items",
-      "fieldtype": "Table",
-      "target": "ShipmentItem",
-      "required": true,
-      "edit": true
-    },
     {
       "fieldname": "numberSeries",
       "label": "Number Series",
@@ -20,14 +12,25 @@
       "target": "NumberSeries",
       "create": true,
       "required": true,
-      "default": "SHPM-"
+      "default": "SHPM-",
+      "section": "Default"
     },
     {
       "fieldname": "backReference",
       "label": "Back Reference",
       "fieldtype": "Link",
       "target": "SalesInvoice",
-      "readOnly": true
+      "readOnly": true,
+      "section": "References"
+    },
+    {
+      "fieldname": "items",
+      "label": "Items",
+      "fieldtype": "Table",
+      "target": "ShipmentItem",
+      "required": true,
+      "edit": true,
+      "section": "Items"
     }
   ],
   "keywordFields": ["name", "party"]
diff --git a/schemas/app/inventory/StockTransfer.json b/schemas/app/inventory/StockTransfer.json
index c2fa869a..de7f15c2 100644
--- a/schemas/app/inventory/StockTransfer.json
+++ b/schemas/app/inventory/StockTransfer.json
@@ -11,13 +11,13 @@
       "fieldname": "name",
       "fieldtype": "Data",
       "required": true,
-      "readOnly": true
+      "readOnly": true,
+      "section": "Default"
     },
     {
-      "fieldname": "date",
-      "label": "Date",
-      "fieldtype": "Datetime",
-      "required": true
+      "abstract": true,
+      "fieldname": "numberSeries",
+      "section": "Default"
     },
     {
       "fieldname": "party",
@@ -25,25 +25,46 @@
       "fieldtype": "Link",
       "target": "Party",
       "create": true,
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
-      "fieldname": "terms",
-      "label": "Notes",
-      "placeholder": "Add transfer terms",
-      "fieldtype": "Text"
+      "fieldname": "date",
+      "label": "Date",
+      "fieldtype": "Datetime",
+      "required": true,
+      "section": "Default"
     },
     {
-      "fieldname": "attachment",
-      "placeholder": "Add attachment",
-      "label": "Attachment",
-      "fieldtype": "Attachment"
+      "abstract": true,
+      "fieldname": "items",
+      "section": "Items"
     },
     {
       "fieldname": "grandTotal",
       "label": "Grand Total",
       "fieldtype": "Currency",
-      "readOnly": true
+      "readOnly": true,
+      "section": "Items"
+    },
+    {
+      "fieldname": "terms",
+      "label": "Notes",
+      "placeholder": "Add transfer terms",
+      "fieldtype": "Text",
+      "section": "References"
+    },
+    {
+      "fieldname": "attachment",
+      "placeholder": "Add attachment",
+      "label": "Attachment",
+      "fieldtype": "Attachment",
+      "section": "References"
+    },
+    {
+      "abstract": true,
+      "fieldname": "backReference",
+      "section": "References"
     }
   ],
   "keywordFields": ["name", "party"]
diff --git a/schemas/types.ts b/schemas/types.ts
index ef028b26..f542bdf3 100644
--- a/schemas/types.ts
+++ b/schemas/types.ts
@@ -66,6 +66,7 @@ export interface BaseField {
   computed?: boolean;            // Computed values are not stored in the database.
   section?: string;              // UI Facing config, for grouping by sections
   tab?: string;                  // UI Facing config, for grouping by tabs
+  abstract?: string;             // Uused to mark the location of a field in an Abstract schema 
 }
 
 export type SelectOption = { value: string; label: string };
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index c3a48031..f40b4e20 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -289,7 +289,6 @@ export default defineComponent({
     },
     async onValueChange(field: Field, value: DocValue) {
       const { fieldname } = field;
-      console.log(fieldname, value);
       delete this.errors[fieldname];
 
       try {
diff --git a/src/pages/GeneralForm.vue b/src/pages/GeneralForm.vue
deleted file mode 100644
index ed92a0b1..00000000
--- a/src/pages/GeneralForm.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<template>
-  <FormContainer>
-    <!-- Page Header (Title, Buttons, etc) -->
-    <template #header v-if="doc">
-      <StatusBadge :status="status" />
-      <Barcode
-        v-if="showBarcode"
-        @item-selected="(name) => doc.addItem(name)"
-      />
-      <DropdownWithActions
-        v-for="group of groupedActions"
-        :key="group.label"
-        :type="group.type"
-        :actions="group.actions"
-      >
-        <p v-if="group.group">
-          {{ group.group }}
-        </p>
-        <feather-icon v-else name="more-horizontal" class="w-4 h-4" />
-      </DropdownWithActions>
-      <Button v-if="doc?.canSave" type="primary" @click="sync">
-        {{ t`Save` }}
-      </Button>
-      <Button v-else-if="doc?.canSubmit" type="primary" @click="submit">{{
-        t`Submit`
-      }}</Button>
-    </template>
-
-    <!-- Form Header -->
-    <template #body v-if="doc">
-      <FormHeader
-        :form-title="doc.notInserted ? t`New Entry` : doc.name"
-        :form-sub-title="doc.schema?.label ?? ''"
-      />
-      <hr />
-
-      <div>
-        <!-- Form Data Entry -->
-        <div class="m-4 grid grid-cols-3 gap-4">
-          <FormControl
-            input-class="font-semibold"
-            :border="true"
-            :df="getField('party')"
-            :value="doc.party"
-            @change="(value) => doc.set('party', value, true)"
-            @new-doc="(party) => doc.set('party', party.name, true)"
-            :read-only="doc?.submitted"
-          />
-          <FormControl
-            input-class="text-end"
-            :border="true"
-            :df="getField('date')"
-            :value="doc.date"
-            @change="(value) => doc.set('date', value)"
-            :read-only="doc?.submitted"
-          />
-          <FormControl
-            input-class="text-end"
-            :border="true"
-            :df="getField('numberSeries')"
-            :value="doc.numberSeries"
-            @change="(value) => doc.set('numberSeries', value)"
-            :read-only="!doc.notInserted || doc?.submitted"
-          />
-          <FormControl
-            v-if="doc.backReference"
-            :border="true"
-            :df="getField('backReference')"
-            :value="doc.backReference"
-            :read-only="true"
-          />
-          <FormControl
-            v-if="doc.attachment || !(doc.isSubmitted || doc.isCancelled)"
-            :border="true"
-            :df="getField('attachment')"
-            :value="doc.attachment"
-            @change="(value) => doc.set('attachment', value)"
-            :read-only="doc?.submitted"
-          />
-        </div>
-        <hr />
-
-        <!-- Items Table -->
-        <Table
-          class="text-base"
-          :df="getField('items')"
-          :value="doc.items"
-          :showHeader="true"
-          :max-rows-before-overflow="4"
-          @change="(value) => doc.set('items', value)"
-          @editrow="toggleQuickEditDoc"
-          :read-only="doc?.submitted"
-        />
-      </div>
-
-      <!-- Form Footer -->
-      <div v-if="doc.items?.length ?? 0" class="mt-auto">
-        <hr />
-        <div class="flex justify-between text-base m-4 gap-12">
-          <div class="w-1/2 flex flex-col justify-between">
-            <!-- Form Terms-->
-            <FormControl
-              :border="true"
-              v-if="!doc?.submitted || doc.terms"
-              :df="getField('terms')"
-              :value="doc.terms"
-              class="mt-auto"
-              @change="(value) => doc.set('terms', value)"
-              :read-only="doc?.submitted"
-            />
-          </div>
-          <div class="w-1/2" v-if="doc.grandTotal">
-            <!-- Grand Total -->
-            <div
-              class="
-                flex
-                justify-between
-                text-green-600
-                font-semibold
-                text-base
-              "
-            >
-              <div>{{ t`Grand Total` }}</div>
-              <div>{{ formattedValue('grandTotal') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template #quickedit v-if="quickEditDoc">
-      <QuickEditForm
-        :name="quickEditDoc.name"
-        :show-name="false"
-        :show-save="false"
-        :source-doc="quickEditDoc"
-        :source-fields="quickEditFields"
-        :schema-name="quickEditDoc.schemaName"
-        :white="true"
-        :route-back="false"
-        :load-on-close="false"
-        @close="toggleQuickEditDoc(null)"
-      />
-    </template>
-  </FormContainer>
-</template>
-<script>
-import { computed } from '@vue/reactivity';
-import { t } from 'fyo';
-import { getDocStatus } from 'models/helpers';
-import { ModelNameEnum } from 'models/types';
-import Button from 'src/components/Button.vue';
-import Barcode from 'src/components/Controls/Barcode.vue';
-import FormControl from 'src/components/Controls/FormControl.vue';
-import Table from 'src/components/Controls/Table.vue';
-import DropdownWithActions from 'src/components/DropdownWithActions.vue';
-import FormContainer from 'src/components/FormContainer.vue';
-import FormHeader from 'src/components/FormHeader.vue';
-import StatusBadge from 'src/components/StatusBadge.vue';
-import { fyo } from 'src/initFyo';
-import { docsPathMap } from 'src/utils/misc';
-import { docsPathRef, focusedDocsRef } from 'src/utils/refs';
-import {
-  getGroupedActionsForDoc,
-  routeTo,
-  showMessageDialog,
-} from 'src/utils/ui';
-import { nextTick } from 'vue';
-import { handleErrorWithDialog } from '../errorHandling';
-import QuickEditForm from './QuickEditForm.vue';
-
-export default {
-  name: 'InvoiceForm',
-  props: { schemaName: String, name: String },
-  components: {
-    StatusBadge,
-    Button,
-    FormControl,
-    DropdownWithActions,
-    Table,
-    FormContainer,
-    QuickEditForm,
-    FormHeader,
-    Barcode,
-  },
-  provide() {
-    return {
-      schemaName: this.schemaName,
-      name: this.name,
-      doc: computed(() => this.doc),
-    };
-  },
-  data() {
-    return {
-      chstatus: false,
-      doc: null,
-      quickEditDoc: null,
-      quickEditFields: [],
-      printSettings: null,
-    };
-  },
-  updated() {
-    this.chstatus = !this.chstatus;
-  },
-  computed: {
-    status() {
-      this.chstatus;
-      return getDocStatus(this.doc);
-    },
-    groupedActions() {
-      return getGroupedActionsForDoc(this.doc);
-    },
-    showBarcode() {
-      if (!this.doc) {
-        return false;
-      }
-
-      if (!this.doc.canEdit) {
-        return false;
-      }
-
-      if (!fyo.singles.InventorySettings?.enableBarcodes) {
-        return false;
-      }
-
-      return [
-        ModelNameEnum.Shipment,
-        ModelNameEnum.PurchaseReceipt,
-        ModelNameEnum.StockMovement,
-      ].includes(this.schemaName);
-    },
-  },
-  activated() {
-    docsPathRef.value = docsPathMap[this.schemaName];
-    focusedDocsRef.add(this.doc);
-  },
-  deactivated() {
-    docsPathRef.value = '';
-    focusedDocsRef.delete(this.doc);
-  },
-  async mounted() {
-    try {
-      this.doc = await fyo.doc.getDoc(this.schemaName, this.name);
-      focusedDocsRef.add(this.doc);
-    } catch (error) {
-      if (error instanceof fyo.errors.NotFoundError) {
-        routeTo(`/list/${this.schemaName}`);
-        return;
-      }
-      await this.handleError(error);
-    }
-
-    let query = this.$route.query;
-    if (query.values && query.schemaName === this.schemaName) {
-      this.doc.set(this.$router.currentRoute.value.query.values);
-    }
-
-    if (fyo.store.isDevelopment) {
-      window.frm = this;
-    }
-  },
-  methods: {
-    routeTo,
-    async toggleQuickEditDoc(doc, fields = []) {
-      if (this.quickEditDoc && doc) {
-        this.quickEditDoc = null;
-        this.quickEditFields = [];
-        await nextTick();
-      }
-
-      this.quickEditDoc = doc;
-      this.quickEditFields = fields;
-    },
-    getField(fieldname) {
-      return fyo.getField(this.schemaName, fieldname);
-    },
-    async sync() {
-      try {
-        await this.doc.sync();
-      } catch (err) {
-        await this.handleError(err);
-      }
-    },
-    async submit() {
-      const message = t`Submit ${this.doc.name}`;
-      const ref = this;
-      await showMessageDialog({
-        message,
-        buttons: [
-          {
-            label: t`Yes`,
-            async action() {
-              try {
-                await ref.doc.submit();
-              } catch (err) {
-                await ref.handleError(err);
-              }
-            },
-          },
-          {
-            label: t`No`,
-            action() {},
-          },
-        ],
-      });
-    },
-    async handleError(e) {
-      await handleErrorWithDialog(e, this.doc);
-    },
-    formattedValue(fieldname, doc) {
-      if (!doc) {
-        doc = this.doc;
-      }
-
-      const df = this.getField(fieldname);
-      return fyo.format(doc[fieldname], df, doc);
-    },
-  },
-};
-</script>
diff --git a/src/router.ts b/src/router.ts
index 987de9d4..73d4370b 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -2,7 +2,6 @@ import { ModelNameEnum } from 'models/types';
 import ChartOfAccounts from 'src/pages/ChartOfAccounts.vue';
 import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Dashboard from 'src/pages/Dashboard/Dashboard.vue';
-import GeneralForm from 'src/pages/GeneralForm.vue';
 import GetStarted from 'src/pages/GetStarted.vue';
 import ImportWizard from 'src/pages/ImportWizard.vue';
 import InvoiceForm from 'src/pages/InvoiceForm.vue';
@@ -15,36 +14,13 @@ import {
   createRouter,
   createWebHistory,
   RouteLocationRaw,
-  RouteRecordRaw
+  RouteRecordRaw,
 } from 'vue-router';
 
-function getGeneralFormItems(): RouteRecordRaw[] {
-  return [ModelNameEnum.Shipment, ModelNameEnum.PurchaseReceipt].map(
-    (schemaName) => {
-      return {
-        path: `/edit/${schemaName}/:name`,
-        name: `${schemaName}Form`,
-        components: {
-          default: GeneralForm,
-          edit: QuickEditForm,
-        },
-        props: {
-          default: (route) => {
-            route.params.schemaName = schemaName;
-            return {
-              schemaName,
-              name: route.params.name,
-            };
-          },
-          edit: (route) => route.query,
-        },
-      };
-    }
-  );
-}
-
 function getCommonFormItems(): RouteRecordRaw[] {
   return [
+    ModelNameEnum.Shipment,
+    ModelNameEnum.PurchaseReceipt,
     ModelNameEnum.JournalEntry,
     ModelNameEnum.Payment,
     ModelNameEnum.StockMovement,
@@ -80,7 +56,6 @@ const routes: RouteRecordRaw[] = [
     path: '/get-started',
     component: GetStarted,
   },
-  ...getGeneralFormItems(),
   ...getCommonFormItems(),
   {
     path: '/edit/:schemaName/:name',