@spree/seller-dashboard 1.0.0-beta.1

package/src/pages/forgot-password.tsx

@@ -0,0 +1,100 @@
+import { Button, Field, FieldError, FieldGroup, FieldLabel, Input } from '@spree/dashboard-ui'
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+
+interface ForgotValues {
+  email: string
+}
+
+/**
+ * Asking for a reset link.
+ *
+ * Its own surface rather than the dashboard's: the link has to open the seller
+ * panel, and a seller sent to the staff dashboard would land on a form that
+ * resets them into an admin session they cannot use.
+ */
+export function ForgotPasswordPage() {
+  const { t } = useTranslation()
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const form = useForm<ForgotValues>({ defaultValues: { email: '' } })
+
+  async function onSubmit(values: ForgotValues) {
+    setError(null)
+    try {
+      await sellerClient().auth.requestPasswordReset({
+        email: values.email,
+        // Where this panel serves its reset page. The server honours it only
+        // if the origin is one the marketplace has vouched for, and resolves
+        // the panel origin itself otherwise.
+        redirect_url: `${window.location.origin}/reset-password`,
+      })
+      // Confirmed either way — the API never reveals whether the address
+      // matched, and neither may this page.
+      setSent(true)
+    } catch {
+      setError(t('forgot_password.failed'))
+    }
+  }
+
+  const { errors, isSubmitting } = form.formState
+
+  if (sent) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-6">
+        <div className="w-full max-w-sm">
+          <h1 className="font-medium text-xl">{t('forgot_password.sent_title')}</h1>
+          <p className="mt-1 mb-6 text-muted-foreground text-sm">
+            {t('forgot_password.sent_subtitle')}
+          </p>
+          <Link to="/login" className="text-sm underline underline-offset-4">
+            {t('forgot_password.back_to_login')}
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-6">
+      <div className="w-full max-w-sm">
+        <h1 className="font-medium text-xl">{t('forgot_password.title')}</h1>
+        <p className="mt-1 mb-6 text-muted-foreground text-sm">{t('forgot_password.subtitle')}</p>
+
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            {error && (
+              <p className="text-destructive text-sm" role="alert">
+                {error}
+              </p>
+            )}
+
+            <Field>
+              <FieldLabel htmlFor="email">{t('forgot_password.email')}</FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                autoFocus
+                aria-invalid={!!errors.email || undefined}
+                {...form.register('email', { required: true })}
+              />
+              <FieldError errors={[errors.email]} />
+            </Field>
+
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? t('forgot_password.submitting') : t('forgot_password.submit')}
+            </Button>
+
+            <Link to="/login" className="text-sm underline underline-offset-4">
+              {t('forgot_password.back_to_login')}
+            </Link>
+          </FieldGroup>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/pages/home.tsx

@@ -0,0 +1,132 @@
+import { PageHeader, progressPercentage } from '@spree/dashboard-core'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Progress,
+  StatusBadge,
+} from '@spree/dashboard-ui'
+import { ChevronRightIcon, PackageIcon, UsersIcon } from '@spree/dashboard-ui/icons'
+import { useQuery } from '@tanstack/react-query'
+import { Link, useParams } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+import { CenteredMessage } from '../components/centered-message'
+
+/**
+ * Where a seller lands: how they stand with the marketplace, what is left to
+ * do, and the counts they would otherwise open a page to see.
+ *
+ * The operator's home is an analytics dashboard — a sales chart and top
+ * products. A seller has no analytics endpoint yet (orders are a later
+ * phase), and inventing widgets over data that does not exist would be worse
+ * than a smaller page that is true. This shows what the panel can actually
+ * answer today; the sales card lands with the orders surface.
+ */
+export function HomePage() {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+
+  const { data: profile, isLoading } = useQuery({
+    queryKey: ['seller', sellerId, 'profile'],
+    queryFn: () => sellerClient().profile.get(),
+  })
+
+  const { data: onboarding } = useQuery({
+    queryKey: ['seller', sellerId, 'onboarding'],
+    queryFn: () => sellerClient().onboarding.get(),
+  })
+
+  const { data: team } = useQuery({
+    queryKey: ['seller', sellerId, 'team'],
+    queryFn: () => sellerClient().team.list(),
+  })
+
+  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (!profile) return <CenteredMessage>{t('common.error')}</CenteredMessage>
+
+  const progress = onboarding?.progress
+  const setupDone = !progress || progress.total === 0 || progress.done === progress.total
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t('home.title', { name: profile.name })} subtitle={t('home.subtitle')} />
+
+      {/* Setup leads while it is unfinished — until a seller is approved it is
+          the only thing on this page that matters. It drops away once done
+          rather than sitting at 100% forever. */}
+      {!setupDone && progress && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('home.setup_title')}</CardTitle>
+            <CardDescription>
+              {t('home.setup_description', { done: progress.done, total: progress.total })}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <Progress value={progressPercentage(progress)} />
+            <div>
+              <Button size="sm" asChild>
+                <Link to="/$sellerId/onboarding" params={{ sellerId }}>
+                  {t('home.setup_cta')}
+                  <ChevronRightIcon className="size-4" />
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <StatCard label={t('home.status')}>
+          <StatusBadge status={profile.status} />
+        </StatCard>
+        <StatCard label={t('home.products')} icon={<PackageIcon className="size-4" />}>
+          {profile.products_count}
+        </StatCard>
+        <StatCard label={t('home.team')} icon={<UsersIcon className="size-4" />}>
+          {team?.data?.length ?? '—'}
+        </StatCard>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('home.selling_title')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            {profile.sellable ? t('home.selling_yes') : t('home.selling_no')}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function StatCard({
+  label,
+  icon,
+  children,
+}: {
+  label: string
+  icon?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardDescription className="flex items-center gap-2">
+          {icon}
+          {label}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="font-medium text-2xl">{children}</div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/pages/login.tsx

@@ -0,0 +1,94 @@
+import { useAuth } from '@spree/dashboard-core'
+import { Button, Field, FieldError, FieldGroup, FieldLabel, Input } from '@spree/dashboard-ui'
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+interface LoginValues {
+  email: string
+  password: string
+}
+
+/**
+ * Sign-in for sellers.
+ *
+ * Its own surface rather than the admin login: the two read different
+ * strategy registries against the same user class, so a marketplace can
+ * require SSO for its own staff while sellers still use a password.
+ */
+export function LoginPage() {
+  const { t } = useTranslation()
+  const { login } = useAuth()
+  const [error, setError] = useState<string | null>(null)
+  const form = useForm<LoginValues>({ defaultValues: { email: '', password: '' } })
+
+  async function onSubmit(values: LoginValues) {
+    setError(null)
+    try {
+      await login(values.email, values.password)
+      // Where to go next is the index route's decision — it already knows how
+      // to skip the picker for a seller who runs exactly one seller, and
+      // duplicating that here would leave two rules to keep in step.
+    } catch {
+      // The API refuses a staff member who runs no seller with the same
+      // status as a bad password, so the panel says the same thing: it must
+      // not become a way to discover which accounts exist.
+      setError(t('login.failed'))
+    }
+  }
+
+  const { errors, isSubmitting } = form.formState
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-6">
+      <div className="w-full max-w-sm">
+        <h1 className="font-medium text-xl">{t('login.title')}</h1>
+        <p className="mt-1 mb-6 text-muted-foreground text-sm">{t('login.subtitle')}</p>
+
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            {error && (
+              <p className="text-destructive text-sm" role="alert">
+                {error}
+              </p>
+            )}
+
+            <Field>
+              <FieldLabel htmlFor="email">{t('login.email')}</FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                autoFocus
+                aria-invalid={!!errors.email || undefined}
+                {...form.register('email', { required: true })}
+              />
+              <FieldError errors={[errors.email]} />
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="password">{t('login.password')}</FieldLabel>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                aria-invalid={!!errors.password || undefined}
+                {...form.register('password', { required: true })}
+              />
+              <FieldError errors={[errors.password]} />
+            </Field>
+
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? t('login.submitting') : t('login.submit')}
+            </Button>
+
+            <Link to="/forgot-password" className="text-sm underline underline-offset-4">
+              {t('login.forgot_password')}
+            </Link>
+          </FieldGroup>
+        </form>
+      </div>
+    </div>
+  )
+}