@open-mercato/core 0.4.8-develop-28cee031d6 → 0.4.8-develop-15259be22b

package/src/modules/portal/frontend/[orgSlug]/portal/dashboard/page.tsx

@@ -0,0 +1,158 @@
+"use client"
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { usePortalContext } from '@open-mercato/ui/portal/PortalContext'
+import { PortalPageHeader } from '@open-mercato/ui/portal/components/PortalPageHeader'
+import { PortalCard, PortalCardHeader } from '@open-mercato/ui/portal/components/PortalCard'
+import { PortalEmptyState } from '@open-mercato/ui/portal/components/PortalEmptyState'
+import { usePortalDashboardWidgets } from '@open-mercato/ui/portal/hooks/usePortalDashboardWidgets'
+import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
+import { PortalInjectionSpots } from '@open-mercato/ui/backend/injection/spotIds'
+
+type Props = { params: { orgSlug: string } }
+
+const HIDDEN_WIDGETS_KEY = 'om:portal:dashboard:hidden'
+
+function loadHiddenWidgets(): Set<string> {
+  try {
+    const raw = localStorage.getItem(HIDDEN_WIDGETS_KEY)
+    if (!raw) return new Set()
+    return new Set(JSON.parse(raw))
+  } catch {
+    return new Set()
+  }
+}
+
+function saveHiddenWidgets(hidden: Set<string>) {
+  try {
+    localStorage.setItem(HIDDEN_WIDGETS_KEY, JSON.stringify(Array.from(hidden)))
+  } catch {
+    // best effort
+  }
+}
+
+function WidgetIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <rect width="7" height="9" x="3" y="3" rx="1" /><rect width="7" height="5" x="14" y="3" rx="1" /><rect width="7" height="5" x="14" y="12" rx="1" /><rect width="7" height="9" x="3" y="16" rx="1" />
+    </svg>
+  )
+}
+
+export default function PortalDashboardPage({ params }: Props) {
+  const t = useT()
+  const router = useRouter()
+  const { auth } = usePortalContext()
+  const { user, loading } = auth
+
+  const [editing, setEditing] = useState(false)
+  const [hiddenWidgets, setHiddenWidgets] = useState<Set<string>>(() => loadHiddenWidgets())
+
+  const { widgets: dashboardWidgets, isLoading: widgetsLoading } = usePortalDashboardWidgets('portal:dashboard:sections' as any)
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.replace(`/${params.orgSlug}/portal/login`)
+    }
+  }, [loading, user, router, params.orgSlug])
+
+  const toggleWidget = useCallback((widgetId: string) => {
+    setHiddenWidgets((prev) => {
+      const next = new Set(prev)
+      if (next.has(widgetId)) {
+        next.delete(widgetId)
+      } else {
+        next.add(widgetId)
+      }
+      saveHiddenWidgets(next)
+      return next
+    })
+  }, [])
+
+  const visibleWidgets = useMemo(
+    () => dashboardWidgets.filter((w) => !hiddenWidgets.has(w.metadata.id)),
+    [dashboardWidgets, hiddenWidgets],
+  )
+
+  const injectionContext = useMemo(
+    () => ({ orgSlug: params.orgSlug, user, roles: auth.roles, resolvedFeatures: auth.resolvedFeatures }),
+    [params.orgSlug, user, auth.roles, auth.resolvedFeatures],
+  )
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-20"><Spinner /></div>
+  }
+
+  if (!user) return null
+
+  return (
+    <div className="flex flex-col gap-8">
+      <PortalPageHeader
+        label={t('portal.dashboard.title', 'Dashboard')}
+        title={t('portal.dashboard.welcome', { name: user.displayName })}
+        action={
+          dashboardWidgets.length > 0 ? (
+            <Button
+              type="button"
+              variant={editing ? 'default' : 'outline'}
+              size="sm"
+              className="rounded-lg text-[13px]"
+              onClick={() => setEditing((prev) => !prev)}
+            >
+              {editing ? t('portal.dashboard.done', 'Done') : t('portal.dashboard.customize', 'Customize')}
+            </Button>
+          ) : null
+        }
+      />
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageBefore('dashboard')} context={injectionContext} />
+
+      {editing && dashboardWidgets.length > 0 ? (
+        <PortalCard>
+          <PortalCardHeader
+            label={t('portal.dashboard.customize', 'Customize')}
+            title={t('portal.dashboard.widgets', 'Dashboard Widgets')}
+          />
+          <div className="flex flex-wrap gap-2">
+            {dashboardWidgets.map((widget) => {
+              const isHidden = hiddenWidgets.has(widget.metadata.id)
+              return (
+                <Button key={widget.metadata.id} type="button" variant={isHidden ? 'outline' : 'default'} size="sm" className="rounded-lg text-[13px]" onClick={() => toggleWidget(widget.metadata.id)}>
+                  {widget.metadata.title || widget.metadata.id}
+                </Button>
+              )
+            })}
+          </div>
+        </PortalCard>
+      ) : null}
+
+      {visibleWidgets.length > 0 ? (
+        <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+          {visibleWidgets.map((widget) => {
+            const WidgetComponent = widget.Widget
+            if (!WidgetComponent) return null
+            return (
+              <PortalCard key={widget.metadata.id}>
+                <PortalCardHeader title={widget.metadata.title || widget.metadata.id} />
+                <WidgetComponent context={{ orgSlug: params.orgSlug, user, roles: auth.roles, resolvedFeatures: auth.resolvedFeatures }} />
+              </PortalCard>
+            )
+          })}
+        </div>
+      ) : null}
+
+      {dashboardWidgets.length === 0 && !widgetsLoading ? (
+        <PortalEmptyState
+          icon={<WidgetIcon className="size-5" />}
+          title={t('portal.dashboard.emptyWidgets', 'No dashboard widgets yet')}
+          description="Modules can inject widgets into this dashboard via the portal:dashboard:sections injection spot."
+        />
+      ) : null}
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageAfter('dashboard')} context={injectionContext} />
+    </div>
+  )
+}

package/src/modules/portal/frontend/[orgSlug]/portal/login/page.tsx

@@ -0,0 +1,120 @@
+"use client"
+import { useCallback, useMemo, useState } from 'react'
+import Link from 'next/link'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Notice } from '@open-mercato/ui/primitives/Notice'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { usePortalContext } from '@open-mercato/ui/portal/PortalContext'
+import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
+import { PortalInjectionSpots } from '@open-mercato/ui/backend/injection/spotIds'
+
+type Props = { params: { orgSlug: string } }
+
+export default function PortalLoginPage({ params }: Props) {
+  const t = useT()
+  const orgSlug = params.orgSlug
+  const { tenant } = usePortalContext()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault()
+      setError(null)
+
+      if (!tenant.tenantId) {
+        setError(t('portal.org.invalid', 'Organization not found.'))
+        return
+      }
+
+      setSubmitting(true)
+      try {
+        const result = await apiCall<{ ok: boolean; error?: string }>('/api/customer_accounts/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password, tenantId: tenant.tenantId }),
+        })
+
+        if (result.ok && result.result?.ok) {
+          window.location.assign(`/${orgSlug}/portal/dashboard`)
+          return
+        }
+
+        if (result.status === 423) {
+          setError(t('portal.login.error.locked', 'Account locked. Try again later.'))
+        } else if (result.status === 401) {
+          setError(t('portal.login.error.invalidCredentials', 'Invalid email or password.'))
+        } else {
+          setError(result.result?.error || t('portal.login.error.generic', 'Login failed. Please try again.'))
+        }
+      } catch {
+        setError(t('portal.login.error.generic', 'Login failed. Please try again.'))
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [email, password, tenant.tenantId, orgSlug, t],
+  )
+
+  const injectionContext = useMemo(
+    () => ({ orgSlug }),
+    [orgSlug],
+  )
+
+  if (tenant.loading) {
+    return <div className="flex items-center justify-center py-20"><Spinner /></div>
+  }
+
+  if (tenant.error) {
+    return (
+      <div className="mx-auto w-full max-w-md py-12">
+        <Notice variant="error">{t('portal.org.invalid', 'Organization not found.')}</Notice>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-sm">
+      <div className="mb-8 text-center">
+        <h1 className="text-2xl font-bold tracking-tight">{t('portal.login.title', 'Sign In')}</h1>
+        <p className="mt-1.5 text-sm text-muted-foreground">{t('portal.login.description', 'Enter your credentials to access the portal.')}</p>
+      </div>
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageBefore('login')} context={injectionContext} />
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        {error ? <Notice variant="error">{error}</Notice> : null}
+
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="login-email" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.email', 'Email')}</Label>
+          <Input id="login-email" type="email" autoComplete="email" required placeholder={t('portal.login.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="login-password" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.password', 'Password')}</Label>
+          <Input id="login-password" type="password" autoComplete="current-password" required placeholder={t('portal.login.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
+        </div>
+
+        <Button type="submit" disabled={submitting} className="mt-1 w-full rounded-lg">
+          {submitting ? t('portal.login.submitting', 'Signing in...') : t('portal.login.submit', 'Sign In')}
+        </Button>
+
+        <p className="text-center text-[13px] text-muted-foreground">
+          {t('portal.login.noAccount', "Don't have an account?")}{' '}
+          <Link href={`/${orgSlug}/portal/signup`} className="font-medium text-foreground underline underline-offset-4 hover:opacity-80">
+            {t('portal.login.signupLink', 'Sign up')}
+          </Link>
+        </p>
+      </form>
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageAfter('login')} context={injectionContext} />
+    </div>
+  )
+}

package/src/modules/portal/frontend/[orgSlug]/portal/page.tsx

@@ -0,0 +1,118 @@
+"use client"
+import { useEffect, useMemo } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { Notice } from '@open-mercato/ui/primitives/Notice'
+import { usePortalContext } from '@open-mercato/ui/portal/PortalContext'
+import { PortalFeatureCard } from '@open-mercato/ui/portal/components/PortalFeatureCard'
+import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
+import { PortalInjectionSpots } from '@open-mercato/ui/backend/injection/spotIds'
+
+type Props = { params: { orgSlug: string } }
+
+function ShoppingBagIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><line x1="3" x2="21" y1="6" y2="6" /><path d="M16 10a4 4 0 0 1-8 0" />
+    </svg>
+  )
+}
+
+function UserIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+    </svg>
+  )
+}
+
+function ShieldIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </svg>
+  )
+}
+
+export default function PortalLandingPage({ params }: Props) {
+  const t = useT()
+  const router = useRouter()
+  const orgSlug = params.orgSlug
+  const { auth, tenant } = usePortalContext()
+
+  // Redirect authenticated users to dashboard
+  useEffect(() => {
+    if (!auth.loading && auth.user) {
+      router.replace(`/${orgSlug}/portal/dashboard`)
+    }
+  }, [auth.loading, auth.user, router, orgSlug])
+
+  const injectionContext = useMemo(
+    () => ({ orgSlug }),
+    [orgSlug],
+  )
+
+  if (auth.loading || tenant.loading) {
+    return <div className="flex items-center justify-center py-20"><Spinner /></div>
+  }
+
+  if (tenant.error) {
+    return (
+      <div className="mx-auto w-full max-w-md py-12">
+        <Notice variant="error">{t('portal.org.invalid', 'Organization not found.')}</Notice>
+      </div>
+    )
+  }
+
+  // Authenticated user — redirect is in progress
+  if (auth.user) return null
+
+  return (
+    <>
+      <InjectionSpot spotId={PortalInjectionSpots.pageBefore('home')} context={injectionContext} />
+
+      <section className="flex flex-col items-center gap-5 py-8 text-center sm:py-16">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground/60">
+          {t('portal.nav.home', 'Customer Portal')}
+        </p>
+        <h1 className="max-w-2xl text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
+          {t('portal.landing.hero.title', 'Welcome to your portal')}
+        </h1>
+        <p className="max-w-lg text-base leading-relaxed text-muted-foreground sm:text-lg">
+          {t('portal.landing.hero.description', 'Access your account, manage orders, and stay up to date.')}
+        </p>
+        <div className="mt-2 flex items-center gap-3">
+          <Button asChild size="lg" className="rounded-lg px-6 text-[14px]">
+            <Link href={`/${orgSlug}/portal/login`}>{t('portal.landing.cta.login', 'Sign In')}</Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="rounded-lg px-6 text-[14px]">
+            <Link href={`/${orgSlug}/portal/signup`}>{t('portal.landing.cta.signup', 'Create Account')}</Link>
+          </Button>
+        </div>
+      </section>
+
+      <section className="grid gap-4 sm:grid-cols-3">
+        <PortalFeatureCard
+          icon={<ShoppingBagIcon className="size-5" />}
+          title={t('portal.landing.feature.orders', 'Orders & Invoices')}
+          description={t('portal.landing.feature.orders.description', 'Track your orders, download invoices, and view delivery status in real time.')}
+        />
+        <PortalFeatureCard
+          icon={<UserIcon className="size-5" />}
+          title={t('portal.landing.feature.account', 'Account Management')}
+          description={t('portal.landing.feature.account.description', 'Update your profile, manage team members, and configure your preferences.')}
+        />
+        <PortalFeatureCard
+          icon={<ShieldIcon className="size-5" />}
+          title={t('portal.landing.feature.security', 'Secure Access')}
+          description={t('portal.landing.feature.security.description', 'Role-based permissions, session management, and full audit trail.')}
+        />
+      </section>
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageAfter('home')} context={injectionContext} />
+    </>
+  )
+}

package/src/modules/portal/frontend/[orgSlug]/portal/profile/page.tsx

@@ -0,0 +1,112 @@
+"use client"
+import { useEffect, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { usePortalContext } from '@open-mercato/ui/portal/PortalContext'
+import { PortalPageHeader } from '@open-mercato/ui/portal/components/PortalPageHeader'
+import { PortalCard, PortalCardHeader, PortalStatRow, PortalCardDivider } from '@open-mercato/ui/portal/components/PortalCard'
+import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
+import { PortalInjectionSpots } from '@open-mercato/ui/backend/injection/spotIds'
+
+type Props = { params: { orgSlug: string } }
+
+export default function PortalProfilePage({ params }: Props) {
+  const t = useT()
+  const router = useRouter()
+  const { auth } = usePortalContext()
+  const { user, roles, resolvedFeatures, isPortalAdmin, loading } = auth
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.replace(`/${params.orgSlug}/portal/login`)
+    }
+  }, [loading, user, router, params.orgSlug])
+
+  const injectionContext = useMemo(
+    () => ({ orgSlug: params.orgSlug, user, roles, resolvedFeatures, isPortalAdmin }),
+    [params.orgSlug, user, roles, resolvedFeatures, isPortalAdmin],
+  )
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-20"><Spinner /></div>
+  }
+
+  if (!user) return null
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return t('portal.dashboard.never', 'Never')
+    return new Date(dateString).toLocaleDateString(undefined, {
+      year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      <PortalPageHeader
+        label={t('portal.profile.label', 'Account')}
+        title={t('portal.profile.title', 'Profile')}
+      />
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageBefore('profile')} context={injectionContext} />
+
+      <div className="grid gap-5 md:grid-cols-2">
+        <PortalCard>
+          <PortalCardHeader label={t('portal.dashboard.profile', 'Profile')} title={user.displayName} />
+          <div className="flex flex-col">
+            <PortalStatRow
+              label={t('portal.dashboard.email', 'Email')}
+              value={
+                <span className="flex items-center gap-2">
+                  <span className="truncate">{user.email}</span>
+                  <Badge variant={user.emailVerified ? 'default' : 'outline'} className="shrink-0 text-[10px]">
+                    {user.emailVerified ? t('portal.dashboard.emailVerified', 'Verified') : t('portal.dashboard.emailNotVerified', 'Unverified')}
+                  </Badge>
+                </span>
+              }
+            />
+            <PortalCardDivider />
+            <PortalStatRow label={t('portal.dashboard.lastLogin', 'Last login')} value={formatDate(user.lastLoginAt)} />
+            <PortalCardDivider />
+            <PortalStatRow label={t('portal.dashboard.memberSince', 'Member since')} value={formatDate(user.createdAt)} />
+            {isPortalAdmin ? (
+              <>
+                <PortalCardDivider />
+                <PortalStatRow label={t('portal.dashboard.roles', 'Role')} value={<Badge className="text-[10px]">{t('portal.dashboard.portalAdmin', 'Portal Admin')}</Badge>} />
+              </>
+            ) : null}
+          </div>
+        </PortalCard>
+
+        <PortalCard>
+          <PortalCardHeader label={t('portal.dashboard.roles', 'Roles')} title={`${roles.length} assigned`} />
+          {roles.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {roles.map((role) => (
+                <span key={role.id} className="inline-flex items-center rounded-lg border px-3 py-1.5 text-[12px] font-medium">{role.name}</span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">{t('portal.dashboard.noRoles', 'No roles assigned')}</p>
+          )}
+        </PortalCard>
+
+        <PortalCard className="md:col-span-2">
+          <PortalCardHeader label={t('portal.dashboard.permissions', 'Permissions')} title={`${resolvedFeatures.length} features`} />
+          {resolvedFeatures.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {resolvedFeatures.map((feature) => (
+                <span key={feature} className="inline-flex items-center rounded-md border bg-muted/50 px-2 py-1 font-mono text-[11px] text-muted-foreground">{feature}</span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">{t('portal.dashboard.noPermissions', 'No permissions')}</p>
+          )}
+        </PortalCard>
+      </div>
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageAfter('profile')} context={injectionContext} />
+    </div>
+  )
+}

package/src/modules/portal/frontend/[orgSlug]/portal/signup/page.tsx

@@ -0,0 +1,138 @@
+"use client"
+import { useCallback, useMemo, useState } from 'react'
+import Link from 'next/link'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Notice } from '@open-mercato/ui/primitives/Notice'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { usePortalContext } from '@open-mercato/ui/portal/PortalContext'
+import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
+import { PortalInjectionSpots } from '@open-mercato/ui/backend/injection/spotIds'
+
+type Props = { params: { orgSlug: string } }
+
+export default function PortalSignupPage({ params }: Props) {
+  const t = useT()
+  const orgSlug = params.orgSlug
+  const { tenant } = usePortalContext()
+
+  const [displayName, setDisplayName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault()
+      setError(null)
+
+      if (!tenant.tenantId || !tenant.organizationId) {
+        setError(t('portal.org.invalid', 'Organization not found.'))
+        return
+      }
+
+      setSubmitting(true)
+      try {
+        const result = await apiCall<{ ok: boolean; error?: string }>('/api/customer_accounts/signup', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password, displayName, tenantId: tenant.tenantId, organizationId: tenant.organizationId }),
+        })
+
+        if (result.status === 201 && result.result?.ok) {
+          setSuccess(true)
+          return
+        }
+
+        setError(result.result?.error || t('portal.signup.error.generic', 'Signup failed. Please try again.'))
+      } catch {
+        setError(t('portal.signup.error.generic', 'Signup failed. Please try again.'))
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [displayName, email, password, tenant.tenantId, tenant.organizationId, t],
+  )
+
+  const injectionContext = useMemo(
+    () => ({ orgSlug }),
+    [orgSlug],
+  )
+
+  if (tenant.loading) {
+    return <div className="flex items-center justify-center py-20"><Spinner /></div>
+  }
+
+  if (tenant.error) {
+    return (
+      <div className="mx-auto w-full max-w-md py-12">
+        <Notice variant="error">{t('portal.org.invalid', 'Organization not found.')}</Notice>
+      </div>
+    )
+  }
+
+  if (success) {
+    return (
+      <div className="mx-auto w-full max-w-sm text-center">
+        <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-foreground text-background">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-6">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+        <h1 className="text-2xl font-bold tracking-tight">{t('portal.signup.success.title', 'Account Created')}</h1>
+        <p className="mt-1.5 text-sm text-muted-foreground">{t('portal.signup.success.description', 'Your account has been created. You can now sign in.')}</p>
+        <Button asChild className="mt-6 w-full rounded-lg">
+          <Link href={`/${orgSlug}/portal/login`}>{t('portal.signup.success.loginLink', 'Sign In')}</Link>
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-sm">
+      <div className="mb-8 text-center">
+        <h1 className="text-2xl font-bold tracking-tight">{t('portal.signup.title', 'Create Account')}</h1>
+        <p className="mt-1.5 text-sm text-muted-foreground">{t('portal.signup.description', 'Sign up for a portal account.')}</p>
+      </div>
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageBefore('signup')} context={injectionContext} />
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        {error ? <Notice variant="error">{error}</Notice> : null}
+
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="signup-name" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.displayName', 'Full Name')}</Label>
+          <Input id="signup-name" type="text" autoComplete="name" required placeholder={t('portal.signup.displayName.placeholder', 'Jane Smith')} value={displayName} onChange={(e) => setDisplayName(e.target.value)} disabled={submitting} className="rounded-lg" />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="signup-email" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.email', 'Email')}</Label>
+          <Input id="signup-email" type="email" autoComplete="email" required placeholder={t('portal.signup.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="signup-password" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.password', 'Password')}</Label>
+          <Input id="signup-password" type="password" autoComplete="new-password" required placeholder={t('portal.signup.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
+        </div>
+
+        <Button type="submit" disabled={submitting} className="mt-1 w-full rounded-lg">
+          {submitting ? t('portal.signup.submitting', 'Creating account...') : t('portal.signup.submit', 'Create Account')}
+        </Button>
+
+        <p className="text-center text-[13px] text-muted-foreground">
+          {t('portal.signup.hasAccount', 'Already have an account?')}{' '}
+          <Link href={`/${orgSlug}/portal/login`} className="font-medium text-foreground underline underline-offset-4 hover:opacity-80">
+            {t('portal.signup.loginLink', 'Sign in')}
+          </Link>
+        </p>
+      </form>
+
+      <InjectionSpot spotId={PortalInjectionSpots.pageAfter('signup')} context={injectionContext} />
+    </div>
+  )
+}