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

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

@@ -0,0 +1,243 @@
+"use client"
+
+import * as React from 'react'
+import { Phone, Mail, Trash2, Building2, Globe, Pencil, MapPin } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { CompanyTagsDialog } from './CompanyTagsDialog'
+import { invalidateCustomerDictionary, useCustomerDictionary } from './hooks/useCustomerDictionary'
+import { renderDictionaryIcon } from '../../../dictionaries/components/dictionaryAppearance'
+import type { TagSummary } from './types'
+import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
+import type { CompanyOverview } from '../formConfig'
+import type { CustomerDictionaryMap } from '@open-mercato/core/modules/customers/lib/dictionaries'
+import { formatFallbackLabel } from './utils'
+
+type CompanyDetailHeaderProps = {
+  data: CompanyOverview
+  onTagsChange: (tags: TagSummary[]) => void
+  tagsSectionControllerRef: React.RefObject<TagsSectionController | null>
+  onSave: () => void
+  onDelete: () => Promise<void>
+  isDirty: boolean
+  isSaving: boolean
+  onFocusField?: (fieldName: string) => void
+  onDataReload?: () => void
+}
+
+function CompanyDictionaryBadge({ value, map }: { value: string; map: CustomerDictionaryMap | undefined }) {
+  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') : null}
+      {label}
+    </Badge>
+  )
+}
+
+export function CompanyDetailHeader({
+  data,
+  onTagsChange,
+  tagsSectionControllerRef,
+  onSave,
+  onDelete,
+  isDirty,
+  isSaving,
+  onFocusField,
+  onDataReload,
+}: CompanyDetailHeaderProps) {
+  const t = useT()
+  const queryClient = useQueryClient()
+  const [manageTagsOpen, setManageTagsOpen] = React.useState(false)
+  const company = data.company
+  const profile = data.profile
+  const displayName = company.displayName || t('customers.companies.detail.untitled', 'Untitled')
+  const visibleCustomTags = React.useMemo(
+    () => (data.tags?.filter((tag) => !['status', 'lifecycle_stage', 'source'].includes(tag.id)).slice(0, 6) ?? []),
+    [data.tags],
+  )
+  const hiddenCustomTagsCount = Math.max(
+    0,
+    (data.tags?.filter((tag) => !['status', 'lifecycle_stage', 'source'].includes(tag.id)).length ?? 0) - visibleCustomTags.length,
+  )
+
+  const industryLabel = profile?.industry ?? null
+  const sizeLabel = profile?.sizeBucket ?? null
+  const subtitle = [industryLabel, sizeLabel ? t('customers.companies.detail.header.employees', '{count} employees', { count: sizeLabel }) : null].filter(Boolean).join(' \u00b7 ')
+
+  // Primary address for header
+  const primaryAddress = React.useMemo(() => {
+    const addresses = (data as Record<string, unknown>).addresses as Array<{ isPrimary?: boolean; city?: string; region?: string; postalCode?: string }> | undefined
+    if (!addresses || !Array.isArray(addresses)) return null
+    return addresses.find((a) => a.isPrimary) ?? addresses[0] ?? null
+  }, [data])
+
+  const locationText = React.useMemo(() => {
+    if (!primaryAddress) return null
+    return [primaryAddress.city, primaryAddress.region, primaryAddress.postalCode].filter(Boolean).join(', ')
+  }, [primaryAddress])
+
+  // Fetch dictionary maps for colored badge rendering
+  const companyOrgId = company.organizationId ?? null
+  const { data: statusDict } = useCustomerDictionary('statuses', 0, companyOrgId)
+  const { data: lifecycleDict } = useCustomerDictionary('lifecycle-stages', 0, companyOrgId)
+  const { data: sourceDict } = useCustomerDictionary('sources', 0, companyOrgId)
+  const { data: temperatureDict } = useCustomerDictionary('temperature', 0, companyOrgId)
+  const { data: renewalQuarterDict } = useCustomerDictionary('renewal-quarters', 0, companyOrgId)
+
+  return (
+    <div className="rounded-lg border bg-card">
+      {/* Top row: avatar + company info + account manager + actions */}
+      <div className="flex flex-col gap-4 px-6 pt-6 pb-3 sm:flex-row sm:items-start sm:gap-5">
+        {/* Avatar */}
+        <div className="flex size-18 shrink-0 items-center justify-center rounded-full bg-muted">
+          <Building2 className="size-7 text-muted-foreground" />
+        </div>
+
+        {/* Company info */}
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-2xl font-bold text-foreground">{displayName}</h1>
+          {subtitle && (
+            <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>
+          )}
+
+          {/* Contact row */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-muted-foreground">
+            {company.primaryPhone && (
+              <span className="inline-flex items-center gap-1.5">
+                <Phone className="size-3.5" />
+                <a href={`tel:${company.primaryPhone}`} className="hover:text-foreground">{company.primaryPhone}</a>
+              </span>
+            )}
+            {company.primaryEmail && (
+              <span className="inline-flex items-center gap-1.5">
+                <Mail className="size-3.5" />
+                <a href={`mailto:${company.primaryEmail}`} className="hover:text-foreground">{company.primaryEmail}</a>
+              </span>
+            )}
+            {profile?.websiteUrl && (
+              <a href={profile.websiteUrl.startsWith('http') ? profile.websiteUrl : `https://${profile.websiteUrl}`} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 hover:text-foreground">
+                <Globe className="size-3.5" />
+                {profile.websiteUrl}
+              </a>
+            )}
+            {locationText && (
+              <span className="inline-flex items-center gap-1.5">
+                <MapPin className="size-3.5" />
+                {locationText}
+              </span>
+            )}
+          </div>
+
+          {/* Status badges + temperature + renewal quarter + inline tags */}
+          <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
+            {company.status && (
+              <CompanyDictionaryBadge value={company.status} map={statusDict?.map} />
+            )}
+            {company.lifecycleStage && (
+              <CompanyDictionaryBadge value={company.lifecycleStage} map={lifecycleDict?.map} />
+            )}
+            {company.source && (
+              <CompanyDictionaryBadge value={company.source} map={sourceDict?.map} />
+            )}
+            {company.temperature && (
+              <CompanyDictionaryBadge value={company.temperature} map={temperatureDict?.map} />
+            )}
+            {company.renewalQuarter && (
+              <CompanyDictionaryBadge value={company.renewalQuarter} map={renewalQuarterDict?.map} />
+            )}
+            {visibleCustomTags.map((tag) => {
+              const colorStyle: React.CSSProperties | undefined = tag.color
+                ? { color: tag.color, borderColor: tag.color, backgroundColor: `${tag.color}1A` }
+                : undefined
+              return (
+                <Badge
+                  key={tag.id}
+                  variant="outline"
+                  className="rounded-sm gap-1.5 text-xs font-medium"
+                  style={colorStyle}
+                >
+                  {tag.label}
+                </Badge>
+              )
+            })}
+            {hiddenCustomTagsCount > 0 ? (
+              <Badge variant="outline" className="rounded-sm gap-1.5 text-xs font-medium">
+                +{hiddenCustomTagsCount} {t('customers.companies.detail.header.more', 'more')}
+              </Badge>
+            ) : null}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-auto rounded-sm px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground"
+              onClick={() => setManageTagsOpen(true)}
+            >
+              <Pencil className="mr-1 size-3" />
+              {t('customers.companies.detail.actions.manageTags', 'Edit tags')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Right side: actions */}
+        <div className="flex w-full shrink-0 flex-col items-start gap-3 sm:w-auto sm:items-end">
+          <div className="flex w-full flex-wrap items-center justify-start gap-2 sm:w-auto sm:justify-end">
+            <IconButton
+              variant="outline"
+              size="sm"
+              type="button"
+              aria-label={t('customers.companies.detail.actions.delete', 'Delete company')}
+              onClick={() => {
+                void onDelete()
+              }}
+            >
+              <Trash2 className="size-4" />
+            </IconButton>
+            <Button
+              type="button"
+              size="sm"
+              onClick={onSave}
+              disabled={!isDirty || isSaving}
+            >
+              {t('customers.companies.detail.actions.save', 'Save')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <CompanyTagsDialog
+        open={manageTagsOpen}
+        onClose={() => setManageTagsOpen(false)}
+        entityId={company.id}
+        companyOrganizationId={company.organizationId ?? null}
+        companyData={{
+          status: company.status,
+          lifecycleStage: company.lifecycleStage,
+          source: company.source,
+          temperature: company.temperature,
+          renewalQuarter: company.renewalQuarter,
+          industry: profile?.industry ?? null,
+          customFields: data.customFields,
+          tags: data.tags,
+        }}
+        onSaved={() => {
+          void invalidateCustomerDictionary(queryClient, 'statuses')
+          void invalidateCustomerDictionary(queryClient, 'lifecycle-stages')
+          void invalidateCustomerDictionary(queryClient, 'sources')
+          void invalidateCustomerDictionary(queryClient, 'temperature')
+          void invalidateCustomerDictionary(queryClient, 'renewal-quarters')
+          onDataReload?.()
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import {
+  Users,
+  Handshake,
+  Clock,
+  History,
+  Paperclip,
+} from 'lucide-react'
+
+export type CompanyTabId =
+  | 'people'
+  | 'deals'
+  | 'activity-log'
+  | 'changelog'
+  | 'files'
+  | string
+
+type TabDef = {
+  id: CompanyTabId
+  label: string
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+}
+
+type CompanyDetailTabsProps = {
+  activeTab: CompanyTabId
+  onTabChange: (tab: CompanyTabId) => void
+  injectedTabs?: Array<{ id: string; label: string; priority?: number }>
+  peopleCount?: number
+  dealsCount?: number
+  activitiesCount?: number
+  filesCount?: number
+  children: React.ReactNode
+}
+
+const LEGACY_TAB_MAP: Record<string, CompanyTabId> = {
+  notes: 'people',
+  activities: 'activity-log',
+  addresses: 'people',
+  tasks: 'people',
+  dashboard: 'people',
+  'dane-firmy': 'people',
+  analysis: 'people',
+}
+
+export function resolveLegacyTab(tab: string | null | undefined): CompanyTabId {
+  if (!tab) return 'people'
+  if (LEGACY_TAB_MAP[tab]) return LEGACY_TAB_MAP[tab]
+  return tab as CompanyTabId
+}
+
+function NewBadge() {
+  return (
+    <span className="ml-1.5 rounded bg-foreground px-1.5 py-0.5 text-overline font-semibold leading-none text-background">
+      NEW
+    </span>
+  )
+}
+
+function CountBadge({ count }: { count: number }) {
+  if (count <= 0) return null
+  return (
+    <span className="ml-1.5 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground">
+      {count > 999 ? '999+' : count}
+    </span>
+  )
+}
+
+export function CompanyDetailTabs({
+  activeTab,
+  onTabChange,
+  injectedTabs = [],
+  peopleCount = 0,
+  dealsCount = 0,
+  activitiesCount = 0,
+  filesCount = 0,
+  children,
+}: CompanyDetailTabsProps) {
+  const t = useT()
+
+  const builtInTabs: TabDef[] = React.useMemo(
+    () => [
+      {
+        id: 'people',
+        label: t('customers.companies.detail.tabs.people', 'People'),
+        icon: <Users className="size-4" />,
+        badge: <CountBadge count={peopleCount} />,
+      },
+      {
+        id: 'deals',
+        label: t('customers.companies.detail.tabs.deals', 'Deals'),
+        icon: <Handshake className="size-4" />,
+        badge: <CountBadge count={dealsCount} />,
+      },
+      {
+        id: 'activity-log',
+        label: t('customers.companies.detail.tabs.activityLog', 'Activity log'),
+        icon: <Clock className="size-4" />,
+        badge: <CountBadge count={activitiesCount} />,
+      },
+      {
+        id: 'changelog',
+        label: t('customers.companies.detail.tabs.changelog', 'Changelog'),
+        icon: <History className="size-4" />,
+        badge: <NewBadge />,
+      },
+      {
+        id: 'files',
+        label: t('customers.companies.detail.tabs.files', 'Files'),
+        icon: <Paperclip className="size-4" />,
+        badge: <CountBadge count={filesCount} />,
+      },
+    ],
+    [t, peopleCount, dealsCount, activitiesCount, filesCount],
+  )
+
+  const allTabs: TabDef[] = React.useMemo(
+    () => [
+      ...builtInTabs,
+      ...injectedTabs.map((tab) => ({
+        id: tab.id as CompanyTabId,
+        label: tab.label,
+      })),
+    ],
+    [builtInTabs, injectedTabs],
+  )
+
+  return (
+    <div>
+      {/* Tab navigation */}
+      <div className="border-b" role="tablist" aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}>
+        <nav className="-mb-px flex gap-1 overflow-x-auto px-1">
+          {allTabs.map((tab) => {
+            const isActive = activeTab === tab.id
+            return (
+              <Button
+                key={tab.id}
+                type="button"
+                variant="ghost"
+                size="sm"
+                role="tab"
+                aria-selected={isActive}
+                onClick={() => onTabChange(tab.id)}
+                className={cn(
+                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',
+                  isActive
+                    ? 'border-foreground text-foreground font-semibold'
+                    : 'border-transparent text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {tab.icon && <span className="mr-1.5">{tab.icon}</span>}
+                {tab.label}
+                {tab.badge}
+              </Button>
+            )
+          })}
+        </nav>
+      </div>
+
+      {/* Tab content */}
+      <div className="pt-6" role="tabpanel">
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,206 @@
+"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 {
+  readJsonFromLocalStorage,
+  writeJsonToLocalStorage,
+  removeLocalStorageKey,
+} from '@open-mercato/shared/lib/browser/safeLocalStorage'
+import type { CompanyOverview, DealSummary, InteractionSummary } from '../formConfig'
+import { formatCurrency } from './utils'
+
+const STORAGE_KEY = 'om:company-detail-kpi-hidden'
+
+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)
+}
+
+function getActiveDeals(deals: DealSummary[]): DealSummary[] {
+  return deals.filter((d) => d.status !== 'won' && d.status !== 'lost' && d.status !== 'closed')
+}
+
+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' }
+}
+
+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' }
+}
+
+type CompanyKpiBarProps = {
+  data: CompanyOverview
+}
+
+export function CompanyKpiBar({ data }: CompanyKpiBarProps) {
+  const t = useT()
+
+  const activeDeals = React.useMemo(() => getActiveDeals(data.deals), [data.deals])
+  const activeDealsValue = React.useMemo(
+    () => data.kpis?.activeDealsValue ?? sumActiveDeals(data.deals),
+    [data.deals, data.kpis?.activeDealsValue],
+  )
+  const dealCurrency = data.kpis?.dealCurrency ?? activeDeals[0]?.valueCurrency ?? data.deals[0]?.valueCurrency ?? 'PLN'
+  const activityTrend = React.useMemo(
+    () => data.kpis?.activityTrend ?? computeActivityTrend(data.interactions),
+    [data.interactions, data.kpis?.activityTrend],
+  )
+  const dealTrend = React.useMemo(() => computeDealTrend(data.deals), [data.deals])
+
+  const ltvValue = React.useMemo(() => {
+    if (data.kpis?.ltvValue !== undefined) return data.kpis.ltvValue
+    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, data.kpis?.ltvValue])
+
+  const clientTenureYears = React.useMemo(() => {
+    if (data.kpis?.clientTenureYears !== undefined) return data.kpis.clientTenureYears
+    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, data.kpis?.clientTenureYears])
+
+  const [hiddenTiles, setHiddenTiles] = React.useState<Set<string>>(
+    () => new Set(readJsonFromLocalStorage<string[]>(STORAGE_KEY, [])),
+  )
+
+  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(STORAGE_KEY, [...next])
+      return next
+    })
+  }, [])
+
+  const showAllTiles = React.useCallback(() => {
+    setHiddenTiles(new Set())
+    removeLocalStorageKey(STORAGE_KEY)
+  }, [])
+
+  const kpiTiles = React.useMemo(() => [
+    {
+      id: 'activeDeals',
+      title: t('customers.companies.dashboard.kpi.activeDeals', 'ACTIVE DEALS'),
+      value: activeDealsValue,
+      trend: dealTrend,
+      formatValue: (v: number) => formatCurrency(v, dealCurrency),
+      comparisonLabel: `${data.kpis?.activeDealsCount ?? activeDeals.length} ${(data.kpis?.activeDealsCount ?? activeDeals.length) === 1 ? 'pipeline' : 'pipelines'}`,
+    },
+    {
+      id: 'activities',
+      title: t('customers.companies.dashboard.kpi.activities', 'ACTIVITIES'),
+      value: data.kpis?.activityCount ?? 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.kpis?.completedDealsCount ?? 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'),
+    },
+  ], [t, activeDealsValue, dealTrend, dealCurrency, activeDeals.length, activityTrend, ltvValue, clientTenureYears, data.deals, data.interactions.length, data.kpis])
+
+  const visibleTiles = kpiTiles.filter((tile) => !hiddenTiles.has(tile.id))
+
+  return (
+    <div className="space-y-2">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {visibleTiles.map((tile) => (
+          <div key={tile.id} className="group relative">
+            <KpiCard
+              title={tile.title}
+              value={tile.value}
+              trend={tile.trend}
+              formatValue={tile.formatValue}
+              comparisonLabel={tile.comparisonLabel}
+            />
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="xs"
+              onClick={() => toggleTile(tile.id)}
+              className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-60"
+              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 px-1.5 py-0.5 text-xs hover:bg-transparent"
+            onClick={showAllTiles}
+          >
+            {t('customers.companies.dashboard.showAll', 'Show all')}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}