@nextsparkjs/core 0.1.0-beta.83 → 0.1.0-beta.85

package/dist/templates/app/dashboard/(main)/[entity]/error.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { AlertCircle } from 'lucide-react'
+
+export default function EntityError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Entity page error:', error)
+  }, [error])
+  
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[400px] gap-4 p-6">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <AlertCircle className="h-12 w-12 text-destructive" />
+        <h2 className="text-xl font-semibold">Something went wrong!</h2>
+        <p className="text-sm text-muted-foreground max-w-md">
+          {error.message || 'An error occurred while loading this page. Please try again.'}
+        </p>
+      </div>
+      
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          onClick={() => window.history.back()}
+        >
+          Go Back
+        </Button>
+        <Button
+          onClick={() => reset()}
+        >
+          Try Again
+        </Button>
+      </div>
+      
+      {process.env.NODE_ENV === 'development' && error.stack && (
+        <details className="mt-4 p-4 bg-muted rounded-lg text-xs max-w-2xl w-full">
+          <summary className="cursor-pointer font-medium">Error Details (Development Only)</summary>
+          <pre className="mt-2 overflow-auto">{error.stack}</pre>
+        </details>
+      )}
+    </div>
+  )
+}

package/dist/templates/app/dashboard/(main)/[entity]/layout.tsx

@@ -0,0 +1,113 @@
+/**
+ * Entity Permission Layout
+ *
+ * Server Component that validates entity permissions BEFORE rendering any page.
+ * This layout is NOT overridable by themes to ensure security.
+ *
+ * IMPORTANT: Do NOT use getTemplateOrDefault here - security must not be bypassable.
+ *
+ * Flow:
+ * 1. User navigates to /dashboard/companies/create
+ * 2. Browser sends activeTeamId cookie automatically
+ * 3. This layout reads cookie and checks permission via checkPermission()
+ * 4. If denied, redirects to /dashboard/permission-denied
+ * 5. If allowed, renders the page (children)
+ */
+import { headers, cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { checkPermission } from '@nextsparkjs/core/lib/permissions/check'
+import { isValidPermission } from '@nextsparkjs/core/lib/permissions/init'
+import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
+
+type EntityAction = 'list' | 'read' | 'create' | 'update' | 'delete'
+
+/**
+ * Detect the required action from the pathname
+ *
+ * @param pathname - Full pathname (e.g., /dashboard/companies/create)
+ * @param entitySlug - Entity slug (e.g., companies)
+ * @returns The action being attempted
+ */
+function detectActionFromPathname(pathname: string, entitySlug: string): EntityAction {
+  const entityPath = `/dashboard/${entitySlug}`
+  const relativePath = pathname.replace(entityPath, '')
+
+  // List: /dashboard/companies or /dashboard/companies/
+  if (relativePath === '' || relativePath === '/') return 'list'
+
+  // Create: /dashboard/companies/create
+  if (relativePath === '/create') return 'create'
+
+  // Update: /dashboard/companies/[id]/edit
+  if (relativePath.match(/^\/[^/]+\/edit$/)) return 'update'
+
+  // Read: /dashboard/companies/[id] (single detail view)
+  if (relativePath.match(/^\/[^/]+$/)) return 'read'
+
+  // Default fallback for any other path
+  return 'read'
+}
+
+interface EntityLayoutProps {
+  children: React.ReactNode
+  params: Promise<{ entity: string }>
+}
+
+export default async function EntityPermissionLayout({
+  children,
+  params
+}: EntityLayoutProps) {
+  const { entity } = await params
+  const headersList = await headers()
+  const cookieStore = await cookies()
+
+  // Get pathname from middleware header
+  const pathname = headersList.get('x-pathname') || ''
+
+  // Get userId from middleware header (set for all authenticated routes)
+  const userId = headersList.get('x-user-id')
+
+  // Get teamId from cookie (set by TeamContext and /api/v1/teams/switch)
+  const teamId = cookieStore.get('activeTeamId')?.value
+
+  // Skip validation if missing required data
+  // - No userId: middleware will redirect to login (shouldn't happen for dashboard routes)
+  // - No teamId: user hasn't selected a team yet, let page handle it
+  if (!userId || !teamId) {
+    console.log('[EntityPermissionLayout] Skipping validation - missing data:', {
+      entity,
+      userId: !!userId,
+      teamId: !!teamId
+    })
+    return <>{children}</>
+  }
+
+  // Skip permission validation for routes that don't have entity permissions
+  // These are custom template pages (like agent-single, agent-multi) that aren't real entities
+  if (!isValidPermission(`${entity}.list` as Permission)) {
+    console.log('[EntityPermissionLayout] Skipping validation - no entity permission config for:', entity)
+    return <>{children}</>
+  }
+
+  // Detect required action from pathname
+  const action = detectActionFromPathname(pathname, entity)
+  const permission = `${entity}.${action}` as Permission
+
+  console.log('[EntityPermissionLayout] Checking permission:', {
+    entity,
+    action,
+    permission,
+    userId,
+    teamId
+  })
+
+  // Check permission using existing core function
+  const hasPermission = await checkPermission(userId, teamId, permission)
+
+  if (!hasPermission) {
+    console.log('[EntityPermissionLayout] Permission denied, redirecting')
+    redirect(`/dashboard/permission-denied?entity=${entity}&action=${action}`)
+  }
+
+  return <>{children}</>
+}

package/dist/templates/app/dashboard/(main)/[entity]/loading.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from '@nextsparkjs/core/components/ui/skeleton'
+
+export default function EntityLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header skeleton */}
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-4 w-64" />
+        </div>
+        <Skeleton className="h-10 w-32" />
+      </div>
+      
+      {/* Table skeleton */}
+      <div className="rounded-md border">
+        <div className="p-4 border-b">
+          <Skeleton className="h-10 w-full max-w-sm" />
+        </div>
+        <div className="p-4 space-y-4">
+          {/* Table header */}
+          <div className="flex items-center justify-between pb-4 border-b">
+            <div className="flex items-center gap-4">
+              <Skeleton className="h-5 w-5" />
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-5 w-32" />
+              <Skeleton className="h-5 w-28" />
+              <Skeleton className="h-5 w-20" />
+            </div>
+            <Skeleton className="h-5 w-16" />
+          </div>
+          
+          {/* Table rows */}
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-5 w-5" />
+                <Skeleton className="h-5 w-40" />
+                <Skeleton className="h-5 w-48" />
+                <Skeleton className="h-5 w-24" />
+                <Skeleton className="h-5 w-16" />
+              </div>
+              <Skeleton className="h-8 w-20" />
+            </div>
+          ))}
+        </div>
+        
+        {/* Pagination skeleton */}
+        <div className="p-4 border-t flex items-center justify-between">
+          <Skeleton className="h-5 w-32" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/app/dashboard/(main)/[entity]/page.tsx

@@ -0,0 +1,90 @@
+import { notFound } from 'next/navigation'
+import { getEntity, getEntityRegistry, setEntityRegistry } from '@nextsparkjs/core/lib/entities/queries'
+import { EntityListWrapper } from '@nextsparkjs/core/components/entities/wrappers/EntityListWrapper'
+import type { Metadata } from 'next'
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+import type { EntityConfig, ChildEntityDefinition } from '@nextsparkjs/core/lib/entities/types'
+// Import registry directly - webpack resolves @nextsparkjs/registries alias at compile time
+import { ENTITY_REGISTRY, ENTITY_METADATA } from '@nextsparkjs/registries/entity-registry'
+
+// Initialize registry at module load time (before any component renders)
+setEntityRegistry(ENTITY_REGISTRY, ENTITY_METADATA)
+
+// Type guard to check if entity is a full EntityConfig
+function isEntityConfig(entity: EntityConfig | ChildEntityDefinition): entity is EntityConfig {
+  return 'slug' in entity
+}
+
+interface PageProps {
+  params: Promise<{ entity: string }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}
+
+async function EntityListPage({ params }: PageProps) {
+  const resolvedParams = await params
+  const entitySlug = resolvedParams.entity
+
+  // Verificar que la entidad existe usando el nuevo registry
+  const registry = getEntityRegistry()
+  if (!(entitySlug in registry)) {
+    notFound()
+  }
+
+  const entityConfig = getEntity(entitySlug)
+  if (!entityConfig || !isEntityConfig(entityConfig)) {
+    notFound()
+  }
+
+  // Verificar que la entidad está habilitada usando la nueva estructura
+  if (!entityConfig.enabled) {
+    notFound()
+  }
+
+  // Check if entity should be accessible via dashboard route
+  // Entities with showInMenu: false are managed elsewhere (e.g., settings)
+  if (!entityConfig.ui?.dashboard?.showInMenu) {
+    notFound()
+  }
+
+  // IMPORTANT: Try to resolve entity-specific template first
+  // This allows themes to override specific entities (e.g., /dashboard/orders)
+  // while falling back to the generic EntityListWrapper for others
+  const specificTemplatePath = `app/dashboard/(main)/${entitySlug}/page.tsx`
+  const SpecificTemplate = getTemplateOrDefault(specificTemplatePath, null) as React.ComponentType<PageProps> | null
+
+  if (SpecificTemplate) {
+    return <SpecificTemplate params={params} searchParams={Promise.resolve({})} />
+  }
+
+  return (
+    <EntityListWrapper
+      entityType={entityConfig.slug}
+    />
+  )
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const resolvedParams = await params
+  const entitySlug = resolvedParams.entity
+
+  const registry = getEntityRegistry()
+  if (!(entitySlug in registry)) {
+    return {
+      title: 'Not Found - Dashboard'
+    }
+  }
+
+  const entityConfig = getEntity(entitySlug)
+  if (!entityConfig || !isEntityConfig(entityConfig)) {
+    return {
+      title: 'Not Found - Dashboard'
+    }
+  }
+
+  return {
+    title: `${entityConfig.names.plural} - Dashboard`,
+    description: `Manage ${entityConfig.names.plural.toLowerCase()} in your dashboard`
+  }
+}
+
+export default getTemplateOrDefault('app/dashboard/(main)/[entity]/page.tsx', EntityListPage)

package/dist/templates/app/dashboard/(main)/layout.tsx

@@ -0,0 +1,98 @@
+/**
+ * Main Dashboard Layout with Permission Checking
+ *
+ * This layout handles:
+ * 1. Entity registry initialization
+ * 2. Server-side permission validation for entity routes
+ * 3. Rendering the DashboardShell with entity navigation
+ *
+ * IMPORTANT: Permission checking MUST be in this layout (not in [entity]/layout.tsx)
+ * because (templates) routes with specific paths take precedence over dynamic [entity] routes.
+ */
+import { headers, cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { DashboardShell } from '@nextsparkjs/core/components/dashboard/layouts/DashboardShell'
+import { serializeEntityConfig, type SerializableEntityConfig } from '@nextsparkjs/core/lib/entities/serialization'
+import { setEntityRegistry } from '@nextsparkjs/core/lib/entities/queries'
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+import type { EntityConfig, ChildEntityDefinition } from '@nextsparkjs/core/lib/entities/types'
+import { checkPermission } from '@nextsparkjs/core/lib/permissions/check'
+import { isValidPermission } from '@nextsparkjs/core/lib/permissions/init'
+import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
+// Import registry directly - webpack resolves @nextsparkjs/registries alias at compile time
+import { ENTITY_REGISTRY, ENTITY_METADATA } from '@nextsparkjs/registries/entity-registry'
+
+// Register entities globally so other parts of the app can access them via getRegisteredEntities()
+setEntityRegistry(ENTITY_REGISTRY, ENTITY_METADATA)
+
+type EntityAction = 'list' | 'read' | 'create' | 'update' | 'delete'
+
+/**
+ * Parse entity and action from pathname
+ * Handles paths like: /dashboard/ai-agents, /dashboard/ai-agents/create, /dashboard/ai-agents/[id]/edit
+ */
+function parseEntityFromPathname(pathname: string): { entity: string; action: EntityAction } | null {
+  const match = pathname.match(/^\/dashboard\/([^/]+)(?:\/(.*))?$/)
+  if (!match) return null
+
+  const entity = match[1]
+  const rest = match[2] || ''
+
+  if (rest === '' || rest === '/') return { entity, action: 'list' }
+  if (rest === 'create') return { entity, action: 'create' }
+  if (rest.match(/^[^/]+\/edit$/)) return { entity, action: 'update' }
+  if (rest.match(/^[^/]+$/)) return { entity, action: 'read' }
+
+  return { entity, action: 'read' }
+}
+
+// Type guard to check if entity is a full EntityConfig
+function isEntityConfig(entity: EntityConfig | ChildEntityDefinition): entity is EntityConfig {
+  return 'slug' in entity
+}
+
+// Default main dashboard layout component with permission checking
+async function DefaultMainDashboardLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  // Get entities directly from the imported registry
+  const allEntities = Object.values(ENTITY_REGISTRY).map(entry => entry.config)
+  const entities = allEntities.filter(isEntityConfig)
+  const serializedEntities: SerializableEntityConfig[] = entities.map(serializeEntityConfig)
+
+  // === PERMISSION CHECK ===
+  const headersList = await headers()
+  const cookieStore = await cookies()
+
+  const pathname = headersList.get('x-pathname') || ''
+  const userId = headersList.get('x-user-id')
+  const teamId = cookieStore.get('activeTeamId')?.value
+
+  if (userId && teamId && pathname) {
+    const parsed = parseEntityFromPathname(pathname)
+
+    if (parsed) {
+      const { entity, action } = parsed
+      const permission = `${entity}.${action}` as Permission
+
+      if (isValidPermission(`${entity}.list` as Permission)) {
+        const hasPermission = await checkPermission(userId, teamId, permission)
+
+        if (!hasPermission) {
+          redirect(`/dashboard/permission-denied?entity=${entity}&action=${action}`)
+        }
+      }
+    }
+  }
+
+  return (
+    <DashboardShell entities={serializedEntities}>
+      {children}
+    </DashboardShell>
+  )
+}
+
+// Export the resolved component (theme override or default)
+export default getTemplateOrDefault('app/dashboard/(main)/layout.tsx', DefaultMainDashboardLayout)

package/dist/templates/app/dashboard/(main)/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonDashboardHome } from '@nextsparkjs/core/components/ui/skeleton-dashboard'
+
+export default function DashboardLoading() {
+  return <SkeletonDashboardHome />
+}

package/dist/templates/app/dashboard/(main)/page.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import { useUserProfile } from '@nextsparkjs/core/hooks/useUserProfile'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { useTranslations } from 'next-intl'
+import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
+
+import {
+  Loader2,
+  User,
+  Activity,
+  Settings,
+  CreditCard,
+  Users,
+  BarChart3,
+  ListTodo
+} from 'lucide-react'
+
+// Default dashboard page component
+function DefaultDashboardPage() {
+  const { user, isLoading } = useUserProfile()
+  const router = useRouter()
+  const t = useTranslations('dashboard')
+
+  useEffect(() => {
+    if (!isLoading && !user) {
+      router.push('/login')
+    }
+  }, [user, isLoading, router])
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return null
+  }
+
+  const stats = [
+    { 
+      title: t('stats.accountStatus'), 
+      value: t('stats.active'), 
+      icon: <Activity className="h-4 w-4" />,
+      trend: t('badges.verified')
+    },
+    { 
+      title: t('stats.plan'), 
+      value: t('stats.free'), 
+      icon: <CreditCard className="h-4 w-4" />,
+      trend: t('badges.basic')
+    },
+    { 
+      title: t('stats.teamMembers'), 
+      value: '1', 
+      icon: <Users className="h-4 w-4" />,
+      trend: t('badges.solo')
+    },
+    { 
+      title: t('stats.usage'), 
+      value: '0%', 
+      icon: <BarChart3 className="h-4 w-4" />,
+      trend: t('badges.low')
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto space-y-8">
+        {/* Header */}
+        <div className="mb-8" data-cy="dashboard-welcome">
+          <h1 className="text-3xl font-bold">{t('title')}</h1>
+          <p className="text-muted-foreground mt-1">
+            {t('welcome', { name: user.firstName || user.email })}
+          </p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat) => (
+            <Card key={stat.title}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {stat.title}
+                </CardTitle>
+                {stat.icon}
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <Badge variant="secondary" className="mt-1">
+                  {stat.trend}
+                </Badge>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Quick Actions */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('quickActions.title')}</CardTitle>
+            <CardDescription>
+              {t('quickActions.description')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <Button 
+                variant="outline" 
+                className="h-auto p-4 flex flex-col items-start gap-2"
+                onClick={() => router.push('/dashboard/tasks')}
+              >
+                <ListTodo className="h-5 w-5 text-blue-500" />
+                <div className="text-left">
+                  <p className="font-medium">{t('quickActions.myTasks')}</p>
+                  <p className="text-xs text-muted-foreground">{t('quickActions.myTasksDescription')}</p>
+                </div>
+              </Button>
+              
+              <Button 
+                variant="outline" 
+                className="h-auto p-4 flex flex-col items-start gap-2"
+                onClick={() => router.push('/dashboard/settings/profile')}
+              >
+                <User className="h-5 w-5 text-green-500" />
+                <div className="text-left">
+                  <p className="font-medium">{t('quickActions.myProfile')}</p>
+                  <p className="text-xs text-muted-foreground">{t('quickActions.myProfileDescription')}</p>
+                </div>
+              </Button>
+              
+              <Button 
+                variant="outline" 
+                className="h-auto p-4 flex flex-col items-start gap-2"
+                onClick={() => router.push('/dashboard/settings')}
+              >
+                <Settings className="h-5 w-5 text-purple-500" />
+                <div className="text-left">
+                  <p className="font-medium">{t('quickActions.settings')}</p>
+                  <p className="text-xs text-muted-foreground">{t('quickActions.settingsDescription')}</p>
+                </div>
+              </Button>
+
+              <Button 
+                variant="outline" 
+                className="h-auto p-4 flex flex-col items-start gap-2"
+                onClick={() => router.push('/dashboard/settings/billing')}
+              >
+                <CreditCard className="h-5 w-5 text-yellow-500" />
+                <div className="text-left">
+                  <p className="font-medium">{t('quickActions.billing')}</p>
+                  <p className="text-xs text-muted-foreground">{t('quickActions.billingDescription')}</p>
+                </div>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Activity Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('activity.title')}</CardTitle>
+            <CardDescription>
+              {t('activity.description')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center gap-4">
+                <div className="h-2 w-2 bg-blue-500 rounded-full" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium">{t('activity.signedIn')}</p>
+                  <p className="text-xs text-muted-foreground">{t('activity.justNow')}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="h-2 w-2 bg-green-500 rounded-full" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium">{t('activity.accountCreated')}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {new Date(user.createdAt || '').toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+// Export the resolved component (theme override or default)
+export default getTemplateOrDefaultClient('app/dashboard/(main)/page.tsx', DefaultDashboardPage)