@rovela-ai/sdk 0.19.4 → 0.19.5

package/templates/store-template/app/account/profile/page.tsx

@@ -0,0 +1,434 @@
+'use client'
+
+/**
+ * Customer Profile Page
+ *
+ * Admin identity cannot reach this page: `useAuth()` role-filters the
+ * session (returns null for admin JWTs) and `AuthGuard` redirects anything
+ * that's not a signed-in customer to `/auth/signin`.
+ */
+
+import { useState, useEffect } from 'react'
+import { LocaleLink as Link } from '@rovela-ai/sdk/core'
+import { ChevronLeft, User, Mail, Phone, Lock, Check, AlertCircle } from 'lucide-react'
+import { useSession } from 'next-auth/react'
+import { AuthGuard, useAuth } from '@rovela-ai/sdk/auth'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+import { useT } from '@rovela-ai/sdk/core'
+
+interface Profile {
+  id: string
+  email: string
+  name: string | null
+  phone: string | null
+  emailVerified: boolean
+  createdAt: string
+}
+
+function ProfileContent() {
+  const t = useT()
+  const { update: updateSession } = useSession()
+  const { customer } = useAuth()
+  const { formatDate } = useStoreSettings()
+
+  // Profile state
+  const [profile, setProfile] = useState<Profile | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Edit profile form state
+  const [isEditingProfile, setIsEditingProfile] = useState(false)
+  const [editName, setEditName] = useState('')
+  const [editEmail, setEditEmail] = useState('')
+  const [editPhone, setEditPhone] = useState('')
+  const [profileSaving, setProfileSaving] = useState(false)
+  const [profileError, setProfileError] = useState('')
+  const [profileSuccess, setProfileSuccess] = useState('')
+
+  // Change password form state
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [passwordSaving, setPasswordSaving] = useState(false)
+  const [passwordError, setPasswordError] = useState('')
+  const [passwordSuccess, setPasswordSuccess] = useState('')
+
+  // Fetch profile on mount
+  useEffect(() => {
+    async function fetchProfile() {
+      try {
+        const res = await fetch('/api/account/profile')
+        if (res.ok) {
+          const data = await res.json()
+          setProfile(data.profile)
+          setEditName(data.profile.name || '')
+          setEditEmail(data.profile.email)
+          setEditPhone(data.profile.phone || '')
+        }
+      } catch (error) {
+        console.error('Failed to fetch profile:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchProfile()
+  }, [])
+
+  // Handle profile update
+  const handleProfileSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setProfileError('')
+    setProfileSuccess('')
+    setProfileSaving(true)
+
+    try {
+      const res = await fetch('/api/account/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editName.trim() || null,
+          email: editEmail.trim(),
+          phone: editPhone.trim() || null,
+        }),
+      })
+
+      const data = await res.json()
+
+      if (!res.ok) {
+        setProfileError(data.error || t('account.profileUpdateFailed'))
+        return
+      }
+
+      setProfile(data.profile)
+      setProfileSuccess(t('account.profileUpdated'))
+      setIsEditingProfile(false)
+
+      // Update session if name changed
+      if (data.profile.name !== customer?.name) {
+        await updateSession({ name: data.profile.name })
+      }
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setProfileSuccess(''), 3000)
+    } catch (error) {
+      setProfileError(t('account.genericError'))
+    } finally {
+      setProfileSaving(false)
+    }
+  }
+
+  // Handle password change
+  const handlePasswordSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setPasswordError('')
+    setPasswordSuccess('')
+
+    // Validate passwords match
+    if (newPassword !== confirmPassword) {
+      setPasswordError(t('auth.passwordsNoMatch'))
+      return
+    }
+
+    // Validate password length
+    if (newPassword.length < 8) {
+      setPasswordError(t('auth.password8'))
+      return
+    }
+
+    setPasswordSaving(true)
+
+    try {
+      const res = await fetch('/api/account/change-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          currentPassword,
+          newPassword,
+        }),
+      })
+
+      const data = await res.json()
+
+      if (!res.ok) {
+        setPasswordError(data.error || t('account.passwordChangeFailed'))
+        return
+      }
+
+      setPasswordSuccess(t('account.passwordChanged'))
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setPasswordSuccess(''), 3000)
+    } catch (error) {
+      setPasswordError(t('account.genericError'))
+    } finally {
+      setPasswordSaving(false)
+    }
+  }
+
+  // Cancel editing
+  const handleCancelEdit = () => {
+    setIsEditingProfile(false)
+    setEditName(profile?.name || '')
+    setEditEmail(profile?.email || '')
+    setEditPhone(profile?.phone || '')
+    setProfileError('')
+  }
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-pulse space-y-6">
+          <div className="h-8 w-32 bg-muted rounded" />
+          <div className="h-64 bg-muted rounded" />
+          <div className="h-64 bg-muted rounded" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-2xl">
+      {/* Back Navigation */}
+      <nav className="mb-8">
+        <Link
+          href="/account"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronLeft className="h-4 w-4 mr-1" />
+          {t('account.backToAccount')}
+        </Link>
+      </nav>
+
+      <h1 className="text-3xl font-bold font-heading mb-8">{t('account.myProfile')}</h1>
+
+      {/* Profile Info Section */}
+      <section className="rounded-lg border bg-card p-6 mb-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-semibold flex items-center gap-2">
+            <User className="h-5 w-5" />
+            {t('account.profileInformation')}
+          </h2>
+          {!isEditingProfile && (
+            <button
+              onClick={() => setIsEditingProfile(true)}
+              className="text-sm text-primary hover:underline"
+            >
+              {t('account.edit')}
+            </button>
+          )}
+        </div>
+
+        {/* Success/Error Messages */}
+        {profileSuccess && (
+          <div className="mb-4 p-3 rounded-md bg-green-50 text-green-800 flex items-center gap-2">
+            <Check className="h-4 w-4" />
+            {profileSuccess}
+          </div>
+        )}
+        {profileError && (
+          <div className="mb-4 p-3 rounded-md bg-red-50 text-red-800 flex items-center gap-2">
+            <AlertCircle className="h-4 w-4" />
+            {profileError}
+          </div>
+        )}
+
+        {isEditingProfile ? (
+          <form onSubmit={handleProfileSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium mb-1">
+                {t('account.name')}
+              </label>
+              <input
+                type="text"
+                id="name"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder={t('account.namePlaceholder')}
+                maxLength={100}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium mb-1">
+                {t('account.email')}
+              </label>
+              <input
+                type="email"
+                id="email"
+                value={editEmail}
+                onChange={(e) => setEditEmail(e.target.value)}
+                className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder={t('checkout.emailPlaceholder')}
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium mb-1">
+                {t('account.phone')}
+              </label>
+              <input
+                type="tel"
+                id="phone"
+                value={editPhone}
+                onChange={(e) => setEditPhone(e.target.value)}
+                className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder={t('account.phonePlaceholder')}
+                maxLength={40}
+              />
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                type="submit"
+                disabled={profileSaving}
+                className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
+              >
+                {profileSaving ? t('account.saving') : t('account.saveChanges')}
+              </button>
+              <button
+                type="button"
+                onClick={handleCancelEdit}
+                className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
+              >
+                {t('account.cancel')}
+              </button>
+            </div>
+          </form>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <User className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm text-muted-foreground">{t('account.name')}</p>
+                <p className="font-medium">{profile?.name || t('account.notSet')}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Mail className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm text-muted-foreground">{t('account.email')}</p>
+                <p className="font-medium">{profile?.email}</p>
+                {profile?.emailVerified ? (
+                  <span className="inline-flex items-center text-xs text-green-600 mt-1">
+                    <Check className="h-3 w-3 mr-1" />
+                    {t('account.verified')}
+                  </span>
+                ) : (
+                  <span className="text-xs text-amber-600 mt-1">
+                    {t('account.notVerified')}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Phone className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm text-muted-foreground">{t('account.phone')}</p>
+                <p className="font-medium">{profile?.phone || t('account.notSet')}</p>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t">
+              <p className="text-sm text-muted-foreground">
+                {t('account.memberSince', { date: profile?.createdAt ? formatDate(new Date(profile.createdAt)) : t('account.unknown') })}
+              </p>
+            </div>
+          </div>
+        )}
+      </section>
+
+      {/* Change Password Section */}
+      <section className="rounded-lg border bg-card p-6">
+        <h2 className="text-xl font-semibold flex items-center gap-2 mb-6">
+          <Lock className="h-5 w-5" />
+          {t('account.changePassword')}
+        </h2>
+
+        {/* Success/Error Messages */}
+        {passwordSuccess && (
+          <div className="mb-4 p-3 rounded-md bg-green-50 text-green-800 flex items-center gap-2">
+            <Check className="h-4 w-4" />
+            {passwordSuccess}
+          </div>
+        )}
+        {passwordError && (
+          <div className="mb-4 p-3 rounded-md bg-red-50 text-red-800 flex items-center gap-2">
+            <AlertCircle className="h-4 w-4" />
+            {passwordError}
+          </div>
+        )}
+
+        <form onSubmit={handlePasswordSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="currentPassword" className="block text-sm font-medium mb-1">
+              {t('account.currentPassword')}
+            </label>
+            <input
+              type="password"
+              id="currentPassword"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="newPassword" className="block text-sm font-medium mb-1">
+              {t('account.newPassword')}
+            </label>
+            <input
+              type="password"
+              id="newPassword"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              minLength={8}
+              required
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              {t('account.password8Hint')}
+            </p>
+          </div>
+
+          <div>
+            <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">
+              {t('account.confirmNewPassword')}
+            </label>
+            <input
+              type="password"
+              id="confirmPassword"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              minLength={8}
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={passwordSaving || !currentPassword || !newPassword || !confirmPassword}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
+          >
+            {passwordSaving ? t('account.changing') : t('account.changePassword')}
+          </button>
+        </form>
+      </section>
+    </div>
+  )
+}
+
+export default function ProfilePage() {
+  return (
+    <AuthGuard redirectTo="/auth/signin">
+      <ProfileContent />
+    </AuthGuard>
+  )
+}

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

@@ -0,0 +1,16 @@
+'use client'
+
+/**
+ * Admin Account Page
+ *
+ * Self-service profile + password management for logged-in admins.
+ * Mounts the SDK's AdminAccountPage component inside the dashboard
+ * layout. All validation, invariant enforcement, and error handling
+ * happen at the service + API layer — this page is purely a wrapper.
+ */
+
+import { AdminAccountPage } from '@rovela-ai/sdk/admin'
+
+export default function AdminAccountRoute() {
+  return <AdminAccountPage />
+}

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

@@ -0,0 +1,14 @@
+'use client'
+
+/**
+ * Insights → Events tab. Raw event log browser.
+ *
+ * See CLAUDE.md §46.
+ */
+
+import { EventsView, useAnalyticsPeriod } from '@rovela-ai/sdk/analytics'
+
+export default function AdminAnalyticsEventsPage() {
+  const { period } = useAnalyticsPeriod()
+  return <EventsView period={period} />
+}

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

@@ -0,0 +1,48 @@
+'use client'
+
+/**
+ * Analytics layout — owns the page header, tab nav and period state shared
+ * across the three tabs (Dashboards, Events, Visitors). Period selection
+ * survives tab nav because Next.js App Router preserves layout instances
+ * across child route changes.
+ *
+ * The AdminPageHeader owns the title (nav and page now both say
+ * "Analytics"); AnalyticsTabNav renders with title={null} so only the tab
+ * strip appears — never a second title (LEDGER page architecture).
+ *
+ * See CLAUDE.md §46.
+ */
+
+import {
+  AnalyticsPeriodProvider,
+  AnalyticsTabNav,
+  useAnalyticsPeriod,
+} from '@rovela-ai/sdk/analytics'
+import { AdminPageHeader, PeriodSelector } from '@rovela-ai/sdk/admin'
+
+export default function AnalyticsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <AnalyticsPeriodProvider>
+      <div className="space-y-6">
+        <AnalyticsHeader />
+        <AnalyticsTabNav baseHref="/admin/analytics" title={null} />
+        {children}
+      </div>
+    </AnalyticsPeriodProvider>
+  )
+}
+
+function AnalyticsHeader() {
+  const { period, setPeriod } = useAnalyticsPeriod()
+  return (
+    <AdminPageHeader
+      title="Analytics"
+      subtitle="Visitors, sessions, and conversion for your storefront."
+      actions={<PeriodSelector value={period} onChange={setPeriod} />}
+    />
+  )
+}

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

@@ -0,0 +1,15 @@
+'use client'
+
+/**
+ * Insights → Dashboards tab. Period flows in via the shared layout's
+ * AnalyticsPeriodProvider so the three tabs stay in sync.
+ *
+ * See CLAUDE.md §46.
+ */
+
+import { DashboardsView, useAnalyticsPeriod } from '@rovela-ai/sdk/analytics'
+
+export default function AdminAnalyticsDashboardsPage() {
+  const { period } = useAnalyticsPeriod()
+  return <DashboardsView period={period} />
+}

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

@@ -0,0 +1,14 @@
+'use client'
+
+/**
+ * Insights → Visitors tab. Per-visitor aggregate browser.
+ *
+ * See CLAUDE.md §46.
+ */
+
+import { VisitorsView, useAnalyticsPeriod } from '@rovela-ai/sdk/analytics'
+
+export default function AdminAnalyticsVisitorsPage() {
+  const { period } = useAnalyticsPeriod()
+  return <VisitorsView period={period} />
+}

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

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

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

@@ -0,0 +1,35 @@
+'use client'
+
+/**
+ * Admin New Category Page
+ *
+ * Create a new category using the SDK CategoryForm component.
+ */
+
+import { useRouter } from 'next/navigation'
+import { AdminPageHeader, CategoryForm } from '@rovela-ai/sdk/admin'
+
+export default function NewCategoryPage() {
+  const router = useRouter()
+
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        backHref="/admin/categories"
+        backLabel="Back to categories"
+        eyebrow="Categories"
+        title="Add category"
+        subtitle="Create a collection your customers can browse."
+      />
+
+      <CategoryForm
+        onSuccess={() => {
+          router.push('/admin/categories')
+        }}
+        onCancel={() => {
+          router.push('/admin/categories')
+        }}
+      />
+    </div>
+  )
+}