@open-mercato/core 0.5.1-develop.2996.ce62fd491c → 0.5.1-develop.3036.f02c281f23

package/src/modules/auth/backend/sidebar-customization/page.meta.ts

@@ -9,16 +9,9 @@ const sidebarCustomizeIcon = React.createElement(
   React.createElement('path', { d: 'M17.5 14v7' }),
 )
 
-// Page is reachable by any authenticated user — every staff user has
-// always been able to customize their PERSONAL sidebar (the variants /
-// preferences APIs gate only role-application via `auth.sidebar.manage`).
-// Inside the editor, the "Apply to roles" card and role variants picker are
-// already conditionally hidden via `canApplyToRoles` (server-checked against
-// `auth.sidebar.manage`), so non-admins see only the personal-scope flow,
-// matching the pre-PR inline-editor behavior. Restricting the whole page
-// to `auth.sidebar.manage` would be a stealth regression for non-admins.
 export const metadata = {
   requireAuth: true,
+  requireFeatures: ['auth.sidebar.manage'],
   pageTitle: 'Customize sidebar',
   pageTitleKey: 'appShell.customizeSidebar',
   pageGroup: 'Customization',

package/src/modules/customers/api/companies/[id]/route.ts

@@ -42,7 +42,10 @@ import type { EntityId } from '@open-mercato/shared/modules/entities'
 import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
 import { findOneWithDecryption, findWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { parseBooleanFromUnknown } from '@open-mercato/shared/lib/boolean'
-import { withActiveCustomerPersonCompanyLinkFilter } from '../../../lib/personCompanyLinkTable'
+import {
+  filterActivePersonCompanyLinks,
+  withActiveCustomerPersonCompanyLinkFilter,
+} from '../../../lib/personCompanyLinkTable'
 import { normalizeCustomerDetailCustomFields } from '../../detailCustomFields'
 
 export const metadata = {
@@ -703,15 +706,17 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
       },
       'customers.companies.GET',
     )
-    const companyLinks = await findWithDecryption(
-      em,
-      CustomerPersonCompanyLink,
-      companyLinkWhere,
-      {
-        populate: ['person', 'person.personProfile'],
-        orderBy: { isPrimary: 'desc', createdAt: 'asc' },
-      },
-      peopleDecryptionScope,
+    const companyLinks = filterActivePersonCompanyLinks(
+      await findWithDecryption(
+        em,
+        CustomerPersonCompanyLink,
+        companyLinkWhere,
+        {
+          populate: ['person', 'person.personProfile'],
+          orderBy: { isPrimary: 'desc', createdAt: 'asc' },
+        },
+        peopleDecryptionScope,
+      ),
     )
     companyLinks.forEach((link) => {
       const entity = typeof link.person === 'string' ? null : link.person
@@ -829,18 +834,23 @@ export async function GET(_req: Request, ctx: { params?: { id?: string } }) {
       })
   const peopleCount = includePeople
     ? relatedPeople.length
-    : await em.count(
-        CustomerPersonCompanyLink,
-        await withActiveCustomerPersonCompanyLinkFilter(
+    : filterActivePersonCompanyLinks(
+        await findWithDecryption(
           em,
-          {
-            company: company.id,
-            organizationId: company.organizationId,
-            tenantId: company.tenantId,
-          },
-          'customers.companies.GET',
+          CustomerPersonCompanyLink,
+          await withActiveCustomerPersonCompanyLinkFilter(
+            em,
+            {
+              company: company.id,
+              organizationId: company.organizationId,
+              tenantId: company.tenantId,
+            },
+            'customers.companies.GET',
+          ),
+          {},
+          { tenantId: company.tenantId, organizationId: company.organizationId },
         ),
-      )
+      ).length
   const kpiInteractionRows = canonicalActiveInteractions.length
     ? canonicalActiveInteractions
     : await findWithDecryption(

package/src/modules/customers/api/companies/route.ts

@@ -33,7 +33,10 @@ import {
   createPagedListResponseSchema,
   defaultOkResponseSchema,
 } from '../openapi'
-import { withActiveCustomerPersonCompanyLinkFilter } from '../../lib/personCompanyLinkTable'
+import {
+  filterActivePersonCompanyLinks,
+  withActiveCustomerPersonCompanyLinkFilter,
+} from '../../lib/personCompanyLinkTable'
 import { normalizeCompanyProfilePayload } from './payload'
 
 const rawBodySchema = z.object({}).passthrough()
@@ -217,12 +220,14 @@ const crud = makeCrudRoute({
             { person: query.excludeLinkedPersonId },
             'customers.companies.GET',
           )
-          const links = await findWithDecryption(
-            em,
-            CustomerPersonCompanyLink,
-            linkWhere,
-            { populate: ['company'] },
-            decryptionScope,
+          const links = filterActivePersonCompanyLinks(
+            await findWithDecryption(
+              em,
+              CustomerPersonCompanyLink,
+              linkWhere,
+              { populate: ['company'] },
+              decryptionScope,
+            ),
           )
           links.forEach((link) => {
             const companyId = link.company?.id

package/src/modules/customers/api/people/[id]/companies/enriched/route.ts

@@ -20,7 +20,10 @@ import {
   CustomerDeal,
   CustomerInteraction,
 } from '../../../../../data/entities'
-import { withActiveCustomerPersonCompanyLinkFilter } from '../../../../../lib/personCompanyLinkTable'
+import {
+  filterActivePersonCompanyLinks,
+  withActiveCustomerPersonCompanyLinkFilter,
+} from '../../../../../lib/personCompanyLinkTable'
 
 const paramsSchema = z.object({
   id: z.string().uuid(),
@@ -187,12 +190,14 @@ export async function GET(req: Request, ctx: { params?: { id?: string } }) {
       },
       'customers.people.companiesEnriched.GET',
     )
-    const links = await findWithDecryption(
-      em,
-      CustomerPersonCompanyLink,
-      linkWhere,
-      { populate: ['company'] },
-      entityScope,
+    const links = filterActivePersonCompanyLinks(
+      await findWithDecryption(
+        em,
+        CustomerPersonCompanyLink,
+        linkWhere,
+        { populate: ['company'] },
+        entityScope,
+      ),
     )
 
     const companyIds = links.map((link) => (link.company as CustomerEntity).id)

package/src/modules/customers/api/people/route.ts

@@ -29,7 +29,10 @@ import {
   createPagedListResponseSchema,
   defaultOkResponseSchema,
 } from '../openapi'
-import { withActiveCustomerPersonCompanyLinkFilter } from '../../lib/personCompanyLinkTable'
+import {
+  filterActivePersonCompanyLinks,
+  withActiveCustomerPersonCompanyLinkFilter,
+} from '../../lib/personCompanyLinkTable'
 import { normalizeProfilePayload } from './payload'
 
 const rawBodySchema = z.object({}).passthrough()
@@ -221,12 +224,14 @@ const crud = makeCrudRoute({
             { company: query.excludeLinkedCompanyId },
             'customers.people.GET',
           )
-          const links = await findWithDecryption(
-            em,
-            CustomerPersonCompanyLink,
-            linkWhere,
-            { populate: ['person'] },
-            decryptionScope,
+          const links = filterActivePersonCompanyLinks(
+            await findWithDecryption(
+              em,
+              CustomerPersonCompanyLink,
+              linkWhere,
+              { populate: ['person'] },
+              decryptionScope,
+            ),
           )
           links.forEach((link) => {
             const personId = link.person?.id

package/src/modules/customers/backend/customers/companies-v2/[id]/page.tsx

@@ -219,6 +219,27 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
     setScheduleDialogOpen(true)
   }, [])
 
+  const handleAddActivity = React.useCallback((kind: 'meeting' | 'call' | 'task' | 'email') => {
+    setScheduleEditData({
+      id: '',
+      interactionType: kind,
+      title: null,
+      body: null,
+      scheduledAt: null,
+      durationMinutes: null,
+      location: null,
+      allDay: null,
+      recurrenceRule: null,
+      recurrenceEnd: null,
+      participants: null,
+      reminderMinutes: null,
+      visibility: null,
+      linkedEntities: null,
+      guestPermissions: null,
+    })
+    setScheduleDialogOpen(true)
+  }, [])
+
   // Injected tabs from UMES
   const { widgets: injectedTabWidgets } = useInjectionWidgets('detail:customers.company:tabs', {
     context: injectionContext,
@@ -473,6 +494,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
                     plannedActivities={plannedActivities}
                     onActivityCreated={handleActivityCreated}
                     onScheduleRequested={openNewScheduleDialog}
+                    onAddActivity={handleAddActivity}
                     onMarkDone={handleMarkDone}
                     onEditActivity={handleEditActivity}
                     onCancelActivity={handleCancelActivity}

package/src/modules/customers/backend/customers/people-v2/[id]/page.tsx

@@ -23,18 +23,17 @@ import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuarde
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 
 import { ActivitiesSection } from '../../../../components/detail/ActivitiesSection'
+import { ActivitiesCard } from '../../../../components/detail/ActivitiesCard'
+import type { ActivityKind } from '../../../../components/detail/ActivitiesAddNewMenu'
 import { DealsSection } from '../../../../components/detail/DealsSection'
 import { TasksSection } from '../../../../components/detail/TasksSection'
 import type { TagSummary } from '../../../../components/detail/types'
-import { InlineActivityComposer } from '../../../../components/detail/InlineActivityComposer'
-import { PlannedActivitiesSection } from '../../../../components/detail/PlannedActivitiesSection'
 import { ScheduleActivityDialog, type ScheduleActivityEditData } from '../../../../components/detail/ScheduleActivityDialog'
 import { PersonDetailHeader } from '../../../../components/detail/PersonDetailHeader'
 import { ChangelogTab } from '../../../../components/detail/ChangelogTab'
 import { PersonDetailTabs, resolveLegacyTab, type PersonTabId } from '../../../../components/detail/PersonDetailTabs'
 import { PersonCompaniesSection } from '../../../../components/detail/PersonCompaniesSection'
 import { MobilePersonDetail } from '../../../../components/detail/MobilePersonDetail'
-import { useInteractionMutations } from '../../../../components/detail/hooks/useInteractionMutations'
 import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
 import {
   buildPersonEditPayload,
@@ -190,11 +189,26 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
     [injectionContext, runMutation],
   )
 
-  const { completeInteraction: handleMarkDone, cancelInteraction: handleCancelActivity } = useInteractionMutations({
-    runMutationWithContext,
-    onAfterChange: handleActivityCreated,
-    logContext: 'customers.people-v2',
-  })
+  const handleAddActivity = React.useCallback((kind: ActivityKind) => {
+    setScheduleEditData({
+      id: '',
+      interactionType: kind,
+      title: null,
+      body: null,
+      scheduledAt: null,
+      durationMinutes: null,
+      location: null,
+      allDay: null,
+      recurrenceRule: null,
+      recurrenceEnd: null,
+      participants: null,
+      reminderMinutes: null,
+      visibility: null,
+      linkedEntities: null,
+      guestPermissions: null,
+    })
+    setScheduleDialogOpen(true)
+  }, [])
 
   const handleEditActivity = React.useCallback((activity: { id: string; interactionType?: string; title?: string | null; body?: string | null; scheduledAt?: string | null; [key: string]: unknown }) => {
     const raw = activity as Record<string, unknown>
@@ -448,20 +462,13 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
                   if (activeTab === 'activities') {
                     return (
                       <div className="space-y-4">
-                        <InlineActivityComposer
-                          entityType="person"
+                        <ActivitiesCard
                           entityId={personId}
-                          onActivityCreated={handleActivityCreated}
-                          runGuardedMutation={runMutationWithContext}
-                          onScheduleRequested={() => { setScheduleEditData(null); setScheduleDialogOpen(true) }}
-                          useCanonicalInteractions={useCanonicalInteractions}
-                        />
-                        <PlannedActivitiesSection
-                          activities={plannedActivities}
-                          onComplete={handleMarkDone}
-                          onSchedule={() => { setScheduleEditData(null); setScheduleDialogOpen(true) }}
-                          onEdit={handleEditActivity}
-                          onCancel={handleCancelActivity}
+                          plannedActivities={plannedActivities}
+                          refreshKey={activityRefreshKey}
+                          onAddNew={handleAddActivity}
+                          onEditActivity={handleEditActivity}
+                          entityCompanyName={data.company?.displayName ?? data.companies?.[0]?.displayName ?? null}
                         />
                         <ActivitiesSection
                           entityId={personId}

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

@@ -0,0 +1,67 @@
+'use client'
+
+import * as React from 'react'
+import { Check, Phone, Mail, Users, CheckSquare } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+
+export type ActivityKind = 'meeting' | 'call' | 'task' | 'email'
+
+interface ActivitiesAddNewMenuProps {
+  onSelect: (kind: ActivityKind) => void
+  disabled?: boolean
+}
+
+const MENU_ITEMS: ReadonlyArray<{ kind: ActivityKind; icon: React.ComponentType<{ className?: string }>; key: string; fallback: string }> = [
+  { kind: 'meeting', icon: Users, key: 'customers.activities.add.meeting', fallback: 'New meeting' },
+  { kind: 'call', icon: Phone, key: 'customers.activities.add.call', fallback: 'Log call' },
+  { kind: 'task', icon: CheckSquare, key: 'customers.activities.add.task', fallback: 'New task' },
+  { kind: 'email', icon: Mail, key: 'customers.activities.add.email', fallback: 'Compose email' },
+]
+
+export function ActivitiesAddNewMenu({ onSelect, disabled }: ActivitiesAddNewMenuProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+
+  const handleSelect = React.useCallback(
+    (kind: ActivityKind) => {
+      setOpen(false)
+      onSelect(kind)
+    },
+    [onSelect],
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={t('customers.activities.addNew', 'Add new')}
+          className="inline-flex items-center gap-1.5 overflow-hidden rounded-md bg-foreground pl-3 pr-3.5 py-2 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:opacity-60"
+        >
+          <Check className="size-3.5" />
+          {t('customers.activities.addNew', 'Add new')}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[180px] p-1">
+        <ul className="flex flex-col">
+          {MENU_ITEMS.map(({ kind, icon: Icon, key, fallback }) => (
+            <li key={kind}>
+              <button
+                type="button"
+                onClick={() => handleSelect(kind)}
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-accent/40"
+              >
+                <Icon className="size-4 text-muted-foreground" />
+                {t(key, fallback)}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ActivitiesAddNewMenu

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

@@ -0,0 +1,231 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, CalendarClock, Clock, Mail, Phone, StickyNote, Users } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { ActivitiesDayStrip } from './ActivitiesDayStrip'
+import { ActivitiesAddNewMenu, type ActivityKind } from './ActivitiesAddNewMenu'
+import type { InteractionSummary } from './types'
+
+interface ActivitiesCardProps {
+  entityId: string
+  plannedActivities: InteractionSummary[]
+  refreshKey?: number
+  onAddNew: (kind: ActivityKind) => void
+  onEditActivity?: (activity: InteractionSummary) => void
+  /**
+   * Optional company name for the parent entity. When the planned activity has no `dealTitle`,
+   * the row subtitle falls back to "{type} · {company}" to mirror Figma 784:809.
+   */
+  entityCompanyName?: string | null
+}
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote,
+}
+
+function startOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function isOverdue(activity: InteractionSummary, now: Date): boolean {
+  const scheduled = activity.scheduledAt ?? activity.occurredAt
+  if (!scheduled) return false
+  const date = new Date(scheduled)
+  if (Number.isNaN(date.getTime())) return false
+  return date.getTime() < now.getTime() && activity.status !== 'done'
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatRelativeDay(date: Date, t: TranslateFn): string {
+  const now = new Date()
+  const today = startOfDay(now)
+  const target = startOfDay(date)
+  const diff = Math.round((target.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+  if (diff === 0) return t('customers.timeline.date.today', 'today')
+  if (diff === 1) return t('customers.timeline.date.tomorrow', 'tomorrow')
+  if (diff === -1) return t('customers.timeline.date.yesterday', 'yesterday')
+  return target.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+}
+
+function formatDuration(minutes: number, t: TranslateFn): string {
+  if (minutes >= 60) {
+    const hours = Math.round((minutes / 60) * 10) / 10
+    return t('customers.activities.calendar.hoursShort', '{hours}h', { hours })
+  }
+  return t('customers.activities.calendar.minutesShort', '{minutes}m', { minutes })
+}
+
+export function ActivitiesCard({
+  entityId,
+  plannedActivities,
+  refreshKey = 0,
+  onAddNew,
+  onEditActivity,
+  entityCompanyName,
+}: ActivitiesCardProps) {
+  const t = useT()
+  const [selectedDate, setSelectedDate] = React.useState<Date>(() => startOfDay(new Date()))
+
+  const eventsForSelectedDay = React.useMemo(() => {
+    const items = plannedActivities.filter((activity) => {
+      const scheduled = activity.scheduledAt ?? activity.occurredAt
+      if (!scheduled) return false
+      const date = new Date(scheduled)
+      if (Number.isNaN(date.getTime())) return false
+      return isSameDay(date, selectedDate)
+    })
+    return items.sort((left, right) => {
+      const leftTime = new Date(left.scheduledAt ?? left.occurredAt ?? left.createdAt).getTime()
+      const rightTime = new Date(right.scheduledAt ?? right.occurredAt ?? right.createdAt).getTime()
+      return leftTime - rightTime
+    })
+  }, [plannedActivities, selectedDate])
+
+  const overdueCount = React.useMemo(() => {
+    const now = new Date()
+    return plannedActivities.filter((activity) => isOverdue(activity, now)).length
+  }, [plannedActivities])
+
+  return (
+    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card pt-4 pb-4 px-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Calendar className="size-4 text-foreground" />
+          <h3 className="text-sm font-semibold leading-none text-foreground">
+            {t('customers.activities.card.title', 'Activities')}
+          </h3>
+          {overdueCount > 0 ? (
+            <span className="inline-flex items-center gap-1 rounded-full bg-status-error-bg px-1.5 py-0.5 text-xs font-medium text-status-error-text">
+              <CalendarClock className="size-3" />
+              {t('customers.activities.card.overdue', '{count} overdue', { count: overdueCount })}
+            </span>
+          ) : null}
+        </div>
+        <ActivitiesAddNewMenu onSelect={onAddNew} />
+      </div>
+
+      <ActivitiesDayStrip
+        entityId={entityId}
+        selectedDate={selectedDate}
+        onSelectDate={setSelectedDate}
+        refreshKey={refreshKey}
+      />
+
+      {eventsForSelectedDay.length > 0 ? (
+        <>
+          <div className="h-px w-full bg-border" />
+          <ul className="flex flex-col">
+            {eventsForSelectedDay.map((activity) => (
+              <PlannedEventRow
+                key={activity.id}
+                activity={activity}
+                onClick={onEditActivity}
+                entityCompanyName={entityCompanyName ?? null}
+                t={t}
+              />
+            ))}
+          </ul>
+        </>
+      ) : (
+        <>
+          <div className="h-px w-full bg-border" />
+          <p className="px-1 py-2 text-xs text-muted-foreground">
+            {t('customers.activities.card.empty', 'Nothing scheduled for this day.')}
+          </p>
+        </>
+      )}
+    </div>
+  )
+}
+
+interface PlannedEventRowProps {
+  activity: InteractionSummary
+  onClick?: (activity: InteractionSummary) => void
+  entityCompanyName: string | null
+  t: TranslateFn
+}
+
+function PlannedEventRow({ activity, onClick, entityCompanyName, t }: PlannedEventRowProps) {
+  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt
+  const date = new Date(dateStr)
+  const validDate = !Number.isNaN(date.getTime())
+  const Icon = TYPE_ICONS[activity.interactionType] ?? Users
+  const duration = typeof activity.duration === 'number' && activity.duration > 0 ? activity.duration : null
+  const overdue = validDate && date.getTime() < Date.now() && activity.status !== 'done'
+  const typeLabel = labelForType(activity.interactionType, t)
+  const subtitleSuffix = activity.dealTitle ?? entityCompanyName ?? null
+  const subtitle = subtitleSuffix ? `${typeLabel} · ${subtitleSuffix}` : typeLabel
+  const interactive = !!onClick
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={interactive ? () => onClick?.(activity) : undefined}
+        disabled={!interactive}
+        className={cn(
+          'flex w-full items-start gap-[9px] pt-[8px] text-left transition-colors',
+          interactive ? 'cursor-pointer rounded-md hover:bg-accent/30 px-1' : 'px-1',
+        )}
+      >
+        <div className="flex h-[44px] w-[43px] shrink-0 flex-col gap-[2px] pt-[2px]">
+          <span className="text-xs font-semibold leading-none text-foreground">
+            {validDate ? formatTime(date) : ''}
+          </span>
+          <span className="text-[10px] leading-none font-normal text-muted-foreground">
+            {validDate ? formatRelativeDay(date, t) : ''}
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center justify-center rounded-full bg-muted border-4 border-background size-7">
+          <Icon className="size-4 text-muted-foreground" />
+        </div>
+        <div className="min-w-0 flex flex-1 flex-col gap-[4px]">
+          <span className="text-sm leading-5 tracking-[-0.084px] text-foreground">
+            {activity.title ?? activity.body ?? labelForType(activity.interactionType, t)}
+          </span>
+          {duration ? (
+            <span className={cn(
+              'inline-flex w-fit items-center gap-[2px] rounded-full pl-[4px] pr-[8px] py-[2px] text-xs font-medium leading-[16px]',
+              overdue
+                ? 'bg-status-error-bg text-status-error-text'
+                : 'bg-status-warning-bg text-status-warning-text',
+            )}>
+              <Clock className="size-4" />
+              {formatDuration(duration, t)}
+            </span>
+          ) : null}
+          <span className="text-[11px] font-normal text-muted-foreground">{subtitle}</span>
+        </div>
+      </button>
+    </li>
+  )
+}
+
+function labelForType(type: string, t: TranslateFn): string {
+  const map: Record<string, [string, string]> = {
+    meeting: ['customers.timeline.filter.meeting', 'Meeting'],
+    call: ['customers.timeline.filter.call', 'Call'],
+    email: ['customers.timeline.filter.email', 'Email'],
+    note: ['customers.timeline.filter.note', 'Note'],
+    task: ['customers.timeline.filter.task', 'Task'],
+  }
+  const entry = map[type]
+  return entry ? t(entry[0], entry[1]) : type
+}
+
+export default ActivitiesCard