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

package/templates/app/dashboard/settings/billing/page.tsx

@@ -1,284 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useState, useCallback, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
-import { Badge } from '@nextsparkjs/core/components/ui/badge'
-import { Separator } from '@nextsparkjs/core/components/ui/separator'
-import {
-  CreditCard,
-  Calendar,
-  AlertCircle,
-  Check,
-  Crown
-} from 'lucide-react'
-import { sel } from '@nextsparkjs/core/selectors'
-import { useTranslations } from 'next-intl'
-import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { useInvoices } from '@nextsparkjs/core/hooks/useInvoices'
-import { InvoicesTable } from '@nextsparkjs/core/components/billing'
-import { usePermission } from '@nextsparkjs/core/lib/permissions/hooks'
-import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
-
-function BillingPage() {
-  const router = useRouter()
-  const canAccessBilling = usePermission('settings.billing' as Permission)
-  const [statusMessage, setStatusMessage] = useState('')
-  const [invoicesLimit, setInvoicesLimit] = useState(3) // Start with 3, load 10 more each time
-  const t = useTranslations('settings')
-
-  // Fetch invoices for current team (must be before early return)
-  const {
-    data: invoicesData,
-    isLoading: invoicesLoading,
-  } = useInvoices({
-    limit: invoicesLimit,
-    offset: 0,
-  })
-
-  const totalInvoices = invoicesData?.info?.total ?? 0
-  const hasMoreInvoices = (invoicesData?.data?.length ?? 0) < totalInvoices
-
-  const handleUpgrade = useCallback(() => {
-    setStatusMessage(t('billing.messages.upgradeRedirect'))
-  }, [t])
-
-  const handleAddPayment = useCallback(() => {
-    setStatusMessage(t('billing.messages.addPaymentForm'))
-  }, [t])
-
-  const handleLoadMoreInvoices = useCallback(() => {
-    setInvoicesLimit(prev => prev + 10)
-  }, [])
-
-  // Redirect if user doesn't have billing permission
-  useEffect(() => {
-    if (canAccessBilling === false) {
-      router.replace('/dashboard/settings')
-    }
-  }, [canAccessBilling, router])
-
-  // Show nothing while checking permissions or redirecting
-  if (!canAccessBilling) {
-    return null
-  }
-
-  return (
-    <>
-      {/* MANDATORY: Screen reader announcements */}
-      <div
-        aria-live="polite"
-        aria-atomic="true"
-        className="sr-only"
-      >
-        {statusMessage}
-      </div>
-
-      <div
-        className="max-w-4xl"
-        data-cy={sel('settings.billing.container')}
-      >
-        <div className="space-y-6">
-          {/* Header */}
-          <header data-cy={sel('settings.billing.header')}>
-            <h1
-              className="text-2xl font-bold"
-              id="billing-heading"
-            >
-              {t('billing.title')}
-            </h1>
-            <p className="text-muted-foreground mt-1">
-              {t('billing.description')}
-            </p>
-          </header>
-
-        {/* Current Plan */}
-        <Card className="mb-8">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="flex items-center gap-2">
-                  <Crown className="h-5 w-5 text-yellow-500" />
-                  {t('billing.currentPlan.title')}
-                </CardTitle>
-                <CardDescription>
-                  {t('billing.currentPlan.description')}
-                </CardDescription>
-              </div>
-              <Badge variant="secondary">{t('billing.currentPlan.free')}</Badge>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-6">
-              <div className="grid gap-4 md:grid-cols-3">
-                <div className="text-center p-4 rounded-lg bg-muted/50">
-                  <div className="text-2xl font-bold text-primary">0 / 100</div>
-                  <div className="text-sm text-muted-foreground">{t('billing.usage.tasks')}</div>
-                </div>
-                <div className="text-center p-4 rounded-lg bg-muted/50">
-                  <div className="text-2xl font-bold text-primary">1 / 1</div>
-                  <div className="text-sm text-muted-foreground">{t('billing.usage.teamMember')}</div>
-                </div>
-                <div className="text-center p-4 rounded-lg bg-muted/50">
-                  <div className="text-2xl font-bold text-primary">0 / 5</div>
-                  <div className="text-sm text-muted-foreground">{t('billing.usage.projects')}</div>
-                </div>
-              </div>
-
-              <Separator />
-
-              <div className="flex justify-between items-center">
-                <div>
-                  <h4 className="font-medium">{t('billing.upgrade.title')}</h4>
-                  <p className="text-sm text-muted-foreground">
-                    {t('billing.upgrade.description')}
-                  </p>
-                </div>
-                  <Link href="/pricing">
-                    <Button
-                      onClick={handleUpgrade}
-                      data-cy={sel('settings.billing.currentPlan.upgradeButton')}
-                    >
-                      {t('billing.upgrade.button')}
-                    </Button>
-                  </Link>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Billing History - Full Width */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Calendar className="h-5 w-5" />
-              {t('billing.billingHistory.title')}
-            </CardTitle>
-            <CardDescription>
-              {t('billing.billingHistory.description')}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <InvoicesTable
-              invoices={invoicesData?.data ?? []}
-              isLoading={invoicesLoading}
-              total={totalInvoices}
-              limit={totalInvoices} // Pass total to disable internal pagination
-              offset={0}
-              onPageChange={() => {}} // No-op, we use load more instead
-            />
-            {hasMoreInvoices && !invoicesLoading && (
-              <div className="flex justify-center mt-4">
-                <Button
-                  variant="outline"
-                  onClick={handleLoadMoreInvoices}
-                  data-cy={sel('settings.billing.invoices.loadMoreButton')}
-                >
-                  {t('billing.invoices.loadMore')}
-                </Button>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Payment Method - Full Width */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <CreditCard className="h-5 w-5" />
-              {t('billing.paymentMethod.title')}
-            </CardTitle>
-            <CardDescription>
-              {t('billing.paymentMethod.description')}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center justify-between gap-4 p-4 rounded-lg bg-muted/50">
-              <div className="flex items-center gap-3">
-                <AlertCircle className="h-5 w-5 text-muted-foreground" />
-                <div>
-                  <p className="text-sm font-medium">{t('billing.paymentMethod.noMethod')}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {t('billing.paymentMethod.addCard')}
-                  </p>
-                </div>
-              </div>
-              <Button
-                variant="outline"
-                onClick={handleAddPayment}
-                data-cy={sel('settings.billing.paymentMethod.addButton')}
-              >
-                <CreditCard className="mr-2 h-4 w-4" aria-hidden="true" />
-                {t('billing.paymentMethod.addButton')}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Plan Features */}
-        <Card className="mt-8">
-          <CardHeader>
-            <CardTitle>{t('billing.features.title')}</CardTitle>
-            <CardDescription>
-              {t('billing.features.description')}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid gap-3 md:grid-cols-2">
-              <div className="flex items-center gap-3">
-                <Check className="h-4 w-4 text-green-500" />
-                <span className="text-sm">{t('billing.features.taskLimit')}</span>
-              </div>
-              <div className="flex items-center gap-3">
-                <Check className="h-4 w-4 text-green-500" />
-                <span className="text-sm">{t('billing.features.teamMember')}</span>
-              </div>
-              <div className="flex items-center gap-3">
-                <Check className="h-4 w-4 text-green-500" />
-                <span className="text-sm">{t('billing.features.projectLimit')}</span>
-              </div>
-              <div className="flex items-center gap-3">
-                <Check className="h-4 w-4 text-green-500" />
-                <span className="text-sm">{t('billing.features.basicSupport')}</span>
-              </div>
-              <div className="flex items-center gap-3">
-                <Check className="h-4 w-4 text-green-500" />
-                <span className="text-sm">{t('billing.features.basicDashboard')}</span>
-              </div>
-              <div className="flex items-center gap-3">
-                <Check className="h-4 w-4 text-green-500" />
-                <span className="text-sm">{t('billing.features.profileManagement')}</span>
-              </div>
-            </div>
-
-            <Separator className="my-6" />
-
-            <div className="flex justify-between items-center">
-              <div>
-                <h4 className="font-medium">{t('billing.upgrade.ready')}</h4>
-                <p className="text-sm text-muted-foreground">
-                  {t('billing.upgrade.explore')}
-                </p>
-              </div>
-              <div className="flex gap-3">
-                <Link href="/pricing">
-                  <Button variant="outline">
-                    {t('billing.upgrade.viewPricing')}
-                  </Button>
-                </Link>
-                <Button>
-                  {t('billing.upgrade.contactSales')}
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-          </Card>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default getTemplateOrDefaultClient('app/dashboard/settings/billing/page.tsx', BillingPage)

package/templates/app/dashboard/settings/invoices/[invoiceNumber]/page.tsx

@@ -1,222 +0,0 @@
-'use client'
-
-import { use, useCallback } from 'react'
-import Link from 'next/link'
-import { Card, CardContent } from '@nextsparkjs/core/components/ui/card'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Separator } from '@nextsparkjs/core/components/ui/separator'
-import { ArrowLeft, Printer, Loader2 } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { useInvoice } from '@nextsparkjs/core/hooks/useInvoice'
-import { useTeam } from '@nextsparkjs/core/hooks/useTeam'
-import { InvoiceStatusBadge } from '@nextsparkjs/core/components/billing/InvoiceStatusBadge'
-
-interface InvoicePageProps {
-  params: Promise<{ invoiceNumber: string }>
-}
-
-function InvoicePage({ params }: InvoicePageProps) {
-  const { invoiceNumber } = use(params)
-  const t = useTranslations('settings.billing')
-  const { team } = useTeam()
-
-  const {
-    data: invoiceData,
-    isLoading,
-    error,
-  } = useInvoice({
-    invoiceNumber: decodeURIComponent(invoiceNumber),
-  })
-
-  const invoice = invoiceData?.data
-
-  const handlePrint = useCallback(() => {
-    window.print()
-  }, [])
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
-    return new Intl.DateTimeFormat('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    }).format(date)
-  }
-
-  const formatCurrency = (amount: number, currency: string) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: currency,
-    }).format(amount)
-  }
-
-  if (isLoading) {
-    return (
-      <div className="max-w-3xl">
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-        </div>
-      </div>
-    )
-  }
-
-  if (error || !invoice) {
-    return (
-      <div className="max-w-3xl">
-        <div className="space-y-6">
-          <Link
-            href="/dashboard/settings/billing"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground print:hidden"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            {t('title')}
-          </Link>
-          <Card>
-            <CardContent className="py-12 text-center">
-              <p className="text-muted-foreground">
-                {t('invoices.empty.title')}
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="max-w-3xl">
-      <div className="space-y-6">
-        {/* Navigation - hidden when printing */}
-        <div className="flex items-center justify-between print:hidden">
-          <Link
-            href="/dashboard/settings/billing"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            {t('title')}
-          </Link>
-          <Button onClick={handlePrint} variant="outline" size="sm">
-            <Printer className="h-4 w-4 mr-2" />
-            {t('invoices.download.tooltip')}
-          </Button>
-        </div>
-
-        {/* Invoice Document */}
-        <Card className="print:shadow-none print:border-0">
-          <CardContent className="p-8 print:p-0">
-            {/* Invoice Header */}
-            <div className="flex justify-between items-start mb-8">
-              <div>
-                <h1 className="text-3xl font-bold text-foreground">
-                  {t('invoices.table.invoiceNumber').replace('#', '')}
-                </h1>
-                <p className="text-2xl font-mono mt-1">{invoice.invoiceNumber}</p>
-              </div>
-              <div className="text-right">
-                <InvoiceStatusBadge status={invoice.status} />
-              </div>
-            </div>
-
-            <Separator className="my-6" />
-
-            {/* Bill To / From */}
-            <div className="grid grid-cols-2 gap-8 mb-8">
-              <div>
-                <h3 className="text-sm font-medium text-muted-foreground mb-2">
-                  Bill To
-                </h3>
-                <p className="font-medium text-lg">{team?.name || 'Team'}</p>
-              </div>
-              <div className="text-right">
-                <h3 className="text-sm font-medium text-muted-foreground mb-2">
-                  Invoice Date
-                </h3>
-                <p className="font-medium">{formatDate(invoice.date)}</p>
-              </div>
-            </div>
-
-            <Separator className="my-6" />
-
-            {/* Invoice Details */}
-            <div className="mb-8">
-              <h3 className="text-sm font-medium text-muted-foreground mb-4">
-                Description
-              </h3>
-              <div className="rounded-lg border">
-                <table className="w-full">
-                  <thead>
-                    <tr className="border-b bg-muted/50">
-                      <th className="text-left p-4 font-medium">Item</th>
-                      <th className="text-right p-4 font-medium">Amount</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td className="p-4">
-                        {invoice.description || 'Monthly subscription'}
-                      </td>
-                      <td className="p-4 text-right font-mono">
-                        {formatCurrency(invoice.amount, invoice.currency)}
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            {/* Total */}
-            <div className="flex justify-end">
-              <div className="w-64">
-                <div className="flex justify-between items-center py-2">
-                  <span className="text-muted-foreground">Subtotal</span>
-                  <span className="font-mono">
-                    {formatCurrency(invoice.amount, invoice.currency)}
-                  </span>
-                </div>
-                <Separator />
-                <div className="flex justify-between items-center py-3">
-                  <span className="text-lg font-medium">Total</span>
-                  <span className="text-xl font-bold font-mono">
-                    {formatCurrency(invoice.amount, invoice.currency)}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Footer - Payment Info */}
-            <Separator className="my-8" />
-            <div className="text-center text-sm text-muted-foreground">
-              <p>Thank you for your business</p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Print Styles */}
-      <style jsx global>{`
-        @media print {
-          body * {
-            visibility: hidden;
-          }
-          .max-w-3xl,
-          .max-w-3xl * {
-            visibility: visible;
-          }
-          .max-w-3xl {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            padding: 20mm;
-          }
-          .print\\:hidden {
-            display: none !important;
-          }
-        }
-      `}</style>
-    </div>
-  )
-}
-
-export default getTemplateOrDefaultClient('app/dashboard/settings/invoices/[invoiceNumber]/page.tsx', InvoicePage)

package/templates/app/dashboard/settings/invoices/loading.tsx

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

package/templates/app/dashboard/settings/invoices/page.tsx

@@ -1,82 +0,0 @@
-'use client'
-
-import { useState, useCallback } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Calendar } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { useInvoices } from '@nextsparkjs/core/hooks/useInvoices'
-import { InvoicesTable } from '@nextsparkjs/core/components/billing'
-
-function InvoicesPage() {
-  const [invoicesLimit, setInvoicesLimit] = useState(10)
-  const t = useTranslations('settings')
-
-  const {
-    data: invoicesData,
-    isLoading: invoicesLoading,
-  } = useInvoices({
-    limit: invoicesLimit,
-    offset: 0,
-  })
-
-  const totalInvoices = invoicesData?.info?.total ?? 0
-  const hasMoreInvoices = (invoicesData?.data?.length ?? 0) < totalInvoices
-
-  const handleLoadMoreInvoices = useCallback(() => {
-    setInvoicesLimit(prev => prev + 10)
-  }, [])
-
-  return (
-    <div className="max-w-4xl">
-      <div className="space-y-6">
-        {/* Header */}
-        <header>
-          <h1 className="text-2xl font-bold" id="invoices-heading">
-            {t('billing.billingHistory.title')}
-          </h1>
-          <p className="text-muted-foreground mt-1">
-            {t('billing.billingHistory.description')}
-          </p>
-        </header>
-
-        {/* Invoices Table */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Calendar className="h-5 w-5" />
-              {t('billing.billingHistory.title')}
-            </CardTitle>
-            <CardDescription>
-              {t('billing.billingHistory.description')}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <InvoicesTable
-              invoices={invoicesData?.data ?? []}
-              isLoading={invoicesLoading}
-              total={totalInvoices}
-              limit={totalInvoices}
-              offset={0}
-              onPageChange={() => {}}
-            />
-            {hasMoreInvoices && !invoicesLoading && (
-              <div className="flex justify-center mt-4">
-                <Button
-                  variant="outline"
-                  onClick={handleLoadMoreInvoices}
-                  data-cy="invoices-load-more"
-                >
-                  {t('billing.invoices.loadMore')}
-                </Button>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
-
-export default getTemplateOrDefaultClient('app/dashboard/settings/invoices/page.tsx', InvoicesPage)