Use routes closer to the route for objects

backend/src/object/object.service.ts

@@ -84,6 +84,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 +112,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 +141,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();
+    const tableName = this.getTableName(objectApiName);
+    
+    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 });
+    }
+    
+    const record = await query.first();
 
-      if (!record) {
+    if (!record) {
-        throw new NotFoundException('Record not found');
+      throw new NotFoundException('Record not found');
-      }
-
-      return record;
     }
 
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
+    return record;
   }
 
   async createRecord(
@@ -135,19 +171,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,
+    const tableName = this.getTableName(objectApiName);
-        ...data,
+    
-        created_at: knex.fn.now(),
+    // Check if table has ownerId column
-        updated_at: knex.fn.now(),
+    const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
-      });
+    
-      
+    const recordData: any = {
-      return knex('accounts').where({ id }).first();
+      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 +204,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);
+    
+    const tableName = this.getTableName(objectApiName);
 
-      await knex('accounts')
+    await knex(tableName)
-        .where({ id: recordId })
+      .where({ id: recordId })
-        .update({ ...data, updated_at: knex.fn.now() });
+      .update({ ...data, updated_at: knex.fn.now() });
-      
+    
-      return knex('accounts').where({ id: recordId }).first();
+    return knex(tableName).where({ id: recordId }).first();
-    }
-
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
   }
 
   async deleteRecord(
@@ -181,15 +224,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);
+    
+    const tableName = this.getTableName(objectApiName);
 
-      await knex('accounts').where({ id: recordId }).delete();
+    await knex(tableName).where({ id: recordId }).delete();
-      
+    
-      return { success: true };
+    return { success: true };
-    }
-
-    throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
   }
 }

frontend/components/AppSidebar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import {
   Sidebar,
   SidebarContent,
@@ -19,12 +20,52 @@ 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) => {
+      if (obj.appId) {
+        if (!appMap.has(obj.appId)) {
+          appMap.set(obj.appId, {
+            id: obj.appId,
+            name: obj.app?.name || obj.app?.label || 'Unknown App',
+            label: obj.app?.label || obj.app?.name || 'Unknown App',
+            objects: []
+          })
+        }
+        appMap.get(obj.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 +87,6 @@ const menuItems = [
       },
     ],
   },
-  {
-    title: 'Runtime',
-    icon: Database,
-    items: [
-      {
-        title: 'My Apps',
-        url: '/app',
-        icon: Layers,
-      },
-    ],
-  },
 ]
 </script>
 
@@ -82,11 +112,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 +158,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/pages/[objectName]/[[recordId]]/[[view]].vue

@@ -0,0 +1,242 @@
+<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()
+
+// 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`)
+
+// 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)
+  }
+})
+</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>