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

package/templates/app/devtools/page.tsx

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,157 @@
+/**
+ * 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

@@ -0,0 +1,330 @@
+"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

@@ -0,0 +1,31 @@
+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>
+  );
+}