@woodsportal/hubspot-kit 1.0.41-dev.4 → 1.0.41-dev.6

package/templates/scaffold/auth/_full/src/features/auth/login-session-bridge.ts

@@ -0,0 +1,74 @@
+import { api } from '@/integrations/woodsportal-sdk'
+import {
+  navigateAfterFullAuth,
+  navigateToMfaGate,
+  type AuthNavigationRouter,
+} from '@/features/auth/auth-navigation'
+import { clearMfaPendingState, storeMfaPendingContext } from '@/features/auth/mfa-pending-storage'
+import { resolvePostLoginPath } from '@/features/auth/resolve-post-login-path'
+import { AUTH_SESSION_CHANGED } from '@/features/auth/auth-session-events'
+import { signalSessionChanged, storeMfaPendingAccessToken } from 'woodsportal-client-sdk'
+import {
+  extractLoginEmailFromPayload,
+  setStoredLoginEmail,
+} from '@/features/auth/login-email-storage'
+
+function notifyAuthSessionChanged(): void {
+  if (typeof window === 'undefined') return
+  signalSessionChanged('login')
+  window.dispatchEvent(new CustomEvent(AUTH_SESSION_CHANGED))
+}
+
+type AuthRouter = AuthNavigationRouter
+
+function unwrapLoginPayload(
+  response: { data?: Record<string, unknown>; statusMsg?: string } | Record<string, unknown>,
+): Record<string, unknown> {
+  return (response?.data ?? response ?? {}) as Record<string, unknown>
+}
+
+export type HandleAuthLoginResponseOptions = {
+  clearPreHashQuery?: () => void
+  onSubscriptionType?: (subscriptionType: string) => void
+}
+
+export type HandleAuthLoginResponseResult =
+  | { success: false; reason: 'no_token' }
+  | { success: true; mfaRequired: true }
+  | { success: true; mfaRequired: false }
+
+export async function handleAuthLoginResponse(
+  response: { data?: Record<string, unknown>; statusMsg?: string } | Record<string, unknown>,
+  router: AuthRouter,
+  options: HandleAuthLoginResponseOptions = {},
+): Promise<HandleAuthLoginResponseResult> {
+  const data = unwrapLoginPayload(response)
+  const tokenData = (data.tokenData ?? {}) as { token?: string; expiresIn?: number }
+  const sessionToken = api.auth.session.getAccessToken()
+  const token = tokenData.token ?? sessionToken ?? undefined
+
+  if (!token) {
+    return { success: false, reason: 'no_token' }
+  }
+
+  const loginEmail = extractLoginEmailFromPayload(data)
+  if (loginEmail) {
+    setStoredLoginEmail(loginEmail)
+  }
+
+  if (data.twoFactorRequired === true) {
+    storeMfaPendingContext(data)
+    storeMfaPendingAccessToken('c', token, tokenData.expiresIn)
+    api.auth.session.setAccessToken(token, tokenData.expiresIn)
+    options.clearPreHashQuery?.()
+    notifyAuthSessionChanged()
+    navigateToMfaGate(router)
+    return { success: true, mfaRequired: true }
+  }
+
+  clearMfaPendingState()
+  options.clearPreHashQuery?.()
+  notifyAuthSessionChanged()
+  navigateAfterFullAuth(router, resolvePostLoginPath(router))
+  return { success: true, mfaRequired: false }
+}

package/templates/scaffold/auth/_full/src/features/auth/mfa-otp-utils.ts

@@ -0,0 +1,24 @@
+import type { MfaMethod } from '@/integrations/woodsportal-sdk'
+
+const OTP_DELIVERY_METHODS: MfaMethod[] = ['EMAIL_OTP', 'SMS_OTP']
+
+export const MFA_OTP_RESEND_COOLDOWN_MS = 30_000
+
+export function isOtpDeliveryMethod(method: MfaMethod): boolean {
+  return OTP_DELIVERY_METHODS.includes(method)
+}
+
+export function getResendSecondsLeft(cooldownUntil: number | null): number {
+  if (cooldownUntil == null) {
+    return 0
+  }
+  return Math.max(0, Math.ceil((cooldownUntil - Date.now()) / 1000))
+}
+
+export function normalizeOtpCode(value: string): string {
+  return value.replace(/\D/g, '').slice(0, 6)
+}
+
+export function isValidOtpCode(value: string): boolean {
+  return /^\d{6}$/.test(normalizeOtpCode(value))
+}

package/templates/scaffold/auth/_full/src/features/auth/mfa-pending-storage.ts

@@ -0,0 +1,108 @@
+import type { MfaMethod, MfaMethodOption } from '@/integrations/woodsportal-sdk'
+import { clearMfaPendingAccessToken, WP_STORAGE_KEYS } from 'woodsportal-client-sdk'
+
+const MFA_METHODS_KEY = WP_STORAGE_KEYS.c.mfa.methods
+const MFA_DEFAULT_METHOD_KEY = WP_STORAGE_KEYS.c.mfa.default
+const MFA_OTP_DELIVERY_KEY = WP_STORAGE_KEYS.c.mfa.otp
+const MFA_OTP_MASKED_KEY = WP_STORAGE_KEYS.c.mfa.otp
+const MFA_SCOPE_KEY = WP_STORAGE_KEYS.c.mfa.scope
+const MFA_PORTAL_ID_KEY = WP_STORAGE_KEYS.c.mfa.portalId
+const MFA_PORTAL_NAME_KEY = WP_STORAGE_KEYS.c.mfa.portalName
+const MFA_PORTAL_URL_KEY = WP_STORAGE_KEYS.c.mfa.portalUrl
+
+export type MfaPendingContext = {
+  methods: Array<MfaMethodOption>
+  defaultMethod: MfaMethod
+  otpDelivery?: string
+  otpDestination?: string
+  scopeKey?: string
+  portalId?: number
+  portalName?: string
+  portalUrl?: string
+}
+
+function readOptionalString(payload: Record<string, unknown>, key: string): string | undefined {
+  const value = payload[key]
+  if (value == null || value === '') {
+    return undefined
+  }
+  return String(value)
+}
+
+function readOptionalNumber(payload: Record<string, unknown>, key: string): number | undefined {
+  const value = payload[key]
+  if (value == null || value === '') {
+    return undefined
+  }
+  const parsed = Number(value)
+  return Number.isNaN(parsed) ? undefined : parsed
+}
+
+export function storeMfaPendingContext(payload: Record<string, unknown>): void {
+  sessionStorage.setItem(MFA_METHODS_KEY, JSON.stringify(payload.mfaMethods ?? []))
+  sessionStorage.setItem(MFA_DEFAULT_METHOD_KEY, String(payload.defaultMethod ?? 'EMAIL_OTP'))
+  const otpDestination =
+    typeof payload.otpDestination === 'string'
+      ? payload.otpDestination
+      : typeof payload.otpDestinationMasked === 'string'
+        ? payload.otpDestinationMasked
+        : undefined
+  if (payload.otpDelivery != null) {
+    sessionStorage.setItem(MFA_OTP_DELIVERY_KEY, String(payload.otpDelivery))
+  }
+  if (otpDestination != null) {
+    sessionStorage.setItem(MFA_OTP_MASKED_KEY, otpDestination)
+  }
+  const portalId = readOptionalNumber(payload, 'portalId')
+  if (readOptionalString(payload, 'scopeKey')) {
+    sessionStorage.setItem(MFA_SCOPE_KEY, readOptionalString(payload, 'scopeKey')!)
+  }
+  if (portalId != null) {
+    sessionStorage.setItem(MFA_PORTAL_ID_KEY, String(portalId))
+  }
+  if (readOptionalString(payload, 'portalName')) {
+    sessionStorage.setItem(MFA_PORTAL_NAME_KEY, readOptionalString(payload, 'portalName')!)
+  }
+  if (readOptionalString(payload, 'portalUrl')) {
+    sessionStorage.setItem(MFA_PORTAL_URL_KEY, readOptionalString(payload, 'portalUrl')!)
+  }
+}
+
+export function getMfaPendingContext(): MfaPendingContext | null {
+  const methodsRaw = sessionStorage.getItem(MFA_METHODS_KEY)
+  if (!methodsRaw) {
+    return null
+  }
+  let methods: Array<MfaMethodOption> = []
+  try {
+    methods = JSON.parse(methodsRaw) as Array<MfaMethodOption>
+  } catch {
+    methods = []
+  }
+  const defaultMethod = (sessionStorage.getItem(MFA_DEFAULT_METHOD_KEY) ?? 'EMAIL_OTP') as MfaMethod
+  const portalIdRaw = sessionStorage.getItem(MFA_PORTAL_ID_KEY)
+  const portalId =
+    portalIdRaw != null && portalIdRaw !== '' ? Number(portalIdRaw) : undefined
+  return {
+    methods,
+    defaultMethod,
+    otpDelivery: sessionStorage.getItem(MFA_OTP_DELIVERY_KEY) ?? undefined,
+    otpDestination: sessionStorage.getItem(MFA_OTP_MASKED_KEY) ?? undefined,
+    scopeKey: sessionStorage.getItem(MFA_SCOPE_KEY) ?? undefined,
+    portalId: portalId != null && !Number.isNaN(portalId) ? portalId : undefined,
+    portalName: sessionStorage.getItem(MFA_PORTAL_NAME_KEY) ?? undefined,
+    portalUrl: sessionStorage.getItem(MFA_PORTAL_URL_KEY) ?? undefined,
+  }
+}
+
+export function clearMfaPendingState(): void {
+  sessionStorage.removeItem(MFA_METHODS_KEY)
+  sessionStorage.removeItem(MFA_DEFAULT_METHOD_KEY)
+  sessionStorage.removeItem(MFA_OTP_DELIVERY_KEY)
+  sessionStorage.removeItem(MFA_OTP_MASKED_KEY)
+  sessionStorage.removeItem(MFA_SCOPE_KEY)
+  sessionStorage.removeItem(MFA_PORTAL_ID_KEY)
+  sessionStorage.removeItem(MFA_PORTAL_NAME_KEY)
+  sessionStorage.removeItem(MFA_PORTAL_URL_KEY)
+  clearMfaPendingAccessToken('c')
+}

package/templates/scaffold/auth/_full/src/features/auth/mfa-portal.ts

@@ -0,0 +1,45 @@
+import { env } from '@/env'
+import { getMfaPendingContext } from '@/features/auth/mfa-pending-storage'
+
+export type MfaPortalContext = {
+  portalId?: number
+  portalName?: string
+  portalUrl?: string
+  scopeKey?: string
+}
+
+function parsePortalId(value: unknown): number | undefined {
+  if (value == null || value === '') {
+    return undefined
+  }
+  const parsed = Number(value)
+  return Number.isNaN(parsed) ? undefined : parsed
+}
+
+export function resolveMfaPortalContext(): MfaPortalContext {
+  const pending = getMfaPendingContext()
+  if (pending?.portalId != null) {
+    return {
+      portalId: pending.portalId,
+      portalName: pending.portalName,
+      portalUrl: pending.portalUrl,
+      scopeKey: pending.scopeKey,
+    }
+  }
+  if (env.VITE_DEV_PORTAL_ID != null && env.VITE_DEV_PORTAL_ID !== '') {
+    return { portalId: parsePortalId(env.VITE_DEV_PORTAL_ID) }
+  }
+  const hubPortalId =
+    typeof window !== 'undefined'
+      ? (window as Window & { hubSpotData?: { portalId?: unknown } }).hubSpotData?.portalId
+      : undefined
+  const parsed = parsePortalId(hubPortalId)
+  if (parsed != null) {
+    return { portalId: parsed }
+  }
+  return {}
+}
+
+export function resolveMfaPortalId(): number | undefined {
+  return resolveMfaPortalContext().portalId
+}

package/templates/scaffold/auth/_full/src/features/auth/use-mfa-login-otp-flow.ts

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import type { MfaMethod } from '@/integrations/woodsportal-sdk'
+import { api } from '@/integrations/woodsportal-sdk'
+import { getMfaPendingContext } from '@/features/auth/mfa-pending-storage'
+import {
+  getResendSecondsLeft,
+  isValidOtpCode,
+  MFA_OTP_RESEND_COOLDOWN_MS,
+  normalizeOtpCode,
+} from '@/features/auth/mfa-otp-utils'
+import { resolveMfaPortalId } from '@/features/auth/mfa-portal'
+
+export function useMfaLoginOtpFlow() {
+  const pending = getMfaPendingContext()
+  const [method, setMethod] = useState<MfaMethod>(pending?.defaultMethod ?? 'EMAIL_OTP')
+  const [otp, setOtp] = useState('')
+  const [isSending, setIsSending] = useState(false)
+  const [isVerifying, setIsVerifying] = useState(false)
+  const [cooldownUntil, setCooldownUntil] = useState<number | null>(null)
+
+  const resendSecondsLeft = getResendSecondsLeft(cooldownUntil)
+
+  const sendOtp = useCallback(async () => {
+    if (resendSecondsLeft > 0) {
+      return
+    }
+    setIsSending(true)
+    try {
+      const portalId = resolveMfaPortalId()
+      const { sendOtp: send } = api.auth.mfa.sendOtp()
+      await send({ method, portalId })
+      setCooldownUntil(Date.now() + MFA_OTP_RESEND_COOLDOWN_MS)
+      toast.success('Verification code sent')
+    } catch {
+      toast.error('Could not send verification code')
+    } finally {
+      setIsSending(false)
+    }
+  }, [method, resendSecondsLeft])
+
+  useEffect(() => {
+    void sendOtp()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- auto-send once on MFA gate mount
+  }, [])
+
+  const verifyOtp = async () => {
+    const code = normalizeOtpCode(otp)
+    if (!isValidOtpCode(code)) {
+      toast.error('Enter the 6-digit code')
+      return null
+    }
+    setIsVerifying(true)
+    try {
+      const portalId = resolveMfaPortalId()
+      const { verifyOtp: verify } = api.auth.mfa.verifyOtp()
+      return await verify({ method, otp: code, portalId })
+    } catch {
+      toast.error('Invalid or expired code')
+      return null
+    } finally {
+      setIsVerifying(false)
+    }
+  }
+
+  return {
+    method,
+    setMethod,
+    otp,
+    setOtp,
+    destination: pending?.otpDestination,
+    isSending,
+    isVerifying,
+    resendSecondsLeft,
+    sendOtp,
+    verifyOtp,
+  }
+}

package/templates/scaffold/auth/_full/src/routeTree.gen.ts

@@ -0,0 +1,182 @@
+/* eslint-disable */
+// @ts-nocheck
+// TanStack Router generated route tree (starter + SSO + MFA tier).
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as UnauthorizedRouteImport } from './routes/unauthorized'
+import { Route as GuideRouteImport } from './routes/guide'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as AuthLoginRouteImport } from './routes/_auth/login'
+import { Route as AuthLoginSsoRouteImport } from './routes/_auth/login/sso'
+import { Route as AuthTwoFaRouteImport } from './routes/_auth/two-fa'
+import { Route as AppPortalRouteImport } from './routes/_app/portal'
+
+const UnauthorizedRoute = UnauthorizedRouteImport.update({
+  id: '/unauthorized',
+  path: '/unauthorized',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const GuideRoute = GuideRouteImport.update({
+  id: '/guide',
+  path: '/guide',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginRoute = AuthLoginRouteImport.update({
+  id: '/_auth/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginSsoRoute = AuthLoginSsoRouteImport.update({
+  id: '/_auth/login/sso',
+  path: '/sso',
+  getParentRoute: () => AuthLoginRoute,
+} as any)
+
+const AuthTwoFaRoute = AuthTwoFaRouteImport.update({
+  id: '/_auth/two-fa',
+  path: '/two-fa',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AppPortalRoute = AppPortalRouteImport.update({
+  id: '/_app/portal',
+  path: '/portal',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginRouteWithChildren = AuthLoginRoute._addFileChildren({
+  AuthLoginSsoRoute,
+})
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRouteWithChildren
+  '/login/sso': typeof AuthLoginSsoRoute
+  '/two-fa': typeof AuthTwoFaRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRouteWithChildren
+  '/login/sso': typeof AuthLoginSsoRoute
+  '/two-fa': typeof AuthTwoFaRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/_auth/login': typeof AuthLoginRouteWithChildren
+  '/_auth/login/sso': typeof AuthLoginSsoRoute
+  '/_auth/two-fa': typeof AuthTwoFaRoute
+  '/_app/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/guide' | '/login' | '/login/sso' | '/two-fa' | '/portal' | '/unauthorized'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/guide' | '/login' | '/login/sso' | '/two-fa' | '/portal' | '/unauthorized'
+  id:
+    | '__root__'
+    | '/'
+    | '/guide'
+    | '/_auth/login'
+    | '/_auth/login/sso'
+    | '/_auth/two-fa'
+    | '/_app/portal'
+    | '/unauthorized'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  GuideRoute: typeof GuideRoute
+  AuthLoginRoute: typeof AuthLoginRouteWithChildren
+  AuthTwoFaRoute: typeof AuthTwoFaRoute
+  AppPortalRoute: typeof AppPortalRoute
+  UnauthorizedRoute: typeof UnauthorizedRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/unauthorized': {
+      id: '/unauthorized'
+      path: '/unauthorized'
+      fullPath: '/unauthorized'
+      preLoaderRoute: typeof UnauthorizedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/guide': {
+      id: '/guide'
+      path: '/guide'
+      fullPath: '/guide'
+      preLoaderRoute: typeof GuideRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/_auth/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof AuthLoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login/sso': {
+      id: '/_auth/login/sso'
+      path: '/sso'
+      fullPath: '/login/sso'
+      preLoaderRoute: typeof AuthLoginSsoRouteImport
+      parentRoute: typeof AuthLoginRouteImport
+    }
+    '/two-fa': {
+      id: '/_auth/two-fa'
+      path: '/two-fa'
+      fullPath: '/two-fa'
+      preLoaderRoute: typeof AuthTwoFaRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/portal': {
+      id: '/_app/portal'
+      path: '/portal'
+      fullPath: '/portal'
+      preLoaderRoute: typeof AppPortalRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute,
+  GuideRoute,
+  AuthLoginRoute: AuthLoginRouteWithChildren,
+  AuthTwoFaRoute,
+  AppPortalRoute,
+  UnauthorizedRoute,
+}
+
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/scaffold/auth/_full/src/routes/_auth/two-fa.tsx

@@ -0,0 +1,91 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/Button'
+import { Form, FormField } from '@/components/ui/Form'
+import { Input } from '@/components/ui/Input'
+import Loader from '@/components/ui/loader/loader'
+import { handleAuthLoginResponse } from '@/features/auth/login-session-bridge'
+import { useMfaLoginOtpFlow } from '@/features/auth/use-mfa-login-otp-flow'
+import { clearMfaPendingLoginSession } from '@/features/auth/auth-session'
+import { Routes } from '@/config/routes'
+
+function TwoFaPage() {
+  const router = useRouter()
+  const {
+    otp,
+    setOtp,
+    destination,
+    isSending,
+    isVerifying,
+    resendSecondsLeft,
+    sendOtp,
+    verifyOtp,
+  } = useMfaLoginOtpFlow()
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    const response = await verifyOtp()
+    if (!response) {
+      return
+    }
+    const result = await handleAuthLoginResponse(response, router)
+    if (result.success && !result.mfaRequired) {
+      toast.success('Signed in')
+    }
+  }
+
+  if (isSending && !destination) {
+    return <Loader text="Sending verification code…" />
+  }
+
+  return (
+    <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <h1 className="mb-2 text-xl font-semibold text-gray-900">Two-factor authentication</h1>
+      <p className="mb-6 text-sm text-gray-600">
+        Enter the code sent to {destination ?? 'your registered contact'}.
+      </p>
+      <Form onSubmit={onSubmit}>
+        <FormField label="Verification code">
+          <Input
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={otp}
+            onChange={(e) => setOtp(e.target.value)}
+            placeholder="000000"
+          />
+        </FormField>
+        <Button type="submit" className="w-full" disabled={isVerifying}>
+          {isVerifying ? 'Verifying…' : 'Verify'}
+        </Button>
+      </Form>
+      <div className="mt-4 flex items-center justify-between text-sm">
+        <button
+          type="button"
+          className="text-orange-600 disabled:text-gray-400"
+          disabled={resendSecondsLeft > 0 || isSending}
+          onClick={() => void sendOtp()}
+        >
+          {resendSecondsLeft > 0 ? `Resend in ${resendSecondsLeft}s` : 'Resend code'}
+        </button>
+        <button
+          type="button"
+          className="text-gray-600"
+          onClick={() => {
+            clearMfaPendingLoginSession()
+            router.navigate({ to: Routes.login })
+          }}
+        >
+          Back to login
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/_auth/two-fa')({
+  component: TwoFaPage,
+  beforeLoad: () => ({
+    layout: 'AuthLayout' as const,
+    requiresAuth: false,
+  }),
+})

package/templates/scaffold/auth/_nav-sidebar/src/components/Layouts/MainLayout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+import { PortalSidebar } from '@/components/layout/portal-sidebar'
+
+export default function MainLayout({ children }: { children?: ReactNode }) {
+  return <PortalSidebar>{children}</PortalSidebar>
+}

package/templates/scaffold/auth/_nav-sidebar/src/components/layout/portal-sidebar-nav.tsx

@@ -0,0 +1,33 @@
+import { Link } from '@/components/ui/link'
+import { portalNavItems } from '@/config/portal-nav'
+
+type PortalSidebarNavProps = {
+  collapsed?: boolean
+  onNavigate?: () => void
+}
+
+export function PortalSidebarNav({ collapsed = false, onNavigate }: PortalSidebarNavProps) {
+  return (
+    <nav className="flex flex-col gap-1 px-2 py-3">
+      {portalNavItems.map((item) => (
+        <Link
+          key={item.to}
+          to={item.to}
+          onClick={onNavigate}
+          title={collapsed ? item.label : undefined}
+          className={`rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 ${
+            collapsed ? 'text-center' : ''
+          }`}
+          activeProps={{
+            className: `rounded-md bg-orange-50 px-3 py-2 text-sm font-medium text-orange-700 ${
+              collapsed ? 'text-center' : ''
+            }`,
+          }}
+          activeOptions={{ exact: true }}
+        >
+          {collapsed ? item.label.charAt(0) : item.label}
+        </Link>
+      ))}
+    </nav>
+  )
+}