WIP - configure list views

WIP - do not display id on list views and correctly format datetime fields
WIP - do not trim history
2026-01-31 02:46:33 +01:00 · 2026-01-26 19:37:17 +01:00 · 2026-01-26 19:14:33 +01:00 · 2026-01-18 09:15:06 +01:00 · 2026-01-18 08:47:51 +01:00 · 2026-01-18 05:24:41 +01:00
18 changed files with 3240 additions and 142 deletions
--- a/backend/migrations/tenant/20250131000001_add_layout_type_to_page_layouts.js
+++ b/backend/migrations/tenant/20250131000001_add_layout_type_to_page_layouts.js
@@ -0,0 +1,25 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function(knex) {
+  return knex.schema.alterTable('page_layouts', (table) => {
+    // Add layout_type column to distinguish between detail/edit layouts and list view layouts
+    // Default to 'detail' for existing layouts
+    table.enum('layout_type', ['detail', 'list']).notNullable().defaultTo('detail').after('name');
+    
+    // Update the unique index to include layout_type so we can have both a default detail and default list layout
+    table.dropIndex(['object_id', 'is_default']);
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function(knex) {
+  return knex.schema.alterTable('page_layouts', (table) => {
+    table.dropColumn('layout_type');
+    table.index(['object_id', 'is_default']);
+  });
+};
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -11,7 +11,7 @@
      "dependencies": {
        "@casl/ability": "^6.7.5",
        "@fastify/websocket": "^10.0.1",
-        "@langchain/core": "^1.1.12",
+        "@langchain/core": "^1.1.15",
        "@langchain/langgraph": "^1.0.15",
        "@langchain/openai": "^1.2.1",
        "@nestjs/bullmq": "^10.1.0",
@@ -29,9 +29,10 @@
        "bullmq": "^5.1.0",
        "class-transformer": "^0.5.1",
        "class-validator": "^0.14.1",
+        "deepagents": "^1.5.0",
        "ioredis": "^5.3.2",
        "knex": "^3.1.0",
-        "langchain": "^1.2.7",
+        "langchain": "^1.2.10",
        "mysql2": "^3.15.3",
        "objection": "^3.1.5",
        "openai": "^6.15.0",
@@ -228,6 +229,26 @@
        "tslib": "^2.1.0"
      }
    },
+    "node_modules/@anthropic-ai/sdk": {
+      "version": "0.71.2",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.71.2.tgz",
+      "integrity": "sha512-TGNDEUuEstk/DKu0/TflXAEt+p+p/WhTlFzEnoosvbaDU2LTjm42igSdlL0VijrKpWejtOKxX0b8A7uc+XiSAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "json-schema-to-ts": "^3.1.1"
+      },
+      "bin": {
+        "anthropic-ai-sdk": "bin/cli"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -689,6 +710,15 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.27.2",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1689,10 +1719,26 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@langchain/anthropic": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@langchain/anthropic/-/anthropic-1.3.10.tgz",
+      "integrity": "sha512-VXq5fsEJ4FB5XGrnoG+bfm0I7OlmYLI4jZ6cX9RasyqhGo9wcDyKw1+uEQ1H7Og7jWrTa1bfXCun76wttewJnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@anthropic-ai/sdk": "^0.71.0",
+        "zod": "^3.25.76 || ^4"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@langchain/core": "1.1.15"
+      }
+    },
    "node_modules/@langchain/core": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/@langchain/core/-/core-1.1.12.tgz",
-      "integrity": "sha512-sHWLvhyLi3fntlg3MEPB89kCjxEX7/+imlIYJcp6uFGCAZfGxVWklqp22HwjT1szorUBYrkO8u0YA554ReKxGQ==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@langchain/core/-/core-1.1.15.tgz",
+      "integrity": "sha512-b8RN5DkWAmDAlMu/UpTZEluYwCLpm63PPWniRKlE8ie3KkkE7IuMQ38pf4kV1iaiI+d99BEQa2vafQHfCujsRA==",
      "license": "MIT",
      "dependencies": {
        "@cfworker/json-schema": "^4.0.2",
@@ -2487,7 +2533,6 @@
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@nodelib/fs.stat": "2.0.5",
@@ -2501,7 +2546,6 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 8"
@@ -2511,7 +2555,6 @@
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@nodelib/fs.scandir": "2.1.5",
@@ -4029,7 +4072,6 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@@ -4754,6 +4796,22 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/deepagents": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/deepagents/-/deepagents-1.5.0.tgz",
+      "integrity": "sha512-tjZLOISPMpqfk+k/iE1uIZavXW9j4NrhopUmH5ARqzmk95EEtGDyN++tgnY+tdVOOZTjE2LHjOVV7or58dtx8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@langchain/anthropic": "^1.3.7",
+        "@langchain/core": "^1.1.12",
+        "@langchain/langgraph": "^1.0.14",
+        "fast-glob": "^3.3.3",
+        "langchain": "^1.2.7",
+        "micromatch": "^4.0.8",
+        "yaml": "^2.8.2",
+        "zod": "^4.3.5"
+      }
+    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -5514,7 +5572,6 @@
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@nodelib/fs.stat": "^2.0.2",
@@ -5740,7 +5797,6 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -6145,7 +6201,6 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
      "license": "ISC",
      "dependencies": {
        "is-glob": "^4.0.1"
@@ -6594,7 +6649,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -6623,7 +6677,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@@ -6658,7 +6711,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@@ -7609,6 +7661,19 @@
        "fast-deep-equal": "^3.1.3"
      }
    },
+    "node_modules/json-schema-to-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-3.1.1.tgz",
+      "integrity": "sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "ts-algebra": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "node_modules/json-schema-traverse": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -7811,9 +7876,9 @@
      }
    },
    "node_modules/langchain": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/langchain/-/langchain-1.2.7.tgz",
-      "integrity": "sha512-G+3Ftz/08CurJaE7LukQGBf3mCSz7XM8LZeAaFPg391Ru4lT8eLYfG6Fv4ZI0u6EBsPVcOQfaS9ig8nCRmJeqA==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/langchain/-/langchain-1.2.10.tgz",
+      "integrity": "sha512-9uVxOJE/RTECvNutQfOLwH7f6R9mcq0G/IMHwA2eptDA86R/Yz2zWMz4vARVFPxPrdSJ9nJFDPAqRQlRFwdHBw==",
      "license": "MIT",
      "dependencies": {
        "@langchain/langgraph": "^1.0.0",
@@ -7826,7 +7891,7 @@
        "node": ">=20"
      },
      "peerDependencies": {
-        "@langchain/core": "1.1.12"
+        "@langchain/core": "1.1.15"
      }
    },
    "node_modules/langchain/node_modules/uuid": {
@@ -8201,7 +8266,6 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 8"
@@ -8211,7 +8275,6 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
@@ -8225,7 +8288,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@@ -9388,7 +9450,6 @@
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -9727,7 +9788,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -10657,7 +10717,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
@@ -10709,6 +10768,12 @@
        "tree-kill": "cli.js"
      }
    },
+    "node_modules/ts-algebra": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
+      "integrity": "sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==",
+      "license": "MIT"
+    },
    "node_modules/ts-api-utils": {
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -11455,6 +11520,21 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
    "node_modules/yargs": {
      "version": "17.7.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
@@ -11508,9 +11588,9 @@
      }
    },
    "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
--- a/backend/package.json
+++ b/backend/package.json
@@ -28,7 +28,7 @@
  "dependencies": {
    "@casl/ability": "^6.7.5",
    "@fastify/websocket": "^10.0.1",
-    "@langchain/core": "^1.1.12",
+    "@langchain/core": "^1.1.15",
    "@langchain/langgraph": "^1.0.15",
    "@langchain/openai": "^1.2.1",
    "@nestjs/bullmq": "^10.1.0",
@@ -46,9 +46,10 @@
    "bullmq": "^5.1.0",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.1",
+    "deepagents": "^1.5.0",
    "ioredis": "^5.3.2",
    "knex": "^3.1.0",
-    "langchain": "^1.2.7",
+    "langchain": "^1.2.10",
    "mysql2": "^3.15.3",
    "objection": "^3.1.5",
    "openai": "^6.15.0",
--- a/backend/src/ai-assistant/ai-assistant.service.ts
+++ b/backend/src/ai-assistant/ai-assistant.service.ts
--- a/backend/src/ai-assistant/ai-assistant.types.ts
+++ b/backend/src/ai-assistant/ai-assistant.types.ts
@@ -12,15 +12,94 @@ export interface AiChatContext {

 export interface AiAssistantReply {
  reply: string;
-  action?: 'create_record' | 'collect_fields' | 'clarify';
+  action?: 'create_record' | 'collect_fields' | 'clarify' | 'plan_complete' | 'plan_pending';
  missingFields?: string[];
  record?: any;
+  records?: any[]; // Multiple records when plan execution completes
+  plan?: RecordCreationPlan;
 }

+// ============================================
+// Entity Discovery Types
+// ============================================
+
+export interface EntityFieldInfo {
+  apiName: string;
+  label: string;
+  type: string;
+  isRequired: boolean;
+  isSystem: boolean;
+  referenceObject?: string; // For LOOKUP fields, the target entity
+  description?: string;
+}
+
+export interface EntityRelationship {
+  fieldApiName: string;
+  fieldLabel: string;
+  targetEntity: string;
+  relationshipType: 'lookup' | 'master-detail' | 'polymorphic';
+}
+
+export interface EntityInfo {
+  apiName: string;
+  label: string;
+  pluralLabel?: string;
+  description?: string;
+  fields: EntityFieldInfo[];
+  requiredFields: string[]; // Field apiNames that are required
+  relationships: EntityRelationship[];
+}
+
+export interface SystemEntities {
+  entities: EntityInfo[];
+  entityByApiName: Record<string, EntityInfo>; // Changed from Map for state serialization
+  loadedAt: number;
+}
+
+// ============================================
+// Planning Types
+// ============================================
+
+export interface PlannedRecord {
+  id: string; // Temporary ID for planning (e.g., "temp_account_1")
+  entityApiName: string;
+  entityLabel: string;
+  fields: Record<string, any>;
+  resolvedFields?: Record<string, any>; // Fields after dependency resolution
+  missingRequiredFields: string[];
+  dependsOn: string[]; // IDs of other planned records this depends on
+  status: 'pending' | 'ready' | 'created' | 'failed';
+  createdRecordId?: string; // Actual ID after creation
+  wasExisting?: boolean; // True if record already existed in database
+  error?: string;
+}
+
+export interface RecordCreationPlan {
+  id: string;
+  records: PlannedRecord[];
+  executionOrder: string[]; // Ordered list of planned record IDs
+  status: 'building' | 'incomplete' | 'ready' | 'executing' | 'completed' | 'failed';
+  createdRecords: any[];
+  errors: string[];
+}
+
+// ============================================
+// State Types
+// ============================================
+
 export interface AiAssistantState {
  message: string;
+  messages?: any[]; // BaseMessage[] from langchain - used when invoked by Deep Agent
  history?: AiChatMessage[];
  context: AiChatContext;
+  
+  // Entity discovery
+  systemEntities?: SystemEntities;
+  
+  // Planning
+  plan?: RecordCreationPlan;
+  
+  // Legacy fields (kept for compatibility during transition)
  objectDefinition?: any;
  pageLayout?: any;
  extractedFields?: Record<string, any>;
--- a/backend/src/object/field-mapper.service.ts
+++ b/backend/src/object/field-mapper.service.ts
@@ -79,6 +79,10 @@ export class FieldMapperService {
    const frontendType = this.mapFieldType(field.type);
    const isLookupField = frontendType === 'belongsTo' || field.type.toLowerCase().includes('lookup');
    
+    // Hide 'id' field from list view by default
+    const isIdField = field.apiName === 'id';
+    const defaultShowOnList = isIdField ? false : true;
+    
    return {
      id: field.id,
      apiName: field.apiName,
@@ -95,7 +99,7 @@ export class FieldMapperService {
      isReadOnly: field.isSystem || uiMetadata.isReadOnly || false,
      
      // View visibility
-      showOnList: uiMetadata.showOnList !== false,
+      showOnList: uiMetadata.showOnList !== undefined ? uiMetadata.showOnList : defaultShowOnList,
      showOnDetail: uiMetadata.showOnDetail !== false,
      showOnEdit: uiMetadata.showOnEdit !== false && !field.isSystem,
      sortable: uiMetadata.sortable !== false,
@@ -141,6 +145,7 @@ export class FieldMapperService {
      'boolean': 'boolean',
      'date': 'date',
      'datetime': 'datetime',
+      'date_time': 'datetime',
      'time': 'time',
      'email': 'email',
      'url': 'url',
--- a/backend/src/page-layout/dto/page-layout.dto.ts
+++ b/backend/src/page-layout/dto/page-layout.dto.ts
@@ -1,4 +1,6 @@
-import { IsString, IsUUID, IsBoolean, IsOptional, IsObject } from 'class-validator';
+import { IsString, IsUUID, IsBoolean, IsOptional, IsObject, IsIn } from 'class-validator';
+
+export type PageLayoutType = 'detail' | 'list';

 export class CreatePageLayoutDto {
  @IsString()
@@ -7,18 +9,25 @@ export class CreatePageLayoutDto {
  @IsUUID()
  objectId: string;

+  @IsIn(['detail', 'list'])
+  @IsOptional()
+  layoutType?: PageLayoutType = 'detail';
+
  @IsBoolean()
  @IsOptional()
  isDefault?: boolean;

  @IsObject()
  layoutConfig: {
+    // For detail layouts: grid-based field positions
    fields: Array<{
      fieldId: string;
-      x: number;
-      y: number;
-      w: number;
-      h: number;
+      x?: number;
+      y?: number;
+      w?: number;
+      h?: number;
+      // For list layouts: field order (optional, defaults to array index)
+      order?: number;
    }>;
    relatedLists?: string[];
  };
@@ -42,10 +51,11 @@ export class UpdatePageLayoutDto {
  layoutConfig?: {
    fields: Array<{
      fieldId: string;
-      x: number;
-      y: number;
-      w: number;
-      h: number;
+      x?: number;
+      y?: number;
+      w?: number;
+      h?: number;
+      order?: number;
    }>;
    relatedLists?: string[];
  };
--- a/backend/src/page-layout/page-layout.controller.ts
+++ b/backend/src/page-layout/page-layout.controller.ts
@@ -10,7 +10,7 @@ import {
  Query,
 } from '@nestjs/common';
 import { PageLayoutService } from './page-layout.service';
-import { CreatePageLayoutDto, UpdatePageLayoutDto } from './dto/page-layout.dto';
+import { CreatePageLayoutDto, UpdatePageLayoutDto, PageLayoutType } from './dto/page-layout.dto';
 import { JwtAuthGuard } from '../auth/jwt-auth.guard';
 import { TenantId } from '../tenant/tenant.decorator';

@@ -25,13 +25,21 @@ export class PageLayoutController {
  }

  @Get()
-  findAll(@TenantId() tenantId: string, @Query('objectId') objectId?: string) {
-    return this.pageLayoutService.findAll(tenantId, objectId);
+  findAll(
+    @TenantId() tenantId: string, 
+    @Query('objectId') objectId?: string,
+    @Query('layoutType') layoutType?: PageLayoutType,
+  ) {
+    return this.pageLayoutService.findAll(tenantId, objectId, layoutType);
  }

  @Get('default/:objectId')
-  findDefaultByObject(@TenantId() tenantId: string, @Param('objectId') objectId: string) {
-    return this.pageLayoutService.findDefaultByObject(tenantId, objectId);
+  findDefaultByObject(
+    @TenantId() tenantId: string, 
+    @Param('objectId') objectId: string,
+    @Query('layoutType') layoutType?: PageLayoutType,
+  ) {
+    return this.pageLayoutService.findDefaultByObject(tenantId, objectId, layoutType || 'detail');
  }

  @Get(':id')
--- a/backend/src/page-layout/page-layout.service.ts
+++ b/backend/src/page-layout/page-layout.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, NotFoundException } from '@nestjs/common';
 import { TenantDatabaseService } from '../tenant/tenant-database.service';
-import { CreatePageLayoutDto, UpdatePageLayoutDto } from './dto/page-layout.dto';
+import { CreatePageLayoutDto, UpdatePageLayoutDto, PageLayoutType } from './dto/page-layout.dto';

@Injectable()
 export class PageLayoutService {
@@ -8,17 +8,19 @@ export class PageLayoutService {

  async create(tenantId: string, createDto: CreatePageLayoutDto) {
    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const layoutType = createDto.layoutType || 'detail';
    
-    // If this layout is set as default, unset other defaults for the same object
+    // If this layout is set as default, unset other defaults for the same object and layout type
    if (createDto.isDefault) {
      await knex('page_layouts')
-        .where({ object_id: createDto.objectId })
+        .where({ object_id: createDto.objectId, layout_type: layoutType })
        .update({ is_default: false });
    }

    const [id] = await knex('page_layouts').insert({
      name: createDto.name,
      object_id: createDto.objectId,
+      layout_type: layoutType,
      is_default: createDto.isDefault || false,
      layout_config: JSON.stringify(createDto.layoutConfig),
      description: createDto.description || null,
@@ -29,7 +31,7 @@ export class PageLayoutService {
    return result;
  }

-  async findAll(tenantId: string, objectId?: string) {
+  async findAll(tenantId: string, objectId?: string, layoutType?: PageLayoutType) {
    const knex = await this.tenantDbService.getTenantKnex(tenantId);
    
    let query = knex('page_layouts');
@@ -38,6 +40,10 @@ export class PageLayoutService {
      query = query.where({ object_id: objectId });
    }

+    if (layoutType) {
+      query = query.where({ layout_type: layoutType });
+    }
+
    const layouts = await query.orderByRaw('is_default DESC, name ASC');
    return layouts;
  }
@@ -54,11 +60,11 @@ export class PageLayoutService {
    return layout;
  }

-  async findDefaultByObject(tenantId: string, objectId: string) {
+  async findDefaultByObject(tenantId: string, objectId: string, layoutType: PageLayoutType = 'detail') {
    const knex = await this.tenantDbService.getTenantKnex(tenantId);
    
    const layout = await knex('page_layouts')
-      .where({ object_id: objectId, is_default: true })
+      .where({ object_id: objectId, is_default: true, layout_type: layoutType })
      .first();

    return layout || null;
@@ -68,13 +74,12 @@ export class PageLayoutService {
    const knex = await this.tenantDbService.getTenantKnex(tenantId);
    
    // Check if layout exists
-    await this.findOne(tenantId, id);
-
-    // If setting as default, unset other defaults for the same object
-    if (updateDto.isDefault) {
    const layout = await this.findOne(tenantId, id);
+
+    // If setting as default, unset other defaults for the same object and layout type
+    if (updateDto.isDefault) {
      await knex('page_layouts')
-        .where({ object_id: layout.object_id })
+        .where({ object_id: layout.object_id, layout_type: layout.layout_type })
        .whereNot({ id })
        .update({ is_default: false });
    }
--- a/frontend/components/ListViewLayoutEditor.vue
+++ b/frontend/components/ListViewLayoutEditor.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="list-view-layout-editor">
+    <div class="flex h-full">
+      <!-- Selected Fields Area -->
+      <div class="flex-1 p-4 overflow-auto">
+        <div class="mb-4 flex justify-between items-center">
+          <h3 class="text-lg font-semibold">{{ layoutName || 'List View Layout' }}</h3>
+          <div class="flex gap-2">
+            <Button variant="outline" size="sm" @click="handleClear">
+              Clear All
+            </Button>
+            <Button size="sm" @click="handleSave">
+              Save Layout
+            </Button>
+          </div>
+        </div>
+        
+        <div class="border rounded-lg bg-slate-50 dark:bg-slate-900 p-4 min-h-[400px]">
+          <p class="text-sm text-muted-foreground mb-4">
+            Drag fields to reorder them. Fields will appear in the list view in this order.
+          </p>
+          
+          <div v-if="selectedFields.length === 0" class="text-center py-8 text-muted-foreground">
+            <p>No fields selected.</p>
+            <p class="text-sm">Click or drag fields from the right panel to add them.</p>
+          </div>
+          
+          <div 
+            v-else 
+            ref="sortableContainer"
+            class="space-y-2"
+          >
+            <div
+              v-for="(field, index) in selectedFields"
+              :key="field.id"
+              class="p-3 border rounded cursor-move bg-white dark:bg-slate-800 hover:border-primary transition-colors flex items-center justify-between"
+              draggable="true"
+              @dragstart="handleDragStart($event, index)"
+              @dragover.prevent="handleDragOver($event, index)"
+              @drop="handleDrop($event, index)"
+            >
+              <div class="flex items-center gap-3">
+                <span class="text-muted-foreground cursor-grab">
+                  <GripVertical class="w-4 h-4" />
+                </span>
+                <div>
+                  <div class="font-medium text-sm">{{ field.label }}</div>
+                  <div class="text-xs text-muted-foreground">
+                    {{ field.apiName }} • {{ formatFieldType(field.type) }}
+                  </div>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="text-destructive hover:text-destructive"
+                @click="removeField(field.id)"
+              >
+                <X class="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Available Fields Sidebar -->
+      <div class="w-80 border-l bg-white dark:bg-slate-950 p-4 overflow-auto">
+        <h3 class="text-lg font-semibold mb-4">Available Fields</h3>
+        <p class="text-xs text-muted-foreground mb-4">Click or drag to add field to list</p>
+        
+        <div v-if="availableFields.length === 0" class="text-center py-4 text-muted-foreground text-sm">
+          All fields have been added to the layout.
+        </div>
+        
+        <div v-else class="space-y-2">
+          <div
+            v-for="field in availableFields"
+            :key="field.id"
+            class="p-3 border rounded cursor-pointer bg-white dark:bg-slate-900 hover:border-primary hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+            draggable="true"
+            @dragstart="handleAvailableFieldDragStart($event, field)"
+            @click="addField(field)"
+          >
+            <div class="font-medium text-sm">{{ field.label }}</div>
+            <div class="text-xs text-muted-foreground">
+              {{ field.apiName }} • {{ formatFieldType(field.type) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { GripVertical, X } from 'lucide-vue-next'
+import type { FieldLayoutItem } from '~/types/page-layout'
+import type { FieldConfig } from '~/types/field-types'
+import { Button } from '@/components/ui/button'
+
+const props = defineProps<{
+  fields: FieldConfig[]
+  initialLayout?: FieldLayoutItem[]
+  layoutName?: string
+}>()
+
+const emit = defineEmits<{
+  save: [layout: { fields: FieldLayoutItem[] }]
+}>()
+
+// Selected fields in order
+const selectedFieldIds = ref<string[]>([])
+const draggedIndex = ref<number | null>(null)
+const draggedAvailableField = ref<FieldConfig | null>(null)
+
+// Initialize with initial layout
+watch(() => props.initialLayout, (layout) => {
+  if (layout && layout.length > 0) {
+    // Sort by order if available, otherwise use array order
+    const sorted = [...layout].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+    selectedFieldIds.value = sorted.map(item => item.fieldId)
+  }
+}, { immediate: true })
+
+// Computed selected fields in order
+const selectedFields = computed(() => {
+  return selectedFieldIds.value
+    .map(id => props.fields.find(f => f.id === id))
+    .filter((f): f is FieldConfig => f !== undefined)
+})
+
+// Available fields (not selected)
+const availableFields = computed(() => {
+  const selectedSet = new Set(selectedFieldIds.value)
+  return props.fields.filter(field => !selectedSet.has(field.id))
+})
+
+const formatFieldType = (type: string): string => {
+  const typeNames: Record<string, string> = {
+    'TEXT': 'Text',
+    'LONG_TEXT': 'Textarea',
+    'EMAIL': 'Email',
+    'PHONE': 'Phone',
+    'NUMBER': 'Number',
+    'CURRENCY': 'Currency',
+    'PERCENT': 'Percent',
+    'PICKLIST': 'Picklist',
+    'MULTI_PICKLIST': 'Multi-select',
+    'BOOLEAN': 'Checkbox',
+    'DATE': 'Date',
+    'DATE_TIME': 'DateTime',
+    'TIME': 'Time',
+    'URL': 'URL',
+    'LOOKUP': 'Lookup',
+    'FILE': 'File',
+    'IMAGE': 'Image',
+    'JSON': 'JSON',
+    'text': 'Text',
+    'textarea': 'Textarea',
+    'email': 'Email',
+    'number': 'Number',
+    'currency': 'Currency',
+    'select': 'Picklist',
+    'multiSelect': 'Multi-select',
+    'boolean': 'Checkbox',
+    'date': 'Date',
+    'datetime': 'DateTime',
+    'url': 'URL',
+    'lookup': 'Lookup',
+    'belongsTo': 'Lookup',
+  }
+  return typeNames[type] || type
+}
+
+const addField = (field: FieldConfig) => {
+  if (!selectedFieldIds.value.includes(field.id)) {
+    selectedFieldIds.value.push(field.id)
+  }
+}
+
+const removeField = (fieldId: string) => {
+  selectedFieldIds.value = selectedFieldIds.value.filter(id => id !== fieldId)
+}
+
+// Drag and drop for reordering
+const handleDragStart = (event: DragEvent, index: number) => {
+  draggedIndex.value = index
+  draggedAvailableField.value = null
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+const handleDragOver = (event: DragEvent, index: number) => {
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+const handleDrop = (event: DragEvent, targetIndex: number) => {
+  event.preventDefault()
+  
+  // Handle drop from available fields
+  if (draggedAvailableField.value) {
+    addField(draggedAvailableField.value)
+    // Move the newly added field to the target position
+    const newFieldId = draggedAvailableField.value.id
+    const currentIndex = selectedFieldIds.value.indexOf(newFieldId)
+    if (currentIndex !== -1 && currentIndex !== targetIndex) {
+      const ids = [...selectedFieldIds.value]
+      ids.splice(currentIndex, 1)
+      ids.splice(targetIndex, 0, newFieldId)
+      selectedFieldIds.value = ids
+    }
+    draggedAvailableField.value = null
+    return
+  }
+  
+  // Handle reordering within selected fields
+  if (draggedIndex.value === null || draggedIndex.value === targetIndex) {
+    draggedIndex.value = null
+    return
+  }
+  
+  const ids = [...selectedFieldIds.value]
+  const [removed] = ids.splice(draggedIndex.value, 1)
+  ids.splice(targetIndex, 0, removed)
+  selectedFieldIds.value = ids
+  draggedIndex.value = null
+}
+
+// Drag from available fields
+const handleAvailableFieldDragStart = (event: DragEvent, field: FieldConfig) => {
+  draggedAvailableField.value = field
+  draggedIndex.value = null
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'copy'
+  }
+}
+
+const handleClear = () => {
+  if (confirm('Are you sure you want to clear all fields from the layout?')) {
+    selectedFieldIds.value = []
+  }
+}
+
+const handleSave = () => {
+  const layout: FieldLayoutItem[] = selectedFieldIds.value.map((fieldId, index) => ({
+    fieldId,
+    order: index,
+  }))
+  
+  emit('save', { fields: layout })
+}
+</script>
+
+<style scoped>
+.list-view-layout-editor {
+  height: calc(100vh - 300px);
+  min-height: 500px;
+}
+</style>
--- a/frontend/components/fields/FieldRenderer.vue
+++ b/frontend/components/fields/FieldRenderer.vue
@@ -85,9 +85,31 @@ const formatValue = (val: any): string => {
    case FieldType.BELONGS_TO:
      return relationshipDisplayValue.value
    case FieldType.DATE:
-      return val instanceof Date ? val.toLocaleDateString() : new Date(val).toLocaleDateString()
+      try {
+        const date = val instanceof Date ? val : new Date(val)
+        return date.toLocaleDateString(undefined, { 
+          year: 'numeric', 
+          month: '2-digit', 
+          day: '2-digit' 
+        })
+      } catch {
+        return String(val)
+      }
    case FieldType.DATETIME:
-      return val instanceof Date ? val.toLocaleString() : new Date(val).toLocaleString()
+      try {
+        const date = val instanceof Date ? val : new Date(val)
+        return date.toLocaleString(undefined, { 
+          year: 'numeric', 
+          month: '2-digit', 
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        })
+      } catch {
+        return String(val)
+      }
    case FieldType.BOOLEAN:
      return val ? 'Yes' : 'No'
    case FieldType.CURRENCY:
--- a/frontend/composables/useFieldViews.ts
+++ b/frontend/composables/useFieldViews.ts
@@ -20,6 +20,9 @@ export const useFields = () => {
    // Hide system fields and auto-generated fields on edit
    const shouldHideOnEdit = isSystemField || isAutoGeneratedField
    
+    // Hide 'id' field from list view by default (check both apiName and id field)
+    const shouldHideOnList = fieldDef.apiName === 'id' || fieldDef.label === 'Id' || fieldDef.label === 'ID'
+    
    return {
      id: fieldDef.id,
      apiName: fieldDef.apiName,
@@ -37,7 +40,7 @@ export const useFields = () => {
      validationRules: fieldDef.validationRules || [],
      
      // View options - only hide system and auto-generated fields by default
-      showOnList: fieldDef.showOnList ?? true,
+      showOnList: fieldDef.showOnList ?? !shouldHideOnList,
      showOnDetail: fieldDef.showOnDetail ?? true,
      showOnEdit: fieldDef.showOnEdit ?? !shouldHideOnEdit,
      sortable: fieldDef.sortable ?? true,
@@ -67,12 +70,36 @@ export const useFields = () => {

  /**
   * Build a ListView configuration from object definition
+   * @param objectDef - The object definition containing fields
+   * @param customConfig - Optional custom configuration
+   * @param listLayoutConfig - Optional list view layout configuration from page_layouts
   */
  const buildListViewConfig = (
    objectDef: any,
-    customConfig?: Partial<ListViewConfig>
+    customConfig?: Partial<ListViewConfig>,
+    listLayoutConfig?: { fields: Array<{ fieldId: string; order?: number }> } | null
  ): ListViewConfig => {
-    const fields = objectDef.fields?.map(mapFieldDefinitionToConfig) || []
+    let fields = objectDef.fields?.map(mapFieldDefinitionToConfig) || []
+    
+    // If a list layout is provided, filter and order fields according to it
+    if (listLayoutConfig && listLayoutConfig.fields && listLayoutConfig.fields.length > 0) {
+      // Sort layout fields by order
+      const sortedLayoutFields = [...listLayoutConfig.fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      
+      // Map layout fields to actual field configs, preserving order
+      const orderedFields: FieldConfig[] = []
+      for (const layoutField of sortedLayoutFields) {
+        const fieldConfig = fields.find((f: FieldConfig) => f.id === layoutField.fieldId)
+        if (fieldConfig) {
+          orderedFields.push(fieldConfig)
+        }
+      }
+      
+      // Use ordered fields if we found any, otherwise fall back to all fields
+      if (orderedFields.length > 0) {
+        fields = orderedFields
+      }
+    }
    
    return {
      objectApiName: objectDef.apiName,
--- a/frontend/composables/usePageLayouts.ts
+++ b/frontend/composables/usePageLayouts.ts
@@ -1,11 +1,13 @@
-import type { PageLayout, CreatePageLayoutRequest, UpdatePageLayoutRequest } from '~/types/page-layout'
+import type { PageLayout, CreatePageLayoutRequest, UpdatePageLayoutRequest, PageLayoutType } from '~/types/page-layout'

 export const usePageLayouts = () => {
  const { api } = useApi()

-  const getPageLayouts = async (objectId?: string) => {
+  const getPageLayouts = async (objectId?: string, layoutType?: PageLayoutType) => {
    try {
-      const params = objectId ? { objectId } : {}
+      const params: Record<string, string> = {}
+      if (objectId) params.objectId = objectId
+      if (layoutType) params.layoutType = layoutType
      const response = await api.get('/page-layouts', { params })
      return response
    } catch (error) {
@@ -24,9 +26,11 @@ export const usePageLayouts = () => {
    }
  }

-  const getDefaultPageLayout = async (objectId: string) => {
+  const getDefaultPageLayout = async (objectId: string, layoutType: PageLayoutType = 'detail') => {
    try {
-      const response = await api.get(`/page-layouts/default/${objectId}`)
+      const response = await api.get(`/page-layouts/default/${objectId}`, { 
+        params: { layoutType } 
+      })
      return response
    } catch (error) {
      console.error('Error fetching default page layout:', error)
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
+import { usePageLayouts } from '@/composables/usePageLayouts'
 import ListView from '@/components/views/ListView.vue'
 import DetailView from '@/components/views/DetailViewEnhanced.vue'
 import EditView from '@/components/views/EditViewEnhanced.vue'
@@ -19,6 +20,7 @@ const route = useRoute()
 const router = useRouter()
 const { api } = useApi()
 const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
+const { getDefaultPageLayout } = usePageLayouts()

 // Use breadcrumbs composable
 const { setBreadcrumbs } = useBreadcrumbs()
@@ -40,6 +42,7 @@ const view = computed(() => {

 // State
 const objectDefinition = ref<any>(null)
+const listViewLayout = ref<any>(null)
 const loading = ref(true)
 const error = ref<string | null>(null)

@@ -134,11 +137,13 @@ watch([objectDefinition, currentRecord, recordId], () => {
 // View configs
 const listConfig = computed(() => {
  if (!objectDefinition.value) return null
+  // Pass the list view layout config to buildListViewConfig if available
+  const layoutConfig = listViewLayout.value?.layout_config || listViewLayout.value?.layoutConfig
  return buildListViewConfig(objectDefinition.value, {
    searchable: true,
    exportable: true,
    filterable: true,
-  })
+  }, layoutConfig)
 })

 const detailConfig = computed(() => {
@@ -172,6 +177,16 @@ const fetchObjectDefinition = async () => {
    error.value = null
    const response = await api.get(`/setup/objects/${objectApiName.value}`)
    objectDefinition.value = response
+    
+    // Fetch the default list view layout for this object
+    if (response?.id) {
+      try {
+        listViewLayout.value = await getDefaultPageLayout(response.id, 'list')
+      } catch (e) {
+        // No list view layout configured, will use default behavior
+        listViewLayout.value = null
+      }
+    }
  } catch (e: any) {
    error.value = e.message || 'Failed to load object definition'
    console.error('Error fetching object definition:', e)
--- a/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
+import { usePageLayouts } from '@/composables/usePageLayouts'
 import ListView from '@/components/views/ListView.vue'
 import DetailView from '@/components/views/DetailView.vue'
 import EditView from '@/components/views/EditView.vue'
@@ -11,6 +12,7 @@ const route = useRoute()
 const router = useRouter()
 const { api } = useApi()
 const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
+const { getDefaultPageLayout } = usePageLayouts()

 // Get object API name from route
 const objectApiName = computed(() => route.params.objectName as string)
@@ -25,6 +27,7 @@ const view = computed(() => {

 // State
 const objectDefinition = ref<any>(null)
+const listViewLayout = ref<any>(null)
 const loading = ref(true)
 const error = ref<string | null>(null)

@@ -66,11 +69,13 @@ onBeforeUnmount(() => {
 // View configs
 const listConfig = computed(() => {
  if (!objectDefinition.value) return null
+  // Pass the list view layout config to buildListViewConfig if available
+  const layoutConfig = listViewLayout.value?.layout_config || listViewLayout.value?.layoutConfig
  return buildListViewConfig(objectDefinition.value, {
    searchable: true,
    exportable: true,
    filterable: true,
-  })
+  }, layoutConfig)
 })

 const detailConfig = computed(() => {
@@ -93,6 +98,16 @@ const fetchObjectDefinition = async () => {
    error.value = null
    const response = await api.get(`/setup/objects/${objectApiName.value}`)
    objectDefinition.value = response
+    
+    // Fetch the default list view layout for this object
+    if (response?.id) {
+      try {
+        listViewLayout.value = await getDefaultPageLayout(response.id, 'list')
+      } catch (e) {
+        // No list view layout configured, will use default behavior
+        listViewLayout.value = null
+      }
+    }
  } catch (e: any) {
    error.value = e.message || 'Failed to load object definition'
    console.error('Error fetching object definition:', e)
--- a/frontend/pages/setup/objects/[apiName].vue
+++ b/frontend/pages/setup/objects/[apiName].vue
@@ -16,10 +16,11 @@
          <!-- Tabs -->
          <div class="mb-8">
            <Tabs v-model="activeTab" default-value="fields" class="w-full">
-              <TabsList class="grid w-full grid-cols-3 max-w-2xl">
+              <TabsList class="grid w-full grid-cols-4 max-w-2xl">
                <TabsTrigger value="fields">Fields</TabsTrigger>
                <TabsTrigger value="access">Access</TabsTrigger>
                <TabsTrigger value="layouts">Page Layouts</TabsTrigger>
+                <TabsTrigger value="listLayouts">List View Layouts</TabsTrigger>
              </TabsList>

              <!-- Fields Tab -->
@@ -148,7 +149,7 @@
                        </div>
                        <div class="flex items-center gap-2">
                          <span
-                            v-if="layout.isDefault"
+                            v-if="layout.isDefault || layout.is_default"
                            class="px-2 py-1 bg-primary/10 text-primary rounded text-xs"
                          >
                            Default
@@ -185,6 +186,84 @@
                  />
                </div>
              </TabsContent>
+
+              <!-- List View Layouts Tab -->
+              <TabsContent value="listLayouts" class="mt-6">
+                <div v-if="!selectedListLayout" class="space-y-4">
+                  <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold">List View Layouts</h2>
+                    <Button @click="handleCreateListLayout">
+                      <Plus class="w-4 h-4 mr-2" />
+                      New List Layout
+                    </Button>
+                  </div>
+
+                  <p class="text-sm text-muted-foreground mb-4">
+                    Configure which fields appear in list views and their order.
+                  </p>
+
+                  <div v-if="loadingListLayouts" class="text-center py-8">
+                    Loading list layouts...
+                  </div>
+                  
+                  <div v-else-if="listLayouts.length === 0" class="text-center py-8 text-muted-foreground">
+                    No list view layouts yet. Create one to customize your list views.
+                  </div>
+
+                  <div v-else class="space-y-2">
+                    <div
+                      v-for="layout in listLayouts"
+                      :key="layout.id"
+                      class="p-4 border rounded-lg bg-card hover:border-primary cursor-pointer transition-colors"
+                      @click="handleSelectListLayout(layout)"
+                    >
+                      <div class="flex items-center justify-between">
+                        <div>
+                          <h3 class="font-semibold">{{ layout.name }}</h3>
+                          <p v-if="layout.description" class="text-sm text-muted-foreground">
+                            {{ layout.description }}
+                          </p>
+                          <p class="text-xs text-muted-foreground mt-1">
+                            {{ getListLayoutFieldCount(layout) }} fields configured
+                          </p>
+                        </div>
+                        <div class="flex items-center gap-2">
+                          <span
+                            v-if="layout.isDefault || layout.is_default"
+                            class="px-2 py-1 bg-primary/10 text-primary rounded text-xs"
+                          >
+                            Default
+                          </span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            @click.stop="handleDeleteListLayout(layout.id)"
+                          >
+                            <Trash2 class="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- List Layout Editor -->
+                <div v-else>
+                  <div class="mb-4">
+                    <Button variant="outline" @click="selectedListLayout = null">
+                      <ArrowLeft class="w-4 h-4 mr-2" />
+                      Back to List Layouts
+                    </Button>
+                  </div>
+
+                  <ListViewLayoutEditor
+                    :fields="object.fields"
+                    :initial-layout="(selectedListLayout.layoutConfig || selectedListLayout.layout_config)?.fields || []"
+                    :layout-name="selectedListLayout.name"
+                    @save="handleSaveListLayout"
+                  />
+                </div>
+              </TabsContent>
            </Tabs>
          </div>
        </div>
@@ -299,6 +378,7 @@ import { Plus, Trash2, ArrowLeft } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import PageLayoutEditor from '@/components/PageLayoutEditor.vue'
+import ListViewLayoutEditor from '@/components/ListViewLayoutEditor.vue'
 import ObjectAccessSettings from '@/components/ObjectAccessSettings.vue'
 import FieldTypeSelector from '@/components/fields/FieldTypeSelector.vue'
 import FieldAttributesCommon from '@/components/fields/FieldAttributesCommon.vue'
@@ -315,11 +395,16 @@ const loading = ref(true)
 const error = ref<string | null>(null)
 const activeTab = ref('fields')

-// Page layouts state
+// Page layouts state (detail/edit layouts)
 const layouts = ref<PageLayout[]>([])
 const loadingLayouts = ref(false)
 const selectedLayout = ref<PageLayout | null>(null)

+// List view layouts state
+const listLayouts = ref<PageLayout[]>([])
+const loadingListLayouts = ref(false)
+const selectedListLayout = ref<PageLayout | null>(null)
+
 // Field management state
 const showFieldDialog = ref(false)
 const fieldDialogMode = ref<'create' | 'edit'>('create')
@@ -420,7 +505,8 @@ const fetchLayouts = async () => {
  
  try {
    loadingLayouts.value = true
-    layouts.value = await getPageLayouts(object.value.id)
+    // Fetch only detail layouts (default type)
+    layouts.value = await getPageLayouts(object.value.id, 'detail')
  } catch (e: any) {
    console.error('Error fetching layouts:', e)
    toast.error('Failed to load page layouts')
@@ -429,6 +515,20 @@ const fetchLayouts = async () => {
  }
 }

+const fetchListLayouts = async () => {
+  if (!object.value) return
+  
+  try {
+    loadingListLayouts.value = true
+    listLayouts.value = await getPageLayouts(object.value.id, 'list')
+  } catch (e: any) {
+    console.error('Error fetching list layouts:', e)
+    toast.error('Failed to load list view layouts')
+  } finally {
+    loadingListLayouts.value = false
+  }
+}
+
 const openFieldDialog = async (mode: 'create' | 'edit', field?: any) => {
  fieldDialogMode.value = mode
  fieldDialogError.value = null
@@ -684,6 +784,7 @@ const handleCreateLayout = async () => {
    const newLayout = await createPageLayout({
      name,
      objectId: object.value.id,
+      layoutType: 'detail',
      isDefault: layouts.value.length === 0,
      layoutConfig: { fields: [], relatedLists: [] },
    })
@@ -736,6 +837,73 @@ const handleDeleteLayout = async (layoutId: string) => {
  }
 }

+// List View Layout methods
+const handleCreateListLayout = async () => {
+  const name = prompt('Enter a name for the new list view layout:')
+  if (!name) return
+
+  try {
+    const newLayout = await createPageLayout({
+      name,
+      objectId: object.value.id,
+      layoutType: 'list',
+      isDefault: listLayouts.value.length === 0,
+      layoutConfig: { fields: [] },
+    })
+    
+    listLayouts.value.push(newLayout)
+    selectedListLayout.value = newLayout
+    toast.success('List view layout created successfully')
+  } catch (e: any) {
+    console.error('Error creating list layout:', e)
+    toast.error('Failed to create list view layout')
+  }
+}
+
+const handleSelectListLayout = (layout: PageLayout) => {
+  selectedListLayout.value = layout
+}
+
+const handleSaveListLayout = async (layoutConfig: { fields: FieldLayoutItem[] }) => {
+  if (!selectedListLayout.value) return
+
+  try {
+    const updated = await updatePageLayout(selectedListLayout.value.id, {
+      layoutConfig,
+    })
+    
+    // Update the layout in the list
+    const index = listLayouts.value.findIndex(l => l.id === selectedListLayout.value!.id)
+    if (index !== -1) {
+      listLayouts.value[index] = updated
+    }
+    
+    selectedListLayout.value = updated
+    toast.success('List view layout saved successfully')
+  } catch (e: any) {
+    console.error('Error saving list layout:', e)
+    toast.error('Failed to save list view layout')
+  }
+}
+
+const handleDeleteListLayout = async (layoutId: string) => {
+  if (!confirm('Are you sure you want to delete this list view layout?')) return
+
+  try {
+    await deletePageLayout(layoutId)
+    listLayouts.value = listLayouts.value.filter(l => l.id !== layoutId)
+    toast.success('List view layout deleted successfully')
+  } catch (e: any) {
+    console.error('Error deleting list layout:', e)
+    toast.error('Failed to delete list view layout')
+  }
+}
+
+const getListLayoutFieldCount = (layout: PageLayout): number => {
+  const config = layout.layoutConfig || layout.layout_config
+  return config?.fields?.length || 0
+}
+
 const handleAccessUpdate = (orgWideDefault: string) => {
  if (object.value) {
    object.value.orgWideDefault = orgWideDefault
@@ -747,6 +915,9 @@ watch(activeTab, (newTab) => {
  if (newTab === 'layouts' && layouts.value.length === 0 && !loadingLayouts.value) {
    fetchLayouts()
  }
+  if (newTab === 'listLayouts' && listLayouts.value.length === 0 && !loadingListLayouts.value) {
+    fetchListLayouts()
+  }
 })

 onMounted(async () => {
@@ -755,5 +926,8 @@ onMounted(async () => {
  if (activeTab.value === 'layouts') {
    await fetchLayouts()
  }
+  if (activeTab.value === 'listLayouts') {
+    await fetchListLayouts()
+  }
 })
 </script>
--- a/frontend/types/page-layout.ts
+++ b/frontend/types/page-layout.ts
@@ -1,11 +1,15 @@
 export interface FieldLayoutItem {
  fieldId: string;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  // For list layouts: field order (optional)
+  order?: number;
 }

+export type PageLayoutType = 'detail' | 'list';
+
 export interface PageLayoutConfig {
  fields: FieldLayoutItem[];
  relatedLists?: string[];
@@ -15,16 +19,23 @@ export interface PageLayout {
  id: string;
  name: string;
  objectId: string;
+  layoutType: PageLayoutType;
  isDefault: boolean;
  layoutConfig: PageLayoutConfig;
  description?: string;
  createdAt?: string;
  updatedAt?: string;
+  // Database column names (snake_case) - used when data comes directly from DB
+  layout_type?: PageLayoutType;
+  layout_config?: PageLayoutConfig;
+  object_id?: string;
+  is_default?: boolean;
 }

 export interface CreatePageLayoutRequest {
  name: string;
  objectId: string;
+  layoutType?: PageLayoutType;
  isDefault?: boolean;
  layoutConfig: PageLayoutConfig;
  description?: string;
Author	SHA1	Message	Date
Francisco Gaona	97fc235636	WIP - configure list views	2026-01-31 02:46:33 +01:00
Francisco Gaona	c7282ee2a0	WIP - do not display id on list views and correctly format datetime fields	2026-01-26 19:37:17 +01:00
Francisco Gaona	ce65817670	WIP - do not trim history	2026-01-26 19:14:33 +01:00
Francisco Gaona	fe51355d29	WIP - use AI assistant to create records in the system	2026-01-18 09:15:06 +01:00
Francisco Gaona	4f466d7992	WIP - create records via AI Assistant more flexible and dynamic	2026-01-18 08:47:51 +01:00
Francisco Gaona	c822017ef1	WIP - some success creating related records	2026-01-18 05:24:41 +01:00
Francisco Gaona	8b192ba7f5	WIP - using deep agent to create complex workflow	2026-01-18 04:45:15 +01:00