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

package/src/modules/customers/components/detail/CompanyCard.tsx

@@ -0,0 +1,419 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import {
+  Building2,
+  Clock,
+  Copy,
+  CreditCard,
+  ExternalLink,
+  FileText,
+  Hash,
+  MapPin,
+  TrendingUp,
+  Zap,
+  Tag as TagIcon,
+  Users,
+} from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { renderDictionaryIcon } from '../../../dictionaries/components/dictionaryAppearance'
+import type { CustomerDictionaryDisplayEntry, CustomerDictionaryMap } from '../../lib/dictionaries'
+import { formatFallbackLabel } from './utils'
+
+export type EnrichedCompanyData = {
+  linkId: string
+  companyId: string
+  displayName: string
+  isPrimary: boolean
+  subtitle: string | null
+  profile: {
+    industry: string | null
+    sizeBucket: string | null
+    legalName: string | null
+    domain: string | null
+    websiteUrl: string | null
+  } | null
+  billing: {
+    bankName: string | null
+    bankAccountMasked: string | null
+    paymentTerms: string | null
+    preferredCurrency: string | null
+  } | null
+  primaryAddress: { formatted: string } | null
+  tags: Array<{ id: string; label: string; color: string | null }>
+  roles: Array<{ id: string; roleValue: string }>
+  activeDeal: {
+    title: string
+    valueAmount: string | null
+    valueCurrency: string | null
+  } | null
+  lastContactAt: string | null
+  clv: { amount: number; currency: string } | null
+  status: string | null
+  lifecycleStage: string | null
+  temperature: string | null
+  renewalQuarter: string | null
+}
+
+type CompanyCardProps = {
+  data: EnrichedCompanyData
+  personName: string
+  statusMap?: CustomerDictionaryMap | undefined
+  lifecycleMap?: CustomerDictionaryMap | undefined
+  temperatureMap?: CustomerDictionaryMap | undefined
+  renewalQuarterMap?: CustomerDictionaryMap | undefined
+  roleMap?: CustomerDictionaryMap | undefined
+}
+
+function copyToClipboard(text: string, t: ReturnType<typeof useT>) {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      flash(t('customers.companies.detail.copied', 'Copied to clipboard'), 'success')
+    })
+    .catch((err) => console.warn('[CompanyCard] clipboard write failed', err))
+}
+
+function formatRelativeTime(isoDate: string, t: ReturnType<typeof useT>): string {
+  const date = new Date(isoDate)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  if (diffDays === 0) {
+    return `${t('customers.companies.detail.relativeTime.today', 'today')}, ${date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}`
+  }
+  if (diffDays === 1) return t('customers.companies.detail.relativeTime.oneDayAgo', '1 day ago')
+  if (diffDays < 7) return t('customers.companies.detail.relativeTime.daysAgo', '{{days}} days ago', { days: diffDays })
+  if (diffDays < 30) return t('customers.companies.detail.relativeTime.weeksAgo', '{{weeks}} wk. ago', { weeks: Math.floor(diffDays / 7) })
+  return t('customers.companies.detail.relativeTime.monthsAgo', '{{months}} mo. ago', { months: Math.floor(diffDays / 30) })
+}
+
+function formatCurrency(amount: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency,
+      maximumFractionDigits: 0,
+      notation: amount >= 1_000_000 ? 'compact' : 'standard',
+    }).format(amount)
+  } catch {
+    if (amount >= 1_000_000) return `${(amount / 1_000_000).toFixed(2)} M ${currency}`
+    if (amount >= 1_000) return `${Math.round(amount / 1000)}k ${currency}`
+    return `${amount} ${currency}`
+  }
+}
+
+function ColorBadge({
+  value,
+  map,
+  fallbackIcon,
+}: {
+  value: string
+  map: Record<string, CustomerDictionaryDisplayEntry> | undefined
+  fallbackIcon?: React.ReactNode
+}) {
+  const entry = map?.[value]
+  const color = entry?.color ?? null
+  const icon = entry?.icon ?? null
+  const label = entry?.label ?? formatFallbackLabel(value)
+  const colorStyle: React.CSSProperties | undefined = color
+    ? { color, borderColor: color, backgroundColor: `${color}1A` }
+    : undefined
+  return (
+    <Badge
+      variant="outline"
+      className="rounded-sm gap-1.5 text-xs font-medium"
+      style={colorStyle}
+    >
+      {icon ? renderDictionaryIcon(icon, 'size-2.5') : fallbackIcon ?? null}
+      {label}
+    </Badge>
+  )
+}
+
+function StatusDotBadge({
+  value,
+  map,
+}: {
+  value: string
+  map: Record<string, CustomerDictionaryDisplayEntry> | undefined
+}) {
+  const entry = map?.[value]
+  const color = entry?.color ?? null
+  const label = entry?.label ?? formatFallbackLabel(value)
+  const colorStyle: React.CSSProperties | undefined = color
+    ? { color, borderColor: color, backgroundColor: `${color}1A` }
+    : undefined
+  return (
+    <Badge
+      variant="outline"
+      className="rounded-sm gap-1.5 text-xs font-medium"
+      style={colorStyle}
+    >
+      <span
+        className="size-1.5 rounded-full"
+        style={color ? { backgroundColor: color } : undefined}
+      />
+      {label}
+    </Badge>
+  )
+}
+
+function BillingRow({
+  icon: Icon,
+  label,
+  value,
+  showCopy = true,
+  showDottedLine = true,
+  t,
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  value: string
+  showCopy?: boolean
+  showDottedLine?: boolean
+  t: ReturnType<typeof useT>
+}) {
+  return (
+    <div className="flex min-w-0 flex-wrap items-center gap-1.5 min-h-[22px]">
+      <Icon className="size-3 shrink-0 text-muted-foreground" />
+      <span className="text-xs text-muted-foreground font-medium shrink-0">{label}:</span>
+      {showDottedLine && <div className="mx-1 hidden flex-1 border-b border-dotted border-border/50 sm:block" />}
+      <span className="min-w-0 break-words text-xs font-medium text-foreground">{value}</span>
+      {showCopy && (
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-auto shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0"
+          onClick={() => copyToClipboard(value, t)}
+          aria-label={t('customers.companies.detail.copy', 'Copy')}
+        >
+          <Copy className="size-2.5" />
+        </IconButton>
+      )}
+    </div>
+  )
+}
+
+export function CompanyCard({
+  data,
+  personName,
+  statusMap,
+  lifecycleMap,
+  temperatureMap,
+  renewalQuarterMap,
+  roleMap,
+}: CompanyCardProps) {
+  const t = useT()
+
+  const hasBillingSection =
+    data.profile?.legalName ||
+    data.primaryAddress?.formatted ||
+    data.billing?.bankName ||
+    data.billing?.bankAccountMasked ||
+    data.billing?.paymentTerms ||
+    data.billing?.preferredCurrency
+
+  const dealValue =
+    data.activeDeal?.valueAmount && data.activeDeal?.valueCurrency
+      ? `${data.activeDeal.valueAmount} ${data.activeDeal.valueCurrency}`
+      : null
+
+  return (
+    <div className="min-w-0 overflow-hidden rounded-2xl border border-border/60 bg-card">
+      {/* Header */}
+      <div className="flex flex-col gap-3 px-5 py-5 sm:flex-row sm:items-center">
+        <div className="flex min-w-0 flex-1 items-center gap-3">
+          <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-muted">
+            <Building2 className="size-5 text-muted-foreground" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="break-words text-base font-bold">{data.displayName}</span>
+              {data.isPrimary && (
+                <Badge variant="default" className="rounded-sm px-1.5 py-0 text-overline font-bold uppercase tracking-wider">
+                  PRIMARY
+                </Badge>
+              )}
+            </div>
+            {data.subtitle && (
+              <p className="break-words text-sm text-muted-foreground">{data.subtitle}</p>
+            )}
+          </div>
+        </div>
+        <div className="self-start sm:self-auto">
+          <Link href={`/backend/customers/companies-v2/${data.companyId}`}>
+            <IconButton variant="ghost" size="sm" type="button">
+              <ExternalLink className="size-4" />
+            </IconButton>
+          </Link>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-border/60" />
+
+      {/* Body */}
+      <div className="px-5 py-4 space-y-4">
+        {/* Info badges */}
+        <div className="flex flex-wrap gap-1.5">
+          {data.profile?.industry && (
+            <Badge variant="outline" className="rounded-sm gap-1.5 text-xs font-medium">
+              <TagIcon className="size-2.5" />
+              {data.profile.industry}
+            </Badge>
+          )}
+          {data.profile?.sizeBucket && (
+            <Badge variant="outline" className="rounded-sm gap-1.5 text-xs font-medium">
+              <Users className="size-2.5" />
+              {data.profile.sizeBucket} {t('customers.companies.detail.employees', 'employees')}
+            </Badge>
+          )}
+          {data.status && <StatusDotBadge value={data.status} map={statusMap} />}
+          {data.renewalQuarter && (
+            <ColorBadge
+              value={data.renewalQuarter}
+              map={renewalQuarterMap}
+              fallbackIcon={<Clock className="size-2.5" />}
+            />
+          )}
+          {data.temperature && (
+            <ColorBadge
+              value={data.temperature}
+              map={temperatureMap}
+              fallbackIcon={<Zap className="size-2.5" />}
+            />
+          )}
+        </div>
+
+        {/* Roles */}
+        {data.roles.length > 0 && (
+          <div className="space-y-1.5">
+            <span className="text-overline font-bold uppercase tracking-wider text-muted-foreground">
+              {t('customers.companies.detail.roleInCompany', 'ROLE OF {{name}} IN THIS COMPANY', { name: personName.toUpperCase() })}
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {data.roles.map((role) => (
+                <ColorBadge
+                  key={role.id}
+                  value={role.roleValue}
+                  map={roleMap}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Stats divider */}
+        <div className="border-t border-border/60" />
+
+        {/* Stats row */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <div className="min-w-0">
+            <span className="text-overline font-bold uppercase tracking-wider text-muted-foreground block mb-1">
+              {t('customers.companies.detail.activeDeal', 'ACTIVE DEAL')}
+            </span>
+            <span className="flex min-w-0 items-center gap-1 text-xs font-medium text-foreground">
+              {data.activeDeal ? (
+                <>
+                  <Building2 className="size-3 shrink-0" />
+                  <span className="min-w-0 break-words">
+                    {data.activeDeal.title}
+                    {dealValue ? ` · ${dealValue}` : ''}
+                  </span>
+                </>
+              ) : (
+                '—'
+              )}
+            </span>
+          </div>
+          <div className="min-w-0">
+            <span className="text-overline font-bold uppercase tracking-wider text-muted-foreground block mb-1">
+              {t('customers.companies.detail.lastContact', 'LAST CONTACT')}
+            </span>
+            <span className="flex min-w-0 items-center gap-1 break-words text-xs font-medium text-foreground">
+              {data.lastContactAt ? (
+                <>
+                  <Clock className="size-3 shrink-0" />
+                  {formatRelativeTime(data.lastContactAt, t)}
+                </>
+              ) : (
+                '—'
+              )}
+            </span>
+          </div>
+          <div className="min-w-0">
+            <span className="text-overline font-bold uppercase tracking-wider text-muted-foreground block mb-1">
+              CLV
+            </span>
+            <span className="flex min-w-0 items-center gap-1 break-words text-xs font-medium text-foreground">
+              {data.clv ? (
+                <>
+                  <TrendingUp className="size-3 shrink-0" />
+                  {formatCurrency(data.clv.amount, data.clv.currency)}
+                </>
+              ) : (
+                '—'
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* Billing section */}
+        {hasBillingSection && (
+          <>
+            <div className="border-t border-border/60" />
+            <div className="rounded-lg bg-muted/40 border border-border/40 px-3.5 py-3 space-y-1.5">
+              {data.profile?.legalName && (
+                <BillingRow icon={FileText} label={t('customers.companies.detail.billing.name', 'Name')} value={data.profile.legalName} t={t} />
+              )}
+              {data.primaryAddress?.formatted && (
+                <BillingRow
+                  icon={MapPin}
+                  label={t('customers.companies.detail.billing.address', 'Address')}
+                  value={data.primaryAddress.formatted}
+                  t={t}
+                />
+              )}
+              {(data.billing?.bankName || data.billing?.bankAccountMasked) && (
+                <BillingRow
+                  icon={CreditCard}
+                  label={t('customers.fields.bankIban', 'Bank / IBAN')}
+                  value={[data.billing?.bankName, data.billing?.bankAccountMasked]
+                    .filter(Boolean)
+                    .join(' · ')}
+                  t={t}
+                />
+              )}
+              {data.billing?.paymentTerms && (
+                <BillingRow
+                  icon={Clock}
+                  label={t('customers.companies.detail.billing.paymentTerms', 'Payment terms')}
+                  value={data.billing.paymentTerms}
+                  showCopy={false}
+                  showDottedLine={false}
+                  t={t}
+                />
+              )}
+              {data.billing?.preferredCurrency && (
+                <BillingRow
+                  icon={Hash}
+                  label={t('customers.companies.detail.billing.currency', 'Currency')}
+                  value={data.billing.preferredCurrency}
+                  showCopy={false}
+                  showDottedLine={false}
+                  t={t}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/modules/customers/components/detail/CompanyDashboardTab.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import * as React from 'react'
+import { EyeOff } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { KpiCard, type KpiTrend } from '@open-mercato/ui/backend/charts/KpiCard'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { InlineActivityComposer } from './InlineActivityComposer'
+import type { CompanyOverview } from '../formConfig'
+import { formatCurrency } from './utils'
+import { computeHealthScore } from './healthScoreUtils'
+import {
+  readJsonFromLocalStorage,
+  writeJsonToLocalStorage,
+  removeLocalStorageKey,
+} from '@open-mercato/shared/lib/browser/safeLocalStorage'
+import {
+  sumActiveDeals,
+  getActiveDeals,
+  getOpenTasks,
+  getUpcomingMeetings,
+  getRecentActivity,
+  computeActivityTrend,
+  computeDealTrend,
+} from './dashboard/helpers'
+import { UpcomingMeetingsWidget } from './dashboard/UpcomingMeetingsWidget'
+import { RelationshipHealthWidget } from './dashboard/RelationshipHealthWidget'
+import { ActiveDealWidget } from './dashboard/ActiveDealWidget'
+import { OpenTasksWidget } from './dashboard/OpenTasksWidget'
+import { RecentActivityWidget } from './dashboard/RecentActivityWidget'
+
+type GuardedMutationRunner = <T>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
+type CompanyDashboardTabProps = {
+  data: CompanyOverview
+  companyId: string
+  onTabChange: (tab: string) => void
+  onActivityCreated?: () => void
+  onScheduleRequested?: () => void
+  runGuardedMutation?: GuardedMutationRunner
+  useCanonicalInteractions?: boolean
+}
+
+export function CompanyDashboardTab({ data, companyId, onTabChange, onActivityCreated, onScheduleRequested, runGuardedMutation, useCanonicalInteractions }: CompanyDashboardTabProps) {
+  const t = useT()
+
+  const activeDeals = React.useMemo(() => getActiveDeals(data.deals), [data.deals])
+  const activeDealsValue = React.useMemo(() => sumActiveDeals(data.deals), [data.deals])
+  const openTasks = React.useMemo(() => getOpenTasks(data.todos), [data.todos])
+  const upcomingMeetings = React.useMemo(() => getUpcomingMeetings(data.interactions), [data.interactions])
+  const recentActivity = React.useMemo(() => getRecentActivity(data.interactions), [data.interactions])
+
+  const dealCurrency = activeDeals[0]?.valueCurrency ?? data.deals[0]?.valueCurrency ?? 'PLN'
+  const activityTrend = React.useMemo(() => computeActivityTrend(data.interactions), [data.interactions])
+  const dealTrend = React.useMemo(() => computeDealTrend(data.deals), [data.deals])
+  const healthScore = React.useMemo(() => computeHealthScore(data.interactions), [data.interactions])
+
+  const ltvValue = React.useMemo(() => {
+    const wonDeals = data.deals.filter((d) => d.status === 'won')
+    if (wonDeals.length === 0) return null
+    return wonDeals.reduce((sum, d) => {
+      const amt = typeof d.valueAmount === 'number' ? d.valueAmount : parseFloat(String(d.valueAmount ?? '0'))
+      return sum + (Number.isFinite(amt) ? amt : 0)
+    }, 0)
+  }, [data.deals])
+
+  const clientTenureYears = React.useMemo(() => {
+    const allDates = data.interactions
+      .map((i) => i.occurredAt ?? i.scheduledAt ?? i.createdAt)
+      .filter(Boolean)
+      .map((d) => new Date(d).getTime())
+    if (allDates.length === 0) return null
+    const earliest = Math.min(...allDates)
+    return Math.floor((Date.now() - earliest) / (365.25 * 86_400_000))
+  }, [data.interactions])
+
+  const [hiddenTiles, setHiddenTiles] = React.useState<Set<string>>(
+    () => new Set(readJsonFromLocalStorage<string[]>('om:dashboard-hidden-tiles', [])),
+  )
+
+  const toggleTile = React.useCallback((tileId: string) => {
+    setHiddenTiles((prev) => {
+      const next = new Set(prev)
+      if (next.has(tileId)) next.delete(tileId)
+      else next.add(tileId)
+      writeJsonToLocalStorage('om:dashboard-hidden-tiles', [...next])
+      return next
+    })
+  }, [])
+
+  const kpiTiles: Array<{ id: string; title: string; value: number | null; trend?: KpiTrend; formatValue?: (v: number) => string; comparisonLabel: string }> = [
+    { id: 'activeDeals', title: t('customers.companies.dashboard.kpi.activeDeals', 'ACTIVE DEALS'), value: activeDealsValue, trend: dealTrend, formatValue: (v: number) => formatCurrency(v, dealCurrency), comparisonLabel: `${activeDeals.length} ${activeDeals.length === 1 ? 'pipeline' : 'pipelines'}` },
+    { id: 'activities', title: t('customers.companies.dashboard.kpi.activities', 'ACTIVITIES'), value: data.interactions.length, trend: activityTrend, comparisonLabel: t('customers.companies.dashboard.kpi.last12months', 'last 12 months') },
+    { id: 'ltv', title: t('customers.companies.dashboard.kpi.ltv', 'CUSTOMER VALUE (LTV)'), value: ltvValue, formatValue: ltvValue !== null ? (v: number) => formatCurrency(v, dealCurrency) : undefined, comparisonLabel: ltvValue !== null ? t('customers.companies.dashboard.kpi.wonDeals', 'won deals total') : t('customers.companies.dashboard.kpi.noWonDeals', 'No won deals') },
+    { id: 'clientSince', title: t('customers.companies.dashboard.kpi.clientSince', 'CLIENT SINCE'), value: clientTenureYears, formatValue: clientTenureYears !== null ? (v: number) => v < 1 ? `< 1 ${t('customers.companies.dashboard.kpi.year', 'year')}` : `${v} ${v === 1 ? t('customers.companies.dashboard.kpi.year', 'year') : t('customers.companies.dashboard.kpi.years', 'years')}` : undefined, comparisonLabel: clientTenureYears !== null ? `${data.deals.filter(d => d.status === 'won').length} ${t('customers.companies.dashboard.kpi.completedDeals', 'completed deals')}` : t('customers.companies.dashboard.kpi.noInteractions', 'No interactions yet') },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {kpiTiles.filter((tile) => !hiddenTiles.has(tile.id)).map((tile) => (
+          <div key={tile.id} className="relative group">
+            <KpiCard
+              title={tile.title}
+              value={tile.value}
+              trend={tile.trend}
+              formatValue={tile.formatValue}
+              comparisonLabel={tile.comparisonLabel}
+            />
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => toggleTile(tile.id)}
+              className="h-auto absolute top-2 right-2 opacity-0 group-hover:opacity-60 transition-opacity text-muted-foreground hover:text-foreground p-0"
+              aria-label={t('customers.companies.dashboard.hideTile', 'Hide tile')}
+            >
+              <EyeOff className="size-3.5" />
+            </IconButton>
+          </div>
+        ))}
+      </div>
+      {hiddenTiles.size > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            {t('customers.companies.dashboard.hiddenTiles', '{{count}} tiles hidden', { count: hiddenTiles.size })}
+          </span>
+          <Button type="button" variant="ghost" size="sm" className="h-auto text-xs px-1.5 py-0.5" onClick={() => { setHiddenTiles(new Set()); removeLocalStorageKey('om:dashboard-hidden-tiles') }}>
+            {t('customers.companies.dashboard.showAll', 'Show all')}
+          </Button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_380px]">
+        <div className="space-y-6">
+          <UpcomingMeetingsWidget meetings={upcomingMeetings} t={t} />
+          <OpenTasksWidget tasks={openTasks} t={t} onViewAll={() => onTabChange('activity-log')} currentUserId={null} />
+        </div>
+        <div className="space-y-6">
+          <RelationshipHealthWidget health={healthScore} t={t} />
+          <ActiveDealWidget deals={activeDeals} t={t} />
+        </div>
+      </div>
+
+      <InlineActivityComposer
+        entityType="company"
+        entityId={companyId}
+        onActivityCreated={onActivityCreated}
+        runGuardedMutation={runGuardedMutation}
+        onScheduleRequested={onScheduleRequested}
+        useCanonicalInteractions={useCanonicalInteractions}
+      />
+
+      <RecentActivityWidget interactions={recentActivity} t={t} />
+    </div>
+  )
+}