@nextsparkjs/core 0.1.0-beta.13 → 0.1.0-beta.130

package/dist/templates/app/superadmin/subscriptions/page.tsx

@@ -3,7 +3,7 @@
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { useState } from "react";
 import { format } from "date-fns";
-import { sel } from "@nextsparkjs/core/lib/test";
+import { sel } from "@nextsparkjs/core/selectors";
 import {
   Card,
   CardContent,
@@ -79,6 +79,8 @@ interface Subscription {
   canceledAt: string | null;
   cancelAtPeriodEnd: boolean;
   externalSubscriptionId: string | null;
+  paymentProvider: string | null;
+  providerDashboardUrl: string | null;
   createdAt: string;
 }
 
@@ -337,7 +339,7 @@ function SubscriptionsPage() {
       {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4" data-cy={sel('superadmin.subscriptions.container')}>
         {/* MRR Card */}
-        <Card className="border-green-200 bg-green-50/50" data-cy={sel('superadmin.subscriptions.mrr')}>
+        <Card className="border-green-200 bg-green-50/50" data-cy={sel('superadmin.subscriptions.stats.mrr')}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Monthly Recurring Revenue</CardTitle>
             <DollarSign className="h-4 w-4 text-green-600" />
@@ -369,7 +371,7 @@ function SubscriptionsPage() {
         </Card>
 
         {/* Active Subscriptions */}
-        <Card data-cy={sel('superadmin.subscriptions.activeCount')}>
+        <Card data-cy={sel('superadmin.subscriptions.stats.activeCount')}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle>
             <CheckCircle className="h-4 w-4 text-green-600" />
@@ -413,7 +415,7 @@ function SubscriptionsPage() {
 
       {/* Plan Distribution */}
       {data?.planDistribution && data.planDistribution.length > 0 && (
-        <Card data-cy={sel('superadmin.subscriptions.planDistribution')}>
+        <Card data-cy={sel('superadmin.subscriptions.stats.planDistribution')}>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <TrendingUp className="h-5 w-5" />
@@ -590,21 +592,21 @@ function SubscriptionsPage() {
                                 View Team
                               </Link>
                             </Button>
-                            {sub.externalSubscriptionId && (
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                asChild
-                                className="text-muted-foreground"
-                              >
-                                <a
-                                  href={`https://dashboard.stripe.com/test/subscriptions/${sub.externalSubscriptionId}`}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
+                            {sub.providerDashboardUrl && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  asChild
+                                  className="text-muted-foreground"
                                 >
-                                  <ExternalLink className="h-4 w-4" />
-                                </a>
-                              </Button>
+                                  <a
+                                    href={sub.providerDashboardUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    <ExternalLink className="h-4 w-4" />
+                                  </a>
+                                </Button>
                             )}
                           </div>
                         </TableCell>
@@ -626,6 +628,7 @@ function SubscriptionsPage() {
                 limit={data.pagination.limit}
                 onPageChange={setPage}
                 onLimitChange={handleLimitChange}
+                context="subscriptions"
               />
             </div>
           )}

package/dist/templates/app/superadmin/teams/[teamId]/page.tsx

@@ -88,6 +88,9 @@ interface Subscription {
   cancelAtPeriodEnd: boolean;
   externalSubscriptionId: string | null;
   externalCustomerId: string | null;
+  paymentProvider: string | null;
+  providerName: string | null;
+  providerDashboardUrl: string | null;
   createdAt: string;
 }
 
@@ -494,21 +497,21 @@ function TeamDetailPage() {
                     </div>
                   </>
                 )}
-                {teamData.subscription.externalSubscriptionId && (
-                  <>
-                    <h4 className="text-sm font-medium text-muted-foreground mb-2">
-                      Stripe
-                    </h4>
-                    <a
-                      href={`https://dashboard.stripe.com/subscriptions/${teamData.subscription.externalSubscriptionId}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
-                    >
-                      View in Stripe
-                      <ExternalLink className="h-3 w-3" />
-                    </a>
-                  </>
+                {teamData.subscription.providerDashboardUrl && (
+                    <>
+                      <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                        {teamData.subscription.providerName || 'Payment Provider'}
+                      </h4>
+                      <a
+                        href={teamData.subscription.providerDashboardUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                      >
+                        View in {teamData.subscription.providerName || 'Dashboard'}
+                        <ExternalLink className="h-3 w-3" />
+                      </a>
+                    </>
                 )}
               </div>
             </div>

package/dist/templates/app/superadmin/teams/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import {
   Card,
@@ -27,43 +26,8 @@ import {
   SearchInput,
   PaginationControls,
 } from "@nextsparkjs/core/components/superadmin/filters";
-import { sel } from "@nextsparkjs/core/lib/test";
-
-interface TeamOwner {
-  id: string;
-  name: string;
-  email: string;
-}
-
-interface Team {
-  id: string;
-  name: string;
-  owner: TeamOwner;
-  memberCount: number;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface TeamsData {
-  teams: Team[];
-  counts: {
-    total: number;
-    user: number;
-    system: number;
-  };
-  pagination: {
-    page: number;
-    limit: number;
-    total: number;
-    totalPages: number;
-    hasMore: boolean;
-  };
-  metadata: {
-    requestedBy: string;
-    requestedAt: string;
-    source: string;
-  };
-}
+import { sel } from "@nextsparkjs/core/selectors";
+import { useAdminTeams } from "@nextsparkjs/core/hooks/teams";
 
 /**
  * Teams Management Page
@@ -77,16 +41,6 @@ function TeamsPage() {
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(20);
 
-  // Build query params
-  const getQueryParams = () => {
-    const params = new URLSearchParams();
-    if (searchQuery) params.set("search", searchQuery);
-    params.set("type", activeTab);
-    params.set("page", String(page));
-    params.set("limit", String(limit));
-    return params.toString();
-  };
-
   // Handle tab change - reset page
   const handleTabChange = (tab: string) => {
     setActiveTab(tab as "user" | "system");
@@ -105,25 +59,22 @@ function TeamsPage() {
     setPage(1);
   };
 
-  // Fetch teams data from API
-  const { data: teamsData, isLoading, error, refetch } = useQuery<TeamsData>({
-    queryKey: ["superadmin-teams", activeTab, searchQuery, page, limit],
-    queryFn: async () => {
-      const queryString = getQueryParams();
-      const url = `/api/superadmin/teams${queryString ? `?${queryString}` : ""}`;
-      const response = await fetch(url);
-      if (!response.ok) {
-        throw new Error("Failed to fetch teams data");
-      }
-      return response.json();
-    },
-    retry: 2,
-    staleTime: 30000,
+  // Fetch teams data using the shared hook
+  const {
+    teams: filteredTeams,
+    counts,
+    pagination,
+    metadata,
+    isLoading,
+    error,
+    refetch,
+  } = useAdminTeams({
+    search: searchQuery || undefined,
+    type: activeTab,
+    page,
+    limit,
   });
 
-  // Filter teams by active tab
-  const filteredTeams = teamsData?.teams || [];
-
   // Loading state
   if (isLoading) {
     return (
@@ -225,7 +176,7 @@ function TeamsPage() {
             <Users2 className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{teamsData?.counts.total || 0}</div>
+            <div className="text-2xl font-bold">{counts?.total || 0}</div>
             <p className="text-xs text-muted-foreground">All registered teams</p>
           </CardContent>
         </Card>
@@ -238,7 +189,7 @@ function TeamsPage() {
           onChange={handleSearchChange}
           placeholder="Search teams by name or owner email..."
           className="w-full max-w-sm"
-          data-cy={sel('superadmin.teams.search')}
+          data-cy={sel('superadmin.teams.filters.search')}
         />
         {searchQuery && (
           <Button
@@ -248,7 +199,7 @@ function TeamsPage() {
               setSearchQuery("");
               setPage(1);
             }}
-            data-cy="clear-search-btn"
+            data-cy={sel('superadmin.teams.filters.clearButton')}
           >
             Clear
           </Button>
@@ -264,11 +215,11 @@ function TeamsPage() {
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="user" className="flex items-center gap-2">
             <Users className="h-4 w-4" />
-            User Teams ({teamsData?.counts.user || 0})
+            User Teams ({counts?.user || 0})
           </TabsTrigger>
           <TabsTrigger value="system" className="flex items-center gap-2">
             <Shield className="h-4 w-4" />
-            System Admin ({teamsData?.counts.system || 0})
+            System Admin ({counts?.system || 0})
           </TabsTrigger>
         </TabsList>
 
@@ -285,14 +236,15 @@ function TeamsPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <TeamsTable teams={filteredTeams} isLoading={isLoading} />
-              {teamsData?.pagination && (
+              {pagination && (
                 <PaginationControls
-                  page={teamsData.pagination.page}
-                  totalPages={teamsData.pagination.totalPages}
-                  total={teamsData.pagination.total}
-                  limit={teamsData.pagination.limit}
+                  page={pagination.page}
+                  totalPages={pagination.totalPages}
+                  total={pagination.total}
+                  limit={pagination.limit}
                   onPageChange={setPage}
                   onLimitChange={handleLimitChange}
+                  context="teams"
                 />
               )}
             </CardContent>
@@ -312,14 +264,15 @@ function TeamsPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <TeamsTable teams={filteredTeams} isLoading={isLoading} />
-              {teamsData?.pagination && (
+              {pagination && (
                 <PaginationControls
-                  page={teamsData.pagination.page}
-                  totalPages={teamsData.pagination.totalPages}
-                  total={teamsData.pagination.total}
-                  limit={teamsData.pagination.limit}
+                  page={pagination.page}
+                  totalPages={pagination.totalPages}
+                  total={pagination.total}
+                  limit={pagination.limit}
                   onPageChange={setPage}
                   onLimitChange={handleLimitChange}
+                  context="teams"
                 />
               )}
             </CardContent>
@@ -328,16 +281,16 @@ function TeamsPage() {
       </Tabs>
 
       {/* Metadata Footer */}
-      {teamsData?.metadata && (
+      {metadata && (
         <Card className="bg-muted/30">
           <CardContent className="pt-4">
             <div className="text-xs text-muted-foreground space-y-1">
               <p>
                 Last updated:{" "}
-                {new Date(teamsData.metadata.requestedAt).toLocaleString()}
+                {new Date(metadata.requestedAt).toLocaleString()}
               </p>
-              <p>Requested by: {teamsData.metadata.requestedBy}</p>
-              <p>Source: {teamsData.metadata.source}</p>
+              <p>Requested by: {metadata.requestedBy}</p>
+              <p>Source: {metadata.source}</p>
             </div>
           </CardContent>
         </Card>

package/dist/templates/app/superadmin/users/page.tsx

@@ -37,7 +37,7 @@ import {
   PaginationControls,
   FilterDropdown,
 } from "@nextsparkjs/core/components/superadmin/filters";
-import { sel } from "@nextsparkjs/core/lib/test";
+import { sel } from "@nextsparkjs/core/selectors";
 
 interface UsersData {
   regularUsers: User[];
@@ -386,7 +386,7 @@ function UsersPage() {
           onChange={handleSearchChange}
           placeholder="Search by name or email..."
           className="w-full max-w-sm"
-          data-cy={sel('superadmin.users.search')}
+          data-cy={sel('superadmin.users.filters.search')}
         />
 
         {activeTab === "users" && (
@@ -463,6 +463,7 @@ function UsersPage() {
                   limit={usersData.pagination.limit}
                   onPageChange={setPage}
                   onLimitChange={handleLimitChange}
+                  context="users"
                 />
               )}
             </CardContent>
@@ -496,6 +497,7 @@ function UsersPage() {
                     limit={usersData.pagination.limit}
                     onPageChange={setPage}
                     onLimitChange={handleLimitChange}
+                    context="users"
                   />
                 </div>
               )}

package/dist/templates/blocks/README.md

@@ -0,0 +1,80 @@
+# Block Presets
+
+Ready-to-use page builder blocks that can be copied directly into any theme.
+
+## Available Blocks
+
+| Block | Category | Description |
+|-------|----------|-------------|
+| `hero` | hero | Full-width hero section with title, subtitle, CTA button, and background image |
+| `cta-section` | cta | Call-to-action section with title, description, and action buttons |
+| `features-grid` | content | Grid layout displaying multiple features with icons, titles, and descriptions |
+| `testimonials` | testimonials | Display customer testimonials with quotes, authors, and avatars |
+| `text-content` | content | Rich text content block for paragraphs, lists, and formatted text |
+
+## Usage
+
+### 1. Copy Block to Theme
+
+Copy the entire block folder to your theme's blocks directory:
+
+```bash
+# Copy a single block
+cp -r core/templates/blocks/hero contents/themes/YOUR_THEME/blocks/
+
+# Copy multiple blocks
+cp -r core/templates/blocks/cta-section contents/themes/YOUR_THEME/blocks/
+cp -r core/templates/blocks/features-grid contents/themes/YOUR_THEME/blocks/
+```
+
+### 2. Rebuild Registry
+
+After copying blocks, rebuild the registry:
+
+```bash
+node core/scripts/build/registry.mjs
+```
+
+### 3. Rebuild Theme (for thumbnails)
+
+The theme build process automatically copies block thumbnails:
+
+```bash
+node core/scripts/build/theme.mjs
+```
+
+Or if using dev server, thumbnails are copied automatically.
+
+## Block Structure
+
+Each block follows the standard 6-file structure:
+
+```
+block-name/
+├── config.ts       # Metadata: slug, name, description, category, icon
+├── schema.ts       # Zod validation schema (extends baseBlockSchema)
+├── fields.ts       # Field definitions for the editor UI
+├── component.tsx   # React component
+├── index.ts        # Re-exports all modules
+└── thumbnail.png   # Preview image for block picker
+```
+
+## Customization
+
+After copying a block, you can customize it:
+
+1. **Change metadata**: Edit `config.ts` (name, description, icon)
+2. **Add/remove fields**: Modify `schema.ts` and `fields.ts`
+3. **Update UI**: Modify `component.tsx`
+4. **Update thumbnail**: Replace `thumbnail.png` with actual preview image
+
+## Creating New Blocks
+
+For creating new blocks from scratch, use the `block-developer` agent or follow the patterns in these presets.
+
+## Notes
+
+- Blocks extend `baseBlockSchema` for consistent base fields (title, content, cta, backgroundColor, className, id)
+- Use `buildSectionClasses()` helper for consistent styling
+- Include `data-cy` attributes for testing
+- Thumbnails should be PNG images (current placeholders need to be replaced)

package/dist/templates/blocks/cta-section/component.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Button } from '@/core/components/ui/button'
+import { buildSectionClasses } from '@/core/types/blocks'
+import type { CTASectionBlockProps } from './schema'
+
+/**
+ * CTA Section Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta (primary), secondaryButton
+ * - Design: backgroundColor
+ * - Advanced: className, id
+ */
+export function CTASectionBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // CTA-specific content
+  secondaryButton,
+  // Base design props
+  backgroundColor,
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: CTASectionBlockProps & {
+  buttonText?: string
+  buttonLink?: string
+  primaryButton?: { text: string; link: string; variant?: string }
+  description?: string
+}) {
+  // Handle legacy format (buttonText/buttonLink or primaryButton)
+  const primaryCta = cta || (legacyProps.primaryButton ? {
+    text: legacyProps.primaryButton.text,
+    link: legacyProps.primaryButton.link,
+    target: '_self' as const,
+  } : legacyProps.buttonText ? {
+    text: legacyProps.buttonText,
+    link: legacyProps.buttonLink || '#',
+    target: '_self' as const,
+  } : undefined)
+
+  // Handle legacy description prop
+  const displayContent = content || (legacyProps as { description?: string }).description
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 @md:py-24',
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy="block-cta-section">
+      <div className="container mx-auto max-w-4xl text-center">
+        {title && (
+          <h2 className="mb-4 text-4xl font-bold @md:text-5xl">{title}</h2>
+        )}
+
+        {displayContent && (
+          <p className="mb-8 text-lg @md:text-xl opacity-90">{displayContent}</p>
+        )}
+
+        {(primaryCta || secondaryButton) && (
+          <div className="flex flex-col gap-4 @sm:flex-row @sm:justify-center">
+            {primaryCta && (
+              <Button asChild size="lg">
+                <a
+                  href={primaryCta.link}
+                  target={primaryCta.target}
+                  rel={primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {primaryCta.text}
+                </a>
+              </Button>
+            )}
+
+            {secondaryButton && (
+              <Button
+                asChild
+                size="lg"
+                variant={secondaryButton.variant || 'outline'}
+              >
+                <a
+                  href={secondaryButton.link}
+                  target={secondaryButton.target}
+                  rel={secondaryButton.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {secondaryButton.text}
+                </a>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/dist/templates/blocks/features-grid/component.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import * as Icons from 'lucide-react'
+import { cn } from '@/core/lib/utils'
+import { buildSectionClasses } from '@/core/types/blocks'
+import type { FeaturesGridBlockProps, FeatureItem } from './schema'
+
+/**
+ * Features Grid Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta, items
+ * - Design: backgroundColor, columns
+ * - Advanced: className, id
+ */
+export function FeaturesGridBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Features-specific content
+  items,
+  // Base design props
+  backgroundColor,
+  // Features-specific design
+  columns = '3',
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: FeaturesGridBlockProps & { features?: FeatureItem[]; description?: string }) {
+  // Handle legacy 'features' prop for backward compatibility
+  const safeItems = Array.isArray(items)
+    ? items
+    : Array.isArray((legacyProps as { features?: FeatureItem[] }).features)
+      ? (legacyProps as { features: FeatureItem[] }).features
+      : []
+
+  // Handle legacy description prop
+  const displayContent = content || (legacyProps as { description?: string }).description
+
+  // Build column classes based on columns prop
+  const columnClasses: Record<string, string> = {
+    '2': '@sm:grid-cols-2',
+    '3': '@sm:grid-cols-2 @lg:grid-cols-3',
+    '4': '@sm:grid-cols-2 @lg:grid-cols-4',
+  }
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 @md:py-24',
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy="block-features-grid">
+      <div className="container mx-auto max-w-6xl">
+        {/* Section Header */}
+        {(title || displayContent) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {displayContent && (
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                {displayContent}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Features Grid */}
+        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['3'])}>
+          {safeItems.map((item, index) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const IconComponent = (Icons as any)[item.icon] || Icons.Circle
+
+            return (
+              <div
+                key={index}
+                className="flex flex-col items-center text-center p-6 rounded-lg border bg-card"
+              >
+                <div className="mb-4 rounded-full bg-primary/10 p-4">
+                  <IconComponent className="h-8 w-8 text-primary" />
+                </div>
+                <h3 className="mb-2 text-xl font-semibold">{item.title}</h3>
+                <p className="text-muted-foreground">{item.description}</p>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className="mt-12 text-center">
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}