@fayz-ai/saas 0.1.6

package/src/app/routing.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { hashRouterAdapter } from '@fayz-ai/core'
+
+// ---------------------------------------------------------------------------
+// Admin hash router — the same lightweight approach the storefront uses. The
+// admin shell collects routes from the plugin runtime + manifest pages and
+// switches on the current hash path. Deliberately not react-router: an SDK
+// shell shipping a router creates singleton hazards under source-alias dev.
+// ---------------------------------------------------------------------------
+
+const adapter = hashRouterAdapter()
+
+export function normalizeAdminPath(path: string): string {
+  const clean = `/${path}`.replace(/\/+/g, '/')
+  return clean.length > 1 ? clean.replace(/\/+$/, '') : clean
+}
+
+export function navigateTo(to: string): void {
+  adapter.navigate(normalizeAdminPath(to))
+}
+
+export function useAdminPath(): string {
+  const [path, setPath] = React.useState(() => normalizeAdminPath(adapter.getCurrentPath() || '/'))
+  React.useEffect(() => {
+    return adapter.onPathChange((p) => {
+      setPath(normalizeAdminPath(p || '/'))
+      if (typeof window !== 'undefined') window.scrollTo(0, 0)
+    })
+  }, [])
+  return path
+}
+
+/** Match '/courses/:id' against '/courses/abc' → { id: 'abc' }; supports a
+ *  trailing '/*' wildcard (matches the base and any deeper path). */
+export function matchRoute(pattern: string, path: string): Record<string, string> | null {
+  const cleanPath = (path.split('?')[0] ?? '').replace(/\/+$/, '') || '/'
+  if (pattern.endsWith('/*')) {
+    const base = pattern.slice(0, -2)
+    if (cleanPath === base || cleanPath.startsWith(`${base}/`)) return {}
+    return null
+  }
+  const patternParts = pattern.split('/').filter(Boolean)
+  const pathParts = cleanPath.split('/').filter(Boolean)
+  if (patternParts.length !== pathParts.length) return null
+  const params: Record<string, string> = {}
+  for (let i = 0; i < patternParts.length; i++) {
+    const pat = patternParts[i]!
+    const part = pathParts[i]!
+    if (pat.startsWith(':')) params[pat.slice(1)] = decodeURIComponent(part)
+    else if (pat !== part) return null
+  }
+  return params
+}
+
+/** Score a route pattern for specificity so the most specific match wins
+ *  (static segments beat params; longer beats shorter; wildcard loses). */
+export function routeScore(pattern: string): number {
+  const isWildcard = pattern.endsWith('/*')
+  const routePattern = isWildcard ? pattern.slice(0, -2) : pattern
+  const parts = routePattern.split('/').filter(Boolean)
+  let score = parts.length * 10
+  for (const p of parts) if (!p.startsWith(':')) score += 5
+  if (isWildcard) score -= 1
+  return score
+}

package/src/app/scaffold.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react'
+import {
+  registerScaffold,
+  defineApp,
+  getPluginFactory,
+  getComponent,
+} from '@fayz-ai/core'
+import type {
+  AppManifest,
+  PluginManifest,
+  LocaleConfig,
+  PermissionsConfig,
+  BillingConfig as ManifestBillingConfig,
+} from '@fayz-ai/core'
+import { AdminProviders } from './createFayzApp'
+import { AdminShell } from './AdminShell'
+import type { FayzAppConfig, CustomPage } from './config'
+import { createSaasApp, type SaasAppConfig } from '../shell/createSaasApp'
+
+// ---------------------------------------------------------------------------
+// Admin scaffold — renders an admin app from a pure-data AppManifest. Mirrors
+// the storefront scaffold's dual path: defineSaas turns a FayzAppConfig into a
+// manifest (the sugar→data direction), and AdminScaffold turns a manifest back
+// into the provider stack + shell (the data→render direction). Plugins live in
+// the manifest as PluginRefs (id + JSON config) and are resolved to live
+// PluginManifests through the plugin-factory registry, exactly the contract a
+// generated app's plugins.generated.ts populates.
+// ---------------------------------------------------------------------------
+
+function slug(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'app'
+}
+
+const liveConfigOption = '__fayzLiveConfigRef'
+const liveSaasConfigs = new Map<string, FayzAppConfig | SaasAppConfig>()
+
+function hasLegacyShellConfig(config: FayzAppConfig | SaasAppConfig): config is SaasAppConfig {
+  return 'organization' in config || 'settingsTabs' in config || 'bottomNav' in config || 'pluginRuntime' in config
+}
+
+function getAuthRequireAuth(config: FayzAppConfig | SaasAppConfig): boolean {
+  return config.auth?.requireAuth ?? true
+}
+
+function getLiveConfigRef(id: string): string {
+  return `code:${id}`
+}
+
+/** Fayz/Saas config → AppManifest (sugar → data). During the Beauty/Resto
+ * migration, config-authored apps keep a live config ref so renderApp can
+ * preserve code-backed plugins and custom pages while the JSON manifest path
+ * matures. Serialized manifests still resolve through plugin/page registries. */
+export function defineSaas(config: FayzAppConfig | SaasAppConfig): AppManifest {
+  const id = slug(config.name)
+  const configRef = getLiveConfigRef(id)
+  liveSaasConfigs.set(configRef, config)
+  return defineApp({
+    id,
+    name: config.name,
+    backend: config.supabaseUrl
+      ? { provider: 'supabase', url: config.supabaseUrl }
+      : { provider: 'mock' },
+    locale: config.locale as LocaleConfig | undefined,
+    theme: config.theme as Record<string, unknown> | undefined,
+    permissions: config.permissions,
+    billing: config.billing as ManifestBillingConfig | undefined,
+    surfaces: {
+      admin: {
+        scaffold: 'admin',
+        plugins: (config.plugins ?? []).map((p) => ({ id: p.id })),
+        options: {
+          [liveConfigOption]: configRef,
+          layout: config.layout ?? 'sidebar',
+          requireAuth: getAuthRequireAuth(config),
+        },
+      },
+    },
+  })
+}
+
+/** Resolve a manifest's PluginRefs into live PluginManifests via the
+ *  plugin-factory registry. Unknown ids are skipped with a console warning so a
+ *  partial install degrades instead of crashing. */
+function resolvePlugins(manifest: AppManifest, surfaceName: string): PluginManifest[] {
+  const refs = manifest.surfaces[surfaceName]?.plugins ?? []
+  const plugins: PluginManifest[] = []
+  for (const ref of refs) {
+    if (ref.enabled === false) continue
+    const factory = getPluginFactory(ref.id)
+    if (!factory) {
+      // eslint-disable-next-line no-console
+      console.warn(`[@fayz-ai/saas] No plugin factory registered for "${ref.id}". Did plugins.generated.ts run?`)
+      continue
+    }
+    plugins.push(factory(ref.config) as PluginManifest)
+  }
+  return plugins
+}
+
+/** Resolve manifest pages that reference a registered component id into the
+ *  CustomPage shape the shell renders. (entity/blocks pages are handled by the
+ *  plugins that own them; component pages are the app-level escape hatch.) */
+function resolvePages(manifest: AppManifest, surfaceName: string): CustomPage[] {
+  const pages = manifest.surfaces[surfaceName]?.pages ?? []
+  const out: CustomPage[] = []
+  for (const p of pages) {
+    if (!p.component) continue
+    const Component = getComponent(p.component) as React.ComponentType | undefined
+    if (!Component) {
+      // eslint-disable-next-line no-console
+      console.warn(`[@fayz-ai/saas] Manifest page "${p.path}" references unregistered component "${p.component}".`)
+      continue
+    }
+    out.push({ path: p.path, label: p.label, icon: p.icon, section: p.section, component: Component })
+  }
+  return out
+}
+
+/** AppManifest → FayzAppConfig (data → render). */
+function manifestToFayzConfig(manifest: AppManifest, surfaceName: string): FayzAppConfig {
+  const options = (manifest.surfaces[surfaceName]?.options ?? {}) as Record<string, unknown>
+  const liveConfigRef = options[liveConfigOption]
+  const liveConfig = typeof liveConfigRef === 'string' ? liveSaasConfigs.get(liveConfigRef) : undefined
+  if (liveConfig && !hasLegacyShellConfig(liveConfig)) return liveConfig
+
+  return {
+    name: manifest.name,
+    supabaseUrl: manifest.backend?.provider === 'supabase' ? manifest.backend.url : undefined,
+    plugins: resolvePlugins(manifest, surfaceName),
+    pages: resolvePages(manifest, surfaceName),
+    theme: manifest.theme as FayzAppConfig['theme'],
+    layout: (options.layout as FayzAppConfig['layout']) ?? 'sidebar',
+    locale: manifest.locale as LocaleConfig | undefined,
+    permissions: manifest.permissions as PermissionsConfig | undefined,
+    billing: manifest.billing as FayzAppConfig['billing'],
+    auth: { requireAuth: (options.requireAuth as boolean) ?? true },
+  }
+}
+
+export function AdminScaffold({ manifest, surface }: { manifest: AppManifest; surface: string }) {
+  const liveConfigRef = manifest.surfaces[surface]?.options?.[liveConfigOption]
+  const liveConfig = typeof liveConfigRef === 'string' ? liveSaasConfigs.get(liveConfigRef) : undefined
+  const LegacyApp = React.useMemo(() => {
+    if (!liveConfig || !hasLegacyShellConfig(liveConfig)) return null
+    return createSaasApp(liveConfig)
+  }, [liveConfig])
+  const config = React.useMemo(() => manifestToFayzConfig(manifest, surface), [manifest, surface])
+
+  if (LegacyApp) return <LegacyApp />
+
+  return (
+    <AdminProviders config={config}>
+      <AdminShell
+        appName={config.name}
+        logo={config.logo}
+        layout={config.layout}
+        pages={config.pages}
+        requireAuth={config.auth?.requireAuth}
+        loginTagline={config.auth?.loginTagline}
+        loginDescription={config.auth?.loginDescription}
+        loginLogo={config.auth?.loginLogo}
+        loginLayout={config.auth?.loginLayout}
+        showOAuth={config.auth?.showOAuth}
+        oauthProviders={config.auth?.oauthProviders}
+        showSettings
+        showOrgSettings={Boolean(config.org)}
+      />
+    </AdminProviders>
+  )
+}
+AdminScaffold.displayName = 'AdminScaffold'
+
+// Self-register so renderApp(manifest) can resolve the 'admin' scaffold once
+// this package is imported.
+registerScaffold('admin', AdminScaffold, { source: 'sdk', label: 'Admin' })

package/src/archetype-lookup.ts

@@ -0,0 +1,160 @@
+import { getSupabaseClientOptional } from '@fayz-ai/core'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface EntityLookupResult {
+  id: string
+  label: string
+  subtitle?: string
+  group?: string
+  icon?: string
+  price?: number
+  data?: Record<string, unknown>
+}
+
+export type EntityLookupMap = Record<string, EntityLookup>
+
+export interface EntityLookup {
+  search(query: string): Promise<EntityLookupResult[]>
+  getById(id: string): Promise<EntityLookupResult | null>
+  list?(): Promise<EntityLookupResult[]>
+}
+
+export type ArchetypeType = 'person' | 'product' | 'service' | 'location'
+
+// ---------------------------------------------------------------------------
+// Archetype display config
+// ---------------------------------------------------------------------------
+
+const ARCHETYPE_DISPLAY: Record<ArchetypeType, {
+  table: string
+  labelField: string
+  subtitleFields: string[]
+  priceField?: string
+  groupField?: string
+}> = {
+  person: { table: 'persons', labelField: 'name', subtitleFields: ['phone'], groupField: 'kind' },
+  product: { table: 'products', labelField: 'name', subtitleFields: ['sku', 'description'], priceField: 'price' },
+  service: { table: 'services', labelField: 'name', subtitleFields: ['duration_minutes', 'description'], priceField: 'price' },
+  location: { table: 'locations', labelField: 'name', subtitleFields: ['city', 'address'], groupField: 'kind' },
+}
+
+interface ArchetypeLookupConfig {
+  archetype: ArchetypeType
+  kind?: string | string[]
+  kindLabels?: Record<string, string>
+  limit?: number
+  subtitleFields?: string[]
+}
+
+function toResult(
+  row: Record<string, unknown>,
+  display: typeof ARCHETYPE_DISPLAY[ArchetypeType],
+  kindLabels?: Record<string, string>,
+): EntityLookupResult {
+  const label = String(row[display.labelField] ?? row.name ?? '')
+  const subtitleParts = display.subtitleFields
+    .map((f) => row[f])
+    .filter(Boolean)
+    .map((v) => {
+      if (typeof v === 'number') return `${v}min`
+      return String(v)
+    })
+
+  let group: string | undefined
+  if (display.groupField && row[display.groupField]) {
+    const rawGroup = String(row[display.groupField])
+    group = kindLabels?.[rawGroup] ?? rawGroup
+  }
+
+  return {
+    id: String(row.id),
+    label,
+    subtitle: subtitleParts.length > 0 ? subtitleParts.join(' · ') : undefined,
+    group,
+    price: display.priceField ? Number(row[display.priceField]) || undefined : undefined,
+    data: row,
+  }
+}
+
+/**
+ * Create an EntityLookup that queries a saas_core archetype table via Supabase.
+ * Returns empty results if Supabase is not configured.
+ */
+export function createArchetypeLookup(config: ArchetypeLookupConfig): EntityLookup {
+  const baseDisplay = ARCHETYPE_DISPLAY[config.archetype]
+  const display = config.subtitleFields
+    ? { ...baseDisplay, subtitleFields: config.subtitleFields }
+    : baseDisplay
+  const limit = config.limit ?? 20
+  const kinds = config.kind
+    ? Array.isArray(config.kind) ? config.kind : [config.kind]
+    : undefined
+
+  function applyKindFilter(qb: any) {
+    if (kinds && kinds.length === 1) return qb.eq('kind', kinds[0])
+    if (kinds && kinds.length > 1) return qb.in('kind', kinds)
+    return qb
+  }
+
+  return {
+    async search(query: string) {
+      const supabase = getSupabaseClientOptional() as any
+      if (!supabase) return []
+
+      let qb = supabase
+        .schema('saas_core')
+        .from(display.table)
+        .select('*')
+        .eq('is_active', true)
+        .order(display.labelField, { ascending: true })
+        .limit(limit)
+
+      if (query) qb = qb.ilike(display.labelField, `%${query}%`)
+      qb = applyKindFilter(qb)
+
+      const { data } = await qb
+      return (data ?? []).map((row: Record<string, unknown>) =>
+        toResult(row, display, config.kindLabels),
+      )
+    },
+
+    async list() {
+      const supabase = getSupabaseClientOptional() as any
+      if (!supabase) return []
+
+      let qb = supabase
+        .schema('saas_core')
+        .from(display.table)
+        .select('*')
+        .eq('is_active', true)
+        .order(display.labelField, { ascending: true })
+        .limit(limit)
+
+      qb = applyKindFilter(qb)
+
+      const { data } = await qb
+      return (data ?? []).map((row: Record<string, unknown>) =>
+        toResult(row, display, config.kindLabels),
+      )
+    },
+
+    async getById(id: string) {
+      const supabase = getSupabaseClientOptional() as any
+      if (!supabase) return null
+
+      const { data } = await supabase
+        .schema('saas_core')
+        .from(display.table)
+        .select('*')
+        .eq('id', id)
+        .single()
+
+      return data
+        ? toResult(data as Record<string, unknown>, display, config.kindLabels)
+        : null
+    },
+  }
+}

package/src/billing/index.ts

@@ -0,0 +1,7 @@
+export { useBillingStore } from './store'
+export type {
+  BillingStore,
+  BillingState,
+  Subscription,
+  Invoice,
+} from './store'

package/src/billing/store.ts

@@ -0,0 +1,62 @@
+import { create } from 'zustand'
+import type { Plan } from '@fayz-ai/core'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface Subscription {
+  id: string
+  orgId: string
+  planId: string
+  status: 'active' | 'trialing' | 'past_due' | 'canceled' | 'incomplete'
+  currentPeriodStart: string
+  currentPeriodEnd: string
+  cancelAtPeriodEnd?: boolean
+  stripeSubscriptionId?: string
+}
+
+export interface Invoice {
+  id: string
+  orgId: string
+  amount: number
+  currency: string
+  status: 'paid' | 'open' | 'void' | 'uncollectible'
+  pdfUrl?: string
+  createdAt: string
+}
+
+export interface BillingState {
+  subscription: Subscription | null
+  invoices: Invoice[]
+  plans: Plan[]
+  loading: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+
+export interface BillingStore extends BillingState {
+  setSubscription: (subscription: Subscription | null) => void
+  setInvoices: (invoices: Invoice[]) => void
+  setPlans: (plans: Plan[]) => void
+  setLoading: (loading: boolean) => void
+  reset: () => void
+}
+
+const initialState: BillingState = {
+  subscription: null,
+  invoices: [],
+  plans: [],
+  loading: false,
+}
+
+export const useBillingStore = create<BillingStore>((set) => ({
+  ...initialState,
+  setSubscription: (subscription) => set({ subscription }),
+  setInvoices: (invoices) => set({ invoices }),
+  setPlans: (plans) => set({ plans }),
+  setLoading: (loading) => set({ loading }),
+  reset: () => set(initialState),
+}))

package/src/components/shared/PersonLink.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useCallback, useRef } from 'react'
+import { Mail, Phone, ExternalLink, Cake, Calendar } from 'lucide-react'
+import { Popover, PopoverTrigger, PopoverContent } from '@fayz-ai/ui'
+import { createArchetypeLookup } from '../../archetype-lookup'
+import type { EntityLookupResult } from '../../archetype-lookup'
+import { cn } from '@fayz-ai/ui'
+import { resolveEntityHref } from '../../lib/entity-routes'
+
+// Singleton person lookup — shared across all PersonLink instances
+const personLookup = createArchetypeLookup({ archetype: 'person' })
+
+interface PersonLinkProps {
+  /** Person UUID — required for fetching details */
+  personId?: string | null
+  /** Display name (shown as the clickable text) */
+  name: string
+  /** Optional href to navigate to the person's profile */
+  profileHref?: string
+  /** Optional tab to open on the detail page (e.g. "schedule") */
+  tab?: string
+  /** Size variant */
+  size?: 'sm' | 'default'
+  /** Additional className for the trigger */
+  className?: string
+}
+
+function formatAge(dob: string): string | null {
+  try {
+    const birth = new Date(dob)
+    const now = new Date()
+    let age = now.getFullYear() - birth.getFullYear()
+    if (now.getMonth() < birth.getMonth() || (now.getMonth() === birth.getMonth() && now.getDate() < birth.getDate())) age--
+    return `${age}y`
+  } catch { return null }
+}
+
+export function PersonLink({ personId, name, profileHref, tab, size = 'default', className }: PersonLinkProps) {
+  const [person, setPerson] = useState<EntityLookupResult | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [fetched, setFetched] = useState(false)
+  const [open, setOpen] = useState(false)
+  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const fetchPerson = useCallback(() => {
+    if (!fetched && personId) {
+      setLoading(true)
+      personLookup.getById(personId).then((result) => {
+        setPerson(result)
+        setFetched(true)
+        setLoading(false)
+      }).catch(() => {
+        setFetched(true)
+        setLoading(false)
+      })
+    }
+  }, [personId, fetched])
+
+  const handleOpenChange = useCallback((v: boolean) => {
+    setOpen(v)
+    if (v) fetchPerson()
+  }, [fetchPerson])
+
+  function handleMouseEnter() {
+    hoverTimer.current = setTimeout(() => { setOpen(true); fetchPerson() }, 800)
+  }
+
+  function handleMouseLeave() {
+    if (hoverTimer.current) { clearTimeout(hoverTimer.current); hoverTimer.current = null }
+  }
+
+  // If no personId, just render the name as plain text
+  if (!personId) {
+    return <span className={cn(size === 'sm' ? 'text-xs' : 'text-sm', className)}>{name}</span>
+  }
+
+  const data = person?.data as Record<string, unknown> | undefined
+  const email = data?.email as string | undefined
+  const phone = data?.phone as string | undefined
+  const kind = data?.kind as string | undefined ?? person?.group
+  const isActive = data?.is_active as boolean | undefined
+  const dob = data?.date_of_birth as string | undefined
+  const createdAt = data?.created_at as string | undefined
+  const age = dob ? formatAge(dob) : null
+  const initial = name.charAt(0).toUpperCase()
+
+  // Auto-derive profile href from person kind if not explicitly provided
+  const resolvedHref = profileHref ?? (personId ? '#' + resolveEntityHref(personId, 'person', kind ?? undefined, tab) : undefined)
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          onClick={(e) => e.stopPropagation()}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            'font-medium text-foreground underline decoration-dashed decoration-muted-foreground/40 underline-offset-2 hover:decoration-primary hover:text-primary transition-colors truncate text-left',
+            size === 'sm' ? 'text-xs' : 'text-sm',
+            className
+          )}
+        >
+          {name}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="start" sideOffset={6}>
+        {loading ? (
+          <div className="p-4 space-y-3">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-full bg-muted/40 animate-pulse" />
+              <div className="space-y-1.5 flex-1">
+                <div className="h-3.5 w-24 rounded bg-muted/40 animate-pulse" />
+                <div className="h-2.5 w-16 rounded bg-muted/30 animate-pulse" />
+              </div>
+            </div>
+            <div className="space-y-2 pt-1">
+              <div className="h-3 w-36 rounded bg-muted/30 animate-pulse" />
+              <div className="h-3 w-28 rounded bg-muted/30 animate-pulse" />
+            </div>
+          </div>
+        ) : (
+          <div>
+            {/* Header with profile link */}
+            <div className="flex items-start gap-3 p-4 pb-3">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-bold">
+                {initial}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-semibold truncate">{name}</p>
+                <div className="flex items-center gap-1.5 mt-0.5">
+                  {kind && (
+                    <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground capitalize">
+                      {kind}
+                    </span>
+                  )}
+                  {isActive !== undefined && (
+                    <span className={`inline-flex items-center gap-1 text-[10px] ${isActive ? 'text-success' : 'text-muted-foreground/50'}`}>
+                      <span className={`h-1.5 w-1.5 rounded-full ${isActive ? 'bg-success' : 'bg-muted-foreground/30'}`} />
+                      {isActive ? 'Active' : 'Inactive'}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {resolvedHref && (
+                <a
+                  href={resolvedHref}
+                  onClick={(e) => { e.preventDefault(); window.location.hash = resolvedHref.replace(/^#/, '') }}
+                  className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors shrink-0"
+                  title="View profile"
+                >
+                  <ExternalLink className="h-3.5 w-3.5" />
+                </a>
+              )}
+            </div>
+
+            {/* Contact details */}
+            {(email || phone || age) && (
+              <div className="px-4 pb-3 space-y-1.5">
+                {email && (
+                  <a href={`mailto:${email}`} className="flex items-center gap-2 text-xs text-muted-foreground hover:text-primary transition-colors">
+                    <Mail className="h-3 w-3 shrink-0" />
+                    <span className="truncate">{email}</span>
+                  </a>
+                )}
+                {phone && (
+                  <a href={`tel:${phone}`} className="flex items-center gap-2 text-xs text-muted-foreground hover:text-primary transition-colors">
+                    <Phone className="h-3 w-3 shrink-0" />
+                    <span>{phone}</span>
+                  </a>
+                )}
+                {dob && (
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Cake className="h-3 w-3 shrink-0" />
+                    <span>{new Date(dob).toLocaleDateString()}{age ? ` (${age})` : ''}</span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* No details found */}
+            {!person && fetched && (
+              <div className="px-4 pb-3">
+                <p className="text-xs text-muted-foreground">No additional details available</p>
+              </div>
+            )}
+
+            {/* Footer — created at */}
+            {createdAt && (
+              <div className="border-t px-4 py-2 flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
+                <Calendar className="h-2.5 w-2.5" />
+                <span>Added {new Date(createdAt).toLocaleDateString()}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}