Added basic crud for objects

.env.api

@@ -2,6 +2,7 @@ NODE_ENV=development
 PORT=3000
 
 DATABASE_URL="mysql://platform:platform@db:3306/platform"
+CENTRAL_DATABASE_URL="mysql://root:asjdnfqTash37faggT@db:3306/central_platform"
 REDIS_URL="redis://redis:6379"
 
 # JWT, multi-tenant hints, etc.

backend/prisma/migrations/20251221012138_add_users_to_central/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE `users` (
+    `id` VARCHAR(191) NOT NULL,
+    `email` VARCHAR(191) NOT NULL,
+    `password` VARCHAR(191) NOT NULL,
+    `firstName` VARCHAR(191) NULL,
+    `lastName` VARCHAR(191) NULL,
+    `role` VARCHAR(191) NOT NULL DEFAULT 'admin',
+    `isActive` BOOLEAN NOT NULL DEFAULT true,
+    `createdAt` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    `updatedAt` DATETIME(3) NOT NULL,
+
+    UNIQUE INDEX `users_email_key`(`email`),
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

backend/prisma/schema-central.prisma

@@ -8,6 +8,20 @@ datasource db {
   url      = env("CENTRAL_DATABASE_URL")
 }
 
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  password  String
+  firstName String?
+  lastName  String?
+  role      String   @default("admin") // admin, superadmin
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("users")
+}
+
 model Tenant {
   id          String   @id @default(cuid())
   name        String

backend/scripts/create-admin-user.ts

@@ -0,0 +1,50 @@
+import { PrismaClient as CentralPrismaClient } from '../node_modules/.prisma/central';
+import * as bcrypt from 'bcrypt';
+
+// Central database client
+const centralPrisma = new CentralPrismaClient();
+
+async function createAdminUser() {
+  const email = 'admin@example.com';
+  const password = 'admin123';
+  const firstName = 'Admin';
+  const lastName = 'User';
+
+  try {
+    // Check if admin user already exists
+    const existingUser = await centralPrisma.user.findUnique({
+      where: { email },
+    });
+
+    if (existingUser) {
+      console.log(`User ${email} already exists`);
+      return;
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    // Create admin user in central database
+    const user = await centralPrisma.user.create({
+      data: {
+        email,
+        password: hashedPassword,
+        firstName,
+        lastName,
+        role: 'superadmin',
+        isActive: true,
+      },
+    });
+
+    console.log('\nAdmin user created successfully!');
+    console.log('Email:', email);
+    console.log('Password:', password);
+    console.log('User ID:', user.id);
+  } catch (error) {
+    console.error('Error creating admin user:', error);
+  } finally {
+    await centralPrisma.$disconnect();
+  }
+}
+
+createAdminUser();

backend/scripts/create-tenant-user.ts

@@ -0,0 +1,138 @@
+import { PrismaClient as CentralPrismaClient } from '../node_modules/.prisma/central';
+import * as bcrypt from 'bcrypt';
+import { Knex, knex } from 'knex';
+
+// Central database client
+const centralPrisma = new CentralPrismaClient();
+
+async function createTenantUser() {
+  const tenantSlug = 'tenant1';
+  const email = 'user@example.com';
+  const password = 'user123';
+  const firstName = 'Test';
+  const lastName = 'User';
+
+  try {
+    // Get tenant database connection info
+    const tenant = await centralPrisma.tenant.findFirst({
+      where: { slug: tenantSlug },
+    });
+
+    if (!tenant) {
+      console.log(`Tenant ${tenantSlug} not found. Creating tenant...`);
+      
+      // Create tenant in central database
+      const newTenant = await centralPrisma.tenant.create({
+        data: {
+          name: 'Default Tenant',
+          slug: tenantSlug,
+          dbHost: 'db',
+          dbPort: 3306,
+          dbName: 'platform',
+          dbUsername: 'platform',
+          dbPassword: 'platform',
+          status: 'active',
+        },
+      });
+
+      console.log('Tenant created:', newTenant.slug);
+    } else {
+      console.log('Tenant found:', tenant.slug);
+    }
+
+    const tenantInfo = tenant || {
+      dbHost: 'db',
+      dbPort: 3306,
+      dbName: 'platform',
+      dbUsername: 'platform',
+      dbPassword: 'platform',
+    };
+
+    // Connect to tenant database (using root for now since tenant password is encrypted)
+    const tenantDb: Knex = knex({
+      client: 'mysql2',
+      connection: {
+        host: tenantInfo.dbHost,
+        port: tenantInfo.dbPort,
+        database: tenantInfo.dbName,
+        user: 'root',
+        password: 'asjdnfqTash37faggT',
+      },
+    });
+
+    // Check if user already exists
+    const existingUser = await tenantDb('users')
+      .where({ email })
+      .first();
+
+    if (existingUser) {
+      console.log(`User ${email} already exists in tenant ${tenantSlug}`);
+      await tenantDb.destroy();
+      return;
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    // Create user
+    await tenantDb('users').insert({
+      email,
+      password: hashedPassword,
+      firstName,
+      lastName,
+      isActive: true,
+      created_at: new Date(),
+      updated_at: new Date(),
+    });
+
+    console.log(`\nUser created successfully in tenant ${tenantSlug}!`);
+    console.log('Email:', email);
+    console.log('Password:', password);
+
+    // Create admin role if it doesn't exist
+    let adminRole = await tenantDb('roles')
+      .where({ name: 'admin' })
+      .first();
+
+    if (!adminRole) {
+      await tenantDb('roles').insert({
+        name: 'admin',
+        guardName: 'api',
+        description: 'Administrator role with full access',
+        created_at: new Date(),
+        updated_at: new Date(),
+      });
+      
+      adminRole = await tenantDb('roles')
+        .where({ name: 'admin' })
+        .first();
+      
+      console.log('Admin role created');
+    }
+
+    // Get the created user
+    const user = await tenantDb('users')
+      .where({ email })
+      .first();
+
+    // Assign admin role to user
+    if (adminRole && user) {
+      await tenantDb('user_roles').insert({
+        userId: user.id,
+        roleId: adminRole.id,
+        created_at: new Date(),
+        updated_at: new Date(),
+      });
+      
+      console.log('Admin role assigned to user');
+    }
+
+    await tenantDb.destroy();
+  } catch (error) {
+    console.error('Error creating tenant user:', error);
+  } finally {
+    await centralPrisma.$disconnect();
+  }
+}
+
+createTenantUser();

backend/src/app-builder/setup-app.controller.ts

@@ -12,7 +12,7 @@ import { JwtAuthGuard } from '../auth/jwt-auth.guard';
 import { TenantId } from '../tenant/tenant.decorator';
 
 @Controller('setup/apps')
-//@UseGuards(JwtAuthGuard)
+@UseGuards(JwtAuthGuard)
 export class SetupAppController {
   constructor(private appBuilderService: AppBuilderService) {}
 

backend/src/auth/auth.controller.ts

@@ -42,8 +42,13 @@ export class AuthController {
 
   @HttpCode(HttpStatus.OK)
   @Post('login')
-  async login(@Body() loginDto: LoginDto) {
+  async login(@TenantId() tenantId: string, @Body() loginDto: LoginDto) {
+    if (!tenantId) {
+      throw new UnauthorizedException('Tenant ID is required');
+    }
+
     const user = await this.authService.validateUser(
+      tenantId,
       loginDto.email,
       loginDto.password,
     );
@@ -57,9 +62,15 @@ export class AuthController {
 
   @Post('register')
   async register(
+    @TenantId() tenantId: string,
     @Body() registerDto: RegisterDto,
   ) {
+    if (!tenantId) {
+      throw new UnauthorizedException('Tenant ID is required');
+    }
+
     const user = await this.authService.register(
+      tenantId,
       registerDto.email,
       registerDto.password,
       registerDto.firstName,
@@ -68,4 +79,12 @@ export class AuthController {
 
     return user;
   }
+
+  @HttpCode(HttpStatus.OK)
+  @Post('logout')
+  async logout() {
+    // For stateless JWT, logout is handled on client-side
+    // This endpoint exists for consistency and potential future enhancements
+    return { message: 'Logged out successfully' };
+  }
 }

backend/src/auth/auth.module.ts

@@ -5,10 +5,12 @@ import { ConfigService } from '@nestjs/config';
 import { AuthService } from './auth.service';
 import { AuthController } from './auth.controller';
 import { JwtStrategy } from './jwt.strategy';
+import { TenantModule } from '../tenant/tenant.module';
 
 @Module({
   imports: [
     PassportModule,
+    TenantModule,
     JwtModule.registerAsync({
       inject: [ConfigService],
       useFactory: (config: ConfigService) => ({

backend/src/auth/auth.service.ts

@@ -1,43 +1,43 @@
 import { Injectable } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
-import { PrismaService } from '../prisma/prisma.service';
+import { TenantDatabaseService } from '../tenant/tenant-database.service';
 import * as bcrypt from 'bcrypt';
 
 @Injectable()
 export class AuthService {
   constructor(
-    private prisma: PrismaService,
+    private tenantDbService: TenantDatabaseService,
     private jwtService: JwtService,
   ) {}
 
   async validateUser(
+    tenantId: string,
     email: string,
     password: string,
   ): Promise<any> {
-    const user = await this.prisma.user.findUnique({
+    const tenantDb = await this.tenantDbService.getTenantKnex(tenantId);
-      where: {
-        email,
-      },
-      include: {
-        userRoles: {
-          include: {
-            role: {
-              include: {
-                rolePermissions: {
-                  include: {
-                    permission: true,
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    });
     
-    if (user && (await bcrypt.compare(password, user.password))) {
+    const user = await tenantDb('users')
-      const { password, ...result } = user;
+      .where({ email })
-      return result;
+      .first();
+
+    if (!user) {
+      return null;
+    }
+
+    if (await bcrypt.compare(password, user.password)) {
+      // Load user roles and permissions
+      const userRoles = await tenantDb('user_roles')
+        .where({ userId: user.id })
+        .join('roles', 'user_roles.roleId', 'roles.id')
+        .select('roles.*');
+
+      const { password: _, ...result } = user;
+      return {
+        ...result,
+        tenantId,
+        userRoles,
+      };
     }
 
     return null;
@@ -61,22 +61,30 @@ export class AuthService {
   }
 
   async register(
+    tenantId: string,
     email: string,
     password: string,
     firstName?: string,
     lastName?: string,
   ) {
+    const tenantDb = await this.tenantDbService.getTenantKnex(tenantId);
+    
     const hashedPassword = await bcrypt.hash(password, 10);
 
-    const user = await this.prisma.user.create({
+    const [userId] = await tenantDb('users').insert({
-      data: {
+      email,
-        email,
+      password: hashedPassword,
-        password: hashedPassword,
+      firstName,
-        firstName,
+      lastName,
-        lastName,
+      isActive: true,
-      },
+      created_at: new Date(),
+      updated_at: new Date(),
     });
 
+    const user = await tenantDb('users')
+      .where({ id: userId })
+      .first();
+
     const { password: _, ...result } = user;
     return result;
   }

backend/src/tenant/tenant-database.service.ts

@@ -8,22 +8,30 @@ export class TenantDatabaseService {
   private readonly logger = new Logger(TenantDatabaseService.name);
   private tenantConnections: Map<string, Knex> = new Map();
 
-  async getTenantKnex(tenantId: string): Promise<Knex> {
+  async getTenantKnex(tenantIdOrSlug: string): Promise<Knex> {
-    if (this.tenantConnections.has(tenantId)) {
+    if (this.tenantConnections.has(tenantIdOrSlug)) {
-      return this.tenantConnections.get(tenantId);
+      return this.tenantConnections.get(tenantIdOrSlug);
     }
 
     const centralPrisma = getCentralPrisma();
-    const tenant = await centralPrisma.tenant.findUnique({
+    
-      where: { id: tenantId },
+    // Try to find tenant by ID first, then by slug
+    let tenant = await centralPrisma.tenant.findUnique({
+      where: { id: tenantIdOrSlug },
     });
     
     if (!tenant) {
-      throw new Error(`Tenant ${tenantId} not found`);
+      tenant = await centralPrisma.tenant.findUnique({
+        where: { slug: tenantIdOrSlug },
+      });
+    }
+
+    if (!tenant) {
+      throw new Error(`Tenant ${tenantIdOrSlug} not found`);
     }
 
     if (tenant.status !== 'active') {
-      throw new Error(`Tenant ${tenantId} is not active`);
+      throw new Error(`Tenant ${tenantIdOrSlug} is not active`);
     }
 
     // Decrypt password
@@ -56,7 +64,7 @@ export class TenantDatabaseService {
       throw error;
     }
 
-    this.tenantConnections.set(tenantId, tenantKnex);
+    this.tenantConnections.set(tenantIdOrSlug, tenantKnex);
     return tenantKnex;
   }
 

backend/src/tenant/tenant.middleware.ts

@@ -19,29 +19,53 @@ export class TenantMiddleware implements NestMiddleware {
       const hostname = host.split(':')[0]; // Remove port if present
       const parts = hostname.split('.');
 
-      // For local development, accept x-tenant-id header as fallback
+      this.logger.log(`Host header: ${host}, hostname: ${hostname}, parts: ${JSON.stringify(parts)}`);
+
+      // For local development, accept x-tenant-id header
       let tenantId = req.headers['x-tenant-id'] as string;
       let subdomain: string | null = null;
 
-      // Extract subdomain (e.g., "acme" from "acme.routebox.co")
+      this.logger.log(`Host header: ${host}, hostname: ${hostname}, parts: ${JSON.stringify(parts)}, x-tenant-id: ${tenantId}`);
-      if (parts.length > 2) {
+
+      // If x-tenant-id is explicitly provided, use it directly
+      if (tenantId) {
+        this.logger.log(`Using explicit x-tenant-id: ${tenantId}`);
+        (req as any).tenantId = tenantId;
+        next();
+        return;
+      }
+
+      // Extract subdomain (e.g., "tenant1" from "tenant1.routebox.co")
+      // For production domains with 3+ parts, extract first part as subdomain
+      if (parts.length >= 3) {
         subdomain = parts[0];
         // Ignore www subdomain
         if (subdomain === 'www') {
           subdomain = null;
         }
       }
+      // For development (e.g., tenant1.localhost), also check 2 parts
+      else if (parts.length === 2 && parts[1] === 'localhost') {
+        subdomain = parts[0];
+      }
+
+      this.logger.log(`Extracted subdomain: ${subdomain}`);
 
       // Get tenant by subdomain if available
       if (subdomain) {
-        const tenant = await this.tenantDbService.getTenantByDomain(subdomain);
+        try {
-        if (tenant) {
+          const tenant = await this.tenantDbService.getTenantByDomain(subdomain);
-          tenantId = tenant.id;
+          if (tenant) {
-          this.logger.log(
+            tenantId = tenant.id;
-            `Tenant identified: ${tenant.name} (${tenant.id}) from subdomain: ${subdomain}`,
+            this.logger.log(
-          );
+              `Tenant identified: ${tenant.name} (${tenant.id}) from subdomain: ${subdomain}`,
-        } else {
+            );
-          this.logger.warn(`No tenant found for subdomain: ${subdomain}`);
+          }
+        } catch (error) {
+          this.logger.warn(`No tenant found for subdomain: ${subdomain}`, error.message);
+          // Fall back to using subdomain as tenantId directly if domain lookup fails
+          tenantId = subdomain;
+          this.logger.log(`Using subdomain as tenantId fallback: ${tenantId}`);
         }
       }
 

frontend/app.vue

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

frontend/components/AppSidebar.vue

@@ -16,7 +16,13 @@ import {
   SidebarRail,
 } from '@/components/ui/sidebar'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
-import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers } from 'lucide-vue-next'
+import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut } from 'lucide-vue-next'
+
+const { logout } = useAuth()
+
+const handleLogout = async () => {
+  await logout()
+}
 
 const menuItems = [
   {
@@ -125,8 +131,9 @@ const menuItems = [
     <SidebarFooter>
       <SidebarMenu>
         <SidebarMenuItem>
-          <SidebarMenuButton>
+          <SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
-            <span class="text-sm text-muted-foreground">Logged in as user</span>
+            <LogOut class="h-4 w-4" />
+            <span>Logout</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>

frontend/components/LoginForm.vue

@@ -5,8 +5,34 @@ import { Label } from '@/components/ui/label'
 
 const config = useRuntimeConfig()
 const router = useRouter()
+const { toast } = useToast()
 
-const tenantId = ref('123')
+// Cookie for server-side auth check
+const tokenCookie = useCookie('token')
+
+// Extract subdomain from hostname (e.g., tenant1.localhost → tenant1)
+const getSubdomain = () => {
+  if (!import.meta.client) return null
+  const hostname = window.location.hostname
+  const parts = hostname.split('.')
+  
+  console.log('Extracting subdomain from:', hostname, 'parts:', parts)
+  
+  // For localhost development: tenant1.localhost or localhost
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return null // Use default tenant for plain localhost
+  }
+  
+  // For subdomains like tenant1.routebox.co or tenant1.localhost
+  if (parts.length >= 2 && parts[0] !== 'www') {
+    console.log('Using subdomain:', parts[0])
+    return parts[0] // Return subdomain
+  }
+  
+  return null
+}
+
+const subdomain = ref(getSubdomain())
 const email = ref('')
 const password = ref('')
 const loading = ref(false)
@@ -17,12 +43,18 @@ const handleLogin = async () => {
     loading.value = true
     error.value = ''
 
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+
+    // Only send x-tenant-id if we have a subdomain
+    if (subdomain.value) {
+      headers['x-tenant-id'] = subdomain.value
+    }
+
     const response = await fetch(`${config.public.apiBaseUrl}/api/auth/login`, {
       method: 'POST',
-      headers: {
+      headers,
-        'Content-Type': 'application/json',
-        'x-tenant-id': tenantId.value,
-      },
       body: JSON.stringify({
         email: email.value,
         password: password.value,
@@ -36,15 +68,23 @@ const handleLogin = async () => {
 
     const data = await response.json()
 
-    // Store credentials
+    // Store credentials in localStorage
-    localStorage.setItem('tenantId', tenantId.value)
+    // Store the tenant ID that was used for login
+    const tenantToStore = subdomain.value || data.user?.tenantId || 'tenant1'
+    localStorage.setItem('tenantId', tenantToStore)
     localStorage.setItem('token', data.access_token)
     localStorage.setItem('user', JSON.stringify(data.user))
     
+    // Also store token in cookie for server-side auth check
+    tokenCookie.value = data.access_token
+
+    toast.success('Login successful!')
+    
     // Redirect to home
     router.push('/')
   } catch (e: any) {
     error.value = e.message || 'Login failed'
+    toast.error(e.message || 'Login failed')
   } finally {
     loading.value = false
   }
@@ -65,10 +105,6 @@ const handleLogin = async () => {
     </div>
 
     <div class="grid gap-6">
-      <div class="grid gap-2">
-        <Label for="tenantId">Tenant ID</Label>
-        <Input id="tenantId" v-model="tenantId" type="text" placeholder="123" required />
-      </div>
       <div class="grid gap-2">
         <Label for="email">Email</Label>
         <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />

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

@@ -1,5 +1,8 @@
 export const useApi = () => {
   const config = useRuntimeConfig()
+  const router = useRouter()
+  const { toast } = useToast()
+  const { isLoggedIn, logout } = useAuth()
 
   // Use current domain for API calls (same subdomain routing)
   const getApiBaseUrl = () => {
@@ -34,13 +37,92 @@ export const useApi = () => {
     return headers
   }
 
+  const handleResponse = async (response: Response) => {
+    if (response.status === 401) {
+      // Unauthorized - not authenticated
+      if (import.meta.client) {
+        logout()
+        toast.error('Your session has expired. Please login again.')
+        router.push('/login')
+      }
+      throw new Error('Unauthorized')
+    }
+
+    if (response.status === 403) {
+      // Forbidden - not authorized
+      if (import.meta.client) {
+        toast.error('You do not have permission to perform this action.')
+        // Redirect to home if logged in, otherwise to login
+        if (isLoggedIn()) {
+          router.push('/')
+        } else {
+          router.push('/login')
+        }
+      }
+      throw new Error('Forbidden')
+    }
+
+    if (!response.ok) {
+      // 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)
+    }
+
+    // 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(),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+      return handleResponse(response)
-      return response.json()
     },
 
     async post(path: string, data: any) {
@@ -49,8 +131,7 @@ export const useApi = () => {
         headers: getHeaders(),
         body: JSON.stringify(data),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+      return handleResponse(response)
-      return response.json()
     },
 
     async put(path: string, data: any) {
@@ -59,8 +140,7 @@ export const useApi = () => {
         headers: getHeaders(),
         body: JSON.stringify(data),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+      return handleResponse(response)
-      return response.json()
     },
 
     async delete(path: string) {
@@ -68,8 +148,7 @@ export const useApi = () => {
         method: 'DELETE',
         headers: getHeaders(),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+      return handleResponse(response)
-      return response.json()
     },
   }
 

frontend/composables/useAuth.ts

@@ -0,0 +1,61 @@
+export const useAuth = () => {
+  const tokenCookie = useCookie('token')
+  const authMessageCookie = useCookie('authMessage')
+  const router = useRouter()
+  const config = useRuntimeConfig()
+  
+  const isLoggedIn = () => {
+    if (!import.meta.client) return false
+    const token = localStorage.getItem('token')
+    const tenantId = localStorage.getItem('tenantId')
+    return !!(token && tenantId)
+  }
+
+  const logout = async () => {
+    if (import.meta.client) {
+      // Call backend logout endpoint
+      try {
+        const token = localStorage.getItem('token')
+        const tenantId = localStorage.getItem('tenantId')
+        
+        if (token) {
+          await fetch(`${config.public.apiBaseUrl}/api/auth/logout`, {
+            method: 'POST',
+            headers: {
+              'Authorization': `Bearer ${token}`,
+              ...(tenantId && { 'x-tenant-id': tenantId }),
+            },
+          })
+        }
+      } catch (error) {
+        console.error('Logout error:', error)
+      }
+      
+      // Clear local storage
+      localStorage.removeItem('token')
+      localStorage.removeItem('tenantId')
+      localStorage.removeItem('user')
+      
+      // Clear cookie for server-side check
+      tokenCookie.value = null
+      
+      // Set flash message for login page
+      authMessageCookie.value = 'Logged out successfully'
+      
+      // Redirect to login page
+      router.push('/login')
+    }
+  }
+
+  const getUser = () => {
+    if (!import.meta.client) return null
+    const userStr = localStorage.getItem('user')
+    return userStr ? JSON.parse(userStr) : null
+  }
+
+  return {
+    isLoggedIn,
+    logout,
+    getUser,
+  }
+}

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)

frontend/composables/useToast.ts

@@ -0,0 +1,20 @@
+import { toast as sonnerToast } from 'vue-sonner'
+
+export const useToast = () => {
+  const toast = {
+    success: (message: string) => {
+      sonnerToast.success(message)
+    },
+    error: (message: string) => {
+      sonnerToast.error(message)
+    },
+    info: (message: string) => {
+      sonnerToast.info(message)
+    },
+    warning: (message: string) => {
+      sonnerToast.warning(message)
+    },
+  }
+
+  return { toast }
+}

frontend/middleware/auth.global.ts

@@ -0,0 +1,38 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  // Allow pages to opt-out of auth with definePageMeta({ auth: false })
+  if (to.meta.auth === false) {
+    return
+  }
+
+  // Public routes that don't require authentication
+  const publicRoutes = ['/login', '/register']
+  
+  if (publicRoutes.includes(to.path)) {
+    return
+  }
+
+  const token = useCookie('token')
+  const authMessage = useCookie('authMessage')
+  
+  // Routes that don't need a toast message (user knows they need to login)
+  const silentRoutes = ['/']
+  
+  // Check token cookie (works on both server and client)
+  if (!token.value) {
+    if (!silentRoutes.includes(to.path)) {
+      authMessage.value = 'Please login to access this page'
+    }
+    return navigateTo('/login')
+  }
+  
+  // On client side, also verify localStorage is in sync
+  if (import.meta.client) {
+    const { isLoggedIn } = useAuth()
+    if (!isLoggedIn()) {
+      if (!silentRoutes.includes(to.path)) {
+        authMessage.value = 'Please login to access this page'
+      }
+      return navigateTo('/login')
+    }
+  }
+})

frontend/package-lock.json

@@ -21,7 +21,8 @@
         "shadcn-nuxt": "^2.3.3",
         "tailwind-merge": "^2.2.1",
         "vue": "^3.4.15",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue-sonner": "^1.3.2"
       },
       "devDependencies": {
         "@nuxtjs/color-mode": "^3.3.2",
@@ -16036,6 +16037,12 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/vue-sonner": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-1.3.2.tgz",
+      "integrity": "sha512-UbZ48E9VIya3ToiRHAZUbodKute/z/M1iT8/3fU8zEbwBRE11AKuHikssv18LMk2gTTr6eMQT4qf6JoLHWuj/A==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

frontend/package.json

@@ -27,7 +27,8 @@
     "shadcn-nuxt": "^2.3.3",
     "tailwind-merge": "^2.2.1",
     "vue": "^3.4.15",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-sonner": "^1.3.2"
   },
   "devDependencies": {
     "@nuxtjs/color-mode": "^3.3.2",

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 } 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'
@@ -105,20 +112,38 @@ const handleDelete = async (rows: any[]) => {
 const handleSaveRecord = async (data: any) => {
   try {
     await handleSave(data)
-    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}`)
+    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}/detail`)
   } 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 +157,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>

frontend/pages/index.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <NuxtLayout name="default">
     <div class="text-center space-y-6">

frontend/pages/login.vue

@@ -1,6 +1,33 @@
 <script setup lang="ts">
 import { LayoutGrid } from 'lucide-vue-next'
 import LoginForm from '@/components/LoginForm.vue'
+
+// Skip auth middleware for login page
+definePageMeta({
+  auth: false
+})
+
+const { toast } = useToast()
+
+// Check for auth message from cookie
+const authMessage = useCookie('authMessage')
+
+onMounted(() => {
+  if (authMessage.value) {
+    console.log('Displaying auth message: ' + authMessage.value)
+    const message = authMessage.value
+    
+    // Show success toast for logout, error for auth failures
+    if (message.toLowerCase().includes('logged out')) {
+      toast.success(message)
+    } else {
+      toast.error(message)
+    }
+    
+    // Clear the message after displaying
+    authMessage.value = null
+  }
+})
 </script>
 
 <template>

frontend/pages/register.vue

@@ -17,11 +17,6 @@
         </div>
 
         <form @submit.prevent="handleRegister" class="space-y-4">
-          <div class="space-y-2">
-            <Label for="tenantId">Tenant ID</Label>
-            <Input id="tenantId" v-model="tenantId" type="text" required placeholder="123" />
-          </div>
-
           <div class="space-y-2">
             <Label for="email">Email</Label>
             <Input
@@ -74,10 +69,29 @@
 </template>
 
 <script setup lang="ts">
+// Skip auth middleware for register page
+definePageMeta({
+  auth: false
+})
+
 const config = useRuntimeConfig()
 const router = useRouter()
 
-const tenantId = ref('123')
+// Extract subdomain from hostname
+const getSubdomain = () => {
+  if (!import.meta.client) return null
+  const hostname = window.location.hostname
+  const parts = hostname.split('.')
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return null
+  }
+  if (parts.length > 1 && parts[0] !== 'www') {
+    return parts[0]
+  }
+  return null
+}
+
+const subdomain = ref(getSubdomain())
 const email = ref('')
 const password = ref('')
 const firstName = ref('')
@@ -92,12 +106,17 @@ const handleRegister = async () => {
     error.value = ''
     success.value = false
 
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+
+    if (subdomain.value) {
+      headers['x-tenant-id'] = subdomain.value
+    }
+
     const response = await fetch(`${config.public.apiBaseUrl}/api/auth/register`, {
       method: 'POST',
-      headers: {
+      headers,
-        'Content-Type': 'application/json',
-        'x-tenant-id': tenantId.value,
-      },
       body: JSON.stringify({
         email: email.value,
         password: password.value,

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "neo",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}