@rovela-ai/sdk 0.19.4 → 0.19.6

package/templates/store-template/app/admin/(dashboard)/page.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+/**
+ * Admin Dashboard
+ *
+ * Overview of store metrics, charts, and recent activity.
+ *
+ * Metric layout:
+ *   - Primary row: Revenue / Orders / AOV / Refund rate (with period deltas)
+ *   - Secondary row: Best seller / Customers / Active products
+ *   - Time-window selector in the header drives both rows
+ *
+ * Charts (RevenueChart + OrderStatusChart) and Activity (RecentOrders +
+ * LowStockAlert) preserve the existing behavior. RevenueChart now also
+ * scopes to the selected window.
+ */
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Plus } from 'lucide-react'
+import {
+  AdminPageHeader,
+  PrimaryMetricsRow,
+  SecondaryMetricsRow,
+  PeriodSelector,
+  RecentOrders,
+  LowStockAlert,
+  RevenueChart,
+  OrderStatusChart,
+  useAdminStats,
+  useAdminAuth,
+} from '@rovela-ai/sdk/admin'
+import type { DashboardPeriod } from '@rovela-ai/sdk/admin'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function getGreeting(): string {
+  const hour = new Date().getHours()
+  if (hour < 12) return 'Good morning'
+  if (hour < 18) return 'Good afternoon'
+  return 'Good evening'
+}
+
+function getFormattedDate(): string {
+  return new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export default function AdminDashboardPage() {
+  const { admin } = useAdminAuth()
+  const { currency, locale } = useStoreSettings()
+  const [period, setPeriod] = useState<DashboardPeriod>('30d')
+
+  const {
+    stats,
+    summary,
+    revenueByDay,
+    ordersByStatus,
+    isLoading,
+  } = useAdminStats({
+    includeRevenue: true,
+    includeOrderStatus: true,
+    period,
+  })
+
+  const firstName = admin?.name?.split(' ')[0] || 'Admin'
+
+
+  return (
+    <div className="space-y-6">
+      {/* THE page header (AdminPageHeader = LEDGER page architecture):
+          date eyebrow + greeting title + actions, one primary button. */}
+      <AdminPageHeader
+        eyebrow={getFormattedDate()}
+        title={`${getGreeting()}, ${firstName}`}
+        actions={
+          /* View/Edit store moved to the AdminTopBar (2026-07 revamp) — the
+             page keeps only its own concerns: the period and the primary. */
+          <>
+            <PeriodSelector value={period} onChange={setPeriod} />
+            <Link href="/admin/products/new" className="admin-btn admin-btn-primary admin-btn-sm">
+              <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+              Add product
+            </Link>
+          </>
+        }
+      />
+
+      {/* Primary metrics — Revenue / Orders / AOV / Refund rate */}
+      <section>
+        <PrimaryMetricsRow
+          summary={summary}
+          isLoading={isLoading}
+          currency={currency}
+          locale={locale}
+        />
+      </section>
+
+      {/* Secondary — Best seller / Customers / Products */}
+      <section>
+        <SecondaryMetricsRow
+          summary={summary}
+          stats={stats}
+          isLoading={isLoading}
+          currency={currency}
+          locale={locale}
+        />
+      </section>
+
+      {/* Charts Row */}
+      <section className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+        <div className="xl:col-span-2">
+          <RevenueChart
+            data={revenueByDay}
+            isLoading={isLoading}
+            currency={currency}
+          />
+        </div>
+        <div>
+          <OrderStatusChart
+            data={ordersByStatus}
+            isLoading={isLoading}
+          />
+        </div>
+      </section>
+
+      {/* Activity Section */}
+      <section>
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          <RecentOrders period={period} />
+          <LowStockAlert />
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/store-template/app/admin/(dashboard)/payments/page.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+/**
+ * Admin Payments Page
+ *
+ * Stripe connection, manual payment methods and currency. The
+ * PaymentSettings component renders the page header itself (LEDGER page
+ * architecture): this wrapper stays a bare mount.
+ */
+
+import { PaymentSettings } from '@rovela-ai/sdk/admin'
+
+export default function AdminPaymentsPage() {
+  return <PaymentSettings />
+}

package/templates/store-template/app/admin/(dashboard)/products/[id]/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+/**
+ * Admin Edit Product Page
+ *
+ * Edit an existing product using the SDK ProductForm component.
+ * Uses useParams() hook for client-side dynamic route access.
+ */
+
+import { useParams, useRouter } from 'next/navigation'
+import { AdminPageHeader, ProductForm } from '@rovela-ai/sdk/admin'
+
+export default function EditProductPage() {
+  const params = useParams()
+  const id = params.id as string
+  const router = useRouter()
+
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        backHref="/admin/products"
+        backLabel="Back to products"
+        eyebrow="Products"
+        title="Edit product"
+      />
+
+      <ProductForm
+        productId={id}
+        onSuccess={() => {
+          router.push('/admin/products')
+        }}
+        onCancel={() => {
+          router.push('/admin/products')
+        }}
+      />
+    </div>
+  )
+}

package/templates/store-template/app/admin/(dashboard)/products/new/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+/**
+ * Admin New Product Page
+ *
+ * Create a new product using the SDK ProductForm component.
+ */
+
+import { useRouter } from 'next/navigation'
+import { AdminPageHeader, ProductForm } from '@rovela-ai/sdk/admin'
+
+export default function NewProductPage() {
+  const router = useRouter()
+
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        backHref="/admin/products"
+        backLabel="Back to products"
+        eyebrow="Products"
+        title="Add product"
+        subtitle="Create a new product for your store."
+      />
+
+      <ProductForm
+        onSuccess={() => {
+          router.push('/admin/products')
+        }}
+        onCancel={() => {
+          router.push('/admin/products')
+        }}
+      />
+    </div>
+  )
+}

package/templates/store-template/app/admin/(dashboard)/products/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+/**
+ * Admin Products Page
+ *
+ * Product management with table and actions.
+ * Uses SDK admin ProductTable component.
+ */
+
+import Link from 'next/link'
+import { Plus } from 'lucide-react'
+import { AdminPageHeader, ProductTable } from '@rovela-ai/sdk/admin'
+
+export default function AdminProductsPage() {
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        title="Products"
+        subtitle="Manage your product catalog."
+        actions={
+          <Link href="/admin/products/new" className="admin-btn admin-btn-primary">
+            <Plus className="h-4 w-4" />
+            Add product
+          </Link>
+        }
+      />
+
+      <ProductTable />
+    </div>
+  )
+}

package/templates/store-template/app/admin/(dashboard)/settings/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+/**
+ * Admin Settings Page
+ *
+ * Store settings management with database persistence.
+ * Uses self-contained SDK components:
+ * - StoreSettings: Fetches and saves store configuration
+ * - LogoUpload: Handles logo upload/delete
+ */
+
+import { AdminPageHeader, StoreSettings, LogoUpload, FaviconUpload } from '@rovela-ai/sdk/admin'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+
+export default function AdminSettingsPage() {
+  // Get refetch from global store settings context to update sidebar/header after save
+  const { refetch: refetchGlobalSettings } = useStoreSettings()
+
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        title="Settings"
+        subtitle="Your store's identity, checkout and languages."
+      />
+
+      {/* Two-column layout */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Left Column: Settings Form (2/3) */}
+        <div className="lg:col-span-2">
+          <StoreSettings onSave={() => refetchGlobalSettings()} />
+        </div>
+
+        {/* Right Column: Branding (1/3) */}
+        <div>
+          <div className="admin-card p-6">
+            <h3 className="admin-card-title mb-4">Store branding</h3>
+            <LogoUpload />
+            <div className="mt-6 border-t border-[hsl(var(--admin-border))] pt-6">
+              <FaviconUpload />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/store-template/app/admin/(dashboard)/shipping/page.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+/**
+ * Admin Shipping Page
+ *
+ * Carriers, zones and rates. The ShippingSettings component renders the
+ * page header itself (LEDGER page architecture): this wrapper stays a
+ * bare mount.
+ */
+
+import { ShippingSettings } from '@rovela-ai/sdk/admin'
+
+export default function AdminShippingPage() {
+  return <ShippingSettings />
+}

package/templates/store-template/app/admin/(dashboard)/tax/page.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+/**
+ * Admin Tax Page
+ *
+ * Tax configuration and zone-based rates. The TaxSettings component
+ * renders the page header itself (LEDGER page architecture): this wrapper
+ * stays a bare mount.
+ */
+
+import { TaxSettings } from '@rovela-ai/sdk/admin'
+
+export default function AdminTaxPage() {
+  return <TaxSettings />
+}

package/templates/store-template/app/admin/(dashboard)/users/[id]/page.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+/**
+ * Admin User Detail Page
+ *
+ * Minimal detail view for a single admin. Shows their core info (name,
+ * email, role, status, created/last-login dates) and a "Back to users"
+ * link. Phase 4 may extend this with activity history and audit info.
+ *
+ * For Phase 2 we keep it deliberately bare: the table at /admin/users is
+ * the main interaction surface and handles all lifecycle actions directly.
+ */
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import { AdminPageHeader, useAdminUsers, type AdminListItem } from '@rovela-ai/sdk/admin'
+
+export default function AdminUserDetailPage() {
+  const params = useParams<{ id: string }>()
+  const { getUser } = useAdminUsers()
+  const [user, setUser] = useState<AdminListItem | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!params?.id) return
+    let cancelled = false
+    ;(async () => {
+      const result = await getUser(params.id)
+      if (!cancelled) {
+        setUser(result)
+        setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [params?.id, getUser])
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="admin-skeleton admin-skeleton-lg w-64 rounded" />
+        <div className="admin-skeleton admin-skeleton-md w-96 rounded" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="space-y-4">
+        <h1 className="admin-page-title">Team member not found</h1>
+        <Link href="/admin/users" className="text-sm admin-text-muted hover:underline">
+          ← Back to users
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        backHref="/admin/users"
+        backLabel="Back to team"
+        eyebrow="Team"
+        title={user.name || 'Unnamed admin'}
+        subtitle={user.email}
+      />
+
+      <div className="admin-card p-6">
+        <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
+          <div>
+            <dt className="admin-text-muted">Role</dt>
+            <dd className="font-medium">{user.role}</dd>
+          </div>
+          <div>
+            <dt className="admin-text-muted">Status</dt>
+            <dd className="font-medium">{user.status}</dd>
+          </div>
+          <div>
+            <dt className="admin-text-muted">Created</dt>
+            <dd className="font-medium">
+              {new Date(user.createdAt).toLocaleDateString()}
+            </dd>
+          </div>
+          <div>
+            <dt className="admin-text-muted">Last login</dt>
+            <dd className="font-medium">
+              {user.lastLoginAt
+                ? new Date(user.lastLoginAt).toLocaleDateString()
+                : 'Never'}
+            </dd>
+          </div>
+          {user.deactivatedAt && (
+            <>
+              <div>
+                <dt className="admin-text-muted">Deactivated</dt>
+                <dd className="font-medium">
+                  {new Date(user.deactivatedAt).toLocaleDateString()}
+                </dd>
+              </div>
+              <div>
+                <dt className="admin-text-muted">Deactivated by</dt>
+                <dd className="font-medium">
+                  {user.deactivatedBy || 'Unknown'}
+                </dd>
+              </div>
+            </>
+          )}
+        </dl>
+      </div>
+    </div>
+  )
+}

package/templates/store-template/app/admin/(dashboard)/users/page.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+/**
+ * Admin Team Page (route: /admin/users)
+ *
+ * The UsersTable renders the page header itself (title, subtitle and the
+ * Invite CTA) — LEDGER page architecture: this wrapper stays a bare mount
+ * so the title and primary action exist exactly once. All permission
+ * checks, invariants, and error handling happen at the service + API layer.
+ */
+
+import { UsersTable } from '@rovela-ai/sdk/admin'
+
+export default function AdminUsersPage() {
+  return <UsersTable pageSize={20} />
+}

package/templates/store-template/app/admin/accept-invite/page.tsx

@@ -0,0 +1,36 @@
+/**
+ * Admin Accept Invite Page
+ *
+ * Public page (outside the dashboard route group). The SDK's
+ * AdminAcceptInviteForm renders its own AdminAuthShell (brand tile +
+ * store name + card + theme CSS), so this page is a bare mount.
+ *
+ * The form reads the `?token=X` query param via `useSearchParams`, so
+ * Next.js App Router requires a <Suspense> boundary here. The fallback
+ * reuses the shell so the suspense moment and the form's own validating
+ * state look identical.
+ */
+
+import { Suspense } from 'react'
+import {
+  AdminAuthShell,
+  AdminAcceptInviteForm,
+} from '@rovela-ai/sdk/admin/components'
+
+function LoadingFallback() {
+  return (
+    <AdminAuthShell>
+      <div className="flex items-center justify-center py-8">
+        <span className="admin-spinner admin-spinner-lg" />
+      </div>
+    </AdminAuthShell>
+  )
+}
+
+export default function AdminAcceptInvitePage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <AdminAcceptInviteForm />
+    </Suspense>
+  )
+}

package/templates/store-template/app/admin/forgot-password/page.tsx

@@ -0,0 +1,13 @@
+/**
+ * Admin Forgot Password Page
+ *
+ * Public page (outside the dashboard route group). The SDK's
+ * AdminForgotPasswordForm renders its own AdminAuthShell (brand tile +
+ * store name + card + theme CSS), so this page is a bare mount.
+ */
+
+import { AdminForgotPasswordForm } from '@rovela-ai/sdk/admin/components'
+
+export default function AdminForgotPasswordPage() {
+  return <AdminForgotPasswordForm />
+}

package/templates/store-template/app/admin/layout.tsx

@@ -0,0 +1,47 @@
+import { Plus_Jakarta_Sans } from 'next/font/google'
+import type { Viewport } from 'next'
+
+/**
+ * Admin segment layout — loads Plus Jakarta Sans via next/font and exposes it
+ * as `--admin-font-jakarta`, which admin-theme.css consumes through
+ * `--admin-font-sans`. This replaced a render-blocking Google Fonts @import
+ * inside the CSS (2026-07 admin redesign): next/font self-hosts the files,
+ * eliminates the extra origin round-trip, and covers EVERY /admin route
+ * (dashboard group + the auth pages) from one place.
+ *
+ * `display: contents` keeps the wrapper structurally invisible — it exists
+ * only to scope the font variable.
+ */
+const jakarta = Plus_Jakarta_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--admin-font-jakarta',
+  display: 'swap',
+})
+
+// Explicit viewport contract for the responsive admin (2026-07 mobile pass).
+// Next.js would inject the same default, but the admin's mobile chrome now
+// depends on it, so it is stated rather than assumed.
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+}
+
+// The admin is per-request and session-gated — never static. Declaring it
+// (same pattern as the auth/ and account/ segments) stops the build from
+// attempting to prerender ~21 admin pages, which threw Next's intentional
+// DYNAMIC_SERVER_USAGE bailout through requireAdmin's catch and printed a
+// scary-but-benign "Failed to read session" block per page in build logs.
+export const dynamic = 'force-dynamic'
+
+export default function AdminSegmentLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className={jakarta.variable} style={{ display: 'contents' }}>
+      {children}
+    </div>
+  )
+}