@nextsparkjs/core 0.1.0-beta.74 → 0.1.0-beta.76

package/templates/app/api/v1/users/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { queryWithRLS, mutateWithRLS } from '@nextsparkjs/core/lib/db';
-import {
-  createApiResponse,
+import { 
+  createApiResponse, 
   createApiError,
   parsePaginationParams,
   createPaginationMeta,
@@ -17,7 +17,6 @@ import {
 import { authenticateRequest } from '@nextsparkjs/core/lib/api/auth/dual-auth';
 import { hasAdminPermission } from '@nextsparkjs/core/lib/api/auth/permissions';
 import { z } from 'zod';
-import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit';
 
 const createUserSchema = z.object({
   email: z.string().email('Invalid email format'),
@@ -39,7 +38,7 @@ export async function OPTIONS() {
 }
 
 // GET /api/v1/users - List users with dual auth
-export const GET = withRateLimitTier(withApiLogging(async (req: NextRequest): Promise<NextResponse> => {
+export const GET = withApiLogging(async (req: NextRequest): Promise<NextResponse> => {
   try {
     // Authenticate using dual auth
     const authResult = await authenticateRequest(req);
@@ -109,10 +108,10 @@ export const GET = withRateLimitTier(withApiLogging(async (req: NextRequest): Pr
     const response = createApiError('Internal server error', 500);
     return addCorsHeaders(response);
   }
-}), 'read');
+});
 
 // POST /api/v1/users - Create user with dual auth
-export const POST = withRateLimitTier(withApiLogging(async (req: NextRequest): Promise<NextResponse> => {
+export const POST = withApiLogging(async (req: NextRequest): Promise<NextResponse> => {
   try {
     // Authenticate using dual auth
     const authResult = await authenticateRequest(req);
@@ -194,5 +193,5 @@ export const POST = withRateLimitTier(withApiLogging(async (req: NextRequest): P
     const response = createApiError('Internal server error', 500);
     return addCorsHeaders(response);
   }
-}), 'write');
+});
 

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

@@ -38,12 +38,11 @@ async function EntityDetailPage({ params }: PageProps) {
   }
 
   // Verificar que la entidad existe en el registro
-  const registry = getEntityRegistry()
-  if (!(entitySlug in registry)) {
+  if (!(entitySlug in getEntityRegistry())) {
     notFound()
   }
 
-  const entityConfig = getEntity(entitySlug)
+  const entityConfig = getEntity(entitySlug as string)
   if (!entityConfig || !isEntityConfig(entityConfig)) {
     notFound()
   }
@@ -66,7 +65,7 @@ async function EntityDetailPage({ params }: PageProps) {
   }
 
   // Get child entities for this parent entity
-  const childEntities = getChildEntities(entitySlug)
+  const childEntities = getChildEntities(entitySlug as string)
   const childEntityNames = childEntities.map(child => child.name)
 
   return (
@@ -82,14 +81,13 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   const resolvedParams = await params
   const entitySlug = resolvedParams.entity
 
-  const registry = getEntityRegistry()
-  if (!(entitySlug in registry)) {
+  if (!(entitySlug in getEntityRegistry())) {
     return {
       title: 'Not Found - Dashboard'
     }
   }
 
-  const entityConfig = getEntity(entitySlug)
+  const entityConfig = getEntity(entitySlug as string)
   if (!entityConfig || !isEntityConfig(entityConfig)) {
     return {
       title: 'Not Found - Dashboard'

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

@@ -1,27 +1,113 @@
 /**
- * Entity Layout (Dynamic Routes Fallback)
+ * Entity Permission Layout
  *
- * This layout handles dynamic entity routes that don't have specific template pages.
+ * Server Component that validates entity permissions BEFORE rendering any page.
+ * This layout is NOT overridable by themes to ensure security.
  *
- * IMPORTANT: Permission checking is now handled by the parent layout at:
- * app/dashboard/(main)/layout.tsx
+ * IMPORTANT: Do NOT use getTemplateOrDefault here - security must not be bypassable.
  *
- * This ensures permissions are checked for ALL routes, including:
- * - Template routes (e.g., /dashboard/ai-agents/create with specific page.tsx)
- * - Dynamic routes (e.g., /dashboard/[entity]/create fallback)
+ * 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
  *
- * Previously, permission checking was here but it never executed for template routes
- * because Next.js route specificity gives priority to explicit paths over dynamic ones.
+ * @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 EntityLayout({
-  children
+export default async function EntityPermissionLayout({
+  children,
+  params
 }: EntityLayoutProps) {
-  // Permission checking handled by parent (main)/layout.tsx
+  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/templates/app/dashboard/(main)/[entity]/page.tsx

@@ -8,7 +8,6 @@ import type { EntityConfig, ChildEntityDefinition } from '@nextsparkjs/core/lib/
 import { ENTITY_REGISTRY, ENTITY_METADATA } from '@nextsparkjs/registries/entity-registry'
 
 // Initialize registry at module load time (before any component renders)
-// This ensures the registry is available even if this page loads before the layout
 setEntityRegistry(ENTITY_REGISTRY, ENTITY_METADATA)
 
 // Type guard to check if entity is a full EntityConfig

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

@@ -32,20 +32,17 @@ type EntityAction = 'list' | 'read' | 'create' | 'update' | 'delete'
  * Handles paths like: /dashboard/ai-agents, /dashboard/ai-agents/create, /dashboard/ai-agents/[id]/edit
  */
 function parseEntityFromPathname(pathname: string): { entity: string; action: EntityAction } | null {
-  // Match /dashboard/[entity] patterns
   const match = pathname.match(/^\/dashboard\/([^/]+)(?:\/(.*))?$/)
   if (!match) return null
 
   const entity = match[1]
   const rest = match[2] || ''
 
-  // Detect action from the rest of the path
   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' }
 
-  // Default to read for any other path
   return { entity, action: 'read' }
 }
 
@@ -61,9 +58,7 @@ async function DefaultMainDashboardLayout({
   children: React.ReactNode
 }) {
   // Get entities directly from the imported registry
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const allEntities = Object.values(ENTITY_REGISTRY).map(entry => (entry as any).config)
-  // Filter to only include full EntityConfig (not child entities)
+  const allEntities = Object.values(ENTITY_REGISTRY).map(entry => entry.config)
   const entities = allEntities.filter(isEntityConfig)
   const serializedEntities: SerializableEntityConfig[] = entities.map(serializeEntityConfig)
 
@@ -71,12 +66,10 @@ async function DefaultMainDashboardLayout({
   const headersList = await headers()
   const cookieStore = await cookies()
 
-  // Get pathname from middleware header
   const pathname = headersList.get('x-pathname') || ''
   const userId = headersList.get('x-user-id')
   const teamId = cookieStore.get('activeTeamId')?.value
 
-  // Only check permissions if we have the required data
   if (userId && teamId && pathname) {
     const parsed = parseEntityFromPathname(pathname)
 
@@ -84,7 +77,6 @@ async function DefaultMainDashboardLayout({
       const { entity, action } = parsed
       const permission = `${entity}.${action}` as Permission
 
-      // Only check if this is a valid entity permission
       if (isValidPermission(`${entity}.list` as Permission)) {
         const hasPermission = await checkPermission(userId, teamId, permission)
 
@@ -103,4 +95,4 @@ async function DefaultMainDashboardLayout({
 }
 
 // Export the resolved component (theme override or default)
-export default getTemplateOrDefault('app/dashboard/(main)/layout.tsx', DefaultMainDashboardLayout)
+export default getTemplateOrDefault('app/dashboard/(main)/layout.tsx', DefaultMainDashboardLayout)

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

@@ -78,7 +78,7 @@ function DefaultDashboardPage() {
         <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 || '' })}
+            {t('welcome', { name: user.firstName || user.email })}
           </p>
         </div>
 
@@ -102,8 +102,6 @@ function DefaultDashboardPage() {
           ))}
         </div>
 
-
-
         {/* Quick Actions */}
         <Card>
           <CardHeader>

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

@@ -42,7 +42,7 @@ export default function PatternsListPage() {
   const router = useRouter()
 
   // Use the new centralized hook for entity configuration
-  const { config: entityConfig, isLoading, error: configError } = useEntityConfig(entityType)
+  const { config: entityConfig, isLoading, error: configError, isOverride } = useEntityConfig(entityType)
 
   // Get current team for relation resolution
   const { teamId } = useTeam()

package/templates/app/dashboard/settings/api-keys/page.tsx

@@ -7,27 +7,27 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@next
 import { Badge } from '@nextsparkjs/core/components/ui/badge';
 import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert';
 import { Skeleton } from '@nextsparkjs/core/components/ui/skeleton';
-import { 
-  Dialog, 
-  DialogContent, 
-  DialogDescription, 
-  DialogHeader, 
-  DialogTitle 
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
 } from '@nextsparkjs/core/components/ui/dialog';
-import { 
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@nextsparkjs/core/components/ui/dropdown-menu';
-import { 
-  AlertTriangle, 
-  Copy, 
-  Eye, 
-  EyeOff, 
-  Key, 
-  MoreVertical, 
-  Plus, 
+import {
+  AlertTriangle,
+  Copy,
+  Eye,
+  EyeOff,
+  Key,
+  MoreVertical,
+  Plus,
   Trash2,
   Activity
 } from 'lucide-react';
@@ -156,7 +156,7 @@ function ApiKeysPage() {
 
   if (error) {
     const isPermissionError = error.message.includes('Insufficient permissions');
-    
+
     return (
       <div className="space-y-6">
         <div>
@@ -172,7 +172,7 @@ function ApiKeysPage() {
               <div>
                 <strong>Acceso restringido</strong>
                 <p className="mt-1">
-                  Solo los administradores pueden gestionar API keys. 
+                  Solo los administradores pueden gestionar API keys.
                   Contacta a un administrador si necesitas acceso a esta funcionalidad.
                 </p>
               </div>
@@ -202,11 +202,11 @@ function ApiKeysPage() {
 
       {/* New API Key Display */}
       {newApiKey && (
-        <ApiKeyDisplay 
+        <ApiKeyDisplay
           apiKey={newApiKey.key}
           keyName={newApiKey.name}
           warning={newApiKey.warning}
-          onClose={() => setNewApiKey(null)} 
+          onClose={() => setNewApiKey(null)}
         />
       )}
 
@@ -403,14 +403,14 @@ function ApiKeysPage() {
 }
 
 // Componente para mostrar detalles de API key
-function ApiKeyDetailsDialog({ 
-  keyId, 
-  open, 
-  onClose 
-}: { 
-  keyId: string; 
-  open: boolean; 
-  onClose: () => void; 
+function ApiKeyDetailsDialog({
+  keyId,
+  open,
+  onClose
+}: {
+  keyId: string;
+  open: boolean;
+  onClose: () => void;
 }) {
   const { data: keyDetails, isLoading } = useQuery({
     queryKey: ['api-key-details', keyId],
@@ -510,4 +510,4 @@ function ApiKeyDetailsDialog({
   );
 }
 
-export default getTemplateOrDefaultClient('app/dashboard/settings/api-keys/page.tsx', ApiKeysPage)
+export default getTemplateOrDefaultClient('app/dashboard/settings/api-keys/page.tsx', ApiKeysPage)

package/templates/app/dashboard/settings/teams/page.tsx

@@ -13,6 +13,7 @@ import { useTeamsConfig } from '@nextsparkjs/core/hooks/useTeamsConfig'
 import { TeamMembersList } from '@nextsparkjs/core/components/teams/TeamMembersList'
 import { TeamPendingInvitations } from '@nextsparkjs/core/components/teams/TeamPendingInvitations'
 import { CreateTeamDialog } from '@nextsparkjs/core/components/teams/CreateTeamDialog'
+import { InlineEditableField } from '@nextsparkjs/core/components/teams/InlineEditableField'
 import { sel } from '@nextsparkjs/core/selectors'
 import { TeamRole } from '@nextsparkjs/core/lib/teams/types'
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
@@ -203,10 +204,25 @@ function TeamsSettingsPage() {
             <CardHeader>
               <div className="flex items-center gap-2">
                 <Settings className="h-5 w-5" aria-hidden="true" />
-                <CardTitle>{selectedMembership.team.name}</CardTitle>
+                <CardTitle className="flex-1">
+                  <InlineEditableField
+                    value={selectedMembership.team.name}
+                    fieldType="name"
+                    teamId={selectedMembership.team.id}
+                    placeholder={tTeams('createTeam.namePlaceholder')}
+                    disabled={selectedMembership.role !== 'owner'}
+                  />
+                </CardTitle>
               </div>
-              <CardDescription>
-                {selectedMembership.team.description || t('teams.manageTeamMembers')}
+              <CardDescription className="mt-2">
+                <InlineEditableField
+                  value={selectedMembership.team.description}
+                  fieldType="description"
+                  teamId={selectedMembership.team.id}
+                  placeholder={tTeams('createTeam.descriptionPlaceholder')}
+                  multiline={true}
+                  disabled={selectedMembership.role !== 'owner'}
+                />
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">

package/templates/app/devtools/api/[[...endpoint]]/page.tsx

@@ -0,0 +1,33 @@
+import { ApiRoutesService } from "@nextsparkjs/core/lib/services/api-routes.service"
+import { ApiExplorer } from "@nextsparkjs/core/components/devtools"
+
+interface Props {
+  params: Promise<{ endpoint?: string[] }>
+}
+
+/**
+ * Developer API Explorer Page
+ *
+ * Postman-like interface for exploring and testing API endpoints.
+ * Supports deep linking via URL: /devtools/api/{METHOD}/{path}
+ *
+ * Examples:
+ * - /devtools/api                              → No selection
+ * - /devtools/api/GET/api/v1/customers         → GET /api/v1/customers selected
+ * - /devtools/api/POST/api/v1/billing/checkout → POST /api/v1/billing/checkout
+ */
+export default async function DevToolsApiPage({ params }: Props) {
+  const { endpoint } = await params
+  const routesByCategory = ApiRoutesService.getRoutesGroupedByCategory()
+
+  // Parse initial selection from URL
+  // endpoint = ['GET', 'api', 'v1', 'customers'] or undefined
+  let initialEndpoint: { method: string; path: string } | null = null
+  if (endpoint && endpoint.length >= 2) {
+    const method = endpoint[0] // GET, POST, etc.
+    const path = '/' + endpoint.slice(1).join('/') // /api/v1/customers
+    initialEndpoint = { method, path }
+  }
+
+  return <ApiExplorer routes={routesByCategory} initialEndpoint={initialEndpoint} />
+}

package/templates/app/devtools/api/layout.tsx

@@ -0,0 +1,44 @@
+/**
+ * API Explorer Layout
+ *
+ * Full-width layout for the API Explorer page.
+ * Uses negative margins to break out of the parent container's padding
+ * and centering (mx-auto).
+ *
+ * The parent layout has: container mx-auto p-6 max-w-7xl
+ * We need to break out of ALL these constraints to use the full available width.
+ *
+ * Structure:
+ * - DevTools sidebar: w-64 (256px / 16rem)
+ * - Main content: flex-1 (fills remaining space)
+ *   - Container: mx-auto p-6 max-w-7xl (centered, padded, max 1280px)
+ *     - This layout: breaks out to fill full main content area
+ */
+export default function ApiExplorerLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Use relative positioning to break out of the centered container
+  // margin-left: -50vw + 50% + sidebar/2 adjustment positions at the left edge
+  // width: calc(100vw - sidebar) fills to the right edge
+  return (
+    <div
+      className="h-[calc(100vh-4rem)]"
+      style={{
+        // Position at the left edge of the main content area (right after sidebar)
+        position: 'relative',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: 'calc(100vw - 16rem)', // 100vw minus DevTools sidebar (w-64 = 16rem)
+        maxWidth: 'none',
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: '-1.5rem', // Negate top padding
+        marginBottom: '-1.5rem', // Negate bottom padding
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/templates/app/devtools/config/page.tsx

@@ -9,7 +9,7 @@ import { getTranslations } from "next-intl/server";
  * Provides read-only view with JSON formatting and copy functionality.
  */
 export default async function DevConfigPage() {
-  const t = await getTranslations('devtools.config');
+  const t = await getTranslations('dev.config');
 
   return (
     <div className="space-y-6" data-cy="devtools-config-page">

package/templates/app/devtools/page.tsx

@@ -10,7 +10,7 @@ import { getTranslations } from "next-intl/server";
  * Shows overview of available sections in the dev area.
  */
 export default async function DevHomePage() {
-  const t = await getTranslations('devtools');
+  const t = await getTranslations('dev');
   const tCommon = await getTranslations('common');
 
   const sections = [

package/templates/app/devtools/scheduled-actions/page.tsx

@@ -52,7 +52,7 @@ async function fetchScheduledActions(
 }
 
 export default function ScheduledActionsPage() {
-  const t = useTranslations('devtools.scheduledActions')
+  const t = useTranslations('dev.scheduledActions')
   const [filters, setFilters] = useState<ScheduledActionsFilters>({})
   const [page, setPage] = useState(1)
   const limit = 20

package/templates/app/devtools/tests/[[...path]]/page.tsx

@@ -19,7 +19,7 @@ interface DevTestsPageProps {
  */
 export default async function DevTestsPage({ params }: DevTestsPageProps) {
   const { path } = await params;
-  const t = await getTranslations("devtools.tests");
+  const t = await getTranslations("dev.tests");
 
   // Convert path array to string (e.g., ['auth', 'login.bdd.md'] -> 'auth/login.bdd.md')
   const initialPath = path?.join("/") || null;

package/templates/app/globals.css

@@ -5,11 +5,8 @@
    DO NOT edit directly - all styles are in:
    contents/themes/{theme}/styles/globals.css
 
-   This import is AUTO-SYNCED by the registry build process
-   to match NEXT_PUBLIC_ACTIVE_THEME from your .env file.
-
    To customize colors, typography and tokens, edit
    the globals.css file in your active theme.
    ============================================= */
 
-@import "../contents/themes/starter/styles/globals.css";
+@import "../../../themes/default/styles/globals.css";

package/templates/app/superadmin/docs/[section]/[page]/page.tsx

@@ -6,7 +6,6 @@ import { DocsContent } from '@nextsparkjs/core/components/docs/docs-content'
 import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superadmin-docs-sidebar'
 import path from 'path'
 import type { Metadata } from 'next'
-import { sel } from '@nextsparkjs/core/selectors'
 
 interface SuperadminDocsPageProps {
   params: Promise<{
@@ -64,7 +63,7 @@ export default async function SuperadminDocsDetailPage({ params }: SuperadminDoc
   const { metadata, html } = await parseMarkdownFile(filePath)
 
   return (
-    <div className="flex gap-8" data-cy={sel('superadmin.docs.pageDetail')}>
+    <div className="flex gap-8" data-cy="superadmin-docs-page">
       <aside className="hidden lg:block w-64 shrink-0">
         <SuperadminDocsSidebar sections={DOCS_REGISTRY.superadmin} />
       </aside>

package/templates/app/superadmin/docs/page.tsx

@@ -3,7 +3,6 @@ import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superad
 import Link from 'next/link'
 import { FileText, Folder } from 'lucide-react'
 import type { Metadata } from 'next'
-import { sel } from '@nextsparkjs/core/selectors'
 
 export const metadata: Metadata = {
   title: 'Admin Documentation | Super Admin',
@@ -30,8 +29,12 @@ export default function SuperadminDocsPage() {
     )
   }
 
+  // Redirect to first page of first section
+  const firstSection = sections[0]
+  const firstPage = firstSection.pages[0]
+
   return (
-    <div className="flex gap-8" data-cy={sel('superadmin.docs.container')}>
+    <div className="flex gap-8" data-cy="superadmin-docs-container">
       <aside className="hidden lg:block w-64 shrink-0">
         <SuperadminDocsSidebar sections={sections} />
       </aside>
@@ -56,7 +59,7 @@ export default function SuperadminDocsPage() {
                     key={page.slug}
                     href={`/superadmin/docs/${section.slug}/${page.slug}`}
                     className="flex items-center gap-2 p-2 rounded-md hover:bg-accent transition-colors"
-                    data-cy={sel('superadmin.docs.pageLink', { slug: page.slug })}
+                    data-cy={`superadmin-docs-link-${page.slug}`}
                   >
                     <FileText className="h-4 w-4 text-muted-foreground" />
                     <span>{page.title}</span>

package/templates/app/superadmin/layout.tsx

@@ -2,7 +2,6 @@ import { SuperAdminGuard } from "@nextsparkjs/core/components/app/guards/SuperAd
 import { SuperadminSidebar } from "@nextsparkjs/core/components/superadmin/layouts/SuperadminSidebar";
 import { Metadata } from "next";
 import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
-import { sel } from "@nextsparkjs/core/selectors";
 
 const defaultMetadata: Metadata = {
   title: "Super Admin | Super Admin Panel",
@@ -29,7 +28,7 @@ interface SuperadminLayoutProps {
 function SuperadminLayout({ children }: SuperadminLayoutProps) {
   return (
     <SuperAdminGuard>
-      <div className="flex h-screen bg-background" data-cy={sel('superadmin.container')}>
+      <div className="flex h-screen bg-background" data-cy="superadmin-container">
         {/* Sidebar - Hidden on mobile, visible on desktop */}
         <div className="hidden lg:block">
           <SuperadminSidebar />