From 8e4690c9c9a1b56a97a2865a4ae05fac345693ad Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Tue, 6 Jan 2026 09:45:29 +0100
Subject: [PATCH 1/7] WIP - initial iteration on manage fields

---
 backend/src/object/object.service.ts          | 193 +++++++
 .../src/object/schema-management.service.ts   |  31 ++
 backend/src/object/setup-object.controller.ts |  30 +
 .../fields/FieldAttributesCommon.vue          | 195 +++++++
 .../components/fields/FieldAttributesType.vue | 296 ++++++++++
 .../components/fields/FieldTypeSelector.vue   | 140 +++++
 frontend/pages/setup/objects/[apiName].vue    | 523 ++++++++++++++++--
 7 files changed, 1377 insertions(+), 31 deletions(-)
 create mode 100644 frontend/components/fields/FieldAttributesCommon.vue
 create mode 100644 frontend/components/fields/FieldAttributesType.vue
 create mode 100644 frontend/components/fields/FieldTypeSelector.vue

diff --git a/backend/src/object/object.service.ts b/backend/src/object/object.service.ts
index 26fec40..eddd8b6 100644
--- a/backend/src/object/object.service.ts
+++ b/backend/src/object/object.service.ts
@@ -3,6 +3,7 @@ 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';
@@ -742,6 +743,198 @@ 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
+    const pageLayouts = await knex('page_layouts')
+      .where({ objectDefinitionId: objectDef.id });
+    
+    for (const layout of pageLayouts) {
+      const layoutConfig = layout.layout_config ? JSON.parse(layout.layout_config) : { 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(),
+        });
+    }
+
+    // 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) {
+      const metadata = otherField.ui_metadata ? JSON.parse(otherField.ui_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);
diff --git a/backend/src/object/schema-management.service.ts b/backend/src/object/schema-management.service.ts
index 7f932b5..4b73305 100644
--- a/backend/src/object/schema-management.service.ts
+++ b/backend/src/object/schema-management.service.ts
@@ -71,6 +71,37 @@ 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
    */
diff --git a/backend/src/object/setup-object.controller.ts b/backend/src/object/setup-object.controller.ts
index 426376c..5da5f93 100644
--- a/backend/src/object/setup-object.controller.ts
+++ b/backend/src/object/setup-object.controller.ts
@@ -4,6 +4,7 @@ import {
   Post,
   Patch,
   Put,
+  Delete,
   Param,
   Body,
   UseGuards,
@@ -72,6 +73,35 @@ 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,
diff --git a/frontend/components/fields/FieldAttributesCommon.vue b/frontend/components/fields/FieldAttributesCommon.vue
new file mode 100644
index 0000000..072f083
--- /dev/null
+++ b/frontend/components/fields/FieldAttributesCommon.vue
@@ -0,0 +1,195 @@
+<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>
diff --git a/frontend/components/fields/FieldAttributesType.vue b/frontend/components/fields/FieldAttributesType.vue
new file mode 100644
index 0000000..e140fe1
--- /dev/null
+++ b/frontend/components/fields/FieldAttributesType.vue
@@ -0,0 +1,296 @@
+<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>
diff --git a/frontend/components/fields/FieldTypeSelector.vue b/frontend/components/fields/FieldTypeSelector.vue
new file mode 100644
index 0000000..595aa2c
--- /dev/null
+++ b/frontend/components/fields/FieldTypeSelector.vue
@@ -0,0 +1,140 @@
+<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>
diff --git a/frontend/pages/setup/objects/[apiName].vue b/frontend/pages/setup/objects/[apiName].vue
index 8304bdf..2908a29 100644
--- a/frontend/pages/setup/objects/[apiName].vue
+++ b/frontend/pages/setup/objects/[apiName].vue
@@ -24,32 +24,78 @@
 
               <!-- Fields Tab -->
               <TabsContent value="fields" class="mt-6">
-                <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 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>
                     </div>
                   </div>
@@ -141,6 +187,102 @@
           </div>
         </div>
       </main>
+
+      <!-- Field Management Dialog -->
+      <div v-if="showFieldDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg shadow-lg max-w-2xl 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>
     </NuxtLayout>
   </div>
 </template>
@@ -151,6 +293,9 @@ 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()
@@ -168,6 +313,81 @@ 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
@@ -180,6 +400,14 @@ 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
   
@@ -194,6 +422,237 @@ 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,
+    }
+
+    // Merge UI metadata
+    const uiMetadata: any = {
+      placeholder: fieldForm.value.placeholder,
+      helpText: fieldForm.value.helpText,
+    }
+
+    // Add type-specific attributes
+    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
@@ -254,17 +713,19 @@ 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

From 6c73eb1658bb0806899824436da842a4ec881028 Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Tue, 6 Jan 2026 10:01:02 +0100
Subject: [PATCH 2/7] WIP - Basic adding and deleting field

---
 backend/src/object/object.service.ts          | 101 +++++++++++++-----
 .../src/object/schema-management.service.ts   |  36 +++++++
 frontend/pages/setup/objects/[apiName].vue    |  18 +++-
 3 files changed, 128 insertions(+), 27 deletions(-)

diff --git a/backend/src/object/object.service.ts b/backend/src/object/object.service.ts
index eddd8b6..1b66bca 100644
--- a/backend/src/object/object.service.ts
+++ b/backend/src/object/object.service.ts
@@ -271,6 +271,10 @@ export class ObjectService {
       relationObject?: string;
       relationDisplayField?: string;
       defaultValue?: string;
+      length?: number;
+      precision?: number;
+      scale?: number;
+      uiMetadata?: any;
     },
   ) {
     const resolvedTenantId = await this.tenantDbService.resolveTenantId(tenantId);
@@ -283,8 +287,11 @@ 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: knex.raw('(UUID())'),
+      id: fieldId,
       objectDefinitionId: obj.id,
       apiName: data.apiName,
       label: data.label,
@@ -294,20 +301,41 @@ 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(),
     };
     
-    // Store relationDisplayField in UI metadata if provided
+    // Merge UI metadata
+    const uiMetadata: any = {};
     if (data.relationDisplayField) {
-      fieldData.ui_metadata = JSON.stringify({
-        relationDisplayField: 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);
     }
     
-    const [id] = await knex('field_definitions').insert(fieldData);
+    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}`);
+    }
     
-    return knex('field_definitions').where({ id }).first();
+    return createdField;
   }
 
   // Helper to get table name from object definition
@@ -874,26 +902,39 @@ export class ObjectService {
     }
 
     // Clean up page layouts - remove field references from layoutConfig
-    const pageLayouts = await knex('page_layouts')
-      .where({ objectDefinitionId: objectDef.id });
-    
-    for (const layout of pageLayouts) {
-      const layoutConfig = layout.layout_config ? JSON.parse(layout.layout_config) : { fields: [] };
+    try {
+      const pageLayouts = await knex('page_layouts')
+        .where({ object_id: objectDef.id });
       
-      // Filter out any field references for this field
-      if (layoutConfig.fields) {
-        layoutConfig.fields = layoutConfig.fields.filter(
-          (f: any) => f.fieldId !== field.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(),
+          });
       }
-      
-      // 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
@@ -902,7 +943,15 @@ export class ObjectService {
       .whereNot({ id: field.id });
     
     for (const otherField of otherFields) {
-      const metadata = otherField.ui_metadata ? JSON.parse(otherField.ui_metadata) : {};
+      // 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(
diff --git a/backend/src/object/schema-management.service.ts b/backend/src/object/schema-management.service.ts
index 4b73305..2130c00 100644
--- a/backend/src/object/schema-management.service.ts
+++ b/backend/src/object/schema-management.service.ts
@@ -125,15 +125,30 @@ 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,
@@ -146,18 +161,28 @@ 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);
@@ -165,19 +190,30 @@ 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;
 
diff --git a/frontend/pages/setup/objects/[apiName].vue b/frontend/pages/setup/objects/[apiName].vue
index 2908a29..b4998be 100644
--- a/frontend/pages/setup/objects/[apiName].vue
+++ b/frontend/pages/setup/objects/[apiName].vue
@@ -560,13 +560,29 @@ const saveField = async () => {
       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
+    // Add type-specific attributes to UI metadata
     if (fieldForm.value.typeAttributes) {
       Object.assign(uiMetadata, fieldForm.value.typeAttributes)
     }

From b34da6956c885ad4746a0c26d824dbaca0f461ce Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Wed, 7 Jan 2026 21:00:06 +0100
Subject: [PATCH 3/7] WIP - Fix create field dialog placement and look up field
 creation

---
 backend/src/object/object.service.ts         |   1 +
 frontend/components/fields/FieldRenderer.vue |   3 +-
 frontend/components/fields/LookupField.vue   |   3 +-
 frontend/pages/setup/objects/[apiName].vue   | 169 ++++++++++---------
 4 files changed, 92 insertions(+), 84 deletions(-)

diff --git a/backend/src/object/object.service.ts b/backend/src/object/object.service.ts
index 1b66bca..add4327 100644
--- a/backend/src/object/object.service.ts
+++ b/backend/src/object/object.service.ts
@@ -394,6 +394,7 @@ export class ObjectService {
       'url': 'URL',
       'color': 'TEXT',
       'json': 'JSON',
+      'lookup': 'LOOKUP',
       'belongsTo': 'LOOKUP',
       'hasMany': 'LOOKUP',
       'manyToMany': 'LOOKUP',
diff --git a/frontend/components/fields/FieldRenderer.vue b/frontend/components/fields/FieldRenderer.vue
index 313c10c..9ea7e14 100644
--- a/frontend/components/fields/FieldRenderer.vue
+++ b/frontend/components/fields/FieldRenderer.vue
@@ -21,7 +21,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
 })
 
 const emit = defineEmits<{
diff --git a/frontend/components/fields/LookupField.vue b/frontend/components/fields/LookupField.vue
index 8dcdbe2..ba8bc8e 100644
--- a/frontend/components/fields/LookupField.vue
+++ b/frontend/components/fields/LookupField.vue
@@ -16,7 +16,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
   modelValue: null,
 })
 
diff --git a/frontend/pages/setup/objects/[apiName].vue b/frontend/pages/setup/objects/[apiName].vue
index b4998be..f4a5eb2 100644
--- a/frontend/pages/setup/objects/[apiName].vue
+++ b/frontend/pages/setup/objects/[apiName].vue
@@ -189,100 +189,105 @@
       </main>
 
       <!-- Field Management Dialog -->
-      <div v-if="showFieldDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-        <div class="bg-white rounded-lg shadow-lg max-w-2xl 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"
-              />
+      <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>
 
-            <!-- 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>
+            <div class="p-6 space-y-6">
+              <!-- Field Type Selection (only for creation) -->
+              <div v-if="fieldDialogMode === 'create'">
+                <FieldTypeSelector
+                  v-model="fieldForm.type"
+                />
+              </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>
+              <!-- 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>
 
-            <!-- 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"
+              <!-- 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"
                     >
-                      {{ obj.label }} ({{ obj.apiName }})
-                    </option>
-                  </select>
+                      <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>
-            </div>
 
-            <!-- Error Message -->
-            <div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm">
-              {{ fieldDialogError }}
-            </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>
+              <!-- 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>
-      </div>
+      </Teleport>
     </NuxtLayout>
   </div>
 </template>

From 8ad3fac1b04ebe2c6c7e2d8b2e9ba64d4beaf16a Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Wed, 7 Jan 2026 22:11:36 +0100
Subject: [PATCH 4/7] WIP - UI drawer initial

---
 frontend/components/AIChatBar.vue    |   6 +-
 frontend/components/AppSidebar.vue   |  14 ++-
 frontend/components/BottomDrawer.vue | 153 +++++++++++++++++++++++++++
 frontend/layouts/default.vue         |   9 +-
 4 files changed, 169 insertions(+), 13 deletions(-)
 create mode 100644 frontend/components/BottomDrawer.vue

diff --git a/frontend/components/AIChatBar.vue b/frontend/components/AIChatBar.vue
index 90db51a..6a28097 100644
--- a/frontend/components/AIChatBar.vue
+++ b/frontend/components/AIChatBar.vue
@@ -21,7 +21,7 @@ const handleSend = () => {
 </script>
 
 <template>
-  <div class="ai-chat-area sticky bottom-0 z-20 bg-background border-t border-border p-4 bg-neutral-50">
+  <div class="ai-chat-area w-full border-t border-border p-4 bg-neutral-50">
     <InputGroup>
       <InputGroupTextarea 
         v-model="chatInput"
@@ -50,8 +50,6 @@ const handleSend = () => {
 
 <style scoped>
 .ai-chat-area {
-  height: calc(100vh / 6);
-  min-height: 140px;
-  max-height: 200px;
+  min-height: 120px;
 }
 </style>
diff --git a/frontend/components/AppSidebar.vue b/frontend/components/AppSidebar.vue
index 9193d56..4e67370 100644
--- a/frontend/components/AppSidebar.vue
+++ b/frontend/components/AppSidebar.vue
@@ -22,12 +22,19 @@ 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)
@@ -336,10 +343,13 @@ const centralAdminMenuItems: Array<{
     <SidebarFooter>
       <SidebarMenu>
         <SidebarMenuItem v-if="!isCentralAdmin">
-          <SidebarMenuButton @click="softphone.open" class="cursor-pointer hover:bg-accent">
+          <SidebarMenuButton @click="openSoftphoneDrawer" 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>
+            <span
+              v-if="softphone.hasIncomingCall.value"
+              class="ml-auto h-2 w-2 rounded-full bg-red-500 animate-pulse"
+            />
           </SidebarMenuButton>
         </SidebarMenuItem>
         <SidebarMenuItem>
diff --git a/frontend/components/BottomDrawer.vue b/frontend/components/BottomDrawer.vue
new file mode 100644
index 0000000..5d264f1
--- /dev/null
+++ b/frontend/components/BottomDrawer.vue
@@ -0,0 +1,153 @@
+<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 { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import AIChatBar from '@/components/AIChatBar.vue'
+import { Phone, Sparkles, X } from 'lucide-vue-next'
+
+const isDrawerOpen = useState<boolean>('bottomDrawerOpen', () => false)
+const activeTab = useState<string>('bottomDrawerTab', () => 'softphone')
+
+const drawerHeight = ref(240)
+const minHeight = 160
+const maxHeight = ref(480)
+const isResizing = ref(false)
+const resizeStartY = ref(0)
+const resizeStartHeight = ref(0)
+
+const softphoneEnabled = ref(false)
+const softphoneConnected = ref(false)
+
+const statusLabel = computed(() => (softphoneConnected.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 startResize = (event: MouseEvent | TouchEvent) => {
+  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
+}
+
+const closeDrawer = () => {
+  isDrawerOpen.value = false
+}
+
+watch(softphoneEnabled, (enabled) => {
+  if (!enabled) {
+    softphoneConnected.value = false
+    return
+  }
+  softphoneConnected.value = true
+})
+
+onMounted(() => {
+  updateMaxHeight()
+  window.addEventListener('mousemove', handleResize)
+  window.addEventListener('mouseup', stopResize)
+  window.addEventListener('touchmove', handleResize, { passive: true })
+  window.addEventListener('touchend', stopResize)
+  window.addEventListener('resize', updateMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  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 pb-4">
+    <div
+      class="pointer-events-auto w-full max-w-5xl rounded-xl border border-border bg-background shadow-xl"
+      :class="isDrawerOpen ? 'opacity-100' : 'opacity-0 translate-y-6 pointer-events-none'"
+      :style="{ height: `${drawerHeight}px` }"
+    >
+      <div class="flex items-center justify-between border-b border-border px-4 py-2">
+        <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="closeDrawer">
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close drawer</span>
+        </Button>
+      </div>
+
+      <Tabs v-model="activeTab" class="flex h-[calc(100%-48px)] flex-col">
+        <TabsList class="mx-4 mt-3 grid w-fit grid-cols-2">
+          <TabsTrigger value="softphone" class="flex items-center gap-2">
+            <Phone class="h-4 w-4" />
+            Softphone
+            <span
+              class="inline-flex h-2 w-2 rounded-full"
+              :class="softphoneConnected ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+            />
+          </TabsTrigger>
+          <TabsTrigger value="ai" class="flex items-center gap-2">
+            <Sparkles class="h-4 w-4" />
+            AI Agent
+          </TabsTrigger>
+        </TabsList>
+
+        <div 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 border-border bg-muted/30 px-4 py-3">
+                <div>
+                  <Label class="text-sm font-medium">Softphone availability</Label>
+                  <p class="text-xs text-muted-foreground">
+                    Turn on to initialize the softphone connection.
+                  </p>
+                </div>
+                <Switch v-model:checked="softphoneEnabled" />
+              </div>
+
+              <div class="flex items-center gap-3 text-sm text-muted-foreground">
+                <span
+                  class="inline-flex h-2.5 w-2.5 rounded-full"
+                  :class="softphoneConnected ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+                />
+                <span>{{ statusLabel }}</span>
+              </div>
+
+              <div class="flex-1 rounded-lg border border-dashed border-border bg-muted/20 p-4 text-sm text-muted-foreground">
+                Softphone controls will appear here.
+              </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>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 5f56200..b881d82 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import AppSidebar from '@/components/AppSidebar.vue'
-import AIChatBar from '@/components/AIChatBar.vue'
-import SoftphoneDialog from '@/components/SoftphoneDialog.vue'
+import BottomDrawer from '@/components/BottomDrawer.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -74,11 +73,7 @@ const breadcrumbs = computed(() => {
         <slot />
       </div>
 
-      <!-- AI Chat Bar Component -->
-      <AIChatBar />
-
-      <!-- Softphone Dialog (Global) -->
-      <SoftphoneDialog />
+      <BottomDrawer />
     </SidebarInset>
   </SidebarProvider>
 </template>

From c9a3e00a9419832328ef51eb1133839d8a2f3cd6 Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Thu, 8 Jan 2026 00:21:12 +0100
Subject: [PATCH 5/7] WIP - UI cahnges to bottom bar

---
 frontend/app.vue                     |   2 +
 frontend/components/AppSidebar.vue   |  10 -
 frontend/components/BottomDrawer.vue | 365 ++++++++++++++++++++++++---
 frontend/layouts/default.vue         |   2 +-
 4 files changed, 326 insertions(+), 53 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index 7f8da09..a1afb46 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,11 +1,13 @@
 <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>
 
diff --git a/frontend/components/AppSidebar.vue b/frontend/components/AppSidebar.vue
index 4e67370..7a8774d 100644
--- a/frontend/components/AppSidebar.vue
+++ b/frontend/components/AppSidebar.vue
@@ -342,16 +342,6 @@ const centralAdminMenuItems: Array<{
     </SidebarContent>
     <SidebarFooter>
       <SidebarMenu>
-        <SidebarMenuItem v-if="!isCentralAdmin">
-          <SidebarMenuButton @click="openSoftphoneDrawer" 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"
-            />
-          </SidebarMenuButton>
-        </SidebarMenuItem>
         <SidebarMenuItem>
           <SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
             <LogOut class="h-4 w-4" />
diff --git a/frontend/components/BottomDrawer.vue b/frontend/components/BottomDrawer.vue
index 5d264f1..5c74e0c 100644
--- a/frontend/components/BottomDrawer.vue
+++ b/frontend/components/BottomDrawer.vue
@@ -2,25 +2,29 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Button } from '@/components/ui/button'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
 import AIChatBar from '@/components/AIChatBar.vue'
-import { Phone, Sparkles, X } from 'lucide-vue-next'
+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 drawerHeight = ref(240)
-const minHeight = 160
+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 softphoneEnabled = ref(false)
-const softphoneConnected = ref(false)
+const phoneNumber = ref('')
+const showDialpad = ref(false)
 
-const statusLabel = computed(() => (softphoneConnected.value ? 'Connected' : 'Offline'))
+const statusLabel = computed(() => (softphone.isConnected.value ? 'Connected' : 'Offline'))
 
 const clampHeight = (height: number) => Math.min(Math.max(height, minHeight), maxHeight.value)
 
@@ -30,7 +34,24 @@ const updateMaxHeight = () => {
   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
@@ -47,19 +68,109 @@ const stopResize = () => {
   isResizing.value = false
 }
 
-const closeDrawer = () => {
-  isDrawerOpen.value = false
-}
+watch(
+  () => softphone.incomingCall.value,
+  (incoming) => {
+    if (incoming) {
+      activeTab.value = 'softphone'
+      isDrawerOpen.value = true
+    }
+  }
+)
 
-watch(softphoneEnabled, (enabled) => {
-  if (!enabled) {
-    softphoneConnected.value = false
+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
   }
-  softphoneConnected.value = true
-})
+
+  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)
@@ -69,6 +180,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  console.log('BottomDrawer unmounted');
   window.removeEventListener('mousemove', handleResize)
   window.removeEventListener('mouseup', stopResize)
   window.removeEventListener('touchmove', handleResize)
@@ -78,13 +190,30 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4 pb-4">
+  <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 rounded-xl border border-border bg-background shadow-xl"
-      :class="isDrawerOpen ? 'opacity-100' : 'opacity-0 translate-y-6 pointer-events-none'"
-      :style="{ height: `${drawerHeight}px` }"
+      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-b border-border px-4 py-2">
+      <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"
@@ -92,51 +221,203 @@ onBeforeUnmount(() => {
         >
           <span class="h-1.5 w-12 rounded-full bg-muted" />
         </div>
-        <Button variant="ghost" size="icon" class="ml-3" @click="closeDrawer">
-          <X class="h-4 w-4" />
-          <span class="sr-only">Close drawer</span>
+        <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-model="activeTab" class="flex h-[calc(100%-48px)] flex-col">
-        <TabsList class="mx-4 mt-3 grid w-fit grid-cols-2">
-          <TabsTrigger value="softphone" class="flex items-center gap-2">
+      <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="softphoneConnected ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+              :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
             />
           </TabsTrigger>
-          <TabsTrigger value="ai" class="flex items-center gap-2">
+          <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
             <Sparkles class="h-4 w-4" />
             AI Agent
           </TabsTrigger>
         </TabsList>
 
-        <div class="flex-1 overflow-hidden">
+        <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 border-border bg-muted/30 px-4 py-3">
+              <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>
-                  <Label class="text-sm font-medium">Softphone availability</Label>
+                  <p class="text-sm font-medium">Softphone</p>
                   <p class="text-xs text-muted-foreground">
-                    Turn on to initialize the softphone connection.
+                    {{ softphone.isConnected.value ? 'Ready to place and receive calls.' : 'Connect to start placing calls.' }}
                   </p>
                 </div>
-                <Switch v-model:checked="softphoneEnabled" />
+                <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 class="flex items-center gap-3 text-sm text-muted-foreground">
-                <span
-                  class="inline-flex h-2.5 w-2.5 rounded-full"
-                  :class="softphoneConnected ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
-                />
-                <span>{{ statusLabel }}</span>
+              <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 class="flex-1 rounded-lg border border-dashed border-border bg-muted/20 p-4 text-sm text-muted-foreground">
-                Softphone controls will appear here.
+              <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.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.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>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b881d82..955868e 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -73,7 +73,7 @@ const breadcrumbs = computed(() => {
         <slot />
       </div>
 
-      <BottomDrawer />
+      
     </SidebarInset>
   </SidebarProvider>
 </template>

From 7ae36411dbaa8d9a147ef03d6a37caef44a34471 Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Thu, 8 Jan 2026 00:28:45 +0100
Subject: [PATCH 6/7] WIP - move AI suggestions

---
 frontend/components/BottomDrawer.vue | 72 ++++++++++++++--------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/frontend/components/BottomDrawer.vue b/frontend/components/BottomDrawer.vue
index 5c74e0c..93d156f 100644
--- a/frontend/components/BottomDrawer.vue
+++ b/frontend/components/BottomDrawer.vue
@@ -266,6 +266,42 @@ onBeforeUnmount(() => {
                 </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>
@@ -329,42 +365,6 @@ onBeforeUnmount(() => {
                 </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.currentCall.value && !softphone.incomingCall.value" class="space-y-4">
                 <div>
                   <label class="text-sm font-medium">Phone Number</label>

From 8b9fa81594c843bbd22be9d87da9431537e41add Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Thu, 8 Jan 2026 21:19:48 +0100
Subject: [PATCH 7/7] WIP - UI fixes for bottom bar

---
 frontend/components/AIChatBar.vue    |  2 +-
 frontend/components/BottomDrawer.vue | 61 ++++++++++++++++------------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/frontend/components/AIChatBar.vue b/frontend/components/AIChatBar.vue
index 6a28097..0e491b8 100644
--- a/frontend/components/AIChatBar.vue
+++ b/frontend/components/AIChatBar.vue
@@ -50,6 +50,6 @@ const handleSend = () => {
 
 <style scoped>
 .ai-chat-area {
-  min-height: 120px;
+  min-height: 190px;
 }
 </style>
diff --git a/frontend/components/BottomDrawer.vue b/frontend/components/BottomDrawer.vue
index 93d156f..af1720f 100644
--- a/frontend/components/BottomDrawer.vue
+++ b/frontend/components/BottomDrawer.vue
@@ -190,29 +190,34 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4">
+  <div class="pointer-events-none fixed inset-x-0 bottom-0 z-30 flex justify-center px-2">
     <div
-      class="pointer-events-auto w-full max-w-5xl border border-border bg-background shadow-xl transition-all duration-200"
+      class="pointer-events-auto w-full 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">
+      <div class="grid grid-cols-3 items-center justify-between border-border px-2 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">
+
+          <Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
+            <TabsList class="mx-2 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>
+        
 
         <div
           class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
@@ -221,11 +226,15 @@ onBeforeUnmount(() => {
         >
           <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 class="flex col-start-3 justify-end">
+          <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>
+
       </div>
 
       <Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
@@ -422,8 +431,8 @@ onBeforeUnmount(() => {
             </div>
           </TabsContent>
 
-          <TabsContent value="ai" class="h-full">
-            <div class="flex h-full flex-col justify-end">
+          <TabsContent value="ai" class="h-full relative">
+            <div class="flex flex-col justify-end absolute bottom-0 w-full">
               <AIChatBar />
             </div>
           </TabsContent>