Added auth functionality, initial work with views and field types

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

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } 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
+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')
+
+// 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(`/api/runtime/objects/${objectApiName.value}`)
+
+// 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(`/api/runtime/objects/${objectApiName.value}/definition`)
+    objectDefinition.value = response.data
+  } 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
+const handleRowClick = (row: any) => {
+  router.push(`/app/objects/${objectApiName.value}/${row.id}`)
+}
+
+const handleCreate = () => {
+  router.push(`/app/objects/${objectApiName.value}/new`)
+}
+
+const handleEdit = (row?: any) => {
+  const id = row?.id || recordId.value
+  router.push(`/app/objects/${objectApiName.value}/${id}/edit`)
+}
+
+const handleBack = () => {
+  router.push(`/app/objects/${objectApiName.value}`)
+}
+
+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(`/app/objects/${objectApiName.value}`)
+      }
+    } catch (e: any) {
+      error.value = e.message || 'Failed to delete records'
+    }
+  }
+}
+
+const handleSaveRecord = async (data: any) => {
+  try {
+    await handleSave(data)
+    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}`)
+  } catch (e: any) {
+    error.value = e.message || 'Failed to save record'
+  }
+}
+
+const handleCancel = () => {
+  if (recordId.value) {
+    router.push(`/app/objects/${objectApiName.value}/${recordId.value}`)
+  } else {
+    router.push(`/app/objects/${objectApiName.value}`)
+  }
+}
+
+// Initialize
+onMounted(async () => {
+  await fetchObjectDefinition()
+  
+  if (view.value === 'list') {
+    await fetchRecords()
+  } else if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+})
+</script>
+
+<template>
+  <div class="object-view-container">
+    <!-- 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>
+</template>
+
+<style scoped>
+.object-view-container {
+  min-height: 100vh;
+  padding: 2rem;
+}
+</style>

frontend/pages/demo/field-views.vue

@@ -0,0 +1,429 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailView.vue'
+import EditView from '@/components/views/EditView.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { 
+  FieldType, 
+  ViewMode
+} from '@/types/field-types'
+import type { 
+  ListViewConfig, 
+  DetailViewConfig, 
+  EditViewConfig,
+  FieldConfig 
+} from '@/types/field-types'
+
+// Example: Contact Object
+const contactFields: FieldConfig[] = [
+  {
+    id: '1',
+    apiName: 'firstName',
+    label: 'First Name',
+    type: FieldType.TEXT,
+    isRequired: true,
+    placeholder: 'Enter first name',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    sortable: true,
+  },
+  {
+    id: '2',
+    apiName: 'lastName',
+    label: 'Last Name',
+    type: FieldType.TEXT,
+    isRequired: true,
+    placeholder: 'Enter last name',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    sortable: true,
+  },
+  {
+    id: '3',
+    apiName: 'email',
+    label: 'Email',
+    type: FieldType.EMAIL,
+    isRequired: true,
+    placeholder: 'email@example.com',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    validationRules: [
+      { type: 'email', message: 'Please enter a valid email address' }
+    ],
+  },
+  {
+    id: '4',
+    apiName: 'phone',
+    label: 'Phone',
+    type: FieldType.TEXT,
+    placeholder: '+1 (555) 000-0000',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '5',
+    apiName: 'company',
+    label: 'Company',
+    type: FieldType.TEXT,
+    placeholder: 'Company name',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '6',
+    apiName: 'status',
+    label: 'Status',
+    type: FieldType.SELECT,
+    isRequired: true,
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    options: [
+      { label: 'Active', value: 'active' },
+      { label: 'Inactive', value: 'inactive' },
+      { label: 'Pending', value: 'pending' },
+    ],
+  },
+  {
+    id: '7',
+    apiName: 'isVip',
+    label: 'VIP Customer',
+    type: FieldType.BOOLEAN,
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '8',
+    apiName: 'birthDate',
+    label: 'Birth Date',
+    type: FieldType.DATE,
+    showOnList: false,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '9',
+    apiName: 'notes',
+    label: 'Notes',
+    type: FieldType.TEXTAREA,
+    placeholder: 'Additional notes...',
+    rows: 4,
+    showOnList: false,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '10',
+    apiName: 'website',
+    label: 'Website',
+    type: FieldType.URL,
+    placeholder: 'https://example.com',
+    showOnList: false,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+]
+
+// Sample data
+const sampleContacts = ref([
+  {
+    id: '1',
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john.doe@example.com',
+    phone: '+1 (555) 123-4567',
+    company: 'Acme Corp',
+    status: 'active',
+    isVip: true,
+    birthDate: new Date('1985-03-15'),
+    notes: 'Preferred customer, always pays on time.',
+    website: 'https://acmecorp.com',
+  },
+  {
+    id: '2',
+    firstName: 'Jane',
+    lastName: 'Smith',
+    email: 'jane.smith@example.com',
+    phone: '+1 (555) 987-6543',
+    company: 'Tech Solutions',
+    status: 'active',
+    isVip: false,
+    birthDate: new Date('1990-07-22'),
+    notes: 'Interested in enterprise plan.',
+    website: 'https://techsolutions.com',
+  },
+  {
+    id: '3',
+    firstName: 'Bob',
+    lastName: 'Johnson',
+    email: 'bob.johnson@example.com',
+    phone: '+1 (555) 456-7890',
+    company: 'StartupXYZ',
+    status: 'pending',
+    isVip: false,
+    birthDate: new Date('1988-11-30'),
+    notes: 'New lead from conference.',
+    website: 'https://startupxyz.com',
+  },
+])
+
+// View configurations
+const listConfig: ListViewConfig = {
+  objectApiName: 'Contact',
+  mode: ViewMode.LIST,
+  fields: contactFields,
+  pageSize: 10,
+  searchable: true,
+  filterable: true,
+  exportable: true,
+  actions: [
+    {
+      id: 'bulk-email',
+      label: 'Send Email',
+      variant: 'outline',
+    },
+  ],
+}
+
+const detailConfig: DetailViewConfig = {
+  objectApiName: 'Contact',
+  mode: ViewMode.DETAIL,
+  fields: contactFields,
+  sections: [
+    {
+      title: 'Contact Information',
+      description: 'Basic contact details',
+      fields: ['firstName', 'lastName', 'email', 'phone'],
+    },
+    {
+      title: 'Company Information',
+      description: 'Company and business details',
+      fields: ['company', 'website', 'status', 'isVip'],
+    },
+    {
+      title: 'Additional Information',
+      fields: ['birthDate', 'notes'],
+      collapsible: true,
+    },
+  ],
+  actions: [
+    {
+      id: 'send-email',
+      label: 'Send Email',
+      variant: 'outline',
+    },
+  ],
+}
+
+const editConfig: EditViewConfig = {
+  objectApiName: 'Contact',
+  mode: ViewMode.EDIT,
+  fields: contactFields,
+  sections: [
+    {
+      title: 'Contact Information',
+      description: 'Basic contact details',
+      fields: ['firstName', 'lastName', 'email', 'phone'],
+    },
+    {
+      title: 'Company Information',
+      fields: ['company', 'website', 'status', 'isVip'],
+    },
+    {
+      title: 'Additional Information',
+      fields: ['birthDate', 'notes'],
+      collapsible: true,
+      defaultCollapsed: true,
+    },
+  ],
+  submitLabel: 'Save Contact',
+  cancelLabel: 'Cancel',
+}
+
+// State management
+const currentView = ref<'list' | 'detail' | 'edit'>('list')
+const selectedContact = ref<any>(null)
+const isLoading = ref(false)
+const isSaving = ref(false)
+
+// Event handlers
+const handleRowClick = (row: any) => {
+  selectedContact.value = row
+  currentView.value = 'detail'
+}
+
+const handleCreate = () => {
+  selectedContact.value = {}
+  currentView.value = 'edit'
+}
+
+const handleEdit = (row?: any) => {
+  selectedContact.value = row || selectedContact.value
+  currentView.value = 'edit'
+}
+
+const handleDelete = (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} contact(s)?`)) {
+    rows.forEach(row => {
+      const idx = sampleContacts.value.findIndex(c => c.id === row.id)
+      if (idx !== -1) {
+        sampleContacts.value.splice(idx, 1)
+      }
+    })
+    if (selectedContact.value && rows.some(r => r.id === selectedContact.value.id)) {
+      currentView.value = 'list'
+      selectedContact.value = null
+    }
+  }
+}
+
+const handleSave = async (data: any) => {
+  isSaving.value = true
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  
+  if (data.id) {
+    // Update existing
+    const idx = sampleContacts.value.findIndex(c => c.id === data.id)
+    if (idx !== -1) {
+      sampleContacts.value[idx] = data
+    }
+  } else {
+    // Create new
+    data.id = String(Date.now())
+    sampleContacts.value.push(data)
+  }
+  
+  isSaving.value = false
+  selectedContact.value = data
+  currentView.value = 'detail'
+}
+
+const handleCancel = () => {
+  if (selectedContact.value?.id) {
+    currentView.value = 'detail'
+  } else {
+    currentView.value = 'list'
+    selectedContact.value = null
+  }
+}
+
+const handleBack = () => {
+  currentView.value = 'list'
+  selectedContact.value = null
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8">
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold tracking-tight">Field Types & Views Demo</h1>
+      <p class="text-muted-foreground mt-2">
+        Laravel Nova-inspired list, detail, and edit views with shadcn-vue components
+      </p>
+    </div>
+
+    <Tabs default-value="demo" class="space-y-4">
+      <TabsList>
+        <TabsTrigger value="demo">Interactive Demo</TabsTrigger>
+        <TabsTrigger value="examples">View Examples</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="demo" class="space-y-4">
+        <!-- List View -->
+        <ListView
+          v-if="currentView === 'list'"
+          :config="listConfig"
+          :data="sampleContacts"
+          :loading="isLoading"
+          selectable
+          @row-click="handleRowClick"
+          @create="handleCreate"
+          @edit="handleEdit"
+          @delete="handleDelete"
+        />
+
+        <!-- Detail View -->
+        <DetailView
+          v-else-if="currentView === 'detail'"
+          :config="detailConfig"
+          :data="selectedContact"
+          :loading="isLoading"
+          @edit="handleEdit"
+          @delete="() => handleDelete([selectedContact])"
+          @back="handleBack"
+        />
+
+        <!-- Edit View -->
+        <EditView
+          v-else-if="currentView === 'edit'"
+          :config="editConfig"
+          :data="selectedContact"
+          :loading="isLoading"
+          :saving="isSaving"
+          @save="handleSave"
+          @cancel="handleCancel"
+          @back="handleBack"
+        />
+      </TabsContent>
+
+      <TabsContent value="examples" class="space-y-6">
+        <div class="grid gap-6">
+          <div class="border rounded-lg p-6 space-y-4">
+            <h3 class="text-xl font-semibold">Available Field Types</h3>
+            <ul class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
+              <li v-for="(value, key) in FieldType" :key="key" class="flex items-center gap-2">
+                <span class="w-2 h-2 bg-primary rounded-full"></span>
+                {{ key }}
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 space-y-4">
+            <h3 class="text-xl font-semibold">Usage Example</h3>
+            <pre class="bg-muted p-4 rounded-lg overflow-x-auto text-sm"><code>import { ListView, DetailView, EditView } from '@/components/views'
+import { FieldType, ViewMode } from '@/types/field-types'
+
+// Define your fields
+const fields = [
+  {
+    id: '1',
+    apiName: 'name',
+    label: 'Name',
+    type: FieldType.TEXT,
+    isRequired: true,
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  // ... more fields
+]
+
+// Create view configs
+const listConfig = {
+  objectApiName: 'MyObject',
+  mode: ViewMode.LIST,
+  fields,
+  searchable: true,
+}
+
+// Use in template
+&lt;ListView 
+  :config="listConfig" 
+  :data="records"
+  @row-click="handleRowClick"
+/&gt;</code></pre>
+          </div>
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</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: {
-        'Content-Type': 'application/json',
-        'x-tenant-id': tenantId.value,
-      },
+      headers,
       body: JSON.stringify({
         email: email.value,
         password: password.value,

frontend/pages/setup/apps/index.vue

@@ -69,7 +69,7 @@
               v-for="app in apps"
               :key="app.id"
               :to="`/setup/apps/${app.slug}`"
-              class="p-6 border rounded-lg hover:border-primary transition-colors bg-card"
+              class="p-6 border rounded-lg hover:border-primary transition-colors bg-card bg-background shadow-md"
             >
               <h3 class="text-xl font-semibold mb-2">{{ app.label }}</h3>
               <p class="text-sm text-muted-foreground mb-4">