Add twilio softphone with integrated AI assistant

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
+    // Store relationDisplayField in UI metadata if provided
-    const uiMetadata: any = {};
     if (data.relationDisplayField) {
-      uiMetadata.relationDisplayField = data.relationDisplayField;
+      fieldData.ui_metadata = JSON.stringify({
-    }
+        relationDisplayField: data.relationDisplayField,
-    if (data.uiMetadata) {
+      });
-      Object.assign(uiMetadata, data.uiMetadata);
-    }
-    if (Object.keys(uiMetadata).length > 0) {
-      fieldData.ui_metadata = JSON.stringify(uiMetadata);
     }
     
-    await knex('field_definitions').insert(fieldData);
+    const [id] = await knex('field_definitions').insert(fieldData);
-    const createdField = await knex('field_definitions').where({ id: fieldId }).first();
     
-    // Add the column to the physical table
+    return knex('field_definitions').where({ id }).first();
-    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}`);
-    }
-    
-    return createdField;
   }
 
   // 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/app.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { Toaster } from 'vue-sonner'
-import BottomDrawer from '@/components/BottomDrawer.vue'
 </script>
 
 <template>
   <div>
     <Toaster position="top-right" :duration="4000" richColors />
     <NuxtPage />
-    <BottomDrawer />
   </div>
 </template>
 

frontend/components/AIChatBar.vue

@@ -21,7 +21,7 @@ const handleSend = () => {
 </script>
 
 <template>
-  <div class="ai-chat-area w-full border-t border-border p-4 bg-neutral-50">
+  <div class="ai-chat-area sticky bottom-0 z-20 bg-background border-t border-border p-4 bg-neutral-50">
     <InputGroup>
       <InputGroupTextarea 
         v-model="chatInput"
@@ -50,6 +50,8 @@ const handleSend = () => {
 
 <style scoped>
 .ai-chat-area {
-  min-height: 120px;
+  height: calc(100vh / 6);
+  min-height: 140px;
+  max-height: 200px;
 }
 </style>

frontend/components/AppSidebar.vue

@@ -22,19 +22,12 @@ import { useSoftphone } from '~/composables/useSoftphone'
 
 const { logout } = useAuth()
 const { api } = useApi()
-const isDrawerOpen = useState<boolean>('bottomDrawerOpen', () => false)
-const drawerTab = useState<string>('bottomDrawerTab', () => 'softphone')
 const softphone = useSoftphone()
 
 const handleLogout = async () => {
   await logout()
 }
 
-const openSoftphoneDrawer = () => {
-  drawerTab.value = 'softphone'
-  isDrawerOpen.value = true
-}
-
 // Check if user is central admin (by checking if we're on a central subdomain)
 // Use ref instead of computed to avoid hydration mismatch
 const isCentralAdmin = ref(false)
@@ -342,6 +335,13 @@ const centralAdminMenuItems: Array<{
     </SidebarContent>
     <SidebarFooter>
       <SidebarMenu>
+        <SidebarMenuItem v-if="!isCentralAdmin">
+          <SidebarMenuButton @click="softphone.open" class="cursor-pointer hover:bg-accent">
+            <Phone class="h-4 w-4" />
+            <span>Softphone</span>
+            <span v-if="softphone.hasIncomingCall.value" class="ml-auto h-2 w-2 rounded-full bg-red-500 animate-pulse"></span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
         <SidebarMenuItem>
           <SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
             <LogOut class="h-4 w-4" />

frontend/components/BottomDrawer.vue

@@ -1,434 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import AIChatBar from '@/components/AIChatBar.vue'
-import { Phone, Sparkles, X, ChevronUp, Hash, Mic, MicOff, PhoneIncoming, PhoneOff } from 'lucide-vue-next'
-import { toast } from 'vue-sonner'
-import { useSoftphone } from '~/composables/useSoftphone'
-
-const isDrawerOpen = useState<boolean>('bottomDrawerOpen', () => false)
-const activeTab = useState<string>('bottomDrawerTab', () => 'softphone')
-const drawerHeight = useState<number>('bottomDrawerHeight', () => 240)
-
-const softphone = useSoftphone()
-
-const minHeight = 200
-const collapsedHeight = 72
-const maxHeight = ref(480)
-const isResizing = ref(false)
-const resizeStartY = ref(0)
-const resizeStartHeight = ref(0)
-
-const phoneNumber = ref('')
-const showDialpad = ref(false)
-
-const statusLabel = computed(() => (softphone.isConnected.value ? 'Connected' : 'Offline'))
-
-const clampHeight = (height: number) => Math.min(Math.max(height, minHeight), maxHeight.value)
-
-const updateMaxHeight = () => {
-  if (!process.client) return
-  maxHeight.value = Math.round(window.innerHeight * 0.6)
-  drawerHeight.value = clampHeight(drawerHeight.value)
-}
-
-const openDrawer = (tab?: string) => {
-  if (tab) {
-    activeTab.value = tab
-  }
-  isDrawerOpen.value = true
-  if (activeTab.value === 'softphone') {
-    softphone.open()
-  }
-}
-
-const minimizeDrawer = () => {
-  isDrawerOpen.value = false
-}
-
-const startResize = (event: MouseEvent | TouchEvent) => {
-  if (!isDrawerOpen.value) {
-    isDrawerOpen.value = true
-  }
-  isResizing.value = true
-  resizeStartY.value = 'touches' in event ? event.touches[0].clientY : event.clientY
-  resizeStartHeight.value = drawerHeight.value
-}
-
-const handleResize = (event: MouseEvent | TouchEvent) => {
-  if (!isResizing.value) return
-  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY
-  const delta = resizeStartY.value - clientY
-  drawerHeight.value = clampHeight(resizeStartHeight.value + delta)
-}
-
-const stopResize = () => {
-  isResizing.value = false
-}
-
-watch(
-  () => softphone.incomingCall.value,
-  (incoming) => {
-    if (incoming) {
-      activeTab.value = 'softphone'
-      isDrawerOpen.value = true
-    }
-  }
-)
-
-watch(
-  () => activeTab.value,
-  (tab) => {
-    if (tab === 'softphone' && isDrawerOpen.value) {
-      softphone.open()
-    }
-  }
-)
-
-watch(
-  () => isDrawerOpen.value,
-  (open) => {
-    if (open && activeTab.value === 'softphone') {
-      softphone.open()
-    }
-  }
-)
-
-const handleCall = async () => {
-  if (!phoneNumber.value) {
-    toast.error('Please enter a phone number')
-    return
-  }
-
-  try {
-    await softphone.initiateCall(phoneNumber.value)
-    phoneNumber.value = ''
-    toast.success('Call initiated')
-  } catch (error: any) {
-    toast.error(error.message || 'Failed to initiate call')
-  }
-}
-
-const handleAccept = async () => {
-  if (!softphone.incomingCall.value) return
-
-  try {
-    await softphone.acceptCall(softphone.incomingCall.value.callSid)
-  } catch (error: any) {
-    toast.error(error.message || 'Failed to accept call')
-  }
-}
-
-const handleReject = async () => {
-  if (!softphone.incomingCall.value) return
-
-  try {
-    await softphone.rejectCall(softphone.incomingCall.value.callSid)
-  } catch (error: any) {
-    toast.error(error.message || 'Failed to reject call')
-  }
-}
-
-const handleEndCall = async () => {
-  if (!softphone.currentCall.value) return
-
-  try {
-    await softphone.endCall(softphone.currentCall.value.callSid)
-  } catch (error: any) {
-    toast.error(error.message || 'Failed to end call')
-  }
-}
-
-const handleDtmf = async (digit: string) => {
-  if (!softphone.currentCall.value) return
-
-  try {
-    await softphone.sendDtmf(softphone.currentCall.value.callSid, digit)
-  } catch (error: any) {
-    console.error('Failed to send DTMF:', error)
-  }
-}
-
-const formatPhoneNumber = (number: string): string => {
-  if (!number) return ''
-  const cleaned = number.replace(/\D/g, '')
-  if (cleaned.length === 11 && cleaned[0] === '1') {
-    return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`
-  } else if (cleaned.length === 10) {
-    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`
-  }
-  return number
-}
-
-const formatDuration = (seconds?: number): string => {
-  if (!seconds) return '--:--'
-  const mins = Math.floor(seconds / 60)
-  const secs = seconds % 60
-  return `${mins}:${secs.toString().padStart(2, '0')}`
-}
-
-onMounted(() => {
-  console.log('BottomDrawer mounted');
-  updateMaxHeight()
-  window.addEventListener('mousemove', handleResize)
-  window.addEventListener('mouseup', stopResize)
-  window.addEventListener('touchmove', handleResize, { passive: true })
-  window.addEventListener('touchend', stopResize)
-  window.addEventListener('resize', updateMaxHeight)
-})
-
-onBeforeUnmount(() => {
-  console.log('BottomDrawer unmounted');
-  window.removeEventListener('mousemove', handleResize)
-  window.removeEventListener('mouseup', stopResize)
-  window.removeEventListener('touchmove', handleResize)
-  window.removeEventListener('touchend', stopResize)
-  window.removeEventListener('resize', updateMaxHeight)
-})
-</script>
-
-<template>
-  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4">
-    <div
-      class="pointer-events-auto w-full max-w-5xl border border-border bg-background shadow-xl transition-all duration-200"
-      :style="{ height: `${isDrawerOpen ? drawerHeight : collapsedHeight}px` }"
-    >
-      <div class="flex items-center justify-between border-border px-4 py-2">
-
-        <Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
-          <TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
-            <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
-              <Phone class="h-4 w-4" />
-              Softphone
-              <span
-                class="inline-flex h-2 w-2 rounded-full"
-                :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
-              />
-            </TabsTrigger>
-            <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
-              <Sparkles class="h-4 w-4" />
-              AI Agent
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-
-        <div
-          class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
-          @mousedown="startResize"
-          @touchstart.prevent="startResize"
-        >
-          <span class="h-1.5 w-12 rounded-full bg-muted" />
-        </div>
-        <Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
-          <X v-if="isDrawerOpen" class="h-4 w-4" />
-          <ChevronUp v-else class="h-4 w-4" />
-          <span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
-        </Button>
-      </div>
-
-      <Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
-        <TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
-          <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
-            <Phone class="h-4 w-4" />
-            Softphone
-            <span
-              class="inline-flex h-2 w-2 rounded-full"
-              :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
-            />
-          </TabsTrigger>
-          <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
-            <Sparkles class="h-4 w-4" />
-            AI Agent
-          </TabsTrigger>
-        </TabsList>
-
-        <div v-show="isDrawerOpen" class="flex-1 overflow-hidden">
-          <TabsContent value="softphone" class="h-full">
-            <div class="flex h-full flex-col gap-4 px-6 pb-6 pt-4">
-              <div
-                class="flex items-center justify-between rounded-lg border px-4 py-3"
-                :class="softphone.isConnected.value ? 'border-emerald-200 bg-emerald-50/40' : 'border-border bg-muted/30'"
-              >
-                <div>
-                  <p class="text-sm font-medium">Softphone</p>
-                  <p class="text-xs text-muted-foreground">
-                    {{ softphone.isConnected.value ? 'Ready to place and receive calls.' : 'Connect to start placing calls.' }}
-                  </p>
-                </div>
-                <div class="flex items-center gap-2 text-xs">
-                  <span
-                    class="inline-flex h-2.5 w-2.5 rounded-full"
-                    :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
-                  />
-                  <span class="text-muted-foreground">{{ statusLabel }}</span>
-                </div>
-              </div>
-
-              <div v-if="softphone.aiSuggestions.value.length > 0" class="space-y-2">
-                <h3 class="text-sm font-semibold flex items-center gap-2">
-                  <span>AI Assistant</span>
-                  <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
-                    {{ softphone.aiSuggestions.value.length }}
-                  </span>
-                </h3>
-                <div class="space-y-2 max-h-40 overflow-y-auto">
-                  <div
-                    v-for="(suggestion, index) in softphone.aiSuggestions.value.slice(0, 5)"
-                    :key="index"
-                    class="rounded-lg border p-3 text-sm transition-all"
-                    :class="{
-                      'bg-blue-50 border-blue-200': suggestion.type === 'response',
-                      'bg-emerald-50 border-emerald-200': suggestion.type === 'action',
-                      'bg-purple-50 border-purple-200': suggestion.type === 'insight',
-                    }"
-                  >
-                    <div class="flex items-center gap-2 mb-1">
-                      <span
-                        class="text-xs font-semibold uppercase"
-                        :class="{
-                          'text-blue-700': suggestion.type === 'response',
-                          'text-emerald-700': suggestion.type === 'action',
-                          'text-purple-700': suggestion.type === 'insight',
-                        }"
-                      >
-                        {{ suggestion.type }}
-                      </span>
-                      <span class="text-xs text-muted-foreground">just now</span>
-                    </div>
-                    <p class="leading-relaxed">{{ suggestion.text }}</p>
-                  </div>
-                </div>
-              </div>
-
-              <div v-if="softphone.incomingCall.value" class="rounded-lg border border-blue-200 bg-blue-50/60 p-4">
-                <div class="text-center space-y-4">
-                  <div>
-                    <p class="text-sm text-muted-foreground">Incoming call from</p>
-                    <p class="text-2xl font-semibold">
-                      {{ formatPhoneNumber(softphone.incomingCall.value.fromNumber) }}
-                    </p>
-                  </div>
-                  <div class="flex gap-2 justify-center">
-                    <Button @click="handleAccept" class="bg-emerald-500 hover:bg-emerald-600">
-                      <Phone class="h-4 w-4 mr-2" />
-                      Accept
-                    </Button>
-                    <Button @click="handleReject" variant="destructive">
-                      <PhoneOff class="h-4 w-4 mr-2" />
-                      Reject
-                    </Button>
-                  </div>
-                </div>
-              </div>
-
-              <div v-if="softphone.currentCall.value" class="space-y-4">
-                <div class="rounded-lg border bg-muted/40 p-4 text-center space-y-2">
-                  <p class="text-sm text-muted-foreground">
-                    {{ softphone.currentCall.value.direction === 'outbound' ? 'Calling' : 'Connected with' }}
-                  </p>
-                  <p class="text-2xl font-semibold">
-                    {{ formatPhoneNumber(
-                      softphone.currentCall.value.direction === 'outbound'
-                        ? softphone.currentCall.value.toNumber
-                        : softphone.currentCall.value.fromNumber
-                    ) }}
-                  </p>
-                  <p class="text-xs text-muted-foreground capitalize">{{ softphone.callStatus.value }}</p>
-                </div>
-
-                <div class="grid grid-cols-3 gap-2">
-                  <Button variant="outline" size="sm" @click="softphone.toggleMute">
-                    <Mic v-if="!softphone.isMuted.value" class="h-4 w-4" />
-                    <MicOff v-else class="h-4 w-4" />
-                  </Button>
-                  <Button variant="outline" size="sm" @click="showDialpad = !showDialpad">
-                    <Hash class="h-4 w-4" />
-                  </Button>
-                  <Button variant="destructive" size="sm" @click="handleEndCall">
-                    <PhoneOff class="h-4 w-4" />
-                  </Button>
-                </div>
-
-                <div v-if="showDialpad" class="grid grid-cols-3 gap-2">
-                  <Button
-                    v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']"
-                    :key="digit"
-                    variant="outline"
-                    size="sm"
-                    @click="handleDtmf(digit)"
-                    class="h-12 text-lg font-semibold"
-                  >
-                    {{ digit }}
-                  </Button>
-                </div>
-              </div>
-
-              <div v-if="!softphone.currentCall.value && !softphone.incomingCall.value" class="space-y-4">
-                <div>
-                  <label class="text-sm font-medium">Phone Number</label>
-                  <Input
-                    v-model="phoneNumber"
-                    placeholder="+1234567890"
-                    class="mt-1"
-                    @keyup.enter="handleCall"
-                  />
-                </div>
-
-                <div class="grid grid-cols-3 gap-2">
-                  <Button
-                    v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']"
-                    :key="digit"
-                    variant="outline"
-                    @click="phoneNumber += digit"
-                    class="h-12 text-lg font-semibold"
-                  >
-                    {{ digit }}
-                  </Button>
-                </div>
-
-                <div class="flex gap-2">
-                  <Button @click="handleCall" class="flex-1" :disabled="!phoneNumber">
-                    <Phone class="h-4 w-4 mr-2" />
-                    Call
-                  </Button>
-                  <Button @click="phoneNumber = ''" variant="outline">
-                    <X class="h-4 w-4" />
-                  </Button>
-                </div>
-
-                <div v-if="softphone.callHistory.value.length > 0" class="space-y-2">
-                  <h3 class="text-sm font-semibold">Recent Calls</h3>
-                  <div class="space-y-1 max-h-40 overflow-y-auto">
-                    <div
-                      v-for="call in softphone.callHistory.value.slice(0, 5)"
-                      :key="call.callSid"
-                      class="flex items-center justify-between rounded-md px-2 py-1 hover:bg-muted/40 cursor-pointer"
-                      @click="phoneNumber = call.direction === 'outbound' ? call.toNumber : call.fromNumber"
-                    >
-                      <div class="flex items-center gap-2">
-                        <Phone v-if="call.direction === 'outbound'" class="h-3 w-3 text-emerald-500" />
-                        <PhoneIncoming v-else class="h-3 w-3 text-blue-500" />
-                        <span class="text-sm">
-                          {{ formatPhoneNumber(call.direction === 'outbound' ? call.toNumber : call.fromNumber) }}
-                        </span>
-                      </div>
-                      <span class="text-xs text-muted-foreground">{{ formatDuration(call.duration) }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="ai" class="h-full">
-            <div class="flex h-full flex-col justify-end">
-              <AIChatBar />
-            </div>
-          </TabsContent>
-        </div>
-      </Tabs>
-    </div>
-  </div>
-</template>

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: '/central',
-  baseUrl: '/runtime/objects',
 })
 
 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: '/central',
-  baseUrl: '/runtime/objects',
   modelValue: null,
 })
 

frontend/composables/useSoftphone.ts

@@ -101,18 +101,23 @@ export function useSoftphone() {
       }
 
       const { api } = useApi();
+      console.log('Requesting Twilio token from /api/voice/token...');
       const response = await api.get('/voice/token');
       const token = response.data.token;
       
+      console.log('Token received, creating Device...');
+      
       // Log the token payload to see what identity is being used
       try {
         const tokenPayload = JSON.parse(atob(token.split('.')[1]));
+        console.log('Token identity:', tokenPayload.sub);
+        console.log('Token grants:', tokenPayload.grants);
       } catch (e) {
         console.log('Could not parse token payload');
       }
 
       twilioDevice.value = new Device(token, {
-        logLevel: 3,
+        logLevel: 1,
         codecPreferences: ['opus', 'pcmu'],
         enableImprovedSignalingErrorPrecision: true,
         edge: 'ashburn',
@@ -120,10 +125,12 @@ export function useSoftphone() {
 
       // Device events
       twilioDevice.value.on('registered', () => {
+        console.log('✓ Twilio Device registered - ready to receive calls');
         toast.success('Softphone ready');
       });
 
       twilioDevice.value.on('unregistered', () => {
+        console.log('⚠ Twilio Device unregistered');
       });
 
       twilioDevice.value.on('error', (error) => {
@@ -132,6 +139,12 @@ export function useSoftphone() {
       });
 
       twilioDevice.value.on('incoming', (call: TwilioCall) => {
+        console.log('🔔 Twilio Device INCOMING event received:', call.parameters);
+        console.log('Call parameters:', {
+          CallSid: call.parameters.CallSid,
+          From: call.parameters.From,
+          To: call.parameters.To,
+        });
         twilioCall.value = call;
         
         // Update state
@@ -154,11 +167,16 @@ export function useSoftphone() {
         // Setup call handlers
         setupCallHandlers(call);
 
-        // Twilio Device will handle ringtone automatically
+        // Play ringtone
+        playRingtone();
       });
 
       // Register the device
+      console.log('Registering Twilio Device...');
       await twilioDevice.value.register();
+      console.log('✓ Twilio Device register() completed');
+      console.log('Device identity:', twilioDevice.value.identity);
+      console.log('Device state:', twilioDevice.value.state);
       
     } catch (error: any) {
       console.error('Failed to initialize Twilio Device:', error);
@@ -227,7 +245,7 @@ export function useSoftphone() {
       return 'http://localhost:3000';
     };
 
-    // Connect to /voice namespace with proper auth header
+    // Connect to /voice namespace
     socket.value = io(`${getBackendUrl()}/voice`, {
       auth: {
         token: token,
@@ -237,26 +255,25 @@ export function useSoftphone() {
       reconnectionDelay: 1000,
       reconnectionDelayMax: 5000,
       reconnectionAttempts: 5,
-      query: {}, // Explicitly set empty query to prevent token leaking
     });
 
     // Connection events
     socket.value.on('connect', () => {
+      console.log('🔌 Softphone WebSocket connected');
+      console.log('📋 Token payload (check userId):', parseJwt(token));
       isConnected.value = true;
       
       // Initialize Twilio Device after WebSocket connects
-      // Suppress warnings by catching them before they log
+      initializeTwilioDevice();
-      initializeTwilioDevice().catch(err => {
-        // Device initialization errors are already shown to user via toast
-        console.debug('Device init issue (non-critical):', err.message);
-      });
     });
 
     socket.value.on('disconnect', () => {
+      console.log('Softphone WebSocket disconnected');
       isConnected.value = false;
     });
 
     socket.value.on('connect_error', (error) => {
+      console.error('Softphone connection error:', error);
       toast.error('Failed to connect to voice service');
     });
 
@@ -535,7 +552,8 @@ export function useSoftphone() {
   let ringtoneAudio: HTMLAudioElement | null = null;
 
   const playRingtone = () => {
-    // Play a simple beep tone using Web Audio API
+    // Optional: Play a simple beep tone using Web Audio API
+    // This is a nice-to-have enhancement but not required for incoming calls to work
     try {
       const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
       const oscillator = audioContext.createOscillator();

frontend/layouts/default.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import AppSidebar from '@/components/AppSidebar.vue'
-import BottomDrawer from '@/components/BottomDrawer.vue'
+import AIChatBar from '@/components/AIChatBar.vue'
+import SoftphoneDialog from '@/components/SoftphoneDialog.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -73,7 +74,11 @@ const breadcrumbs = computed(() => {
         <slot />
       </div>
 
+      <!-- AI Chat Bar Component -->
+      <AIChatBar />
 
+      <!-- Softphone Dialog (Global) -->
+      <SoftphoneDialog />
     </SidebarInset>
   </SidebarProvider>
 </template>

frontend/nuxt.config.ts

@@ -58,10 +58,7 @@ export default defineNuxtConfig({
     },
     server: {
       hmr: {
-        host: 'tenant1.routebox.co',
+        clientPort: 3001,
-        port: 443,
-        protocol: 'wss',
-        // Don't use _nuxt path - HMR handles its own path
       },
       allowedHosts: ['.routebox.co', 'localhost', '127.0.0.1'],
     },

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="space-y-2">
-                  <div class="flex justify-between items-center mb-4">
+                  <div
-                    <h2 class="text-xl font-semibold">Fields</h2>
+                    v-for="field in object.fields"
-                    <Button @click="openFieldDialog('create')">
+                    :key="field.id"
-                      <Plus class="w-4 h-4 mr-2" />
+                    class="p-4 border rounded-lg bg-card"
-                      New Field
+                  >
-                    </Button>
+                    <div class="flex items-center justify-between">
-                  </div>
+                      <div>
-
+                        <h3 class="font-semibold">{{ field.label }}</h3>
-                  <div v-if="!object.fields || object.fields.length === 0" class="text-center py-8 text-muted-foreground">
+                        <p class="text-sm text-muted-foreground">
-                    No fields defined yet. Create one to get started.
+                          Type: {{ field.type }} | API Name: {{ field.apiName }}
-                  </div>
+                        </p>
-
+                      </div>
-                  <div v-else class="space-y-2">
+                      <div class="flex gap-2 text-xs">
-                    <div
+                        <span
-                      v-for="field in object.fields"
+                          v-if="field.isRequired"
-                      :key="field.id"
+                          class="px-2 py-1 bg-destructive/10 text-destructive rounded"
-                      class="p-4 border rounded-lg bg-card hover:border-primary transition-colors"
+                        >
-                    >
+                          Required
-                      <div class="flex items-center justify-between">
+                        </span>
-                        <div class="flex-1">
+                        <span
-                          <h3 class="font-semibold">{{ field.label }}</h3>
+                          v-if="field.isUnique"
-                          <p class="text-sm text-muted-foreground">
+                          class="px-2 py-1 bg-primary/10 text-primary rounded"
-                            Type: <span class="font-medium">{{ formatFieldType(field.type) }}</span> | API Name: <span class="font-mono">{{ field.apiName }}</span>
+                        >
-                          </p>
+                          Unique
-                          <p v-if="field.description" class="text-sm text-muted-foreground mt-1">
+                        </span>
-                            {{ 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>
                     </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