Added better display of bread crums and side bar menus for apps and objects

backend/migrations/tenant/20250126000006_add_name_field_to_objects.js

@@ -0,0 +1,11 @@
+exports.up = function (knex) {
+  return knex.schema.table('object_definitions', (table) => {
+    table.string('nameField', 255).comment('API name of the field to use as record display name');
+  });
+};
+
+exports.down = function (knex) {
+  return knex.schema.table('object_definitions', (table) => {
+    table.dropColumn('nameField');
+  });
+};

backend/migrations/tenant/20250126000007_add_app_id_to_objects.js

@@ -0,0 +1,22 @@
+exports.up = function (knex) {
+  return knex.schema.table('object_definitions', (table) => {
+    table.uuid('app_id').nullable()
+      .comment('Optional: App that this object belongs to');
+    
+    table
+      .foreign('app_id')
+      .references('id')
+      .inTable('apps')
+      .onDelete('SET NULL');
+    
+    table.index(['app_id']);
+  });
+};
+
+exports.down = function (knex) {
+  return knex.schema.table('object_definitions', (table) => {
+    table.dropForeign('app_id');
+    table.dropIndex('app_id');
+    table.dropColumn('app_id');
+  });
+};

backend/scripts/update-name-field.ts

@@ -0,0 +1,72 @@
+import { getCentralPrisma } from '../src/prisma/central-prisma.service';
+import * as knex from 'knex';
+import * as crypto from 'crypto';
+
+function decrypt(text: string): string {
+  const parts = text.split(':');
+  const iv = Buffer.from(parts.shift()!, 'hex');
+  const encryptedText = Buffer.from(parts.join(':'), 'hex');
+  const key = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');
+  const decipher = crypto.createDecipheriv(
+    'aes-256-cbc',
+    key,
+    iv,
+  );
+  let decrypted = decipher.update(encryptedText);
+  decrypted = Buffer.concat([decrypted, decipher.final()]);
+  return decrypted.toString();
+}
+
+async function updateNameField() {
+  const centralPrisma = getCentralPrisma();
+  
+  try {
+    // Find tenant1
+    const tenant = await centralPrisma.tenant.findFirst({
+      where: {
+        OR: [
+          { id: 'tenant1' },
+          { slug: 'tenant1' },
+        ],
+      },
+    });
+
+    if (!tenant) {
+      console.error('❌ Tenant tenant1 not found');
+      process.exit(1);
+    }
+
+    console.log(`📋 Tenant: ${tenant.name} (${tenant.slug})`);
+    console.log(`📊 Database: ${tenant.dbName}`);
+
+    // Decrypt password
+    const password = decrypt(tenant.dbPassword);
+
+    // Create connection
+    const tenantKnex = knex.default({
+      client: 'mysql2',
+      connection: {
+        host: tenant.dbHost,
+        port: tenant.dbPort,
+        user: tenant.dbUsername,
+        password: password,
+        database: tenant.dbName,
+      },
+    });
+
+    // Update Account object
+    await tenantKnex('object_definitions')
+      .where({ apiName: 'Account' })
+      .update({ nameField: 'name' });
+
+    console.log('✅ Updated Account object nameField to "name"');
+
+    await tenantKnex.destroy();
+    await centralPrisma.$disconnect();
+  } catch (error) {
+    console.error('❌ Error:', error);
+    process.exit(1);
+  }
+}
+
+updateNameField();

backend/src/object/object.service.ts

@@ -8,9 +8,23 @@ export class ObjectService {
   // Setup endpoints - Object metadata management
   async getObjectDefinitions(tenantId: string) {
     const knex = await this.tenantDbService.getTenantKnex(tenantId);
-    return knex('object_definitions')
+    
-      .select('*')
+    const objects = await knex('object_definitions')
+      .select('object_definitions.*')
       .orderBy('label', 'asc');
+
+    // Fetch app information for objects that have app_id
+    for (const obj of objects) {
+      if (obj.app_id) {
+        const app = await knex('apps')
+          .where({ id: obj.app_id })
+          .select('id', 'slug', 'label', 'description')
+          .first();
+        obj.app = app;
+      }
+    }
+
+    return objects;
   }
 
   async getObjectDefinition(tenantId: string, apiName: string) {
@@ -29,9 +43,19 @@ export class ObjectService {
       .where({ objectDefinitionId: obj.id })
       .orderBy('label', 'asc');
 
+    // Get app information if object belongs to an app
+    let app = null;
+    if (obj.app_id) {
+      app = await knex('apps')
+        .where({ id: obj.app_id })
+        .select('id', 'slug', 'label', 'description')
+        .first();
+    }
+
     return {
       ...obj,
       fields,
+      app,
     };
   }
 
@@ -84,6 +108,25 @@ export class ObjectService {
     return knex('field_definitions').where({ id }).first();
   }
 
+  // Helper to get table name from object definition
+  private getTableName(objectApiName: string): string {
+    // Convert CamelCase to snake_case and pluralize
+    // Account -> accounts, ContactPerson -> contact_persons
+    const snakeCase = objectApiName
+      .replace(/([A-Z])/g, '_$1')
+      .toLowerCase()
+      .replace(/^_/, '');
+    
+    // Simple pluralization (can be enhanced)
+    if (snakeCase.endsWith('y')) {
+      return snakeCase.slice(0, -1) + 'ies';
+    } else if (snakeCase.endsWith('s')) {
+      return snakeCase;
+    } else {
+      return snakeCase + 's';
+    }
+  }
+
   // Runtime endpoints - CRUD operations
   async getRecords(
     tenantId: string,
@@ -93,15 +136,25 @@ export class ObjectService {
   ) {
     const knex = await this.tenantDbService.getTenantKnex(tenantId);
     
-    // For demonstration, using Account as example static object
+    // Verify object exists
-    if (objectApiName === 'Account') {
+    await this.getObjectDefinition(tenantId, objectApiName);
-      return knex('accounts')
+    
-        .where({ ownerId: userId })
+    const tableName = this.getTableName(objectApiName);
-        .where(filters || {});
+    
+    let query = knex(tableName);
+    
+    // Add ownership filter if ownerId field exists
+    const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
+    if (hasOwner) {
+      query = query.where({ ownerId: userId });
     }
     
-    // For custom objects, you'd need dynamic query building
+    // Apply additional filters
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
+    if (filters) {
+      query = query.where(filters);
+    }
+    
+    return query.select('*');
   }
 
   async getRecord(
@@ -112,19 +165,26 @@ export class ObjectService {
   ) {
     const knex = await this.tenantDbService.getTenantKnex(tenantId);
     
-    if (objectApiName === 'Account') {
+    // Verify object exists
-      const record = await knex('accounts')
+    await this.getObjectDefinition(tenantId, objectApiName);
-        .where({ id: recordId, ownerId: userId })
-        .first();
     
-      if (!record) {
+    const tableName = this.getTableName(objectApiName);
-        throw new NotFoundException('Record not found');
-      }
     
-      return record;
+    let query = knex(tableName).where({ id: recordId });
+    
+    // Add ownership filter if ownerId field exists
+    const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
+    if (hasOwner) {
+      query = query.where({ ownerId: userId });
     }
     
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
+    const record = await query.first();
+
+    if (!record) {
+      throw new NotFoundException('Record not found');
+    }
+
+    return record;
   }
 
   async createRecord(
@@ -135,19 +195,28 @@ export class ObjectService {
   ) {
     const knex = await this.tenantDbService.getTenantKnex(tenantId);
     
-    if (objectApiName === 'Account') {
+    // Verify object exists
-      const [id] = await knex('accounts').insert({
+    await this.getObjectDefinition(tenantId, objectApiName);
-        id: knex.raw('(UUID())'),
-        ownerId: userId,
-        ...data,
-        created_at: knex.fn.now(),
-        updated_at: knex.fn.now(),
-      });
     
-      return knex('accounts').where({ id }).first();
+    const tableName = this.getTableName(objectApiName);
+    
+    // Check if table has ownerId column
+    const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
+    
+    const recordData: any = {
+      id: knex.raw('(UUID())'),
+      ...data,
+      created_at: knex.fn.now(),
+      updated_at: knex.fn.now(),
+    };
+    
+    if (hasOwner) {
+      recordData.ownerId = userId;
     }
     
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
+    const [id] = await knex(tableName).insert(recordData);
+    
+    return knex(tableName).where({ id }).first();
   }
 
   async updateRecord(
@@ -159,18 +228,16 @@ export class ObjectService {
   ) {
     const knex = await this.tenantDbService.getTenantKnex(tenantId);
     
-    if (objectApiName === 'Account') {
+    // Verify object exists and user has access
-      // Verify ownership
+    await this.getRecord(tenantId, objectApiName, recordId, userId);
-      await this.getRecord(tenantId, objectApiName, recordId, userId);
     
-      await knex('accounts')
+    const tableName = this.getTableName(objectApiName);
-        .where({ id: recordId })
-        .update({ ...data, updated_at: knex.fn.now() });
 
-      return knex('accounts').where({ id: recordId }).first();
+    await knex(tableName)
-    }
+      .where({ id: recordId })
+      .update({ ...data, updated_at: knex.fn.now() });
     
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
+    return knex(tableName).where({ id: recordId }).first();
   }
 
   async deleteRecord(
@@ -181,15 +248,13 @@ export class ObjectService {
   ) {
     const knex = await this.tenantDbService.getTenantKnex(tenantId);
     
-    if (objectApiName === 'Account') {
+    // Verify object exists and user has access
-      // Verify ownership
+    await this.getRecord(tenantId, objectApiName, recordId, userId);
-      await this.getRecord(tenantId, objectApiName, recordId, userId);
     
-      await knex('accounts').where({ id: recordId }).delete();
+    const tableName = this.getTableName(objectApiName);
 
-      return { success: true };
+    await knex(tableName).where({ id: recordId }).delete();
-    }
     
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
+    return { success: true };
   }
 }

frontend/components/AppSidebar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import {
   Sidebar,
   SidebarContent,
@@ -19,12 +20,53 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut } from 'lucide-vue-next'
 
 const { logout } = useAuth()
+const { api } = useApi()
 
 const handleLogout = async () => {
   await logout()
 }
 
-const menuItems = [
+// Fetch objects and group by app
+const apps = ref<any[]>([])
+const topLevelObjects = ref<any[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const response = await api.get('/setup/objects')
+    const allObjects = response.data || response || []
+    
+    // Group objects by app
+    const appMap = new Map<string, any>()
+    const noAppObjects: any[] = []
+    
+    allObjects.forEach((obj: any) => {
+      const appId = obj.app_id || obj.appId
+      if (appId) {
+        if (!appMap.has(appId)) {
+          appMap.set(appId, {
+            id: appId,
+            name: obj.app?.name || obj.app?.label || 'Unknown App',
+            label: obj.app?.label || obj.app?.name || 'Unknown App',
+            objects: []
+          })
+        }
+        appMap.get(appId)!.objects.push(obj)
+      } else {
+        noAppObjects.push(obj)
+      }
+    })
+    
+    apps.value = Array.from(appMap.values())
+    topLevelObjects.value = noAppObjects
+  } catch (e) {
+    console.error('Failed to load objects:', e)
+  } finally {
+    loading.value = false
+  }
+})
+
+const staticMenuItems = [
   {
     title: 'Home',
     url: '/',
@@ -46,17 +88,6 @@ const menuItems = [
       },
     ],
   },
-  {
-    title: 'Runtime',
-    icon: Database,
-    items: [
-      {
-        title: 'My Apps',
-        url: '/app',
-        icon: Layers,
-      },
-    ],
-  },
 ]
 </script>
 
@@ -82,11 +113,12 @@ const menuItems = [
       </SidebarMenu>
     </SidebarHeader>
     <SidebarContent>
+      <!-- Static Menu Items -->
       <SidebarGroup>
-        <SidebarGroupLabel>Application</SidebarGroupLabel>
+        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
         <SidebarGroupContent>
           <SidebarMenu>
-            <template v-for="item in menuItems" :key="item.title">
+            <template v-for="item in staticMenuItems" :key="item.title">
               <!-- Simple menu item -->
               <SidebarMenuItem v-if="!item.items">
                 <SidebarMenuButton as-child>
@@ -127,6 +159,63 @@ const menuItems = [
           </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
+
+      <!-- Top-level Objects (no app) -->
+      <SidebarGroup v-if="!loading && topLevelObjects.length > 0">
+        <SidebarGroupLabel>Objects</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="obj in topLevelObjects" :key="obj.id">
+              <SidebarMenuButton as-child>
+                <NuxtLink :to="`/${obj.apiName.toLowerCase()}`">
+                  <Database class="h-4 w-4" />
+                  <span>{{ obj.label || obj.apiName }}</span>
+                </NuxtLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      <!-- App-grouped Objects -->
+      <SidebarGroup v-if="!loading && apps.length > 0">
+        <SidebarGroupLabel>Apps</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <Collapsible 
+              v-for="app in apps" 
+              :key="app.id"
+              as-child 
+              :default-open="true" 
+              class="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger as-child>
+                  <SidebarMenuButton :tooltip="app.label">
+                    <LayoutGrid class="h-4 w-4" />
+                    <span>{{ app.label }}</span>
+                    <ChevronRight
+                      class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                    />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    <SidebarMenuSubItem v-for="obj in app.objects" :key="obj.id">
+                      <SidebarMenuSubButton as-child>
+                        <NuxtLink :to="`/${obj.apiName.toLowerCase()}`">
+                          <Database class="h-4 w-4" />
+                          <span>{{ obj.label || obj.apiName }}</span>
+                        </NuxtLink>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>
       <SidebarMenu>

frontend/components/views/EditView.vue

@@ -47,18 +47,22 @@ const sections = computed<FieldSection[]>(() => {
   }
   
   // Default section with all visible fields
+  const visibleFields = props.config.fields
+    .filter(f => f.showOnEdit !== false)
+    .map(f => f.apiName)
+  
   return [{
     title: 'Details',
-    fields: props.config.fields
+    fields: visibleFields,
-      .filter(f => f.showOnEdit !== false)
-      .map(f => f.apiName),
   }]
 })
 
 const getFieldsBySection = (section: FieldSection) => {
-  return section.fields
+  const fields = section.fields
     .map(apiName => props.config.fields.find(f => f.apiName === apiName))
     .filter(Boolean)
+  
+  return fields
 }
 
 const validateField = (field: any): string | null => {

frontend/components/views/ListView.vue

@@ -231,4 +231,12 @@ const handleAction = (actionId: string) => {
 .list-view {
   width: 100%;
 }
+
+.list-view :deep(.border) {
+  background-color: hsl(var(--card));
+}
+
+.list-view :deep(input) {
+  background-color: hsl(var(--background));
+}
 </style>

frontend/composables/useApi.ts

@@ -63,15 +63,63 @@ export const useApi = () => {
     }
 
     if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
+      // Try to get error details from response
+      const text = await response.text()
+      console.error('API Error Response:', {
+        status: response.status,
+        statusText: response.statusText,
+        body: text
+      })
+      
+      let errorMessage = `HTTP error! status: ${response.status}`
+      if (text) {
+        try {
+          const errorData = JSON.parse(text)
+          errorMessage = errorData.message || errorData.error || errorMessage
+        } catch (e) {
+          // If not JSON, use the text directly if it's not too long
+          if (text.length < 200) {
+            errorMessage = text
+          }
+        }
+      }
+      
+      throw new Error(errorMessage)
     }
 
-    return response.json()
+    // Handle empty responses
+    const text = await response.text()
+    if (!text) {
+      return {}
+    }
+    
+    try {
+      return JSON.parse(text)
+    } catch (e) {
+      console.error('Failed to parse JSON response:', text)
+      throw new Error('Invalid JSON response from server')
+    }
   }
 
   const api = {
-    async get(path: string) {
+    async get(path: string, options?: { params?: Record<string, any> }) {
-      const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
+      let url = `${getApiBaseUrl()}/api${path}`
+      
+      // Add query parameters if provided
+      if (options?.params) {
+        const searchParams = new URLSearchParams()
+        Object.entries(options.params).forEach(([key, value]) => {
+          if (value !== undefined && value !== null) {
+            searchParams.append(key, String(value))
+          }
+        })
+        const queryString = searchParams.toString()
+        if (queryString) {
+          url += `?${queryString}`
+        }
+      }
+      
+      const response = await fetch(url, {
         headers: getHeaders(),
       })
       return handleResponse(response)

frontend/composables/useBreadcrumbs.ts

@@ -0,0 +1,20 @@
+import { ref } from 'vue'
+
+// Shared state for breadcrumbs
+const customBreadcrumbs = ref<Array<{ name: string; path?: string; isLast?: boolean }>>([])
+
+export function useBreadcrumbs() {
+  const setBreadcrumbs = (crumbs: Array<{ name: string; path?: string; isLast?: boolean }>) => {
+    customBreadcrumbs.value = crumbs
+  }
+
+  const clearBreadcrumbs = () => {
+    customBreadcrumbs.value = []
+  }
+
+  return {
+    breadcrumbs: customBreadcrumbs,
+    setBreadcrumbs,
+    clearBreadcrumbs
+  }
+}

frontend/composables/useFieldViews.ts

@@ -10,6 +10,12 @@ export const useFields = () => {
    * Convert backend field definition to frontend FieldConfig
    */
   const mapFieldDefinitionToConfig = (fieldDef: any): FieldConfig => {
+    // Convert isSystem to boolean (handle 0/1 from database)
+    const isSystemField = Boolean(fieldDef.isSystem)
+    
+    // Only truly system fields (id, createdAt, updatedAt, etc.) should be hidden on edit
+    const isAutoGeneratedField = ['id', 'createdAt', 'updatedAt', 'createdBy', 'updatedBy'].includes(fieldDef.apiName)
+    
     return {
       id: fieldDef.id,
       apiName: fieldDef.apiName,
@@ -23,13 +29,13 @@ export const useFields = () => {
       
       // Validation
       isRequired: fieldDef.isRequired,
-      isReadOnly: fieldDef.isSystem || fieldDef.uiMetadata?.isReadOnly,
+      isReadOnly: isAutoGeneratedField || fieldDef.uiMetadata?.isReadOnly,
       validationRules: fieldDef.uiMetadata?.validationRules || [],
       
-      // View options
+      // View options - only hide auto-generated fields by default
       showOnList: fieldDef.uiMetadata?.showOnList ?? true,
       showOnDetail: fieldDef.uiMetadata?.showOnDetail ?? true,
-      showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !fieldDef.isSystem,
+      showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !isAutoGeneratedField,
       sortable: fieldDef.uiMetadata?.sortable ?? true,
       
       // Field type specific
@@ -176,14 +182,15 @@ export const useViewState = <T extends { id?: string }>(
   const saving = ref(false)
   const error = ref<string | null>(null)
 
-  const api = useApi()
+  const { api } = useApi()
 
   const fetchRecords = async (params?: Record<string, any>) => {
     loading.value = true
     error.value = null
     try {
       const response = await api.get(apiEndpoint, { params })
-      records.value = response.data
+      // Handle response - data might be directly in response or in response.data
+      records.value = response.data || response || []
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to fetch records:', e)
@@ -197,7 +204,8 @@ export const useViewState = <T extends { id?: string }>(
     error.value = null
     try {
       const response = await api.get(`${apiEndpoint}/${id}`)
-      currentRecord.value = response.data
+      // Handle response - data might be directly in response or in response.data
+      currentRecord.value = response.data || response
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to fetch record:', e)
@@ -211,9 +219,12 @@ export const useViewState = <T extends { id?: string }>(
     error.value = null
     try {
       const response = await api.post(apiEndpoint, data)
-      records.value.push(response.data)
+      
-      currentRecord.value = response.data
+      // Handle response - it might be the data directly or wrapped in { data: ... }
-      return response.data
+      const recordData = response.data || response
+      records.value.push(recordData)
+      currentRecord.value = recordData
+      return recordData
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to create record:', e)
@@ -227,13 +238,18 @@ export const useViewState = <T extends { id?: string }>(
     saving.value = true
     error.value = null
     try {
-      const response = await api.put(`${apiEndpoint}/${id}`, data)
+      // Remove auto-generated fields that shouldn't be updated
+      const { id: _id, createdAt, created_at, updatedAt, updated_at, createdBy, updatedBy, ...updateData } = data as any
+      
+      const response = await api.put(`${apiEndpoint}/${id}`, updateData)
+      // Handle response - data might be directly in response or in response.data
+      const recordData = response.data || response
       const idx = records.value.findIndex(r => r.id === id)
       if (idx !== -1) {
-        records.value[idx] = response.data
+        records.value[idx] = recordData
       }
-      currentRecord.value = response.data
+      currentRecord.value = recordData
-      return response.data
+      return recordData
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to update record:', e)
@@ -292,12 +308,13 @@ export const useViewState = <T extends { id?: string }>(
   }
 
   const handleSave = async (data: T) => {
+    let savedRecord
     if (data.id) {
-      await updateRecord(data.id, data)
+      savedRecord = await updateRecord(data.id, data)
     } else {
-      await createRecord(data)
+      savedRecord = await createRecord(data)
     }
-    showDetail(currentRecord.value!)
+    return savedRecord
   }
 
   return {

frontend/layouts/default.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import AppSidebar from '@/components/AppSidebar.vue'
 import AIChatBar from '@/components/AIChatBar.vue'
 import {
@@ -13,8 +14,15 @@ import { Separator } from '@/components/ui/separator'
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 const route = useRoute()
+const { breadcrumbs: customBreadcrumbs } = useBreadcrumbs()
 
 const breadcrumbs = computed(() => {
+  // If custom breadcrumbs are set by the page, use those
+  if (customBreadcrumbs.value.length > 0) {
+    return customBreadcrumbs.value
+  }
+  
+  // Otherwise, fall back to URL-based breadcrumbs
   const paths = route.path.split('/').filter(Boolean)
   return paths.map((path, index) => ({
     name: path.charAt(0).toUpperCase() + path.slice(1),

frontend/pages/[objectName]/[[recordId]]/[[view]].vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useApi } from '@/composables/useApi'
+import { useFields, useViewState } from '@/composables/useFieldViews'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailView.vue'
+import EditView from '@/components/views/EditView.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { api } = useApi()
+const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
+
+// Use breadcrumbs composable
+const { setBreadcrumbs } = useBreadcrumbs()
+
+// Get object API name from route (case-insensitive)
+const objectApiName = computed(() => {
+  const name = route.params.objectName as string
+  // We'll look up the actual case-sensitive name from the backend
+  return name
+})
+const recordId = computed(() => route.params.recordId as string)
+const view = computed(() => {
+  // If recordId is 'new', default to 'edit' view
+  if (route.params.recordId === 'new' && !route.params.view) {
+    return 'edit'
+  }
+  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
+})
+
+// State
+const objectDefinition = ref<any>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+// Use view state composable
+const {
+  records,
+  currentRecord,
+  loading: dataLoading,
+  saving,
+  fetchRecords,
+  fetchRecord,
+  deleteRecord,
+  deleteRecords,
+  handleSave,
+} = useViewState(`/runtime/objects/${objectApiName.value}/records`)
+
+// Compute breadcrumbs based on the current route and object data
+const updateBreadcrumbs = () => {
+  if (!objectDefinition.value) {
+    return
+  }
+  
+  const crumbs: Array<{ name: string; path?: string; isLast?: boolean }> = []
+  
+  // Add app breadcrumb if object belongs to an app
+  if (objectDefinition.value?.app) {
+    crumbs.push({
+      name: objectDefinition.value.app.label || objectDefinition.value.app.name,
+      path: undefined, // No path for app grouping
+    })
+  }
+  
+  // Add object breadcrumb - always use plural
+  const objectLabel = objectDefinition.value?.pluralLabel || objectDefinition.value?.label || objectApiName.value
+  
+  crumbs.push({
+    name: objectLabel,
+    path: `/${objectApiName.value.toLowerCase()}`,
+  })
+  
+  // Add record name if viewing/editing a specific record
+  if (recordId.value && recordId.value !== 'new' && currentRecord.value) {
+    const nameField = objectDefinition.value?.nameField
+    let recordName = recordId.value // fallback to ID
+    
+    // Try to get the display name from the nameField
+    if (nameField && currentRecord.value[nameField]) {
+      recordName = currentRecord.value[nameField]
+    }
+    
+    crumbs.push({
+      name: recordName,
+      isLast: true,
+    })
+  } else if (recordId.value === 'new') {
+    crumbs.push({
+      name: 'New',
+      isLast: true,
+    })
+  }
+  
+  setBreadcrumbs(crumbs)
+}
+
+// Watch for changes that affect breadcrumbs
+watch([objectDefinition, currentRecord, recordId], () => {
+  updateBreadcrumbs()
+}, { deep: true })
+
+// View configs
+const listConfig = computed(() => {
+  if (!objectDefinition.value) return null
+  return buildListViewConfig(objectDefinition.value, {
+    searchable: true,
+    exportable: true,
+    filterable: true,
+  })
+})
+
+const detailConfig = computed(() => {
+  if (!objectDefinition.value) return null
+  return buildDetailViewConfig(objectDefinition.value)
+})
+
+const editConfig = computed(() => {
+  if (!objectDefinition.value) return null
+  return buildEditViewConfig(objectDefinition.value)
+})
+
+// Fetch object definition
+const fetchObjectDefinition = async () => {
+  try {
+    loading.value = true
+    error.value = null
+    const response = await api.get(`/setup/objects/${objectApiName.value}`)
+    objectDefinition.value = response
+  } catch (e: any) {
+    error.value = e.message || 'Failed to load object definition'
+    console.error('Error fetching object definition:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Navigation handlers - use lowercase URLs
+const handleRowClick = (row: any) => {
+  router.push(`/${objectApiName.value.toLowerCase()}/${row.id}/detail`)
+}
+
+const handleCreate = () => {
+  router.push(`/${objectApiName.value.toLowerCase()}/new`)
+}
+
+const handleEdit = (row?: any) => {
+  const id = row?.id || recordId.value
+  router.push(`/${objectApiName.value.toLowerCase()}/${id}/edit`)
+}
+
+const handleBack = () => {
+  // Navigate to list view explicitly
+  router.push(`/${objectApiName.value.toLowerCase()}/`)
+}
+
+const handleDelete = async (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
+    try {
+      const ids = rows.map(r => r.id)
+      await deleteRecords(ids)
+      if (view.value !== 'list') {
+        await router.push(`/${objectApiName.value.toLowerCase()}/`)
+      }
+    } catch (e: any) {
+      error.value = e.message || 'Failed to delete records'
+    }
+  }
+}
+
+const handleSaveRecord = async (data: any) => {
+  try {
+    const savedRecord = await handleSave(data)
+    if (savedRecord?.id) {
+      router.push(`/${objectApiName.value.toLowerCase()}/${savedRecord.id}/detail`)
+    } else {
+      // Fallback to list if no ID available
+      router.push(`/${objectApiName.value.toLowerCase()}/`)
+    }
+  } catch (e: any) {
+    error.value = e.message || 'Failed to save record'
+  }
+}
+
+const handleCancel = () => {
+  if (recordId.value && recordId.value !== 'new') {
+    router.push(`/${objectApiName.value.toLowerCase()}/${recordId.value}/detail`)
+  } else {
+    router.push(`/${objectApiName.value.toLowerCase()}/`)
+  }
+}
+
+// Watch for route changes
+watch(() => route.params, async (newParams, oldParams) => {
+  // Reset current record when navigating to 'new'
+  if (newParams.recordId === 'new') {
+    currentRecord.value = null
+  }
+  
+  // Fetch record if navigating to existing record
+  if (newParams.recordId && newParams.recordId !== 'new' && newParams.recordId !== oldParams.recordId) {
+    await fetchRecord(newParams.recordId as string)
+  }
+  
+  // Fetch records if navigating back to list
+  if (!newParams.recordId && !newParams.view) {
+    await fetchRecords()
+  }
+}, { deep: true })
+
+// Initialize
+onMounted(async () => {
+  await fetchObjectDefinition()
+  
+  if (view.value === 'list') {
+    await fetchRecords()
+  } else if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+  
+  // Update breadcrumbs after data is loaded
+  updateBreadcrumbs()
+})
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="object-view-container">
+      
+      <!-- Page Header -->
+      <div v-if="!loading && !error && view === 'list'" class="mb-6">
+        <h1 class="text-3xl font-bold">{{ objectDefinition?.label || objectApiName }}</h1>
+        <p v-if="objectDefinition?.description" class="text-muted-foreground mt-2">
+          {{ objectDefinition.description }}
+        </p>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="flex items-center justify-center min-h-screen">
+        <div class="text-center space-y-4">
+          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="flex items-center justify-center min-h-screen">
+        <div class="text-center space-y-4 max-w-md">
+          <div class="text-destructive text-5xl">⚠️</div>
+          <h2 class="text-2xl font-bold">Error</h2>
+          <p class="text-muted-foreground">{{ error }}</p>
+          <Button @click="router.back()">Go Back</Button>
+        </div>
+      </div>
+
+      <!-- List View -->
+      <ListView
+        v-else-if="view === 'list' && listConfig"
+        :config="listConfig"
+        :data="records"
+        :loading="dataLoading"
+        selectable
+        @row-click="handleRowClick"
+        @create="handleCreate"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
+
+      <!-- Detail View -->
+      <DetailView
+        v-else-if="view === 'detail' && detailConfig && currentRecord"
+        :config="detailConfig"
+        :data="currentRecord"
+        :loading="dataLoading"
+        @edit="handleEdit"
+        @delete="() => handleDelete([currentRecord])"
+        @back="handleBack"
+      />
+
+      <!-- Edit View -->
+      <EditView
+        v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
+        :config="editConfig"
+        :data="currentRecord || {}"
+        :loading="dataLoading"
+        :saving="saving"
+        @save="handleSaveRecord"
+        @cancel="handleCancel"
+        @back="handleBack"
+      />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.object-view-container {
+  min-height: 100vh;
+  padding: 2rem;
+}
+</style>

frontend/pages/app/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// Redirect to a default page or show dashboard
+const router = useRouter()
+
+// You can redirect to a dashboard or objects list
+// For now, just show a simple message
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="container mx-auto p-8">
+      <h1 class="text-3xl font-bold mb-4">Welcome to Neo Platform</h1>
+      <p class="text-muted-foreground">Select an object from the sidebar to get started.</p>
+    </div>
+  </NuxtLayout>
+</template>

frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
@@ -9,13 +9,19 @@ import EditView from '@/components/views/EditView.vue'
 
 const route = useRoute()
 const router = useRouter()
-const api = useApi()
+const { api } = useApi()
 const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
 
 // Get object API name from route
 const objectApiName = computed(() => route.params.objectName as string)
 const recordId = computed(() => route.params.recordId as string)
-const view = computed(() => route.params.view as 'list' | 'detail' | 'edit' || 'list')
+const view = computed(() => {
+  // If recordId is 'new', default to 'edit' view
+  if (route.params.recordId === 'new' && !route.params.view) {
+    return 'edit'
+  }
+  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
+})
 
 // State
 const objectDefinition = ref<any>(null)
@@ -33,7 +39,7 @@ const {
   deleteRecord,
   deleteRecords,
   handleSave,
-} = useViewState(`/api/runtime/objects/${objectApiName.value}`)
+} = useViewState(`/runtime/objects/${objectApiName.value}/records`)
 
 // View configs
 const listConfig = computed(() => {
@@ -60,8 +66,8 @@ const fetchObjectDefinition = async () => {
   try {
     loading.value = true
     error.value = null
-    const response = await api.get(`/api/runtime/objects/${objectApiName.value}/definition`)
+    const response = await api.get(`/setup/objects/${objectApiName.value}`)
-    objectDefinition.value = response.data
+    objectDefinition.value = response
   } catch (e: any) {
     error.value = e.message || 'Failed to load object definition'
     console.error('Error fetching object definition:', e)
@@ -72,7 +78,7 @@ const fetchObjectDefinition = async () => {
 
 // Navigation handlers
 const handleRowClick = (row: any) => {
-  router.push(`/app/objects/${objectApiName.value}/${row.id}`)
+  router.push(`/app/objects/${objectApiName.value}/${row.id}/detail`)
 }
 
 const handleCreate = () => {
@@ -85,7 +91,8 @@ const handleEdit = (row?: any) => {
 }
 
 const handleBack = () => {
-  router.push(`/app/objects/${objectApiName.value}`)
+  // Navigate to list view explicitly
+  router.push(`/app/objects/${objectApiName.value}/`)
 }
 
 const handleDelete = async (rows: any[]) => {
@@ -94,7 +101,7 @@ const handleDelete = async (rows: any[]) => {
       const ids = rows.map(r => r.id)
       await deleteRecords(ids)
       if (view.value !== 'list') {
-        await router.push(`/app/objects/${objectApiName.value}`)
+        await router.push(`/app/objects/${objectApiName.value}/`)
       }
     } catch (e: any) {
       error.value = e.message || 'Failed to delete records'
@@ -104,21 +111,44 @@ const handleDelete = async (rows: any[]) => {
 
 const handleSaveRecord = async (data: any) => {
   try {
-    await handleSave(data)
+    const savedRecord = await handleSave(data)
-    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}`)
+    if (savedRecord?.id) {
+      router.push(`/app/objects/${objectApiName.value}/${savedRecord.id}/detail`)
+    } else {
+      // Fallback to list if no ID available
+      router.push(`/app/objects/${objectApiName.value}/`)
+    }
   } catch (e: any) {
     error.value = e.message || 'Failed to save record'
   }
 }
 
 const handleCancel = () => {
-  if (recordId.value) {
+  if (recordId.value && recordId.value !== 'new') {
-    router.push(`/app/objects/${objectApiName.value}/${recordId.value}`)
+    router.push(`/app/objects/${objectApiName.value}/${recordId.value}/detail`)
   } else {
-    router.push(`/app/objects/${objectApiName.value}`)
+    router.push(`/app/objects/${objectApiName.value}/`)
   }
 }
 
+// Watch for route changes
+watch(() => route.params, async (newParams, oldParams) => {
+  // Reset current record when navigating to 'new'
+  if (newParams.recordId === 'new') {
+    currentRecord.value = null
+  }
+  
+  // Fetch record if navigating to existing record
+  if (newParams.recordId && newParams.recordId !== 'new' && newParams.recordId !== oldParams.recordId) {
+    await fetchRecord(newParams.recordId as string)
+  }
+  
+  // Fetch records if navigating back to list
+  if (!newParams.recordId && !newParams.view) {
+    await fetchRecords()
+  }
+}, { deep: true })
+
 // Initialize
 onMounted(async () => {
   await fetchObjectDefinition()
@@ -132,61 +162,71 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="object-view-container">
+  <NuxtLayout name="default">
-    <!-- Loading State -->
+    <div class="object-view-container">
-    <div v-if="loading" class="flex items-center justify-center min-h-screen">
+      <!-- Page Header -->
-      <div class="text-center space-y-4">
+      <div v-if="!loading && !error" class="mb-6">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+        <h1 class="text-3xl font-bold">{{ objectDefinition?.label || objectApiName }}</h1>
-        <p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
+        <p v-if="objectDefinition?.description" class="text-muted-foreground mt-2">
+          {{ objectDefinition.description }}
+        </p>
       </div>
-    </div>
 
-    <!-- Error State -->
+      <!-- Loading State -->
-    <div v-else-if="error" class="flex items-center justify-center min-h-screen">
+      <div v-if="loading" class="flex items-center justify-center min-h-screen">
-      <div class="text-center space-y-4 max-w-md">
+        <div class="text-center space-y-4">
-        <div class="text-destructive text-5xl">⚠️</div>
+          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
-        <h2 class="text-2xl font-bold">Error</h2>
+          <p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
-        <p class="text-muted-foreground">{{ error }}</p>
+        </div>
-        <Button @click="router.back()">Go Back</Button>
       </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="flex items-center justify-center min-h-screen">
+        <div class="text-center space-y-4 max-w-md">
+          <div class="text-destructive text-5xl">⚠️</div>
+          <h2 class="text-2xl font-bold">Error</h2>
+          <p class="text-muted-foreground">{{ error }}</p>
+          <Button @click="router.back()">Go Back</Button>
+        </div>
+      </div>
+
+      <!-- List View -->
+      <ListView
+        v-else-if="view === 'list' && listConfig"
+        :config="listConfig"
+        :data="records"
+        :loading="dataLoading"
+        selectable
+        @row-click="handleRowClick"
+        @create="handleCreate"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
+
+      <!-- Detail View -->
+      <DetailView
+        v-else-if="view === 'detail' && detailConfig && currentRecord"
+        :config="detailConfig"
+        :data="currentRecord"
+        :loading="dataLoading"
+        @edit="handleEdit"
+        @delete="() => handleDelete([currentRecord])"
+        @back="handleBack"
+      />
+
+      <!-- Edit View -->
+      <EditView
+        v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
+        :config="editConfig"
+        :data="currentRecord || {}"
+        :loading="dataLoading"
+        :saving="saving"
+        @save="handleSaveRecord"
+        @cancel="handleCancel"
+        @back="handleBack"
+      />
     </div>
-
+  </NuxtLayout>
-    <!-- List View -->
-    <ListView
-      v-else-if="view === 'list' && listConfig"
-      :config="listConfig"
-      :data="records"
-      :loading="dataLoading"
-      selectable
-      @row-click="handleRowClick"
-      @create="handleCreate"
-      @edit="handleEdit"
-      @delete="handleDelete"
-    />
-
-    <!-- Detail View -->
-    <DetailView
-      v-else-if="view === 'detail' && detailConfig && currentRecord"
-      :config="detailConfig"
-      :data="currentRecord"
-      :loading="dataLoading"
-      @edit="handleEdit"
-      @delete="() => handleDelete([currentRecord])"
-      @back="handleBack"
-    />
-
-    <!-- Edit View -->
-    <EditView
-      v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
-      :config="editConfig"
-      :data="currentRecord || {}"
-      :loading="dataLoading"
-      :saving="saving"
-      @save="handleSaveRecord"
-      @cancel="handleCancel"
-      @back="handleBack"
-    />
-  </div>
 </template>
 
 <style scoped>

frontend/pages/app/objects/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// List all available objects
+const { api } = useApi()
+const router = useRouter()
+
+const objects = ref<any[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const response = await api.get('/setup/objects')
+    objects.value = response.data || response || []
+  } catch (e) {
+    console.error('Failed to load objects:', e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="container mx-auto p-8">
+      <h1 class="text-3xl font-bold mb-6">Objects</h1>
+      
+      <div v-if="loading" class="text-center py-12">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+      </div>
+      
+      <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <NuxtLink
+          v-for="obj in objects"
+          :key="obj.id"
+          :to="`/app/objects/${obj.apiName}/`"
+          class="block p-6 border rounded-lg hover:bg-accent transition-colors"
+        >
+          <h3 class="text-xl font-semibold mb-2">{{ obj.label }}</h3>
+          <p v-if="obj.description" class="text-sm text-muted-foreground">{{ obj.description }}</p>
+        </NuxtLink>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>