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

package/templates/app/devtools/page.tsx

@@ -1,121 +0,0 @@
-import { Code, Palette, FileText, Settings } from "lucide-react";
-import Link from "next/link";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
-import { getTranslations } from "next-intl/server";
-
-/**
- * Developer Area Home Page
- *
- * Dashboard with quick links to development tools and documentation.
- * Shows overview of available sections in the dev area.
- */
-export default async function DevHomePage() {
-  const t = await getTranslations('dev');
-  const tCommon = await getTranslations('common');
-
-  const sections = [
-    {
-      title: t('nav.styleGallery'),
-      description: t('style.description'),
-      icon: Palette,
-      href: "/devtools/style",
-      color: "text-pink-600 dark:text-pink-400",
-      bgColor: "bg-pink-100 dark:bg-pink-950",
-      cyId: "devtools-home-style-link"
-    },
-    {
-      title: t('nav.testCases'),
-      description: t('tests.description'),
-      icon: FileText,
-      href: "/devtools/tests",
-      color: "text-blue-600 dark:text-blue-400",
-      bgColor: "bg-blue-100 dark:bg-blue-950",
-      cyId: "devtools-home-tests-link"
-    },
-    {
-      title: t('nav.config'),
-      description: t('config.description'),
-      icon: Settings,
-      href: "/devtools/config",
-      color: "text-green-600 dark:text-green-400",
-      bgColor: "bg-green-100 dark:bg-green-950",
-      cyId: "devtools-home-config-link"
-    },
-  ];
-
-  return (
-    <div className="space-y-6" data-cy="devtools-home-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <Code className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold text-violet-600 dark:text-violet-400">{t('title')}</h1>
-          <p className="text-muted-foreground">{t('subtitle')}</p>
-        </div>
-      </div>
-
-      {/* Welcome Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('home.welcome')}</CardTitle>
-          <CardDescription>{t('home.welcomeDescription')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-muted-foreground">
-            {t('home.intro')}
-          </p>
-        </CardContent>
-      </Card>
-
-      {/* Quick Links Grid */}
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {sections.map((section) => {
-          const Icon = section.icon;
-          return (
-            <Link
-              key={section.href}
-              href={section.href}
-              data-cy={section.cyId}
-            >
-              <Card className="h-full hover:border-violet-600 dark:hover:border-violet-400 transition-colors cursor-pointer">
-                <CardHeader>
-                  <div className="flex items-center gap-3">
-                    <div className={`flex items-center justify-center w-10 h-10 ${section.bgColor} rounded-lg`}>
-                      <Icon className={`h-5 w-5 ${section.color}`} />
-                    </div>
-                    <CardTitle className="text-lg">{section.title}</CardTitle>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <CardDescription>{section.description}</CardDescription>
-                </CardContent>
-              </Card>
-            </Link>
-          );
-        })}
-      </div>
-
-      {/* System Info Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('home.systemInfo')}</CardTitle>
-          <CardDescription>{t('home.systemInfoDescription')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div>
-              <p className="text-sm font-medium text-muted-foreground">{t('home.accessLevel')}</p>
-              <p className="text-lg font-semibold text-violet-600 dark:text-violet-400">{tCommon('userRoles.developer')}</p>
-            </div>
-            <div>
-              <p className="text-sm font-medium text-muted-foreground">{t('home.hierarchy')}</p>
-              <p className="text-lg font-semibold">100</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,157 +0,0 @@
-/**
- * DevTools Scheduled Actions Page
- *
- * Displays all scheduled background actions with:
- * - Status filtering (pending, running, completed, failed)
- * - Action type filtering
- * - Action details (type, status, scheduled time, team, payload)
- * - Error messages for failed actions
- * - Pagination
- *
- * Session: 2025-12-30-scheduled-actions-v1
- * Phase: Frontend (Phase 11)
- */
-
-'use client'
-
-import { useState } from 'react'
-import { useTranslations } from 'next-intl'
-import { useQuery } from '@tanstack/react-query'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { sel } from '@nextsparkjs/core/selectors'
-import { Filters } from '@nextsparkjs/core/components/devtools/scheduled-actions/filters'
-import { ActionsTable } from '@nextsparkjs/core/components/devtools/scheduled-actions/actions-table'
-import type { ScheduledActionsFilters, ScheduledActionsResponse } from '@nextsparkjs/core/components/devtools/scheduled-actions/types'
-
-async function fetchScheduledActions(
-  filters: ScheduledActionsFilters,
-  page: number,
-  limit: number
-): Promise<ScheduledActionsResponse> {
-  const params = new URLSearchParams()
-
-  if (filters.status) {
-    params.append('status', filters.status)
-  }
-
-  if (filters.actionType) {
-    params.append('action_type', filters.actionType)
-  }
-
-  params.append('page', page.toString())
-  params.append('limit', limit.toString())
-
-  const response = await fetch(`/api/v1/devtools/scheduled-actions?${params.toString()}`)
-
-  if (!response.ok) {
-    throw new Error('Failed to fetch scheduled actions')
-  }
-
-  return response.json()
-}
-
-export default function ScheduledActionsPage() {
-  const t = useTranslations('dev.scheduledActions')
-  const [filters, setFilters] = useState<ScheduledActionsFilters>({})
-  const [page, setPage] = useState(1)
-  const limit = 20
-
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['scheduled-actions', filters, page, limit],
-    queryFn: () => fetchScheduledActions(filters, page, limit),
-  })
-
-  const handleFiltersChange = (newFilters: ScheduledActionsFilters) => {
-    setFilters(newFilters)
-    setPage(1) // Reset to first page when filters change
-  }
-
-  const handlePreviousPage = () => {
-    setPage((prev) => Math.max(1, prev - 1))
-  }
-
-  const handleNextPage = () => {
-    if (data?.data.pagination.totalPages) {
-      setPage((prev) => Math.min(data.data.pagination.totalPages, prev + 1))
-    }
-  }
-
-  return (
-    <div
-      className="container mx-auto p-6 max-w-7xl"
-      data-cy={sel('devtools.scheduledActions.page')}
-    >
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
-        <p className="text-muted-foreground mt-2">{t('description')}</p>
-      </div>
-
-      {/* Filters */}
-      <Filters
-        filters={filters}
-        onFiltersChange={handleFiltersChange}
-        registeredActionTypes={data?.data.meta.registeredActionTypes || []}
-      />
-
-      {/* Loading State */}
-      {isLoading && (
-        <div className="text-center py-12 text-muted-foreground">
-          <p>{t('loading')}</p>
-        </div>
-      )}
-
-      {/* Error State */}
-      {error && (
-        <div className="text-center py-12 text-destructive">
-          <p>Error: {error.message}</p>
-        </div>
-      )}
-
-      {/* Actions Table */}
-      {data && !isLoading && (
-        <>
-          <ActionsTable actions={data.data.actions} />
-
-          {/* Pagination */}
-          {data.data.pagination.totalPages > 1 && (
-            <div
-              className="flex items-center justify-between mt-6"
-              data-cy={sel('devtools.scheduledActions.pagination')}
-            >
-              <p className="text-sm text-muted-foreground">
-                {t('pagination.page', {
-                  page: data.data.pagination.page,
-                  total: data.data.pagination.totalPages,
-                })}
-              </p>
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handlePreviousPage}
-                  disabled={page === 1}
-                  data-cy={sel('devtools.scheduledActions.paginationPrev')}
-                >
-                  <ChevronLeftIcon className="h-4 w-4 mr-1" />
-                  {t('pagination.previous')}
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleNextPage}
-                  disabled={page === data.data.pagination.totalPages}
-                  data-cy={sel('devtools.scheduledActions.paginationNext')}
-                >
-                  {t('pagination.next')}
-                  <ChevronRightIcon className="h-4 w-4 ml-1" />
-                </Button>
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  )
-}

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

@@ -1,330 +0,0 @@
-"use client";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
-import { Button } from "@nextsparkjs/core/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@nextsparkjs/core/components/ui/tabs";
-import { Badge } from "@nextsparkjs/core/components/ui/badge";
-import { ArrowLeft, Palette, Package, Layers, BookOpen, Download, FormInput } from "lucide-react";
-import Link from "next/link";
-import { ComponentGallery } from "@nextsparkjs/core/components/superadmin/misc/ComponentGallery";
-import { ThemePreview } from "@nextsparkjs/core/components/superadmin/misc/ThemePreview";
-import { FieldTypesGallery } from "@nextsparkjs/core/components/superadmin/misc/FieldTypesGallery";
-import { useState } from "react";
-
-/**
- * Style Gallery Page - Developer Area
- *
- * Comprehensive design system showcase for developers.
- * Displays components, themes, and design tokens for reference and testing.
- */
-export default function DevStylePage() {
-  const [activeTab, setActiveTab] = useState("components");
-
-  return (
-    <div className="space-y-6" data-cy="devtools-style-page">
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <Button variant="outline" size="sm" asChild>
-          <Link href="/dev" className="flex items-center gap-2">
-            <ArrowLeft className="h-4 w-4" />
-            Back to Dev Area
-          </Link>
-        </Button>
-        <div className="flex-1">
-          <h1 className="text-3xl font-bold tracking-tight">Style Gallery</h1>
-          <p className="text-muted-foreground">
-            Design system showcase and component library
-          </p>
-        </div>
-        <Button variant="outline" size="sm" className="flex items-center gap-2">
-          <Download className="h-4 w-4" />
-          Export Tokens
-        </Button>
-      </div>
-
-      {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Components</CardTitle>
-            <Package className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">30+</div>
-            <p className="text-xs text-muted-foreground">
-              Available UI components
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Color Tokens</CardTitle>
-            <Palette className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">16</div>
-            <p className="text-xs text-muted-foreground">
-              Theme color variables
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Themes</CardTitle>
-            <Layers className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">2</div>
-            <p className="text-xs text-muted-foreground">
-              Light & dark modes
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Documentation</CardTitle>
-            <BookOpen className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">100%</div>
-            <p className="text-xs text-muted-foreground">
-              Component coverage
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Main Content Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="components" className="flex items-center gap-2" data-cy="devtools-style-tab-components">
-            <Package className="h-4 w-4" />
-            Components
-          </TabsTrigger>
-          <TabsTrigger value="field-types" className="flex items-center gap-2" data-cy="devtools-style-tab-field-types">
-            <FormInput className="h-4 w-4" />
-            Field Types
-          </TabsTrigger>
-          <TabsTrigger value="theme" className="flex items-center gap-2" data-cy="devtools-style-tab-theme">
-            <Palette className="h-4 w-4" />
-            Theme & Colors
-          </TabsTrigger>
-          <TabsTrigger value="guidelines" className="flex items-center gap-2" data-cy="devtools-style-tab-guidelines">
-            <BookOpen className="h-4 w-4" />
-            Guidelines
-          </TabsTrigger>
-        </TabsList>
-
-        {/* Components Tab */}
-        <TabsContent value="components" className="space-y-4" data-cy="devtools-style-component-gallery">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Package className="h-5 w-5" />
-                Component Library
-              </CardTitle>
-              <CardDescription>
-                Complete showcase of all available UI components with different states and variations
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ComponentGallery />
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Field Types Tab */}
-        <TabsContent value="field-types" className="space-y-4" data-cy="devtools-style-field-types">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <FormInput className="h-5 w-5" />
-                Entity Field Types
-              </CardTitle>
-              <CardDescription>
-                Complete showcase of all entity field types with examples and variants for form development
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <FieldTypesGallery />
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Theme Tab */}
-        <TabsContent value="theme" className="space-y-4" data-cy="devtools-style-theme-preview">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Palette className="h-5 w-5" />
-                Theme System
-              </CardTitle>
-              <CardDescription>
-                Color tokens, typography, and design system variables for both light and dark themes
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ThemePreview />
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Guidelines Tab */}
-        <TabsContent value="guidelines" className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* Design Principles */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Design Principles</CardTitle>
-                <CardDescription>Core principles guiding our design system</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <h4 className="font-medium flex items-center gap-2">
-                    <Badge variant="outline">1</Badge>
-                    Consistency
-                  </h4>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    Maintain visual and functional consistency across all components
-                  </p>
-                </div>
-                <div>
-                  <h4 className="font-medium flex items-center gap-2">
-                    <Badge variant="outline">2</Badge>
-                    Accessibility
-                  </h4>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    Ensure all components meet WCAG 2.1 AA standards
-                  </p>
-                </div>
-                <div>
-                  <h4 className="font-medium flex items-center gap-2">
-                    <Badge variant="outline">3</Badge>
-                    Scalability
-                  </h4>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    Design components that work at different scales and contexts
-                  </p>
-                </div>
-                <div>
-                  <h4 className="font-medium flex items-center gap-2">
-                    <Badge variant="outline">4</Badge>
-                    Performance
-                  </h4>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    Optimize for fast loading and smooth interactions
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Usage Guidelines */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Usage Guidelines</CardTitle>
-                <CardDescription>How to effectively use this design system</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <h4 className="font-medium">Color Usage</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Use semantic color names (primary, secondary, destructive) rather than specific colors
-                  </p>
-                </div>
-                <div>
-                  <h4 className="font-medium">Typography Scale</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Follow the established type scale for consistent hierarchy
-                  </p>
-                </div>
-                <div>
-                  <h4 className="font-medium">Spacing System</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Use the 8px grid system for consistent spacing and alignment
-                  </p>
-                </div>
-                <div>
-                  <h4 className="font-medium">Component Composition</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Combine base components to create complex interfaces
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Technical Specs */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Technical Specifications</CardTitle>
-                <CardDescription>Implementation details and requirements</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                <div className="flex justify-between items-center py-2 border-b">
-                  <span className="text-sm font-medium">Framework</span>
-                  <Badge variant="secondary">Next.js 14</Badge>
-                </div>
-                <div className="flex justify-between items-center py-2 border-b">
-                  <span className="text-sm font-medium">Styling</span>
-                  <Badge variant="secondary">Tailwind CSS</Badge>
-                </div>
-                <div className="flex justify-between items-center py-2 border-b">
-                  <span className="text-sm font-medium">Components</span>
-                  <Badge variant="secondary">Radix UI</Badge>
-                </div>
-                <div className="flex justify-between items-center py-2 border-b">
-                  <span className="text-sm font-medium">Icons</span>
-                  <Badge variant="secondary">Lucide React</Badge>
-                </div>
-                <div className="flex justify-between items-center py-2 border-b">
-                  <span className="text-sm font-medium">Theme System</span>
-                  <Badge variant="secondary">CSS Variables</Badge>
-                </div>
-                <div className="flex justify-between items-center py-2">
-                  <span className="text-sm font-medium">Build Tool</span>
-                  <Badge variant="secondary">Turbo</Badge>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Resources */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Resources & Links</CardTitle>
-                <CardDescription>Additional resources and documentation</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                <Button variant="outline" className="w-full justify-start" asChild>
-                  <Link href="https://ui.shadcn.com" target="_blank">
-                    <BookOpen className="mr-2 h-4 w-4" />
-                    Shadcn/ui Documentation
-                  </Link>
-                </Button>
-                <Button variant="outline" className="w-full justify-start" asChild>
-                  <Link href="https://tailwindcss.com" target="_blank">
-                    <Layers className="mr-2 h-4 w-4" />
-                    Tailwind CSS Docs
-                  </Link>
-                </Button>
-                <Button variant="outline" className="w-full justify-start" asChild>
-                  <Link href="https://www.radix-ui.com" target="_blank">
-                    <Package className="mr-2 h-4 w-4" />
-                    Radix UI Components
-                  </Link>
-                </Button>
-                <Button variant="outline" className="w-full justify-start" asChild>
-                  <Link href="https://lucide.dev" target="_blank">
-                    <Palette className="mr-2 h-4 w-4" />
-                    Lucide Icons
-                  </Link>
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

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

@@ -1,31 +0,0 @@
-import { TagsOverview } from "@nextsparkjs/core/components/devtools/TagsOverview";
-import { Tag } from "lucide-react";
-import { getTranslations } from "next-intl/server";
-
-/**
- * Tags Overview Page
- *
- * Displays all test tags organized by category.
- * Provides search and copy-to-clipboard functionality.
- */
-export default async function DevTagsPage() {
-  const t = await getTranslations("devtools.tags");
-
-  return (
-    <div className="space-y-6" data-cy="devtools-tags-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <Tag className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold">{t("title")}</h1>
-          <p className="text-muted-foreground">{t("description")}</p>
-        </div>
-      </div>
-
-      {/* Tags Overview */}
-      <TagsOverview />
-    </div>
-  );
-}