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

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

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

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

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

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

@@ -0,0 +1,82 @@
+'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)