@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/src/modules/customers/components/detail/dashboard/ActiveDealWidget.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+import { Users, ArrowUpRight } from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import type { DealSummary } from '../../formConfig'
+import { formatCurrency } from '../utils'
+
+export function ActiveDealWidget({ deals, t }: { deals: DealSummary[]; t: TranslateFn }) {
+  const topDeal = deals.sort((a, b) => {
+    const va = typeof a.valueAmount === 'number' ? a.valueAmount : parseFloat(String(a.valueAmount ?? '0'))
+    const vb = typeof b.valueAmount === 'number' ? b.valueAmount : parseFloat(String(b.valueAmount ?? '0'))
+    return vb - va
+  })[0]
+
+  if (!topDeal) {
+    return (
+      <div className="rounded-lg border bg-card p-5">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Users className="size-4" />
+          {t('customers.companies.dashboard.activeDeal', 'Active deal')}
+        </h3>
+        <p className="mt-3 text-sm text-muted-foreground">{t('customers.companies.dashboard.noDeals', 'No active deals')}</p>
+      </div>
+    )
+  }
+
+  const amount = typeof topDeal.valueAmount === 'number' ? topDeal.valueAmount : parseFloat(String(topDeal.valueAmount ?? '0'))
+
+  return (
+    <div className="rounded-lg border bg-card p-5">
+      <div className="flex items-center justify-between">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Users className="size-4" />
+          {t('customers.companies.dashboard.activeDeal', 'Active deal')}
+        </h3>
+        <ArrowUpRight className="size-4 text-muted-foreground" />
+      </div>
+      <div className="mt-3">
+        <p className="font-semibold text-foreground">{topDeal.title}</p>
+        {topDeal.createdAt && (
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {t('customers.companies.dashboard.created', 'Created')} {new Date(topDeal.createdAt).toLocaleDateString()}
+          </p>
+        )}
+        {topDeal.pipelineStage && (
+          <div className="mt-2">
+            <Badge variant="outline" className="text-xs">{topDeal.pipelineStage}</Badge>
+          </div>
+        )}
+        {Number.isFinite(amount) && amount > 0 && (
+          <p className="mt-2 text-lg font-bold text-foreground">
+            {formatCurrency(amount, topDeal.valueCurrency)}
+            <span className="ml-1.5 text-xs font-normal text-muted-foreground">
+              {t('customers.companies.dashboard.potentialValue', 'potential value')}
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/modules/customers/components/detail/dashboard/OpenTasksWidget.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from 'react'
+import { CheckCircle2, AlertCircle, ArrowUpRight } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import type { TodoLinkSummary } from '../../formConfig'
+
+function isOverdue(dueAt: string | null | undefined): boolean {
+  if (!dueAt) return false
+  return new Date(dueAt) < new Date()
+}
+
+function priorityLabel(priority: number | null | undefined): { label: string; variant: 'destructive' | 'default' | 'secondary' | 'muted' } {
+  if (priority === null || priority === undefined) return { label: 'None', variant: 'muted' }
+  if (priority >= 3) return { label: 'High', variant: 'destructive' }
+  if (priority === 2) return { label: 'Medium', variant: 'default' }
+  return { label: 'Low', variant: 'secondary' }
+}
+
+type TranslateFnWithParams = (key: string, fallback?: string, params?: Record<string, string | number>) => string
+
+export function OpenTasksWidget({
+  tasks,
+  currentUserId,
+  t,
+  onViewAll,
+}: {
+  tasks: TodoLinkSummary[]
+  currentUserId?: string | null
+  t: TranslateFnWithParams
+  onViewAll: () => void
+}) {
+  const [taskFilter, setTaskFilter] = React.useState<'all' | 'mine' | 'overdue'>('all')
+  const overdueTasks = tasks.filter((task) => isOverdue(task.dueAt))
+  const mineTasks = currentUserId
+    ? tasks.filter((task) => {
+        const assignee = (task as Record<string, unknown>).assignedToUserId ?? (task as Record<string, unknown>).createdByUserId
+        return assignee === currentUserId
+      })
+    : tasks
+
+  const filteredTasks = taskFilter === 'overdue'
+    ? overdueTasks
+    : taskFilter === 'mine'
+      ? mineTasks
+      : tasks
+
+  const filterTabs: Array<{ key: 'all' | 'mine' | 'overdue'; label: string; count: number }> = [
+    { key: 'all', label: t('customers.tasks.filters.all', 'All'), count: tasks.length },
+    { key: 'mine', label: t('customers.tasks.filters.mine', 'Mine'), count: mineTasks.length },
+    { key: 'overdue', label: t('customers.tasks.filters.overdue', 'Overdue'), count: overdueTasks.length },
+  ]
+
+  return (
+    <div className="rounded-lg border bg-card p-5">
+      <div className="flex items-center justify-between">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <CheckCircle2 className="size-4" />
+          {t('customers.companies.dashboard.openTasks', 'Open tasks')}
+          <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+            {tasks.length}
+          </span>
+        </h3>
+        <Button type="button" variant="outline" size="sm" className="h-7 text-xs" onClick={onViewAll}>
+          + {t('customers.companies.dashboard.newTask', 'New task')}
+        </Button>
+      </div>
+      <div className="mt-2 flex items-center gap-1">
+        {filterTabs.map((tab) => (
+          <Button
+            key={tab.key}
+            type="button"
+            variant={taskFilter === tab.key ? 'default' : 'outline'}
+            size="sm"
+            className="h-6 px-2 text-xs"
+            onClick={() => setTaskFilter(tab.key)}
+          >
+            {tab.label}
+            <span className="ml-1 rounded-full bg-muted/50 px-1 text-overline">{tab.count}</span>
+          </Button>
+        ))}
+      </div>
+      <div className="mt-3 divide-y">
+        {filteredTasks.slice(0, 4).map((task) => {
+          const overdue = isOverdue(task.dueAt)
+          const prio = priorityLabel(task.priority)
+          return (
+            <div key={task.id} className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0">
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-foreground">{task.title || '—'}</p>
+                {task.dueAt && (
+                  <p className={cn('mt-0.5 text-xs', overdue ? 'text-destructive' : 'text-muted-foreground')}>
+                    {overdue && <AlertCircle className="mr-1 inline size-3" />}
+                    {overdue
+                      ? t('customers.companies.dashboard.overdueBy', 'Overdue by {{days}} days', { days: Math.ceil((Date.now() - new Date(task.dueAt).getTime()) / 86_400_000) })
+                      : t('customers.companies.dashboard.dueOn', 'Due: {{date}}', { date: new Date(task.dueAt).toLocaleDateString() })
+                    }
+                  </p>
+                )}
+              </div>
+              <Badge variant={prio.variant} className="shrink-0 text-xs">{prio.label}</Badge>
+              <ArrowUpRight className="size-3.5 shrink-0 text-muted-foreground" />
+            </div>
+          )
+        })}
+        {filteredTasks.length === 0 && (
+          <p className="py-3 text-sm text-muted-foreground">{t('customers.companies.dashboard.noTasks', 'No open tasks')}</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/modules/customers/components/detail/dashboard/RecentActivityWidget.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from 'react'
+import { Phone, Mail, Users, StickyNote, Clock, ArrowUpRight, ChevronRight } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { formatRelativeTime } from '@open-mercato/shared/lib/time'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import type { InteractionSummary } from '../../formConfig'
+
+function interactionIcon(type: string) {
+  switch (type) {
+    case 'call': return <Phone className="size-4" />
+    case 'email': return <Mail className="size-4" />
+    case 'meeting': return <Users className="size-4" />
+    case 'note': return <StickyNote className="size-4" />
+    default: return <Clock className="size-4" />
+  }
+}
+
+export function RecentActivityWidget({ interactions, t }: { interactions: InteractionSummary[]; t: TranslateFn }) {
+  return (
+    <div className="rounded-lg border bg-card p-5">
+      <div className="flex items-center justify-between">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Clock className="size-4" />
+          {t('customers.companies.dashboard.recentActivity', 'Recent activity')}
+          <span className="text-xs font-normal text-muted-foreground">
+            {t('customers.companies.dashboard.last7days', 'last 7 days')}
+          </span>
+        </h3>
+      </div>
+      <div className="mt-3 divide-y">
+        {interactions.map((interaction) => {
+          const date = interaction.occurredAt ?? interaction.scheduledAt
+          return (
+            <div key={interaction.id} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
+              <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                {interactionIcon(interaction.interactionType)}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm text-foreground">{interaction.title || interaction.interactionType}</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {interaction.authorName && <span>{interaction.authorName}</span>}
+                </p>
+              </div>
+              <div className="shrink-0 text-right">
+                <p className="text-xs text-muted-foreground">
+                  {date ? formatRelativeTime(date) : '—'}
+                </p>
+                <ArrowUpRight className="ml-auto mt-1 size-3.5 text-muted-foreground" />
+              </div>
+            </div>
+          )
+        })}
+        {interactions.length === 0 && (
+          <p className="py-3 text-sm text-muted-foreground">{t('customers.companies.dashboard.noActivity', 'No recent activity')}</p>
+        )}
+      </div>
+      {interactions.length > 0 && (
+        <div className="mt-3 border-t pt-3">
+          <Button type="button" variant="link" size="sm" className="h-auto p-0 text-xs">
+            {t('customers.companies.dashboard.seeAllActivity', 'See all {{count}} activities', { count: String(interactions.length) })}
+            <ChevronRight className="ml-0.5 size-3" />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/modules/customers/components/detail/dashboard/RelationshipHealthWidget.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from 'react'
+import { Heart } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { HEALTH_BADGE_CLASSES, HEALTH_ICON_CLASSES, type HealthScore } from '../healthScoreUtils'
+
+type TranslateFnWithParams = (key: string, fallback?: string, params?: Record<string, string | number>) => string
+
+export function RelationshipHealthWidget({ health, t }: { health: HealthScore; t: TranslateFnWithParams }) {
+  return (
+    <div className="rounded-lg border bg-card p-5">
+      <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+        <Heart className={cn('size-4', HEALTH_ICON_CLASSES[health.variant])} />
+        {t('customers.companies.dashboard.relationshipHealth', 'Relationship health')}
+      </h3>
+      <div className="mt-4 flex items-center justify-center">
+        <div className="text-center space-y-2">
+          <div className="relative inline-flex items-center justify-center">
+            <span className={cn('text-4xl font-bold', HEALTH_ICON_CLASSES[health.variant])}>{health.score}</span>
+            <span className="text-sm text-muted-foreground">/100</span>
+          </div>
+          <div>
+            <Badge className={cn('text-xs', HEALTH_BADGE_CLASSES[health.variant])}>
+              {t(`customers.health.${health.label}`, health.label)}
+            </Badge>
+          </div>
+          {health.lastContactDays !== null && (
+            <p className="text-xs text-muted-foreground">
+              {t('customers.health.lastContact', 'Last contact')}: {health.lastContactDays === 0
+                ? t('customers.health.today', 'today')
+                : t('customers.health.daysAgo', '{{days}} days ago', { days: health.lastContactDays })}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/modules/customers/components/detail/dashboard/UpcomingMeetingsWidget.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from 'react'
+import { Calendar, ChevronRight } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import type { InteractionSummary } from '../../formConfig'
+
+export function UpcomingMeetingsWidget({ meetings, t }: { meetings: InteractionSummary[]; t: TranslateFn }) {
+  if (meetings.length === 0) {
+    return (
+      <div className="rounded-lg border bg-card p-5">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Calendar className="size-4" />
+          {t('customers.companies.dashboard.upcomingMeetings', 'Upcoming meetings')}
+        </h3>
+        <p className="mt-3 text-sm text-muted-foreground">{t('customers.companies.dashboard.noMeetings', 'No upcoming meetings')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-5">
+      <div className="flex items-center justify-between">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Calendar className="size-4" />
+          {t('customers.companies.dashboard.upcomingMeetings', 'Upcoming meetings')}
+          <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+            {meetings.length}
+          </span>
+        </h3>
+        <Button type="button" variant="link" size="sm" className="h-auto p-0 text-xs">
+          {t('customers.companies.dashboard.seeAll', 'See all')}
+          <ChevronRight className="ml-0.5 size-3" />
+        </Button>
+      </div>
+      <div className="mt-3 divide-y">
+        {meetings.map((meeting) => {
+          const date = meeting.scheduledAt ? new Date(meeting.scheduledAt) : null
+          return (
+            <div key={meeting.id} className="flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground">
+                    {date ? date.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' }) : '—'}
+                  </span>
+                </div>
+                <p className="mt-0.5 truncate text-sm font-medium text-foreground">{meeting.title || meeting.interactionType}</p>
+                {meeting.authorName && (
+                  <p className="text-xs text-muted-foreground">{meeting.authorName}</p>
+                )}
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <Button type="button" variant="outline" size="sm" className="h-7 text-xs">
+                  {t('customers.companies.dashboard.details', 'Details')}
+                </Button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/modules/customers/components/detail/dashboard/helpers.ts

@@ -0,0 +1,78 @@
+import type { KpiTrend } from '@open-mercato/ui/backend/charts/KpiCard'
+import type { DealSummary, InteractionSummary, TodoLinkSummary } from '../../formConfig'
+
+export function sumActiveDeals(deals: DealSummary[]): number {
+  return deals
+    .filter((d) => d.status !== 'won' && d.status !== 'lost' && d.status !== 'closed')
+    .reduce((sum, d) => {
+      const amount = typeof d.valueAmount === 'number' ? d.valueAmount : parseFloat(String(d.valueAmount ?? '0'))
+      return sum + (Number.isFinite(amount) ? amount : 0)
+    }, 0)
+}
+
+export function getActiveDeals(deals: DealSummary[]): DealSummary[] {
+  return deals.filter((d) => d.status !== 'won' && d.status !== 'lost' && d.status !== 'closed')
+}
+
+export function getOpenTasks(todos: TodoLinkSummary[]): TodoLinkSummary[] {
+  return todos.filter((t) => !t.isDone).sort((a, b) => {
+    if (!a.dueAt && !b.dueAt) return 0
+    if (!a.dueAt) return 1
+    if (!b.dueAt) return -1
+    return new Date(a.dueAt).getTime() - new Date(b.dueAt).getTime()
+  })
+}
+
+export function getUpcomingMeetings(interactions: InteractionSummary[]): InteractionSummary[] {
+  const now = new Date()
+  return interactions
+    .filter((i) => i.scheduledAt && new Date(i.scheduledAt) > now)
+    .sort((a, b) => new Date(a.scheduledAt!).getTime() - new Date(b.scheduledAt!).getTime())
+    .slice(0, 3)
+}
+
+export function getRecentActivity(interactions: InteractionSummary[]): InteractionSummary[] {
+  const weekAgo = new Date()
+  weekAgo.setDate(weekAgo.getDate() - 7)
+  return interactions
+    .filter((i) => {
+      const date = i.occurredAt ?? i.scheduledAt
+      return date && new Date(date) >= weekAgo
+    })
+    .sort((a, b) => {
+      const da = a.occurredAt ?? a.scheduledAt ?? ''
+      const db = b.occurredAt ?? b.scheduledAt ?? ''
+      return new Date(db).getTime() - new Date(da).getTime()
+    })
+    .slice(0, 4)
+}
+
+export function computeActivityTrend(interactions: InteractionSummary[]): KpiTrend | undefined {
+  const now = Date.now()
+  const weekMs = 7 * 86_400_000
+  const thisWeek = interactions.filter((i) => {
+    const d = i.occurredAt ?? i.scheduledAt
+    return d && now - new Date(d).getTime() < weekMs
+  }).length
+  const lastWeek = interactions.filter((i) => {
+    const d = i.occurredAt ?? i.scheduledAt
+    if (!d) return false
+    const diff = now - new Date(d).getTime()
+    return diff >= weekMs && diff < weekMs * 2
+  }).length
+  if (lastWeek === 0 && thisWeek === 0) return undefined
+  if (lastWeek === 0) return { value: 100, direction: 'up' }
+  const pct = ((thisWeek - lastWeek) / lastWeek) * 100
+  if (Math.abs(pct) < 0.5) return { value: 0, direction: 'unchanged' }
+  return { value: Math.abs(pct), direction: pct > 0 ? 'up' : 'down' }
+}
+
+export function computeDealTrend(deals: DealSummary[]): KpiTrend | undefined {
+  const active = deals.filter((d) => d.status !== 'won' && d.status !== 'lost' && d.status !== 'closed')
+  if (active.length === 0) return undefined
+  const now = Date.now()
+  const monthMs = 30 * 86_400_000
+  const recentDeals = active.filter((d) => d.createdAt && now - new Date(d.createdAt).getTime() < monthMs).length
+  if (recentDeals > 0) return { value: recentDeals * 10, direction: 'up' }
+  return { value: 0, direction: 'unchanged' }
+}

package/src/modules/customers/components/detail/healthScoreUtils.ts

@@ -0,0 +1,91 @@
+/**
+ * Shared health score computation for CRM relationship health widgets.
+ */
+import type { InteractionSummary } from '../formConfig'
+
+export type HealthVariant = 'success' | 'warning' | 'error'
+
+export type HealthScore = {
+  score: number
+  label: string
+  variant: HealthVariant
+  lastContactDays: number | null
+}
+
+export function computeHealthScore(interactions: InteractionSummary[]): HealthScore {
+  const now = Date.now()
+  const dayMs = 86_400_000
+
+  const dates = interactions
+    .map((i) => i.occurredAt ?? i.scheduledAt)
+    .filter(Boolean)
+    .map((d) => new Date(d!).getTime())
+  const lastContactMs = dates.length > 0 ? Math.max(...dates) : 0
+  const daysSinceContact = lastContactMs > 0 ? Math.floor((now - lastContactMs) / dayMs) : 999
+
+  let recencyScore: number
+  if (daysSinceContact <= 7) recencyScore = 100
+  else if (daysSinceContact <= 30) recencyScore = 75
+  else if (daysSinceContact <= 60) recencyScore = 50
+  else if (daysSinceContact <= 90) recencyScore = 25
+  else recencyScore = 0
+
+  const last30 = interactions.filter((i) => {
+    const d = i.occurredAt ?? i.scheduledAt
+    return d && now - new Date(d).getTime() < 30 * dayMs
+  }).length
+
+  let frequencyScore: number
+  if (last30 >= 5) frequencyScore = 100
+  else if (last30 >= 3) frequencyScore = 75
+  else if (last30 >= 1) frequencyScore = 50
+  else frequencyScore = 0
+
+  const types = new Set(interactions.map((i) => i.interactionType))
+  let diversityScore: number
+  if (types.size >= 4) diversityScore = 100
+  else if (types.size >= 3) diversityScore = 75
+  else if (types.size >= 2) diversityScore = 50
+  else if (types.size >= 1) diversityScore = 25
+  else diversityScore = 0
+
+  const weekBuckets = new Set(
+    interactions
+      .map((i) => i.occurredAt ?? i.scheduledAt)
+      .filter(Boolean)
+      .map((d) => Math.floor(new Date(d!).getTime() / (7 * dayMs))),
+  )
+  let consistencyScore: number
+  if (weekBuckets.size >= 8) consistencyScore = 100
+  else if (weekBuckets.size >= 4) consistencyScore = 75
+  else if (weekBuckets.size >= 2) consistencyScore = 50
+  else consistencyScore = 25
+
+  const score = Math.round(
+    recencyScore * 0.4 + frequencyScore * 0.3 + diversityScore * 0.15 + consistencyScore * 0.15,
+  )
+
+  let label: string
+  let variant: HealthVariant
+  if (score >= 70) { label = 'healthy'; variant = 'success' }
+  else if (score >= 40) { label = 'watchful'; variant = 'warning' }
+  else { label = 'at risk'; variant = 'error' }
+
+  return { score, label, variant, lastContactDays: daysSinceContact < 999 ? daysSinceContact : null }
+}
+
+/**
+ * Shared health variant → semantic status token mappings.
+ * Used by RelationshipHealthCard and RelationshipHealthWidget.
+ */
+export const HEALTH_ICON_CLASSES: Record<HealthVariant, string> = {
+  success: 'text-status-success-icon',
+  warning: 'text-status-warning-icon',
+  error: 'text-status-error-icon',
+}
+
+export const HEALTH_BADGE_CLASSES: Record<HealthVariant, string> = {
+  success: 'bg-status-success-bg text-status-success-text',
+  warning: 'bg-status-warning-bg text-status-warning-text',
+  error: 'bg-status-error-bg text-status-error-text',
+}

package/src/modules/customers/components/detail/hooks/useCurrencyDictionary.ts

@@ -35,16 +35,16 @@ async function fetchCurrencyDictionary(): Promise<CurrencyDictionaryPayload> {
   }
   const entriesRaw = Array.isArray(payload?.entries) ? payload.entries : []
   const entries: CurrencyDictionaryEntry[] = entriesRaw
-    .map((entry: any): CurrencyDictionaryEntry | null => {
-      const value = typeof entry?.value === 'string' ? entry.value.trim().toUpperCase() : ''
+    .map((entry: Record<string, unknown>): CurrencyDictionaryEntry | null => {
+      const value = typeof entry.value === 'string' ? entry.value.trim().toUpperCase() : ''
       const label =
-        typeof entry?.label === 'string' && entry.label.trim().length
+        typeof entry.label === 'string' && entry.label.trim().length
           ? entry.label.trim()
           : value
-      const entryId = typeof entry?.id === 'string' ? entry.id : value
+      const entryId = typeof entry.id === 'string' ? entry.id : value
       if (!value) return null
-      const color = typeof entry?.color === 'string' && entry.color.trim().length ? entry.color.trim() : null
-      const icon = typeof entry?.icon === 'string' && entry.icon.trim().length ? entry.icon.trim() : null
+      const color = typeof entry.color === 'string' && entry.color.trim().length ? entry.color.trim() : null
+      const icon = typeof entry.icon === 'string' && entry.icon.trim().length ? entry.icon.trim() : null
       return { id: entryId, value, label, color, icon }
     })
     .filter((entry: CurrencyDictionaryEntry | null): entry is CurrencyDictionaryEntry => entry !== null)
@@ -68,8 +68,8 @@ export function useCurrencyDictionary() {
   }, [])
 
   const data = entry?.client.getQueryData<CurrencyDictionaryPayload>(QUERY_KEY) ?? null
-  const isLoading = !data && !(result && (result as any).status === 'error')
-  const error = (result && (result as any).status === 'error') ? (result as any).error ?? null : null
+  const isLoading = !data && !(result && result.status === 'error')
+  const error = (result && result.status === 'error') ? result.error ?? null : null
   const refetch = React.useCallback(async () => {
     const current = cache.get(CACHE_KEY)
     const client = current?.client ?? new QueryClient()

package/src/modules/customers/components/detail/hooks/useCustomerDictionary.ts

@@ -26,16 +26,19 @@ const DICTIONARY_STALE_TIME = 5 * 60 * 1000
 
 const BASE_DICTIONARY_QUERY_KEY = ['customers', 'dictionaries'] as const
 
-export const customerDictionaryQueryKey = (kind: CustomerDictionaryKind, scopeVersion = 0) =>
-  [...BASE_DICTIONARY_QUERY_KEY, kind, `scope:${scopeVersion}`] as const
+export const customerDictionaryQueryKey = (kind: CustomerDictionaryKind, scopeVersion = 0, organizationId?: string | null) =>
+  [...BASE_DICTIONARY_QUERY_KEY, kind, `scope:${scopeVersion}`, organizationId ? `org:${organizationId}` : 'org:default'] as const
 
-export const customerDictionaryQueryOptions = (kind: CustomerDictionaryKind, scopeVersion = 0) => ({
-  queryKey: customerDictionaryQueryKey(kind, scopeVersion),
+export const customerDictionaryQueryOptions = (kind: CustomerDictionaryKind, scopeVersion = 0, organizationId?: string | null) => ({
+  queryKey: customerDictionaryQueryKey(kind, scopeVersion, organizationId),
   staleTime: DICTIONARY_STALE_TIME,
   gcTime: DICTIONARY_STALE_TIME,
   queryFn: async (): Promise<CustomerDictionaryQueryData> => {
+    const url = organizationId
+      ? `/api/customers/dictionaries/${kind}?organizationId=${encodeURIComponent(organizationId)}`
+      : `/api/customers/dictionaries/${kind}`
     const payload = await readApiResultOrThrow<Record<string, unknown>>(
-      `/api/customers/dictionaries/${kind}`,
+      url,
       undefined,
       { errorMessage: 'Failed to load dictionary entries.' },
     )
@@ -81,8 +84,9 @@ export const customerDictionaryQueryOptions = (kind: CustomerDictionaryKind, sco
 export function useCustomerDictionary(
   kind: CustomerDictionaryKind,
   scopeVersion = 0,
+  organizationId?: string | null,
 ): UseQueryResult<CustomerDictionaryQueryData> {
-  return useQuery(customerDictionaryQueryOptions(kind, scopeVersion))
+  return useQuery(customerDictionaryQueryOptions(kind, scopeVersion, organizationId))
 }
 
 export async function invalidateCustomerDictionary(queryClient: QueryClient, kind: CustomerDictionaryKind) {