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

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

@@ -1,444 +0,0 @@
-/**
- * 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/templates/app/dashboard/features/analytics/page.tsx

@@ -1,35 +0,0 @@
-'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/templates/app/dashboard/features/automation/page.tsx

@@ -1,35 +0,0 @@
-'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/templates/app/dashboard/features/layout.tsx

@@ -1,13 +0,0 @@
-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/templates/app/dashboard/features/loading.tsx

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

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

@@ -1,35 +0,0 @@
-'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/templates/app/dashboard/layout.tsx

@@ -1,86 +0,0 @@
-'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/templates/app/dashboard/permission-denied/page.tsx

@@ -1,29 +0,0 @@
-/**
- * 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/templates/app/dashboard/settings/api-keys/loading.tsx

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