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

package/dist/templates/app/dashboard/(main)/patterns/[id]/edit/page.tsx

@@ -0,0 +1,114 @@
+/**
+ * Patterns Edit Page
+ *
+ * Wrapper that delegates to the BuilderEditorView for pattern editing.
+ */
+
+'use client'
+
+import { notFound, useRouter } from 'next/navigation'
+import { useParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { clientEntityRegistry, ensureClientInitialized, type ClientEntityConfig } from '@nextsparkjs/registries/entity-registry.client'
+import { EntityFormWrapper } from '@nextsparkjs/core/components/entities/wrappers/EntityFormWrapper'
+import { BuilderEditorView } from '@nextsparkjs/core/components/dashboard/block-editor/builder-editor-view'
+import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert'
+import { getEntityData } from '@nextsparkjs/core/lib/api/entities'
+
+export default function PatternEditPage() {
+  const params = useParams()
+  const router = useRouter()
+  const [entityConfig, setEntityConfig] = useState<ClientEntityConfig | null>(null)
+  const [initialData, setInitialData] = useState<Record<string, unknown> | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const entitySlug = 'patterns'
+  const entityId = params.id as string
+
+  useEffect(() => {
+    async function loadEntityData() {
+      if (!entityId) {
+        setLoading(false)
+        return
+      }
+
+      try {
+        await ensureClientInitialized()
+        const config = clientEntityRegistry.getBySlug(entitySlug)
+
+        if (!config) {
+          setEntityConfig(null)
+          setLoading(false)
+          return
+        }
+
+        setEntityConfig(config)
+
+        // For builder-enabled entities, BuilderEditorView handles its own data fetching
+        // For regular entities, fetch data here
+        if (!config.builder?.enabled) {
+          const data = await getEntityData(entitySlug, entityId, true)
+          setInitialData(data as Record<string, unknown>)
+        }
+      } catch (error) {
+        console.error('Error loading pattern:', error)
+        setEntityConfig(null)
+        setInitialData(null)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadEntityData()
+  }, [entityId])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+      </div>
+    )
+  }
+
+  if (!entityConfig || !entityConfig.features?.enabled) {
+    return (
+      <Alert>
+        <AlertDescription>
+          Patterns entity is not configured or not enabled.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  // Use BuilderEditorView for builder-enabled entities
+  if (entityConfig.builder?.enabled) {
+    return (
+      <BuilderEditorView
+        entitySlug={entitySlug}
+        entityConfig={entityConfig}
+        id={entityId}
+        mode="edit"
+      />
+    )
+  }
+
+  // For non-builder entities, we need the initial data
+  if (!initialData) {
+    notFound()
+  }
+
+  // Use EntityFormWrapper for regular entities
+  return (
+    <EntityFormWrapper
+      entityType={entitySlug}
+      id={entityId}
+      mode="edit"
+      onSuccess={() => {
+        router.push(`/dashboard/${entitySlug}/${entityId}`)
+      }}
+      onError={(error) => {
+        console.error('Error updating pattern:', error)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Patterns Detail Page
+ *
+ * For builder-enabled entities like patterns, this redirects to edit mode.
+ */
+
+import { redirect } from 'next/navigation'
+
+interface PageProps {
+  params: Promise<{
+    id: string
+  }>
+}
+
+export default async function PatternDetailPage({ params }: PageProps) {
+  const resolvedParams = await params
+
+  // Patterns are builder-enabled, so redirect to edit view
+  redirect(`/dashboard/patterns/${resolvedParams.id}/edit`)
+}

package/dist/templates/app/dashboard/(main)/patterns/[id]/reports/page.tsx

@@ -0,0 +1,171 @@
+/**
+ * Pattern Usage Reports Page
+ *
+ * Shows detailed usage reports for a specific pattern.
+ * Displays stats cards and a table of entities using the pattern.
+ */
+
+'use client'
+
+import { useParams, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { ArrowLeft, Edit, LayoutGrid } from 'lucide-react'
+import { clientEntityRegistry, ensureClientInitialized } from '@nextsparkjs/registries/entity-registry.client'
+import { PatternUsageReport } from '@nextsparkjs/core/components/patterns/PatternUsageReport'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Alert, AlertDescription, AlertTitle } from '@nextsparkjs/core/components/ui/alert'
+import { Skeleton } from '@nextsparkjs/core/components/ui/skeleton'
+import { getEntityData } from '@nextsparkjs/core/lib/api/entities'
+
+interface PatternData {
+  id: string
+  name?: string
+  title?: string
+}
+
+export default function PatternReportsPage() {
+  const params = useParams()
+  const router = useRouter()
+  const patternId = params.id as string
+
+  const [pattern, setPattern] = useState<PatternData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function loadPattern() {
+      if (!patternId) {
+        setError('Pattern ID is required')
+        setLoading(false)
+        return
+      }
+
+      try {
+        // Ensure entity registry is initialized
+        await ensureClientInitialized()
+        const config = clientEntityRegistry.getBySlug('patterns')
+
+        if (!config || !config.features?.enabled) {
+          setError('Patterns entity is not configured or not enabled')
+          setLoading(false)
+          return
+        }
+
+        // Load pattern data
+        const data = await getEntityData('patterns', patternId, false) as PatternData
+        setPattern(data)
+      } catch (err) {
+        console.error('Error loading pattern:', err)
+        setError(err instanceof Error ? err.message : 'Failed to load pattern')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadPattern()
+  }, [patternId])
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6" data-cy="pattern-reports-loading">
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-8 w-64" />
+        </div>
+        <Skeleton className="h-4 w-96" />
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {[...Array(4)].map((_, i) => (
+            <Skeleton key={i} className="h-24" />
+          ))}
+        </div>
+        <Skeleton className="h-64" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="p-6" data-cy="pattern-reports-error">
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+        <Button
+          variant="outline"
+          className="mt-4"
+          onClick={() => router.push('/dashboard/patterns')}
+        >
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Back to Patterns
+        </Button>
+      </div>
+    )
+  }
+
+  if (!pattern) {
+    return (
+      <div className="p-6" data-cy="pattern-reports-not-found">
+        <Alert>
+          <AlertTitle>Pattern Not Found</AlertTitle>
+          <AlertDescription>
+            The pattern you are looking for does not exist or has been deleted.
+          </AlertDescription>
+        </Alert>
+        <Button
+          variant="outline"
+          className="mt-4"
+          onClick={() => router.push('/dashboard/patterns')}
+        >
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Back to Patterns
+        </Button>
+      </div>
+    )
+  }
+
+  const patternName = pattern.name || pattern.title || pattern.id
+
+  return (
+    <div className="p-6 space-y-6" data-cy="pattern-reports-page">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            asChild
+            data-cy="pattern-reports-back"
+          >
+            <Link href="/dashboard/patterns">
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <div>
+            <div className="flex items-center gap-2">
+              <LayoutGrid className="h-5 w-5 text-muted-foreground" />
+              <h1 className="text-2xl font-bold tracking-tight" data-cy="pattern-reports-title">
+                {patternName}
+              </h1>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">
+              Usage reports and analytics
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="outline" asChild data-cy="pattern-reports-edit">
+            <Link href={`/dashboard/patterns/${patternId}/edit`}>
+              <Edit className="mr-2 h-4 w-4" />
+              Edit Pattern
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      {/* Usage Report */}
+      <PatternUsageReport patternId={patternId} pageSize={20} />
+    </div>
+  )
+}

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

@@ -0,0 +1,86 @@
+/**
+ * Patterns Create Page
+ *
+ * Wrapper that delegates to the generic entity create page.
+ */
+
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { clientEntityRegistry, ensureClientInitialized, type ClientEntityConfig } from '@nextsparkjs/registries/entity-registry.client'
+import { EntityFormWrapper } from '@nextsparkjs/core/components/entities/wrappers/EntityFormWrapper'
+import { BuilderEditorView } from '@nextsparkjs/core/components/dashboard/block-editor/builder-editor-view'
+import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert'
+
+export default function PatternsCreatePage() {
+  const router = useRouter()
+  const [entityConfig, setEntityConfig] = useState<ClientEntityConfig | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const entitySlug = 'patterns'
+
+  useEffect(() => {
+    async function loadEntityConfig() {
+      try {
+        await ensureClientInitialized()
+        const config = clientEntityRegistry.getBySlug(entitySlug)
+        setEntityConfig(config || null)
+      } catch (error) {
+        console.error('Error loading entity config:', error)
+        setEntityConfig(null)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadEntityConfig()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+      </div>
+    )
+  }
+
+  if (!entityConfig || !entityConfig.features?.enabled) {
+    return (
+      <Alert>
+        <AlertDescription>
+          Patterns entity is not configured or not enabled.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  // Use BuilderEditorView for builder-enabled entities
+  if (entityConfig.builder?.enabled) {
+    return (
+      <BuilderEditorView
+        entitySlug={entitySlug}
+        entityConfig={entityConfig}
+        mode="create"
+      />
+    )
+  }
+
+  // Use EntityFormWrapper for regular entities
+  return (
+    <EntityFormWrapper
+      entityType={entitySlug}
+      mode="create"
+      onSuccess={(createdId) => {
+        if (createdId) {
+          router.push(`/dashboard/${entitySlug}/${createdId}`)
+        } else {
+          router.push(`/dashboard/${entitySlug}`)
+        }
+      }}
+      onError={(error) => {
+        console.error(`Error creating pattern:`, error)
+      }}
+    />
+  )
+}