Add contact and contact detail system objects

backend/migrations/tenant/20250305000001_create_contacts_and_contact_details.js

@@ -0,0 +1,197 @@
+exports.up = async function (knex) {
+  await knex.schema.createTable('contacts', (table) => {
+    table.uuid('id').primary().defaultTo(knex.raw('(UUID())'));
+    table.string('firstName', 100).notNullable();
+    table.string('lastName', 100).notNullable();
+    table.uuid('accountId').notNullable();
+    table.timestamps(true, true);
+
+    table
+      .foreign('accountId')
+      .references('id')
+      .inTable('accounts')
+      .onDelete('CASCADE');
+    table.index(['accountId']);
+    table.index(['lastName', 'firstName']);
+  });
+
+  await knex.schema.createTable('contact_details', (table) => {
+    table.uuid('id').primary().defaultTo(knex.raw('(UUID())'));
+    table.string('relatedObjectType', 100).notNullable();
+    table.uuid('relatedObjectId').notNullable();
+    table.string('detailType', 50).notNullable();
+    table.string('label', 100);
+    table.text('value').notNullable();
+    table.boolean('isPrimary').defaultTo(false);
+    table.timestamps(true, true);
+
+    table.index(['relatedObjectType', 'relatedObjectId']);
+    table.index(['detailType']);
+  });
+
+  const [contactObjectId] = await knex('object_definitions').insert({
+    id: knex.raw('(UUID())'),
+    apiName: 'Contact',
+    label: 'Contact',
+    pluralLabel: 'Contacts',
+    description: 'Standard Contact object',
+    isSystem: true,
+    isCustom: false,
+    created_at: knex.fn.now(),
+    updated_at: knex.fn.now(),
+  });
+
+  const contactObjectDefId =
+    contactObjectId ||
+    (await knex('object_definitions').where('apiName', 'Contact').first()).id;
+
+  await knex('field_definitions').insert([
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactObjectDefId,
+      apiName: 'firstName',
+      label: 'First Name',
+      type: 'String',
+      length: 100,
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 1,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactObjectDefId,
+      apiName: 'lastName',
+      label: 'Last Name',
+      type: 'String',
+      length: 100,
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 2,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactObjectDefId,
+      apiName: 'accountId',
+      label: 'Account',
+      type: 'Reference',
+      referenceObject: 'Account',
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 3,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+  ]);
+
+  const [contactDetailObjectId] = await knex('object_definitions').insert({
+    id: knex.raw('(UUID())'),
+    apiName: 'ContactDetail',
+    label: 'Contact Detail',
+    pluralLabel: 'Contact Details',
+    description: 'Polymorphic contact detail object',
+    isSystem: true,
+    isCustom: false,
+    created_at: knex.fn.now(),
+    updated_at: knex.fn.now(),
+  });
+
+  const contactDetailObjectDefId =
+    contactDetailObjectId ||
+    (await knex('object_definitions').where('apiName', 'ContactDetail').first())
+      .id;
+
+  await knex('field_definitions').insert([
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactDetailObjectDefId,
+      apiName: 'relatedObjectType',
+      label: 'Related Object Type',
+      type: 'String',
+      length: 100,
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 1,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactDetailObjectDefId,
+      apiName: 'relatedObjectId',
+      label: 'Related Object ID',
+      type: 'String',
+      length: 36,
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 2,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactDetailObjectDefId,
+      apiName: 'detailType',
+      label: 'Detail Type',
+      type: 'String',
+      length: 50,
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 3,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactDetailObjectDefId,
+      apiName: 'label',
+      label: 'Label',
+      type: 'String',
+      length: 100,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 4,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactDetailObjectDefId,
+      apiName: 'value',
+      label: 'Value',
+      type: 'Text',
+      isRequired: true,
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 5,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+    {
+      id: knex.raw('(UUID())'),
+      objectDefinitionId: contactDetailObjectDefId,
+      apiName: 'isPrimary',
+      label: 'Primary',
+      type: 'Boolean',
+      isSystem: true,
+      isCustom: false,
+      displayOrder: 6,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    },
+  ]);
+};
+
+exports.down = async function (knex) {
+  await knex.schema.dropTableIfExists('contact_details');
+  await knex.schema.dropTableIfExists('contacts');
+};

backend/prisma/schema.prisma

@@ -145,12 +145,42 @@ model Account {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  owner  User   @relation(fields: [ownerId], references: [id])
+  owner    User     @relation(fields: [ownerId], references: [id])
+  contacts Contact[]
 
   @@index([ownerId])
   @@map("accounts")
 }
 
+model Contact {
+  id        String   @id @default(uuid())
+  firstName String
+  lastName  String
+  accountId String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  account Account @relation(fields: [accountId], references: [id], onDelete: Cascade)
+
+  @@index([accountId])
+  @@map("contacts")
+}
+
+model ContactDetail {
+  id                String   @id @default(uuid())
+  relatedObjectType String
+  relatedObjectId   String
+  detailType        String
+  label             String?
+  value             String
+  isPrimary         Boolean  @default(false)
+  createdAt         DateTime @default(now())
+  updatedAt         DateTime @updatedAt
+
+  @@index([relatedObjectType, relatedObjectId])
+  @@map("contact_details")
+}
+
 // Application Builder
 model App {
   id          String   @id @default(uuid())

backend/src/models/contact-detail.model.ts

@@ -0,0 +1,13 @@
+import { BaseModel } from './base.model';
+
+export class ContactDetail extends BaseModel {
+  static tableName = 'contact_details';
+
+  id!: string;
+  relatedObjectType!: string;
+  relatedObjectId!: string;
+  detailType!: string;
+  label?: string;
+  value!: string;
+  isPrimary!: boolean;
+}

backend/src/models/contact.model.ts

@@ -0,0 +1,21 @@
+import { BaseModel } from './base.model';
+
+export class Contact extends BaseModel {
+  static tableName = 'contacts';
+
+  id!: string;
+  firstName!: string;
+  lastName!: string;
+  accountId!: string;
+
+  static relationMappings = {
+    account: {
+      relation: BaseModel.BelongsToOneRelation,
+      modelClass: 'account.model',
+      join: {
+        from: 'contacts.accountId',
+        to: 'accounts.id',
+      },
+    },
+  };
+}

backend/src/object/object.service.ts

@@ -3,7 +3,6 @@ import { TenantDatabaseService } from '../tenant/tenant-database.service';
 import { CustomMigrationService } from '../migration/custom-migration.service';
 import { ModelService } from './models/model.service';
 import { AuthorizationService } from '../rbac/authorization.service';
-import { SchemaManagementService } from './schema-management.service';
 import { ObjectDefinition } from '../models/object-definition.model';
 import { FieldDefinition } from '../models/field-definition.model';
 import { User } from '../models/user.model';
@@ -271,10 +270,6 @@ export class ObjectService {
       relationObject?: string;
       relationDisplayField?: string;
       defaultValue?: string;
-      length?: number;
-      precision?: number;
-      scale?: number;
-      uiMetadata?: any;
     },
   ) {
     const resolvedTenantId = await this.tenantDbService.resolveTenantId(tenantId);
@@ -287,11 +282,8 @@ export class ObjectService {
     // Use relationObject if provided (alias for referenceObject)
     const referenceObject = data.referenceObject || data.relationObject;
 
-    // Generate UUID in Node.js instead of using MySQL UUID() function
-    const fieldId = require('crypto').randomUUID();
-
     const fieldData: any = {
-      id: fieldId,
+      id: knex.raw('(UUID())'),
       objectDefinitionId: obj.id,
       apiName: data.apiName,
       label: data.label,
@@ -301,41 +293,20 @@ export class ObjectService {
       isUnique: data.isUnique ?? false,
       referenceObject: referenceObject,
       defaultValue: data.defaultValue,
-      length: data.length,
-      precision: data.precision,
-      scale: data.scale,
       created_at: knex.fn.now(),
       updated_at: knex.fn.now(),
     };
     
-    // Merge UI metadata
-    const uiMetadata: any = {};
+    // Store relationDisplayField in UI metadata if provided
     if (data.relationDisplayField) {
-      uiMetadata.relationDisplayField = data.relationDisplayField;
-    }
-    if (data.uiMetadata) {
-      Object.assign(uiMetadata, data.uiMetadata);
-    }
-    if (Object.keys(uiMetadata).length > 0) {
-      fieldData.ui_metadata = JSON.stringify(uiMetadata);
+      fieldData.ui_metadata = JSON.stringify({
+        relationDisplayField: data.relationDisplayField,
+      });
     }
     
-    await knex('field_definitions').insert(fieldData);
-    const createdField = await knex('field_definitions').where({ id: fieldId }).first();
-
-    // Add the column to the physical table
-    const schemaManagementService = new SchemaManagementService();
-    try {
-      await schemaManagementService.addFieldToTable(knex, objectApiName, createdField);
-      this.logger.log(`Added column ${data.apiName} to table for object ${objectApiName}`);
-    } catch (error) {
-      // If column creation fails, delete the field definition to maintain consistency
-      this.logger.error(`Failed to add column ${data.apiName}: ${error.message}`);
-      await knex('field_definitions').where({ id: fieldId }).delete();
-      throw new Error(`Failed to create field column: ${error.message}`);
-    }
+    const [id] = await knex('field_definitions').insert(fieldData);
     
-    return createdField;
+    return knex('field_definitions').where({ id }).first();
   }
 
   // Helper to get table name from object definition
@@ -394,7 +365,6 @@ export class ObjectService {
       'url': 'URL',
       'color': 'TEXT',
       'json': 'JSON',
-      'lookup': 'LOOKUP',
       'belongsTo': 'LOOKUP',
       'hasMany': 'LOOKUP',
       'manyToMany': 'LOOKUP',
@@ -772,219 +742,6 @@ export class ObjectService {
     return { success: true };
   }
 
-  /**
-   * Update a field definition
-   * Can update metadata (label, description, placeholder, helpText, etc.) safely
-   * Cannot update apiName or type if field has existing data (prevent data loss)
-   */
-  async updateFieldDefinition(
-    tenantId: string,
-    objectApiName: string,
-    fieldApiName: string,
-    data: Partial<{
-      label: string;
-      description: string;
-      isRequired: boolean;
-      isUnique: boolean;
-      defaultValue: string;
-      placeholder: string;
-      helpText: string;
-      displayOrder: number;
-      uiMetadata: Record<string, any>;
-    }>,
-  ) {
-    const resolvedTenantId = await this.tenantDbService.resolveTenantId(tenantId);
-    const knex = await this.tenantDbService.getTenantKnexById(resolvedTenantId);
-
-    // Get the object definition
-    const objectDef = await ObjectDefinition.query(knex)
-      .findOne({ apiName: objectApiName });
-    
-    if (!objectDef) {
-      throw new NotFoundException(`Object ${objectApiName} not found`);
-    }
-
-    // Get the field definition
-    const field = await knex('field_definitions')
-      .where({ objectDefinitionId: objectDef.id, apiName: fieldApiName })
-      .first();
-    
-    if (!field) {
-      throw new NotFoundException(`Field ${fieldApiName} not found`);
-    }
-
-    // Check if this field has data (count records)
-    const tableName = this.getTableName(objectApiName);
-    const recordCount = await knex(tableName).count('* as cnt').first();
-    const hasData = recordCount && (recordCount.cnt as number) > 0;
-
-    // Prepare update object
-    const updateData: any = {
-      updated_at: knex.fn.now(),
-    };
-
-    // Always allow these updates
-    if (data.label !== undefined) updateData.label = data.label;
-    if (data.description !== undefined) updateData.description = data.description;
-    if (data.displayOrder !== undefined) updateData.displayOrder = data.displayOrder;
-    
-    // Merge with existing uiMetadata
-    const existingMetadata = field.ui_metadata ? JSON.parse(field.ui_metadata) : {};
-    const newMetadata = { ...existingMetadata };
-    
-    if (data.placeholder !== undefined) newMetadata.placeholder = data.placeholder;
-    if (data.helpText !== undefined) newMetadata.helpText = data.helpText;
-    if (data.uiMetadata) {
-      Object.assign(newMetadata, data.uiMetadata);
-    }
-
-    if (Object.keys(newMetadata).length > 0) {
-      updateData.ui_metadata = JSON.stringify(newMetadata);
-    }
-
-    // Conditional updates based on data existence
-    if (data.isRequired !== undefined) {
-      if (hasData && data.isRequired && !field.isRequired) {
-        throw new Error('Cannot make a field required when data exists. Existing records may have null values.');
-      }
-      updateData.isRequired = data.isRequired;
-    }
-
-    if (data.isUnique !== undefined) {
-      if (hasData && data.isUnique && !field.isUnique) {
-        throw new Error('Cannot add unique constraint to field with existing data. Existing records may have duplicate values.');
-      }
-      updateData.isUnique = data.isUnique;
-    }
-
-    // Update the field definition
-    await knex('field_definitions')
-      .where({ id: field.id })
-      .update(updateData);
-
-    return knex('field_definitions').where({ id: field.id }).first();
-  }
-
-  /**
-   * Delete a field definition and clean up dependencies
-   * Removes the column from the physical table
-   * Removes field references from page layouts
-   * CASCADE deletion handles role_field_permissions
-   */
-  async deleteFieldDefinition(
-    tenantId: string,
-    objectApiName: string,
-    fieldApiName: string,
-  ) {
-    const resolvedTenantId = await this.tenantDbService.resolveTenantId(tenantId);
-    const knex = await this.tenantDbService.getTenantKnexById(resolvedTenantId);
-
-    // Get the object definition
-    const objectDef = await ObjectDefinition.query(knex)
-      .findOne({ apiName: objectApiName });
-    
-    if (!objectDef) {
-      throw new NotFoundException(`Object ${objectApiName} not found`);
-    }
-
-    // Get the field definition
-    const field = await knex('field_definitions')
-      .where({ objectDefinitionId: objectDef.id, apiName: fieldApiName })
-      .first();
-    
-    if (!field) {
-      throw new NotFoundException(`Field ${fieldApiName} not found`);
-    }
-
-    // Prevent deletion of system fields
-    const systemFieldNames = ['id', 'tenantId', 'ownerId', 'created_at', 'updated_at', 'createdAt', 'updatedAt'];
-    if (systemFieldNames.includes(fieldApiName)) {
-      throw new Error(`Cannot delete system field: ${fieldApiName}`);
-    }
-
-    // Clean up page layouts - remove field references from layoutConfig
-    try {
-      const pageLayouts = await knex('page_layouts')
-        .where({ object_id: objectDef.id });
-      
-      for (const layout of pageLayouts) {
-        // Handle JSON column that might already be parsed
-        let layoutConfig;
-        if (layout.layout_config) {
-          layoutConfig = typeof layout.layout_config === 'string' 
-            ? JSON.parse(layout.layout_config) 
-            : layout.layout_config;
-        } else {
-          layoutConfig = { fields: [] };
-        }
-        
-        // Filter out any field references for this field
-        if (layoutConfig.fields) {
-          layoutConfig.fields = layoutConfig.fields.filter(
-            (f: any) => f.fieldId !== field.id,
-          );
-        }
-        
-        // Update the page layout
-        await knex('page_layouts')
-          .where({ id: layout.id })
-          .update({
-            layout_config: JSON.stringify(layoutConfig),
-            updated_at: knex.fn.now(),
-          });
-      }
-    } catch (error) {
-      // If page layouts table doesn't exist or query fails, log but continue
-      this.logger.warn(`Could not update page layouts for field deletion: ${error.message}`);
-    }
-
-    // Clean up dependsOn references in other fields
-    const otherFields = await knex('field_definitions')
-      .where({ objectDefinitionId: objectDef.id })
-      .whereNot({ id: field.id });
-    
-    for (const otherField of otherFields) {
-      // Handle JSON column that might already be parsed
-      let metadata;
-      if (otherField.ui_metadata) {
-        metadata = typeof otherField.ui_metadata === 'string'
-          ? JSON.parse(otherField.ui_metadata)
-          : otherField.ui_metadata;
-      } else {
-        metadata = {};
-      }
-      
-      if (metadata.dependsOn && Array.isArray(metadata.dependsOn)) {
-        metadata.dependsOn = metadata.dependsOn.filter(
-          (dep: any) => dep !== field.apiName,
-        );
-        
-        await knex('field_definitions')
-          .where({ id: otherField.id })
-          .update({
-            ui_metadata: JSON.stringify(metadata),
-            updated_at: knex.fn.now(),
-          });
-      }
-    }
-
-    // Remove the column from the physical table
-    const tableName = this.getTableName(objectApiName);
-    const schemaManagementService = new SchemaManagementService();
-    
-    try {
-      await schemaManagementService.removeFieldFromTable(knex, objectApiName, fieldApiName);
-    } catch (error) {
-      this.logger.warn(`Failed to remove column ${fieldApiName} from table ${tableName}: ${error.message}`);
-      // Continue with deletion even if column removal fails - field definition must be cleaned up
-    }
-
-    // Delete the field definition (CASCADE will delete role_field_permissions)
-    await knex('field_definitions').where({ id: field.id }).delete();
-
-    return { success: true };
-  }
-
   async getFieldPermissions(tenantId: string, objectId: string) {
     const resolvedTenantId = await this.tenantDbService.resolveTenantId(tenantId);
     const knex = await this.tenantDbService.getTenantKnexById(resolvedTenantId);

backend/src/object/schema-management.service.ts

@@ -71,37 +71,6 @@ export class SchemaManagementService {
     this.logger.log(`Removed field ${fieldApiName} from table ${tableName}`);
   }
 
-  /**
-   * Alter a field in an existing object table
-   * Handles safe updates like changing NOT NULL or constraints
-   * Warns about potentially destructive operations
-   */
-  async alterFieldInTable(
-    knex: Knex,
-    objectApiName: string,
-    fieldApiName: string,
-    field: FieldDefinition,
-    options?: {
-      skipTypeChange?: boolean; // Skip if type change would lose data
-    },
-  ) {
-    const tableName = this.getTableName(objectApiName);
-    const skipTypeChange = options?.skipTypeChange ?? true;
-
-    await knex.schema.alterTable(tableName, (table) => {
-      // Drop the existing column and recreate with new definition
-      // Note: This approach works for metadata changes, but type changes may need data migration
-      table.dropColumn(fieldApiName);
-    });
-
-    // Recreate the column with new definition
-    await knex.schema.alterTable(tableName, (table) => {
-      this.addFieldColumn(table, field);
-    });
-
-    this.logger.log(`Altered field ${fieldApiName} in table ${tableName}`);
-  }
-
   /**
    * Drop an object table
    */
@@ -125,30 +94,15 @@ export class SchemaManagementService {
     let column: Knex.ColumnBuilder;
 
     switch (field.type) {
-      // Text types
       case 'String':
-      case 'TEXT':
-      case 'EMAIL':
-      case 'PHONE':
-      case 'URL':
         column = table.string(columnName, field.length || 255);
         break;
 
       case 'Text':
-      case 'LONG_TEXT':
         column = table.text(columnName);
         break;
 
-      case 'PICKLIST':
-      case 'MULTI_PICKLIST':
-        column = table.string(columnName, 255);
-        break;
-
-      // Numeric types
       case 'Number':
-      case 'NUMBER':
-      case 'CURRENCY':
-      case 'PERCENT':
         if (field.scale && field.scale > 0) {
           column = table.decimal(
             columnName,
@@ -161,28 +115,18 @@ export class SchemaManagementService {
         break;
 
       case 'Boolean':
-      case 'BOOLEAN':
         column = table.boolean(columnName).defaultTo(false);
         break;
 
-      // Date types
       case 'Date':
-      case 'DATE':
         column = table.date(columnName);
         break;
 
       case 'DateTime':
-      case 'DATE_TIME':
         column = table.datetime(columnName);
         break;
 
-      case 'TIME':
-        column = table.time(columnName);
-        break;
-
-      // Relationship types
       case 'Reference':
-      case 'LOOKUP':
         column = table.uuid(columnName);
         if (field.referenceObject) {
           const refTableName = this.getTableName(field.referenceObject);
@@ -190,30 +134,19 @@ export class SchemaManagementService {
         }
         break;
 
-      // Email (legacy)
       case 'Email':
         column = table.string(columnName, 255);
         break;
 
-      // Phone (legacy)
       case 'Phone':
         column = table.string(columnName, 50);
         break;
 
-      // Url (legacy)
       case 'Url':
         column = table.string(columnName, 255);
         break;
 
-      // File types
-      case 'FILE':
-      case 'IMAGE':
-        column = table.text(columnName); // Store file path or URL
-        break;
-
-      // JSON
       case 'Json':
-      case 'JSON':
         column = table.json(columnName);
         break;
 

backend/src/object/setup-object.controller.ts

@@ -4,7 +4,6 @@ import {
   Post,
   Patch,
   Put,
-  Delete,
   Param,
   Body,
   UseGuards,
@@ -73,35 +72,6 @@ export class SetupObjectController {
     return this.fieldMapperService.mapFieldToDTO(field);
   }
 
-  @Put(':objectApiName/fields/:fieldApiName')
-  async updateFieldDefinition(
-    @TenantId() tenantId: string,
-    @Param('objectApiName') objectApiName: string,
-    @Param('fieldApiName') fieldApiName: string,
-    @Body() data: any,
-  ) {
-    const field = await this.objectService.updateFieldDefinition(
-      tenantId,
-      objectApiName,
-      fieldApiName,
-      data,
-    );
-    return this.fieldMapperService.mapFieldToDTO(field);
-  }
-
-  @Delete(':objectApiName/fields/:fieldApiName')
-  async deleteFieldDefinition(
-    @TenantId() tenantId: string,
-    @Param('objectApiName') objectApiName: string,
-    @Param('fieldApiName') fieldApiName: string,
-  ) {
-    return this.objectService.deleteFieldDefinition(
-      tenantId,
-      objectApiName,
-      fieldApiName,
-    );
-  }
-
   @Patch(':objectApiName')
   async updateObjectDefinition(
     @TenantId() tenantId: string,

frontend/components/fields/FieldAttributesCommon.vue

@@ -1,195 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <!-- Label -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Label</label>
-      <div class="col-span-3">
-        <input
-          v-model="formData.label"
-          type="text"
-          placeholder="Display name for this field"
-          class="w-full px-3 py-2 border rounded-md text-sm"
-        />
-      </div>
-    </div>
-
-    <!-- API Name (Read-only if editing existing field) -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">API Name</label>
-      <div class="col-span-3">
-        <input
-          v-model="formData.apiName"
-          type="text"
-          placeholder="e.g., accountName"
-          :disabled="isEditing"
-          class="w-full px-3 py-2 border rounded-md text-sm disabled:bg-gray-100 disabled:text-gray-600"
-        />
-        <p v-if="isEditing" class="text-xs text-gray-500 mt-1">
-          Cannot change API name on existing fields
-        </p>
-      </div>
-    </div>
-
-    <!-- Description -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Description</label>
-      <div class="col-span-3">
-        <textarea
-          v-model="formData.description"
-          placeholder="Describe the purpose of this field"
-          rows="3"
-          class="w-full px-3 py-2 border rounded-md text-sm"
-        />
-      </div>
-    </div>
-
-    <!-- Placeholder -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Placeholder</label>
-      <div class="col-span-3">
-        <input
-          v-model="formData.placeholder"
-          type="text"
-          placeholder="e.g., Enter account name"
-          class="w-full px-3 py-2 border rounded-md text-sm"
-        />
-      </div>
-    </div>
-
-    <!-- Help Text -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Help Text</label>
-      <div class="col-span-3">
-        <textarea
-          v-model="formData.helpText"
-          placeholder="Additional guidance for users"
-          rows="2"
-          class="w-full px-3 py-2 border rounded-md text-sm"
-        />
-      </div>
-    </div>
-
-    <!-- Display Order -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Display Order</label>
-      <div class="col-span-3">
-        <input
-          v-model.number="formData.displayOrder"
-          type="number"
-          class="w-full px-3 py-2 border rounded-md text-sm"
-        />
-      </div>
-    </div>
-
-    <!-- Required -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Required</label>
-      <div class="col-span-3 flex items-center">
-        <input
-          v-model="formData.isRequired"
-          type="checkbox"
-          class="w-4 h-4 border rounded"
-        />
-        <span class="ml-2 text-sm text-gray-600">
-          {{ formData.isRequired ? 'Yes, this field is required' : 'No, this field is optional' }}
-        </span>
-        <p v-if="hasData && !wasRequired && formData.isRequired" class="ml-2 text-xs text-red-600">
-          ⚠️ Existing records may have empty values
-        </p>
-      </div>
-    </div>
-
-    <!-- Unique -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Unique</label>
-      <div class="col-span-3 flex items-center">
-        <input
-          v-model="formData.isUnique"
-          type="checkbox"
-          class="w-4 h-4 border rounded"
-        />
-        <span class="ml-2 text-sm text-gray-600">
-          {{ formData.isUnique ? 'Yes, values must be unique' : 'No, duplicate values allowed' }}
-        </span>
-        <p v-if="hasData && !wasUnique && formData.isUnique" class="ml-2 text-xs text-red-600">
-          ⚠️ Existing records may have duplicate values
-        </p>
-      </div>
-    </div>
-
-    <!-- Default Value -->
-    <div class="grid grid-cols-4 gap-4">
-      <label class="text-sm font-medium leading-8">Default Value</label>
-      <div class="col-span-3">
-        <input
-          v-model="formData.defaultValue"
-          type="text"
-          placeholder="Value used when field is not provided"
-          class="w-full px-3 py-2 border rounded-md text-sm"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
-
-interface Props {
-  label?: string
-  apiName?: string
-  description?: string
-  placeholder?: string
-  helpText?: string
-  displayOrder?: number
-  isRequired?: boolean
-  isUnique?: boolean
-  defaultValue?: string
-  isEditing?: boolean
-  hasData?: boolean
-}
-
-interface Emits {
-  (e: 'update', data: any): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  apiName: '',
-  description: '',
-  placeholder: '',
-  helpText: '',
-  displayOrder: 0,
-  isRequired: false,
-  isUnique: false,
-  defaultValue: '',
-  isEditing: false,
-  hasData: false,
-})
-
-const emit = defineEmits<Emits>()
-
-const formData = ref({
-  label: props.label,
-  apiName: props.apiName,
-  description: props.description,
-  placeholder: props.placeholder,
-  helpText: props.helpText,
-  displayOrder: props.displayOrder,
-  isRequired: props.isRequired,
-  isUnique: props.isUnique,
-  defaultValue: props.defaultValue,
-})
-
-const wasRequired = ref(props.isRequired)
-const wasUnique = ref(props.isUnique)
-
-onMounted(() => {
-  wasRequired.value = props.isRequired
-  wasUnique.value = props.isUnique
-})
-
-watch(formData, (newVal) => {
-  emit('update', newVal)
-}, { deep: true })
-</script>

frontend/components/fields/FieldAttributesType.vue

@@ -1,296 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <!-- Text Field Attributes -->
-    <div v-if="fieldType === 'text'" class="space-y-4">
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Max Length</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.maxLength"
-            type="number"
-            min="1"
-            max="65535"
-            placeholder="Maximum character length (default: 255)"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Textarea Attributes -->
-    <div v-if="fieldType === 'textarea'" class="space-y-4">
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Default Rows</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.rows"
-            type="number"
-            min="2"
-            max="20"
-            :placeholder="`Default: 4 rows`"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Number Field Attributes -->
-    <div v-if="fieldType === 'number'" class="space-y-4">
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Decimal Places</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.scale"
-            type="number"
-            min="0"
-            max="10"
-            placeholder="0 for integers, 2 for decimals"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Min Value</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.min"
-            type="number"
-            placeholder="Minimum allowed value"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Max Value</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.max"
-            type="number"
-            placeholder="Maximum allowed value"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Currency Field Attributes -->
-    <div v-if="fieldType === 'currency'" class="space-y-4">
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Currency Symbol</label>
-        <div class="col-span-3">
-          <input
-            v-model="attributes.prefix"
-            type="text"
-            placeholder="e.g., $, €, ¥"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Decimal Places</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.scale"
-            type="number"
-            min="0"
-            max="4"
-            placeholder="Default: 2"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Min Value</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.min"
-            type="number"
-            placeholder="Minimum allowed value"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Max Value</label>
-        <div class="col-span-3">
-          <input
-            v-model.number="attributes.max"
-            type="number"
-            placeholder="Maximum allowed value"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Select/Picklist Attributes -->
-    <div v-if="fieldType === 'select' || fieldType === 'multiSelect'" class="space-y-4">
-      <div class="border rounded-lg p-4 bg-gray-50">
-        <div class="flex items-center justify-between mb-4">
-          <label class="text-sm font-medium">Options</label>
-          <button
-            type="button"
-            @click="addOption"
-            class="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700"
-          >
-            Add Option
-          </button>
-        </div>
-        
-        <div class="space-y-2">
-          <div
-            v-for="(option, index) in attributes.options"
-            :key="index"
-            class="flex gap-2 items-center bg-white p-3 rounded border"
-          >
-            <input
-              v-model="option.value"
-              type="text"
-              placeholder="Value"
-              class="flex-1 px-2 py-1 border rounded text-sm"
-            />
-            <input
-              v-model="option.label"
-              type="text"
-              placeholder="Label"
-              class="flex-1 px-2 py-1 border rounded text-sm"
-            />
-            <button
-              type="button"
-              @click="removeOption(index)"
-              class="text-red-600 hover:text-red-800 text-sm font-medium"
-            >
-              Remove
-            </button>
-          </div>
-        </div>
-
-        <p v-if="!attributes.options || attributes.options.length === 0" class="text-sm text-gray-500 mt-4">
-          No options defined yet
-        </p>
-      </div>
-    </div>
-
-    <!-- Date Field Attributes -->
-    <div v-if="fieldType === 'date' || fieldType === 'datetime'" class="space-y-4">
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Include Time</label>
-        <div class="col-span-3 flex items-center">
-          <input
-            v-if="fieldType === 'datetime'"
-            :checked="true"
-            type="checkbox"
-            disabled
-            class="w-4 h-4 border rounded"
-          />
-          <span class="ml-2 text-sm text-gray-600">{{ fieldType === 'datetime' ? 'Yes' : 'No' }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Lookup Field Attributes -->
-    <div v-if="fieldType === 'lookup' || fieldType === 'belongsTo'" class="space-y-4">
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Related Object</label>
-        <div class="col-span-3">
-          <input
-            v-model="attributes.relationObject"
-            type="text"
-            disabled
-            placeholder="Selected during field creation"
-            class="w-full px-3 py-2 border rounded-md text-sm bg-gray-100 disabled:text-gray-600"
-          />
-          <p class="text-xs text-gray-500 mt-1">Cannot change relationship after creation</p>
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-4">
-        <label class="text-sm font-medium leading-8">Display Field</label>
-        <div class="col-span-3">
-          <input
-            v-model="attributes.relationDisplayField"
-            type="text"
-            placeholder="e.g., name, label (field to show in lookup)"
-            class="w-full px-3 py-2 border rounded-md text-sm"
-          />
-          <p class="text-xs text-gray-500 mt-1">Which field from the related object to display</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-interface FieldOption {
-  value: string | number
-  label: string
-}
-
-interface TypeAttributes {
-  maxLength?: number
-  rows?: number
-  scale?: number
-  min?: number
-  max?: number
-  prefix?: string
-  suffix?: string
-  options?: FieldOption[]
-  relationObject?: string
-  relationDisplayField?: string
-}
-
-interface Props {
-  fieldType: string
-  attributes?: TypeAttributes
-}
-
-interface Emits {
-  (e: 'update', data: TypeAttributes): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  fieldType: 'text',
-  attributes: () => ({}),
-})
-
-const emit = defineEmits<Emits>()
-
-const attributes = ref<TypeAttributes>({
-  ...props.attributes,
-})
-
-watch(
-  () => props.fieldType,
-  (newType) => {
-    // Reset attributes when field type changes
-    attributes.value = {}
-  },
-)
-
-const addOption = () => {
-  if (!attributes.value.options) {
-    attributes.value.options = []
-  }
-  attributes.value.options.push({
-    value: '',
-    label: '',
-  })
-  emit('update', attributes.value)
-}
-
-const removeOption = (index: number) => {
-  if (attributes.value.options) {
-    attributes.value.options.splice(index, 1)
-    emit('update', attributes.value)
-  }
-}
-
-watch(
-  attributes,
-  (newVal) => {
-    emit('update', newVal)
-  },
-  { deep: true },
-)
-</script>

frontend/components/fields/FieldRenderer.vue

@@ -21,8 +21,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  // Default to runtime objects endpoint; override when consuming central entities
-  baseUrl: '/runtime/objects',
+  baseUrl: '/central',
 })
 
 const emit = defineEmits<{

frontend/components/fields/FieldTypeSelector.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <label class="text-sm font-medium">Field Type</label>
-    
-    <div class="grid grid-cols-2 gap-4">
-      <!-- Text Fields -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'text' }"
-        @click="$emit('update:modelValue', 'text')">
-        <div class="font-medium text-sm">Text</div>
-        <div class="text-xs text-gray-600">Single line text input</div>
-      </div>
-
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'textarea' }"
-        @click="$emit('update:modelValue', 'textarea')">
-        <div class="font-medium text-sm">Textarea</div>
-        <div class="text-xs text-gray-600">Multi-line text input</div>
-      </div>
-
-      <!-- Email & Phone -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'email' }"
-        @click="$emit('update:modelValue', 'email')">
-        <div class="font-medium text-sm">Email</div>
-        <div class="text-xs text-gray-600">Email with validation</div>
-      </div>
-
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'phone' }"
-        @click="$emit('update:modelValue', 'phone')">
-        <div class="font-medium text-sm">Phone</div>
-        <div class="text-xs text-gray-600">Phone number input</div>
-      </div>
-
-      <!-- Numeric Fields -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'number' }"
-        @click="$emit('update:modelValue', 'number')">
-        <div class="font-medium text-sm">Number</div>
-        <div class="text-xs text-gray-600">Integer or decimal</div>
-      </div>
-
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'currency' }"
-        @click="$emit('update:modelValue', 'currency')">
-        <div class="font-medium text-sm">Currency</div>
-        <div class="text-xs text-gray-600">Money amount with symbol</div>
-      </div>
-
-      <!-- Selection Fields -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'select' }"
-        @click="$emit('update:modelValue', 'select')">
-        <div class="font-medium text-sm">Picklist</div>
-        <div class="text-xs text-gray-600">Dropdown with predefined options</div>
-      </div>
-
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'multiSelect' }"
-        @click="$emit('update:modelValue', 'multiSelect')">
-        <div class="font-medium text-sm">Multi-select</div>
-        <div class="text-xs text-gray-600">Select multiple options</div>
-      </div>
-
-      <!-- Boolean -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'boolean' }"
-        @click="$emit('update:modelValue', 'boolean')">
-        <div class="font-medium text-sm">Checkbox</div>
-        <div class="text-xs text-gray-600">True/False toggle</div>
-      </div>
-
-      <!-- Date Fields -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'date' }"
-        @click="$emit('update:modelValue', 'date')">
-        <div class="font-medium text-sm">Date</div>
-        <div class="text-xs text-gray-600">Date picker without time</div>
-      </div>
-
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'datetime' }"
-        @click="$emit('update:modelValue', 'datetime')">
-        <div class="font-medium text-sm">DateTime</div>
-        <div class="text-xs text-gray-600">Date and time picker</div>
-      </div>
-
-      <!-- Relationship Fields -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'lookup' }"
-        @click="$emit('update:modelValue', 'lookup')">
-        <div class="font-medium text-sm">Lookup</div>
-        <div class="text-xs text-gray-600">Link to another object</div>
-      </div>
-
-      <!-- Rich Content -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'markdown' }"
-        @click="$emit('update:modelValue', 'markdown')">
-        <div class="font-medium text-sm">Rich Text</div>
-        <div class="text-xs text-gray-600">Markdown editor</div>
-      </div>
-
-      <!-- File -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'file' }"
-        @click="$emit('update:modelValue', 'file')">
-        <div class="font-medium text-sm">File</div>
-        <div class="text-xs text-gray-600">File upload</div>
-      </div>
-
-      <!-- URL -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'url' }"
-        @click="$emit('update:modelValue', 'url')">
-        <div class="font-medium text-sm">URL</div>
-        <div class="text-xs text-gray-600">Web address with validation</div>
-      </div>
-
-      <!-- Color -->
-      <div class="border rounded-lg p-4 cursor-pointer hover:bg-blue-50"
-        :class="{ 'bg-blue-100 border-blue-500': modelValue === 'color' }"
-        @click="$emit('update:modelValue', 'color')">
-        <div class="font-medium text-sm">Color</div>
-        <div class="text-xs text-gray-600">Color picker</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  modelValue: string
-}>()
-
-defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-</script>

frontend/components/fields/LookupField.vue

@@ -16,8 +16,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  // Default to runtime objects endpoint; override when consuming central entities
-  baseUrl: '/runtime/objects',
+  baseUrl: '/central',
   modelValue: null,
 })
 

frontend/pages/setup/objects/[apiName].vue

@@ -24,78 +24,32 @@
 
               <!-- Fields Tab -->
               <TabsContent value="fields" class="mt-6">
-                <div class="space-y-4">
-                  <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-semibold">Fields</h2>
-                    <Button @click="openFieldDialog('create')">
-                      <Plus class="w-4 h-4 mr-2" />
-                      New Field
-                    </Button>
-                  </div>
-
-                  <div v-if="!object.fields || object.fields.length === 0" class="text-center py-8 text-muted-foreground">
-                    No fields defined yet. Create one to get started.
-                  </div>
-
-                  <div v-else class="space-y-2">
-                    <div
-                      v-for="field in object.fields"
-                      :key="field.id"
-                      class="p-4 border rounded-lg bg-card hover:border-primary transition-colors"
-                    >
-                      <div class="flex items-center justify-between">
-                        <div class="flex-1">
-                          <h3 class="font-semibold">{{ field.label }}</h3>
-                          <p class="text-sm text-muted-foreground">
-                            Type: <span class="font-medium">{{ formatFieldType(field.type) }}</span> | API Name: <span class="font-mono">{{ field.apiName }}</span>
-                          </p>
-                          <p v-if="field.description" class="text-sm text-muted-foreground mt-1">
-                            {{ field.description }}
-                          </p>
-                        </div>
-                        <div class="flex items-center gap-3">
-                          <div class="flex gap-2 text-xs">
-                            <span
-                              v-if="field.isRequired"
-                              class="px-2 py-1 bg-destructive/10 text-destructive rounded"
-                            >
-                              Required
-                            </span>
-                            <span
-                              v-if="field.isUnique"
-                              class="px-2 py-1 bg-primary/10 text-primary rounded"
-                            >
-                              Unique
-                            </span>
-                            <span
-                              v-if="field.isSystem"
-                              class="px-2 py-1 bg-gray-200 text-gray-700 rounded text-xs"
-                            >
-                              System
-                            </span>
-                          </div>
-                          <div class="flex gap-2">
-                            <Button
-                              v-if="!field.isSystem"
-                              variant="ghost"
-                              size="sm"
-                              @click="openFieldDialog('edit', field)"
-                              title="Edit field"
-                            >
-                              ✏️
-                            </Button>
-                            <Button
-                              v-if="!field.isSystem"
-                              variant="ghost"
-                              size="sm"
-                              class="text-destructive hover:text-destructive"
-                              @click="deleteField(field)"
-                              title="Delete field"
-                            >
-                              <Trash2 class="w-4 h-4" />
-                            </Button>
-                          </div>
-                        </div>
+                <div class="space-y-2">
+                  <div
+                    v-for="field in object.fields"
+                    :key="field.id"
+                    class="p-4 border rounded-lg bg-card"
+                  >
+                    <div class="flex items-center justify-between">
+                      <div>
+                        <h3 class="font-semibold">{{ field.label }}</h3>
+                        <p class="text-sm text-muted-foreground">
+                          Type: {{ field.type }} | API Name: {{ field.apiName }}
+                        </p>
+                      </div>
+                      <div class="flex gap-2 text-xs">
+                        <span
+                          v-if="field.isRequired"
+                          class="px-2 py-1 bg-destructive/10 text-destructive rounded"
+                        >
+                          Required
+                        </span>
+                        <span
+                          v-if="field.isUnique"
+                          class="px-2 py-1 bg-primary/10 text-primary rounded"
+                        >
+                          Unique
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -187,107 +141,6 @@
           </div>
         </div>
       </main>
-
-      <!-- Field Management Dialog -->
-      <Teleport to="body">
-        <div
-          v-if="showFieldDialog"
-          class="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]"
-        >
-          <div class="bg-white rounded-lg shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
-            <div class="sticky top-0 bg-white border-b p-6 flex items-center justify-between">
-              <h2 class="text-2xl font-bold">
-                {{ fieldDialogMode === 'create' ? 'Create New Field' : 'Edit Field' }}
-              </h2>
-              <button
-                @click="closeFieldDialog"
-                class="text-gray-500 hover:text-gray-700 text-2xl font-bold"
-              >
-                ×
-              </button>
-            </div>
-
-            <div class="p-6 space-y-6">
-              <!-- Field Type Selection (only for creation) -->
-              <div v-if="fieldDialogMode === 'create'">
-                <FieldTypeSelector
-                  v-model="fieldForm.type"
-                />
-              </div>
-
-              <!-- Common Attributes -->
-              <div v-if="fieldForm.type">
-                <h3 class="text-lg font-semibold mb-4">Basic Properties</h3>
-                <FieldAttributesCommon
-                  :label="fieldForm.label"
-                  :api-name="fieldForm.apiName"
-                  :description="fieldForm.description"
-                  :placeholder="fieldForm.placeholder"
-                  :help-text="fieldForm.helpText"
-                  :display-order="fieldForm.displayOrder"
-                  :is-required="fieldForm.isRequired"
-                  :is-unique="fieldForm.isUnique"
-                  :default-value="fieldForm.defaultValue"
-                  :is-editing="fieldDialogMode === 'edit'"
-                  :has-data="fieldForm.hasData"
-                  @update="updateCommonAttributes"
-                />
-              </div>
-
-              <!-- Type-Specific Attributes -->
-              <div v-if="fieldForm.type">
-                <h3 class="text-lg font-semibold mb-4">Type-Specific Settings</h3>
-                <FieldAttributesType
-                  :field-type="fieldForm.type"
-                  :attributes="fieldForm.typeAttributes"
-                  @update="updateTypeAttributes"
-                />
-              </div>
-
-              <!-- Lookup Field Selection -->
-              <div v-if="(fieldForm.type === 'lookup' || fieldForm.type === 'belongsTo') && fieldDialogMode === 'create'">
-                <h3 class="text-lg font-semibold mb-4">Related Object</h3>
-                <div class="grid grid-cols-4 gap-4">
-                  <label class="text-sm font-medium leading-8">Select Object</label>
-                  <div class="col-span-3">
-                    <select
-                      v-model="fieldForm.referenceObject"
-                      class="w-full px-3 py-2 border rounded-md text-sm"
-                    >
-                      <option value="">-- Select an object --</option>
-                      <option
-                        v-for="obj in availableObjects"
-                        :key="obj.id"
-                        :value="obj.apiName"
-                      >
-                        {{ obj.label }} ({{ obj.apiName }})
-                      </option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Error Message -->
-              <div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm">
-                {{ fieldDialogError }}
-              </div>
-
-              <!-- Action Buttons -->
-              <div class="flex gap-3 justify-end pt-4">
-                <Button variant="outline" @click="closeFieldDialog">
-                  Cancel
-                </Button>
-                <Button
-                  :disabled="!fieldForm.label || !fieldForm.apiName || !fieldForm.type"
-                  @click="saveField"
-                >
-                  {{ fieldDialogMode === 'create' ? 'Create Field' : 'Update Field' }}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Teleport>
     </NuxtLayout>
   </div>
 </template>
@@ -298,9 +151,6 @@ import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import PageLayoutEditor from '@/components/PageLayoutEditor.vue'
 import ObjectAccessSettings from '@/components/ObjectAccessSettings.vue'
-import FieldTypeSelector from '@/components/fields/FieldTypeSelector.vue'
-import FieldAttributesCommon from '@/components/fields/FieldAttributesCommon.vue'
-import FieldAttributesType from '@/components/fields/FieldAttributesType.vue'
 import type { PageLayout, FieldLayoutItem } from '~/types/page-layout'
 
 const route = useRoute()
@@ -318,81 +168,6 @@ const layouts = ref<PageLayout[]>([])
 const loadingLayouts = ref(false)
 const selectedLayout = ref<PageLayout | null>(null)
 
-// Field management state
-const showFieldDialog = ref(false)
-const fieldDialogMode = ref<'create' | 'edit'>('create')
-const fieldDialogError = ref<string | null>(null)
-const availableObjects = ref<any[]>([])
-const fieldForm = ref({
-  id: '',
-  label: '',
-  apiName: '',
-  type: '',
-  description: '',
-  placeholder: '',
-  helpText: '',
-  displayOrder: 0,
-  isRequired: false,
-  isUnique: false,
-  defaultValue: '',
-  referenceObject: '',
-  typeAttributes: {},
-  hasData: false,
-})
-
-// Helper to format field type names
-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',
-  }
-  return typeNames[type] || type
-}
-
-const convertFrontendToBackendType = (frontendType: string): string => {
-  const typeMap: Record<string, string> = {
-    'text': 'TEXT',
-    'textarea': 'LONG_TEXT',
-    'password': 'TEXT',
-    'email': 'EMAIL',
-    'number': 'NUMBER',
-    'currency': 'CURRENCY',
-    'percent': 'PERCENT',
-    'select': 'PICKLIST',
-    'multiSelect': 'MULTI_PICKLIST',
-    'boolean': 'BOOLEAN',
-    'date': 'DATE',
-    'datetime': 'DATE_TIME',
-    'time': 'TIME',
-    'url': 'URL',
-    'color': 'TEXT',
-    'json': 'JSON',
-    'lookup': 'LOOKUP',
-    'belongsTo': 'LOOKUP',
-    'markdown': 'LONG_TEXT',
-    'code': 'LONG_TEXT',
-    'file': 'FILE',
-    'image': 'IMAGE',
-  }
-  return typeMap[frontendType] || 'TEXT'
-}
-
 const fetchObject = async () => {
   try {
     loading.value = true
@@ -405,14 +180,6 @@ const fetchObject = async () => {
   }
 }
 
-const fetchAvailableObjects = async () => {
-  try {
-    availableObjects.value = await api.get('/setup/objects')
-  } catch (e: any) {
-    console.error('Error fetching available objects:', e)
-  }
-}
-
 const fetchLayouts = async () => {
   if (!object.value) return
   
@@ -427,253 +194,6 @@ const fetchLayouts = async () => {
   }
 }
 
-const openFieldDialog = async (mode: 'create' | 'edit', field?: any) => {
-  fieldDialogMode.value = mode
-  fieldDialogError.value = null
-
-  if (mode === 'create') {
-    await fetchAvailableObjects()
-    fieldForm.value = {
-      id: '',
-      label: '',
-      apiName: '',
-      type: '',
-      description: '',
-      placeholder: '',
-      helpText: '',
-      displayOrder: (object.value?.fields?.length || 0) + 1,
-      isRequired: false,
-      isUnique: false,
-      defaultValue: '',
-      referenceObject: '',
-      typeAttributes: {},
-      hasData: false,
-    }
-  } else if (field) {
-    // Load field data for editing
-    const uiMetadata = field.ui_metadata ? JSON.parse(field.ui_metadata) : {}
-    fieldForm.value = {
-      id: field.id,
-      label: field.label,
-      apiName: field.apiName,
-      type: convertBackendToFrontendType(field.type),
-      description: field.description || '',
-      placeholder: uiMetadata.placeholder || '',
-      helpText: uiMetadata.helpText || '',
-      displayOrder: field.displayOrder || 0,
-      isRequired: field.isRequired || false,
-      isUnique: field.isUnique || false,
-      defaultValue: field.defaultValue || '',
-      referenceObject: field.referenceObject || '',
-      typeAttributes: extractTypeAttributes(field, uiMetadata),
-      hasData: false, // Would need to fetch this from backend
-    }
-  }
-
-  showFieldDialog.value = true
-}
-
-const convertBackendToFrontendType = (backendType: string): string => {
-  const typeMap: Record<string, string> = {
-    'TEXT': 'text',
-    'LONG_TEXT': 'textarea',
-    'EMAIL': 'email',
-    'PHONE': 'phone',
-    'NUMBER': 'number',
-    'CURRENCY': 'currency',
-    'PERCENT': 'percent',
-    'PICKLIST': 'select',
-    'MULTI_PICKLIST': 'multiSelect',
-    'BOOLEAN': 'boolean',
-    'DATE': 'date',
-    'DATE_TIME': 'datetime',
-    'TIME': 'time',
-    'URL': 'url',
-    'LOOKUP': 'lookup',
-    'FILE': 'file',
-    'IMAGE': 'image',
-    'JSON': 'json',
-  }
-  return typeMap[backendType] || 'text'
-}
-
-const extractTypeAttributes = (field: any, uiMetadata: any): any => {
-  const attrs: any = {}
-
-  if (field.type === 'PICKLIST' || field.type === 'MULTI_PICKLIST') {
-    attrs.options = uiMetadata.options || []
-  }
-
-  if (field.type === 'NUMBER' || field.type === 'CURRENCY') {
-    attrs.scale = field.scale || 0
-    attrs.min = uiMetadata.min
-    attrs.max = uiMetadata.max
-    if (field.type === 'CURRENCY') {
-      attrs.prefix = uiMetadata.prefix || '$'
-    }
-  }
-
-  if (field.type === 'TEXT' && field.length) {
-    attrs.maxLength = field.length
-  }
-
-  if (field.type === 'LONG_TEXT' && uiMetadata.rows) {
-    attrs.rows = uiMetadata.rows
-  }
-
-  if (field.type === 'LOOKUP') {
-    attrs.relationObject = field.referenceObject
-    attrs.relationDisplayField = uiMetadata.relationDisplayField || 'name'
-  }
-
-  return attrs
-}
-
-const closeFieldDialog = () => {
-  showFieldDialog.value = false
-  fieldDialogError.value = null
-}
-
-const updateCommonAttributes = (data: any) => {
-  Object.assign(fieldForm.value, data)
-}
-
-const updateTypeAttributes = (data: any) => {
-  fieldForm.value.typeAttributes = data
-}
-
-const saveField = async () => {
-  fieldDialogError.value = null
-
-  try {
-    // Validate
-    if (!fieldForm.value.label || !fieldForm.value.apiName || !fieldForm.value.type) {
-      fieldDialogError.value = 'Please fill in all required fields'
-      return
-    }
-
-    const apiName = route.params.apiName as string
-
-    // Prepare payload
-    const payload: any = {
-      label: fieldForm.value.label,
-      apiName: fieldForm.value.apiName,
-      type: fieldForm.value.type, // Use frontend type, backend will convert
-      description: fieldForm.value.description,
-      isRequired: fieldForm.value.isRequired,
-      isUnique: fieldForm.value.isUnique,
-      defaultValue: fieldForm.value.defaultValue,
-    }
-
-    // Extract type-specific database fields
-    const typeAttrs = fieldForm.value.typeAttributes || {}
-    
-    // For text fields
-    if (fieldForm.value.type === 'text' && typeAttrs.maxLength) {
-      payload.length = typeAttrs.maxLength
-    }
-
-    // For number and currency fields
-    if ((fieldForm.value.type === 'number' || fieldForm.value.type === 'currency') && typeAttrs.scale !== undefined) {
-      payload.scale = typeAttrs.scale
-      if (typeAttrs.scale > 0) {
-        payload.precision = 10 // Default precision for decimals
-      }
-    }
-
-    // Merge UI metadata
-    const uiMetadata: any = {
-      placeholder: fieldForm.value.placeholder,
-      helpText: fieldForm.value.helpText,
-    }
-
-    // Add type-specific attributes to UI metadata
-    if (fieldForm.value.typeAttributes) {
-      Object.assign(uiMetadata, fieldForm.value.typeAttributes)
-    }
-
-    payload.uiMetadata = uiMetadata
-
-    if (fieldForm.value.referenceObject) {
-      payload.relationObject = fieldForm.value.referenceObject
-      payload.relationDisplayField = fieldForm.value.typeAttributes.relationDisplayField || 'name'
-    }
-
-    let result
-    if (fieldDialogMode.value === 'create') {
-      result = await api.post(`/setup/objects/${apiName}/fields`, payload)
-    } else {
-      // For updates, only send fields that changed
-      const updatePayload: any = {}
-      if (fieldForm.value.label) updatePayload.label = fieldForm.value.label
-      if (fieldForm.value.description) updatePayload.description = fieldForm.value.description
-      if (fieldForm.value.placeholder) updatePayload.placeholder = fieldForm.value.placeholder
-      if (fieldForm.value.helpText) updatePayload.helpText = fieldForm.value.helpText
-      updatePayload.isRequired = fieldForm.value.isRequired
-      updatePayload.isUnique = fieldForm.value.isUnique
-      updatePayload.displayOrder = fieldForm.value.displayOrder
-      if (Object.keys(uiMetadata).length > 0) {
-        updatePayload.uiMetadata = uiMetadata
-      }
-
-      result = await api.put(
-        `/setup/objects/${apiName}/fields/${fieldForm.value.apiName}`,
-        updatePayload,
-      )
-    }
-
-    // Update the object with new field
-    if (fieldDialogMode.value === 'create') {
-      object.value.fields.push(result)
-    } else {
-      const index = object.value.fields.findIndex((f: any) => f.id === fieldForm.value.id)
-      if (index !== -1) {
-        object.value.fields[index] = result
-      }
-    }
-
-    toast.success(
-      fieldDialogMode.value === 'create'
-        ? 'Field created successfully'
-        : 'Field updated successfully',
-    )
-
-    closeFieldDialog()
-  } catch (e: any) {
-    fieldDialogError.value = e.message || 'An error occurred while saving the field'
-    console.error('Error saving field:', e)
-  }
-}
-
-const deleteField = async (field: any) => {
-  if (!confirm(`Are you sure you want to delete the field "${field.label}"? This action cannot be undone.`)) {
-    return
-  }
-
-  try {
-    const apiName = route.params.apiName as string
-    await api.delete(`/setup/objects/${apiName}/fields/${field.apiName}`)
-
-    // Remove from the list
-    object.value.fields = object.value.fields.filter((f: any) => f.id !== field.id)
-
-    // Also remove from page layouts
-    for (const layout of layouts.value) {
-      const layoutConfig = layout.layoutConfig || layout.layout_config || { fields: [] }
-      if (layoutConfig.fields) {
-        layoutConfig.fields = layoutConfig.fields.filter(
-          (f: any) => f.fieldId !== field.id,
-        )
-      }
-    }
-
-    toast.success('Field deleted successfully')
-  } catch (e: any) {
-    toast.error(`Failed to delete field: ${e.message}`)
-    console.error('Error deleting field:', e)
-  }
-}
-
 const handleCreateLayout = async () => {
   const name = prompt('Enter a name for the new layout:')
   if (!name) return
@@ -734,19 +254,17 @@ const handleDeleteLayout = async (layoutId: string) => {
   }
 }
 
-const handleAccessUpdate = (orgWideDefault: string) => {
-  if (object.value) {
-    object.value.orgWideDefault = orgWideDefault
-  }
-}
-
 // Watch for tab changes to load layouts
 watch(activeTab, (newTab) => {
   if (newTab === 'layouts' && layouts.value.length === 0 && !loadingLayouts.value) {
     fetchLayouts()
   }
 })
-
+const handleAccessUpdate = (orgWideDefault: string) => {
+  if (object.value) {
+    object.value.orgWideDefault = orgWideDefault
+  }
+}
 onMounted(async () => {
   await fetchObject()
   // If we start on layouts tab, load them