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

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

@@ -0,0 +1,444 @@
+/**
+ * Patterns List Page
+ *
+ * Custom patterns list page with quickAction to view usage reports.
+ * Uses EntityTable directly to enable custom quickActions.
+ */
+
+'use client'
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { Plus, Loader2, BarChart3, Pencil, Trash2 } from 'lucide-react'
+import { EntityTable } from '@nextsparkjs/core/components/entities/EntityTable'
+import { EntityBulkActions } from '@nextsparkjs/core/components/entities/EntityBulkActions'
+import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { SkeletonEntityList } from '@nextsparkjs/core/components/ui/skeleton-list'
+import { SearchInput } from '@nextsparkjs/core/components/shared/SearchInput'
+import { MultiSelectFilter } from '@nextsparkjs/core/components/shared/MultiSelectFilter'
+import { PatternDeleteDialog } from '@nextsparkjs/core/components/patterns'
+import { useEntityConfig } from '@nextsparkjs/core/hooks/useEntityConfig'
+import { useUrlFilters, type FilterSchema, type EntityFiltersReturn } from '@nextsparkjs/core/hooks/useUrlFilters'
+import { listEntityData, deleteEntityData } from '@nextsparkjs/core/lib/api/entities'
+import { useTeam } from '@nextsparkjs/core/hooks/useTeam'
+import { usePermission } from '@nextsparkjs/core/lib/permissions/hooks'
+import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
+import type { QuickAction, DropdownAction } from '@nextsparkjs/core/components/entities/entity-table.types'
+import { sel } from '@nextsparkjs/core/lib/test'
+import { toast } from 'sonner'
+
+interface PatternItem {
+  id: string
+  name?: string
+  title?: string
+  usageCount?: number
+  [key: string]: unknown
+}
+
+export default function PatternsListPage() {
+  const entityType = 'patterns'
+  const router = useRouter()
+
+  // Use the new centralized hook for entity configuration
+  const { config: entityConfig, isLoading, error: configError, isOverride } = useEntityConfig(entityType)
+
+  // Get current team for relation resolution
+  const { teamId } = useTeam()
+
+  // Check permissions
+  const canCreate = usePermission(`${entityType}.create` as Permission)
+
+  // Generate filter schema dynamically from entityConfig
+  const filterSchema = useMemo(() => {
+    const schema: FilterSchema = {
+      search: { type: 'search', urlParam: 'search' } as const
+    }
+
+    // Add filters from entity config
+    entityConfig?.ui.dashboard.filters?.forEach(filterConfig => {
+      if (filterConfig.type === 'multiSelect' || filterConfig.type === 'singleSelect') {
+        schema[filterConfig.field] = {
+          type: filterConfig.type,
+          urlParam: filterConfig.urlParam || filterConfig.field
+        }
+      }
+    })
+
+    return schema
+  }, [entityConfig?.ui.dashboard.filters])
+
+  // Use URL-synchronized filters with dynamic schema
+  const { filters, setFilter } = useUrlFilters(filterSchema) as unknown as EntityFiltersReturn
+
+  // Data loading states
+  const [data, setData] = useState<PatternItem[]>([])
+  const [isInitialLoad, setIsInitialLoad] = useState(true)
+  const [isSearching, setIsSearching] = useState(false)
+  const [dataError, setDataError] = useState<string | null>(null)
+
+  // Selection state for bulk actions
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+
+  // Delete dialog state for PatternDeleteDialog
+  const [deleteTarget, setDeleteTarget] = useState<PatternItem | null>(null)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  // Build API filters from URL filter state
+  const buildApiFilters = useCallback(() => {
+    const apiFilters: Record<string, string> = {}
+
+    if (filters.search && typeof filters.search === 'string' && filters.search.trim()) {
+      apiFilters.search = filters.search
+    }
+
+    entityConfig?.ui.dashboard.filters?.forEach(filterConfig => {
+      const value = filters[filterConfig.field]
+      if (Array.isArray(value) && value.length > 0) {
+        apiFilters[filterConfig.field] = value.join(',')
+      } else if (typeof value === 'string' && value) {
+        apiFilters[filterConfig.field] = value
+      }
+    })
+
+    return apiFilters
+  }, [filters, entityConfig?.ui.dashboard.filters])
+
+  // Load entity data function
+  const loadData = useCallback(async (isInitial = false) => {
+    if (!entityConfig) return
+    if (!entityConfig.enabled) {
+      setDataError(`Entity "${entityType}" is disabled`)
+      return
+    }
+
+    try {
+      if (isInitial) {
+        setIsInitialLoad(true)
+      } else {
+        setIsSearching(true)
+      }
+      setDataError(null)
+
+      const apiFilters = buildApiFilters()
+      const result = await listEntityData(entityType, {
+        limit: 50,
+        includeMeta: true,
+        ...(Object.keys(apiFilters).length > 0 && { filters: apiFilters })
+      })
+
+      setData(result.data as PatternItem[])
+      setDataError(null)
+    } catch (err) {
+      console.error(`[PatternsListPage] Error loading data:`, err)
+      setDataError(`Error loading data: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      setData([])
+    } finally {
+      setIsInitialLoad(false)
+      setIsSearching(false)
+    }
+  }, [entityConfig, entityType, buildApiFilters])
+
+  // Track previous filters and schema to detect changes
+  const filtersKey = JSON.stringify(filters)
+  const prevFiltersKeyRef = useRef<string>('')
+  const hasLoadedRef = useRef(false)
+  const schemaKeysForSync = useMemo(
+    () => Object.keys(filterSchema).sort().join(','),
+    [filterSchema]
+  )
+  const prevSchemaKeysRef = useRef<string>(schemaKeysForSync)
+
+  // Check if filters are synced with URL params
+  const filtersMatchUrl = useMemo(() => {
+    if (typeof window === 'undefined') return true
+
+    if (schemaKeysForSync !== prevSchemaKeysRef.current) {
+      prevSchemaKeysRef.current = schemaKeysForSync
+      return false
+    }
+
+    const urlParams = new URLSearchParams(window.location.search)
+
+    for (const filterConfig of entityConfig?.ui.dashboard.filters || []) {
+      const urlValue = urlParams.get(filterConfig.field)
+      const filterValue = filters[filterConfig.field]
+
+      if (urlValue && (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0))) {
+        return false
+      }
+    }
+    return true
+  }, [filters, entityConfig?.ui.dashboard.filters, schemaKeysForSync])
+
+  // Load data when config is ready AND filters are synced with URL
+  useEffect(() => {
+    if (!entityConfig?.slug) return
+    if (!filtersMatchUrl) return
+
+    const isInitial = !hasLoadedRef.current
+    const filtersChanged = prevFiltersKeyRef.current !== filtersKey
+
+    if (isInitial || filtersChanged) {
+      prevFiltersKeyRef.current = filtersKey
+      hasLoadedRef.current = true
+      loadData(isInitial)
+    }
+  }, [entityConfig?.slug, filtersKey, filtersMatchUrl, loadData])
+
+  // Handle search input change
+  const handleSearch = useCallback((query: string) => {
+    setFilter('search', query)
+  }, [setFilter])
+
+  // Handler that opens the delete dialog (called from dropdown action)
+  const handleDeleteClick = useCallback((item: PatternItem) => {
+    setDeleteTarget(item)
+    setIsDeleteDialogOpen(true)
+  }, [])
+
+  // Handler that executes the delete (called from PatternDeleteDialog)
+  const handleConfirmDelete = useCallback(async () => {
+    if (!deleteTarget) return
+    setIsDeleting(true)
+    try {
+      await deleteEntityData(entityType, deleteTarget.id)
+      toast.success(`Pattern deleted successfully`)
+      setSelectedIds(prev => {
+        const newSet = new Set(prev)
+        newSet.delete(deleteTarget.id)
+        return newSet
+      })
+      await loadData(false)
+    } catch (err) {
+      console.error(`[PatternsListPage] Error deleting pattern:`, err)
+      toast.error(`Error deleting: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    } finally {
+      setIsDeleting(false)
+      setIsDeleteDialogOpen(false)
+      setDeleteTarget(null)
+    }
+  }, [deleteTarget, entityType, loadData])
+
+  // Handle bulk delete
+  const handleBulkDelete = useCallback(async (ids: string[]) => {
+    try {
+      await Promise.all(ids.map(id => deleteEntityData(entityType, id)))
+      toast.success(`${ids.length} pattern${ids.length === 1 ? '' : 's'} deleted successfully`)
+      await loadData(false)
+    } catch (err) {
+      console.error(`[PatternsListPage] Error bulk deleting patterns:`, err)
+      toast.error(`Error deleting: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      throw err
+    }
+  }, [entityType, loadData])
+
+  // Handle select all
+  const handleSelectAll = useCallback(() => {
+    const allIds = new Set(data.map(item => String(item.id)))
+    setSelectedIds(allIds)
+  }, [data])
+
+  // Handle clear selection
+  const handleClearSelection = useCallback(() => {
+    setSelectedIds(new Set())
+  }, [])
+
+  // Get item name for confirmations
+  const getItemName = useCallback((item: PatternItem): string => {
+    return String(item.name || item.title || item.id)
+  }, [])
+
+  // Custom quickActions for patterns - includes "View Usages" action
+  const quickActions: QuickAction<PatternItem>[] = useMemo(
+    () => [
+      {
+        id: 'view-usages',
+        label: 'View Usages',
+        icon: <BarChart3 className="h-4 w-4" />,
+        onClick: (item: PatternItem) => {
+          router.push(`/dashboard/patterns/${item.id}/reports`)
+        },
+        dataCySuffix: 'usages',
+      },
+    ],
+    [router]
+  )
+
+  // Custom dropdownActions - replace default delete with PatternDeleteDialog
+  const dropdownActions: DropdownAction<PatternItem>[] = useMemo(
+    () => [
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: <Pencil className="h-4 w-4" />,
+        onClick: (item) => router.push(`/dashboard/patterns/${item.id}/edit`),
+        dataCySuffix: 'edit',
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <Trash2 className="h-4 w-4" />,
+        onClick: handleDeleteClick,
+        variant: 'destructive',
+        separator: true,
+        dataCySuffix: 'delete',
+      },
+    ],
+    [router, handleDeleteClick]
+  )
+
+  if (isLoading) {
+    return <SkeletonEntityList />
+  }
+
+  if (configError || !entityConfig) {
+    return (
+      <Alert>
+        <AlertDescription>
+          {configError || `Could not load configuration for entity "${entityType}".`}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (dataError) {
+    return (
+      <Alert>
+        <AlertDescription>
+          {dataError}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  const bulkOperationsEnabled = entityConfig.ui.features.bulkOperations
+  const enableSearch = entityConfig.ui.features.searchable
+  const enableFilters = entityConfig.ui.features.filterable && entityConfig.ui.dashboard.filters?.length
+  const searchValue = typeof filters.search === 'string' ? filters.search : ''
+
+  return (
+    <div data-cy={sel('entities.page.container', { slug: entityConfig.slug })}>
+      <div className="p-6 space-y-6" data-cy={sel('entities.list.container', { slug: entityConfig.slug })}>
+        {/* Row 1: Title + Create button */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight" data-cy={sel('entities.header.title', { slug: entityConfig.slug })}>
+              {entityConfig.names.plural}
+            </h1>
+            <p className="text-muted-foreground">
+              Manage your {entityConfig.names.plural.toLowerCase()}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {canCreate && (
+              <Button asChild data-cy={sel('entities.list.addButton', { slug: entityConfig.slug })}>
+                <Link href={`/dashboard/${entityConfig.slug}/create`}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add {entityConfig.names.singular}
+                </Link>
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Row 2: Search + Filters */}
+        {(enableSearch || enableFilters) && (
+          <div className="flex flex-col sm:flex-row gap-3 items-center flex-wrap">
+            {enableSearch && (
+              <SearchInput
+                placeholder={`Search ${entityConfig.names.plural.toLowerCase()}...`}
+                value={searchValue}
+                onChange={(e) => handleSearch(e.target.value)}
+                containerClassName="flex-1 max-w-md"
+                data-cy={sel('entities.list.search.container', { slug: entityConfig.slug })}
+              />
+            )}
+
+            {enableFilters && entityConfig.ui.dashboard.filters?.map(filterConfig => {
+              const field = entityConfig.fields.find(f => f.name === filterConfig.field)
+              if (!field?.options) return null
+
+              const filterValues = filters[filterConfig.field]
+              const values = Array.isArray(filterValues) ? filterValues : []
+
+              return (
+                <MultiSelectFilter
+                  key={filterConfig.field}
+                  label={filterConfig.label || field.display.label}
+                  options={field.options.map(opt => ({
+                    value: String(opt.value),
+                    label: opt.label
+                  }))}
+                  values={values}
+                  onChange={(newValues) => setFilter(filterConfig.field, newValues)}
+                  data-cy={sel('entities.list.filters.trigger', { slug: entityConfig.slug, field: filterConfig.field })}
+                />
+              )
+            })}
+
+            {isSearching && (
+              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            )}
+          </div>
+        )}
+
+        {/* Row 3: Data Table with custom quickActions and dropdownActions */}
+        <EntityTable
+          entityConfig={entityConfig}
+          data={data as Array<{ id: string }>}
+          loading={isInitialLoad}
+          selectable={bulkOperationsEnabled}
+          selectedIds={selectedIds}
+          onSelectionChange={setSelectedIds}
+          enableSearch={false}
+          searchQuery={searchValue}
+          onSearch={handleSearch}
+          getItemName={getItemName}
+          teamId={teamId}
+          useDefaultActions={false}
+          quickActions={quickActions}
+          dropdownActions={dropdownActions}
+          showHeader={false}
+          pagination={{
+            pageSize: 10,
+            showPageSizeSelector: true,
+            pageSizeOptions: [10, 20, 50, 100],
+          }}
+        />
+
+        {/* Floating Bulk Actions Bar */}
+        {bulkOperationsEnabled && (
+          <EntityBulkActions
+            entitySlug={entityConfig.slug}
+            selectedIds={selectedIds}
+            onClearSelection={handleClearSelection}
+            config={{
+              enableSelectAll: true,
+              totalItems: data.length,
+              onSelectAll: handleSelectAll,
+              enableDelete: true,
+              onDelete: handleBulkDelete,
+              itemLabel: entityConfig.names.singular,
+              itemLabelPlural: entityConfig.names.plural,
+            }}
+          />
+        )}
+
+        {/* Pattern Delete Dialog - shows usage warning before deleting */}
+        {deleteTarget && (
+          <PatternDeleteDialog
+            patternId={deleteTarget.id}
+            patternTitle={getItemName(deleteTarget)}
+            onConfirm={handleConfirmDelete}
+            isDeleting={isDeleting}
+            open={isDeleteDialogOpen}
+            onOpenChange={setIsDeleteDialogOpen}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/templates/app/dashboard/features/analytics/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { FeatureGate } from '@nextsparkjs/core/components/billing/FeatureGate'
+import { FeaturePlaceholder } from '@nextsparkjs/core/components/billing/FeaturePlaceholder'
+import { BarChart3 } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+
+export default function AdvancedAnalyticsPage() {
+  const t = useTranslations('features')
+
+  return (
+    <div data-cy="feature-analytics-page">
+      <FeatureGate
+        feature="advanced_analytics"
+        fallback={
+          <FeaturePlaceholder
+            feature="advanced_analytics"
+            icon={<BarChart3 className="h-8 w-8" />}
+            benefits={[
+              t('analytics.benefit1'),
+              t('analytics.benefit2'),
+              t('analytics.benefit3'),
+            ]}
+          />
+        }
+      >
+        {/* Contenido real cuando se implemente */}
+        <div data-cy="analytics-content">
+          <h1 className="text-2xl font-bold">{t('analytics.title')}</h1>
+          <p className="text-muted-foreground mt-2">Analytics dashboard coming soon...</p>
+        </div>
+      </FeatureGate>
+    </div>
+  )
+}

package/dist/templates/app/dashboard/features/automation/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { FeatureGate } from '@nextsparkjs/core/components/billing/FeatureGate'
+import { FeaturePlaceholder } from '@nextsparkjs/core/components/billing/FeaturePlaceholder'
+import { Zap } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+
+export default function TaskAutomationPage() {
+  const t = useTranslations('features')
+
+  return (
+    <div data-cy="feature-automation-page">
+      <FeatureGate
+        feature="task_automation"
+        fallback={
+          <FeaturePlaceholder
+            feature="task_automation"
+            icon={<Zap className="h-8 w-8" />}
+            benefits={[
+              t('automation.benefit1'),
+              t('automation.benefit2'),
+              t('automation.benefit3'),
+            ]}
+          />
+        }
+      >
+        {/* Contenido real cuando se implemente */}
+        <div data-cy="automation-content">
+          <h1 className="text-2xl font-bold">{t('automation.title')}</h1>
+          <p className="text-muted-foreground mt-2">Task automation coming soon...</p>
+        </div>
+      </FeatureGate>
+    </div>
+  )
+}

package/dist/templates/app/dashboard/features/layout.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+
+interface FeaturesLayoutProps {
+  children: ReactNode
+}
+
+export default function FeaturesLayout({ children }: FeaturesLayoutProps) {
+  return (
+    <div className="container py-8" data-cy="features-layout">
+      {children}
+    </div>
+  )
+}

package/dist/templates/app/dashboard/features/loading.tsx

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

package/dist/templates/app/dashboard/features/webhooks/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { FeatureGate } from '@nextsparkjs/core/components/billing/FeatureGate'
+import { FeaturePlaceholder } from '@nextsparkjs/core/components/billing/FeaturePlaceholder'
+import { Webhook } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+
+export default function WebhooksPage() {
+  const t = useTranslations('features')
+
+  return (
+    <div data-cy="feature-webhooks-page">
+      <FeatureGate
+        feature="webhooks"
+        fallback={
+          <FeaturePlaceholder
+            feature="webhooks"
+            icon={<Webhook className="h-8 w-8" />}
+            benefits={[
+              t('webhooks.benefit1'),
+              t('webhooks.benefit2'),
+              t('webhooks.benefit3'),
+            ]}
+          />
+        }
+      >
+        {/* Contenido real cuando se implemente */}
+        <div data-cy="webhooks-content">
+          <h1 className="text-2xl font-bold">{t('webhooks.title')}</h1>
+          <p className="text-muted-foreground mt-2">Webhooks configuration coming soon...</p>
+        </div>
+      </FeatureGate>
+    </div>
+  )
+}

package/dist/templates/app/dashboard/layout.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
+import { useRouter } from 'next/navigation'
+import { useEffect, Suspense } from 'react'
+import { Loader2 } from 'lucide-react'
+import { DashboardTranslationPreloader } from '@nextsparkjs/core/lib/i18n/DashboardTranslationPreloader'
+import { TranslationDebugger } from '@nextsparkjs/core/utils/dev/TranslationDebugger'
+import { useEnsureUserMetadata } from '@nextsparkjs/core/hooks/useEnsureUserMetadata'
+import { useAuthMethodDetector } from '@nextsparkjs/core/hooks/useAuthMethodDetector'
+
+/**
+ * Auth Method Detector Wrapper (uses useSearchParams internally)
+ */
+function AuthMethodDetectorWrapper() {
+  useAuthMethodDetector()
+  return null
+}
+
+/**
+ * Dashboard Layout Content
+ */
+function DashboardLayoutContent({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth()
+  const router = useRouter()
+
+  // Asegurar que el usuario tenga metadata default
+  useEnsureUserMetadata()
+
+  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
+  }
+
+  return (
+    <>
+      {/* Precargar traducciones del dashboard para mejorar UX de navegación */}
+      <DashboardTranslationPreloader key="dashboard-translation-preloader" />
+
+      {/* Debugger de traducciones (solo en desarrollo con ?debug-i18n=true) */}
+      <TranslationDebugger key="translation-debugger" />
+
+      {/* Detect and save auth method from OAuth redirects (wrapped in Suspense) */}
+      <Suspense key="auth-method-detector" fallback={null}>
+        <AuthMethodDetectorWrapper />
+      </Suspense>
+
+      {/*
+        Children run within authenticated boundary -
+        nested layouts CAN be themed but security is guaranteed
+      */}
+      <div key="dashboard-children" data-cy="dashboard-container">{children}</div>
+    </>
+  )
+}
+
+/**
+ * CORE SECURITY LAYOUT - NOT OVERRIDEABLE BY THEMES
+ *
+ * This layout provides essential authentication and security measures
+ * that cannot be bypassed by theme overrides. All dashboard routes
+ * run within this authenticated boundary.
+ *
+ * SECURITY: This layout is intentionally NOT using template resolver
+ * to prevent themes from bypassing authentication.
+ */
+export default function CoreDashboardLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return <DashboardLayoutContent>{children}</DashboardLayoutContent>
+}

package/dist/templates/app/dashboard/permission-denied/page.tsx

@@ -0,0 +1,29 @@
+/**
+ * Permission Denied Page
+ *
+ * Server page that reads search params and renders the existing NoPermission component.
+ * This page is displayed when a user attempts to access a resource they don't have permission for.
+ */
+import { NoPermission } from '@nextsparkjs/core/components/permissions/NoPermission'
+
+interface PermissionDeniedPageProps {
+  searchParams: Promise<{
+    entity?: string
+    action?: string
+  }>
+}
+
+export default async function PermissionDeniedPage({
+  searchParams
+}: PermissionDeniedPageProps) {
+  const { entity, action } = await searchParams
+
+  return (
+    <NoPermission
+      entityName={entity}
+      action={action as 'list' | 'read' | 'create' | 'update' | 'delete'}
+      showBackButton={true}
+      showHomeButton={true}
+    />
+  )
+}

package/dist/templates/app/dashboard/settings/api-keys/loading.tsx

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