@open-mercato/core 0.5.1-develop.2996.ce62fd491c → 0.5.1-develop.3032.01699048cb

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

@@ -1,12 +1,13 @@
 "use client"
 
 import * as React from 'react'
-import { Clock } from 'lucide-react'
+import { Clock, Search } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import type { SectionAction, TabEmptyStateConfig } from '@open-mercato/ui/backend/detail'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Kbd } from '@open-mercato/ui/primitives/kbd'
 import { ActivityTimelineFilters } from './ActivityTimelineFilters'
 import { ActivityTimeline } from './ActivityTimeline'
 import type { ActivitySummary, InteractionSummary } from './types'
@@ -109,10 +110,42 @@ export function ActivitiesSection({
   const [filterTypes, setFilterTypes] = React.useState<string[]>([])
   const [filterDateFrom, setFilterDateFrom] = React.useState('')
   const [filterDateTo, setFilterDateTo] = React.useState('')
+  const [searchTerm, setSearchTerm] = React.useState('')
   const [activities, setActivities] = React.useState<InteractionSummary[]>([])
   const [loading, setLoading] = React.useState(false)
   const [hasMore, setHasMore] = React.useState(false)
   const [loadedPages, setLoadedPages] = React.useState(1)
+  const searchInputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (!entityId) return
+    function handleShortcut(event: KeyboardEvent) {
+      if ((event.metaKey || event.ctrlKey) && event.key === '1') {
+        event.preventDefault()
+        searchInputRef.current?.focus()
+      }
+    }
+    window.addEventListener('keydown', handleShortcut)
+    return () => window.removeEventListener('keydown', handleShortcut)
+  }, [entityId])
+
+  const visibleActivities = React.useMemo(() => {
+    const term = searchTerm.trim().toLowerCase()
+    if (!term) return activities
+    return activities.filter((activity) => {
+      const haystack = [
+        activity.title,
+        activity.body,
+        activity.authorName,
+        activity.dealTitle,
+        activity.interactionType,
+      ]
+        .filter((value): value is string => typeof value === 'string' && value.length > 0)
+        .join(' ')
+        .toLowerCase()
+      return haystack.includes(term)
+    })
+  }, [activities, searchTerm])
 
   React.useEffect(() => {
     onActionChange?.(null)
@@ -269,55 +302,73 @@ export function ActivitiesSection({
     return () => controller.abort()
   }, [activities])
 
+  const totalCount = activities.length
+  const visibleCount = visibleActivities.length
+
   return (
-    <div className="rounded-2xl border border-border/70 bg-card p-5">
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Clock className="size-4 text-muted-foreground" />
-          <h3 className="text-base font-semibold text-foreground">
-            {entityName
-              ? t('customers.timeline.history.title', 'Interaction history with {{name}}', { name: entityName })
-              : t('customers.timeline.history.titleGeneric', 'Interaction history')}
-          </h3>
-        </div>
+    <div className="flex flex-col gap-3.5 rounded-[10px] border border-border bg-card pt-4 pb-[18px] px-[18px]">
+      <div className="flex items-center gap-2">
+        <Clock className="size-[15px] text-muted-foreground" />
+        <h3 className="text-[13px] font-semibold text-foreground">
+          {entityName
+            ? t('customers.timeline.history.title', 'Interaction history with {{name}}', { name: entityName })
+            : t('customers.timeline.history.titleGeneric', 'Interaction history')}
+        </h3>
       </div>
 
-      <div className="mb-4">
-        <ActivityTimelineFilters
-          entityId={entityId}
-          activeTypes={filterTypes}
-          dateFrom={filterDateFrom}
-          dateTo={filterDateTo}
-          onTypesChange={setFilterTypes}
-          onDateFromChange={setFilterDateFrom}
-          onDateToChange={setFilterDateTo}
-          onReset={() => {
-            setFilterTypes([])
-            setFilterDateFrom('')
-            setFilterDateTo('')
-          }}
+      <label className="relative flex items-center">
+        <Search className="pointer-events-none absolute left-2.5 size-5 text-muted-foreground" aria-hidden />
+        <input
+          ref={searchInputRef}
+          type="search"
+          value={searchTerm}
+          onChange={(event) => setSearchTerm(event.target.value)}
+          placeholder={t('customers.timeline.history.searchPlaceholder', 'Search...')}
+          aria-label={t('customers.timeline.history.searchAriaLabel', 'Search interaction history')}
+          className="h-9 w-full rounded-[10px] border border-border bg-card pl-9 pr-14 text-sm text-foreground shadow-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
         />
-      </div>
+        <Kbd className="pointer-events-none absolute right-2 hidden text-[11px] uppercase tracking-[0.48px] sm:inline-flex">
+          ⌘1
+        </Kbd>
+      </label>
+
+      <ActivityTimelineFilters
+        entityId={entityId}
+        activeTypes={filterTypes}
+        dateFrom={filterDateFrom}
+        dateTo={filterDateTo}
+        onTypesChange={setFilterTypes}
+        onDateFromChange={setFilterDateFrom}
+        onDateToChange={setFilterDateTo}
+        onReset={() => {
+          setFilterTypes([])
+          setFilterDateFrom('')
+          setFilterDateTo('')
+        }}
+      />
 
-      {loading && activities.length === 0 ? (
+      {loading && totalCount === 0 ? (
         <div className="rounded-lg border border-dashed border-border/70 px-4 py-8 text-sm text-muted-foreground">
           {t('customers.people.detail.activities.loading', 'Loading activities…')}
         </div>
       ) : (
         <>
-          <ActivityTimeline activities={activities} onEdit={onEditActivity} />
-          {activities.length > 0 ? (
-            <div className="border-t px-5 py-3">
-              <div className="flex items-center justify-between gap-3">
-                <span className="text-xs text-muted-foreground">
-                  {t('customers.activities.seeAll', 'See all {count} activities', { count: activities.length })}
-                </span>
-                {hasMore ? (
-                  <Button type="button" variant="link" size="sm" onClick={() => setLoadedPages((value) => value + 1)}>
-                    {t('customers.activities.loadMore', 'Load more')}
-                  </Button>
-                ) : null}
-              </div>
+          <ActivityTimeline activities={visibleActivities} onEdit={onEditActivity} />
+          {totalCount > 0 ? (
+            <div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3">
+              <span className="text-xs text-muted-foreground">
+                {searchTerm.trim()
+                  ? t('customers.activities.seeMatching', 'Showing {visible} of {total} activities', {
+                      visible: visibleCount,
+                      total: totalCount,
+                    })
+                  : t('customers.activities.seeAll', 'See all {count} activities', { count: totalCount })}
+              </span>
+              {hasMore ? (
+                <Button type="button" variant="link" size="sm" onClick={() => setLoadedPages((value) => value + 1)}>
+                  {t('customers.activities.loadMore', 'Load more')}
+                </Button>
+              ) : null}
             </div>
           ) : null}
         </>

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

@@ -1,7 +1,7 @@
 'use client'
 
-import { InlineActivityComposer } from './InlineActivityComposer'
-import { PlannedActivitiesSection } from './PlannedActivitiesSection'
+import { ActivitiesCard } from './ActivitiesCard'
+import type { ActivityKind } from './ActivitiesAddNewMenu'
 import { ActivityHistorySection } from './ActivityHistorySection'
 import type { InteractionSummary } from './types'
 
@@ -13,45 +13,47 @@ type GuardedMutationRunner = <T,>(
 type ActivityLogTabProps = {
   entityId: string
   plannedActivities: InteractionSummary[]
-  onActivityCreated: () => void
+  /** @deprecated No longer used after the ActivitiesCard refactor. Kept optional for callers; remove after one minor cycle. */
+  onActivityCreated?: () => void
   onScheduleRequested: () => void
-  onMarkDone: (id: string) => void
+  onAddActivity?: (kind: ActivityKind) => void
+  /** @deprecated No longer used after the ActivitiesCard refactor. Kept optional for callers; remove after one minor cycle. */
+  onMarkDone?: (id: string) => void
   onEditActivity: (activity: InteractionSummary) => void
-  onCancelActivity: (id: string) => void
+  /** @deprecated No longer used after the ActivitiesCard refactor. Kept optional for callers; remove after one minor cycle. */
+  onCancelActivity?: (id: string) => void
+  /** @deprecated No longer used after the ActivitiesCard refactor. Kept optional for callers; remove after one minor cycle. */
   runGuardedMutation?: GuardedMutationRunner
   refreshKey?: number
   useCanonicalInteractions?: boolean
+  /** Optional parent-entity company name; surfaces in planned event subtitles when no deal is set. */
+  entityCompanyName?: string | null
 }
 
 export function ActivityLogTab({
   entityId,
   plannedActivities,
-  onActivityCreated,
   onScheduleRequested,
-  onMarkDone,
+  onAddActivity,
   onEditActivity,
-  onCancelActivity,
-  runGuardedMutation,
   refreshKey = 0,
   useCanonicalInteractions = false,
+  entityCompanyName,
 }: ActivityLogTabProps) {
+  const handleAddNew = (kind: ActivityKind) => {
+    if (onAddActivity) onAddActivity(kind)
+    else onScheduleRequested()
+  }
+
   return (
     <div className="space-y-4">
-      <InlineActivityComposer
-        entityType="company"
+      <ActivitiesCard
         entityId={entityId}
-        onActivityCreated={onActivityCreated}
-        runGuardedMutation={runGuardedMutation}
-        onScheduleRequested={onScheduleRequested}
-        useCanonicalInteractions={useCanonicalInteractions}
-      />
-
-      <PlannedActivitiesSection
-        activities={plannedActivities}
-        onComplete={onMarkDone}
-        onSchedule={onScheduleRequested}
-        onEdit={onEditActivity}
-        onCancel={onCancelActivity}
+        plannedActivities={plannedActivities}
+        refreshKey={refreshKey}
+        onAddNew={handleAddNew}
+        onEditActivity={onEditActivity}
+        entityCompanyName={entityCompanyName}
       />
 
       <ActivityHistorySection

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

@@ -80,52 +80,48 @@ function TimelineEntry({
 
   return (
     <div
-      className={`px-5 py-4 ${withBorder ? 'border-b border-border/60' : ''} ${onEdit ? 'cursor-pointer hover:bg-accent/50 transition-colors' : ''}`}
+      className={`py-2.5 ${withBorder ? 'border-b border-border/60' : ''} ${onEdit ? 'cursor-pointer hover:bg-accent/40 transition-colors' : ''}`}
       onClick={() => onEdit?.(activity)}
       role={onEdit ? 'button' : undefined}
       tabIndex={onEdit ? 0 : undefined}
       onKeyDown={onEdit ? (e) => { if (e.key === 'Enter') onEdit(activity) } : undefined}
     >
-      <div className="grid items-start gap-3" style={{ gridTemplateColumns: '72px 40px 1fr' }}>
+      <div className="grid items-start gap-3" style={{ gridTemplateColumns: '75px 32px 1fr' }}>
         {/* Column 1: Date */}
-        <div className="shrink-0 pt-0.5">
-          <span className="block text-xs font-bold leading-tight">
+        <div className="shrink-0">
+          <span className="block text-[11px] font-semibold leading-tight text-foreground">
             {formatRelativeDate(dateStr, t)}
           </span>
-          <span className="block text-xs leading-tight text-muted-foreground">
+          <span className="block text-[10px] leading-tight text-muted-foreground">
             {formatTime(dateStr)}
           </span>
         </div>
 
         {/* Column 2: Type icon */}
-        <div className="flex size-10 items-center justify-center rounded-lg bg-muted shrink-0">
-          {TypeIcon ? <TypeIcon className="size-4 text-muted-foreground" /> : null}
+        <div className="flex size-8 items-center justify-center rounded-md bg-muted shrink-0">
+          {TypeIcon ? <TypeIcon className="size-3.5 text-muted-foreground" /> : null}
         </div>
 
         {/* Column 3: Content */}
-        <div className="min-w-0">
-          <div className="flex items-center gap-1.5">
-            <span className="text-sm font-semibold leading-5">
-              {title}{duration}
-            </span>
-          </div>
+        <div className="min-w-0 space-y-1.5">
+          <span className="block text-[12px] font-semibold leading-tight text-foreground">
+            {title}{duration}
+          </span>
 
           {activity.body && activity.title && (
-            <p className="mt-1 text-sm text-muted-foreground">
+            <p className="text-[11px] leading-snug text-muted-foreground">
               {activity.body}
             </p>
           )}
 
           {activity.authorName && (
-            <div className="mt-1.5 flex items-center gap-1 text-xs text-muted-foreground">
-              <User className="size-3 shrink-0" />
+            <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+              <User className="size-2.5 shrink-0" />
               <span>{t('customers.timeline.author', 'by {{name}}', { name: activity.authorName })}</span>
             </div>
           )}
 
-          <div className="mt-2">
-            <AiActionChips activityType={activity.interactionType} />
-          </div>
+          <AiActionChips activityType={activity.interactionType} />
         </div>
       </div>
     </div>

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

@@ -4,14 +4,15 @@ import { Phone, Mail, Users, StickyNote, SlidersHorizontal } from 'lucide-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 { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 
 const FILTER_TYPES = [
+  { type: 'note', icon: StickyNote },
   { type: 'call', icon: Phone },
-  { type: 'email', icon: Mail },
   { type: 'meeting', icon: Users },
-  { type: 'note', icon: StickyNote },
+  { type: 'email', icon: Mail },
 ] as const
 
 type InteractionCounts = {
@@ -33,6 +34,10 @@ interface ActivityTimelineFiltersProps {
   onReset: () => void
 }
 
+const CHIP_BASE = 'inline-flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium transition-colors'
+const CHIP_INACTIVE = 'border border-border bg-card text-muted-foreground hover:bg-accent/40'
+const CHIP_ACTIVE = 'border border-status-info-border bg-status-info-bg text-status-info-text'
+
 export function ActivityTimelineFilters({
   entityId,
   activeTypes,
@@ -45,6 +50,7 @@ export function ActivityTimelineFilters({
 }: ActivityTimelineFiltersProps) {
   const t = useT()
   const hasActiveFilters = activeTypes.length > 0 || dateFrom || dateTo
+  const allActive = activeTypes.length === 0
   const [counts, setCounts] = React.useState<InteractionCounts | null>(null)
 
   React.useEffect(() => {
@@ -72,54 +78,55 @@ export function ActivityTimelineFilters({
     }
   }, [activeTypes, onTypesChange])
 
+  const handleSelectAll = React.useCallback(() => {
+    onTypesChange([])
+  }, [onTypesChange])
+
   return (
-    <div className="flex flex-col gap-3 border-b border-border/60 pb-4 md:flex-row md:items-center md:justify-between">
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-overline font-bold uppercase tracking-wider text-muted-foreground">
-          {t('customers.people.detail.activities.filterLabel', 'FILTER:')}
-        </span>
+    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-wrap items-center gap-2.5">
+        <button
+          type="button"
+          onClick={handleSelectAll}
+          aria-pressed={allActive}
+          className={cn(CHIP_BASE, allActive ? CHIP_ACTIVE : CHIP_INACTIVE)}
+        >
+          <span>{t('customers.timeline.filter.all', 'All Activities')}</span>
+        </button>
 
         {FILTER_TYPES.map(({ type, icon: Icon }) => {
           const isActive = activeTypes.includes(type)
           const count = counts?.[type as keyof InteractionCounts]
+          const hasCount = typeof count === 'number' && count > 0
           return (
-            <Button
+            <button
               key={type}
               type="button"
-              variant="outline"
-              size="sm"
               onClick={() => handleTypeToggle(type)}
-              className={cn(
-                'h-7 rounded-full px-2.5 text-xs gap-1.5',
-                isActive
-                  ? 'border-foreground bg-background text-foreground'
-                  : 'border-border bg-background text-muted-foreground',
-              )}
               aria-pressed={isActive}
+              className={cn(CHIP_BASE, isActive ? CHIP_ACTIVE : CHIP_INACTIVE)}
             >
-              <Icon className="size-2.5" />
-              <span className="font-semibold">{t(`customers.timeline.filter.${type}`, type)}</span>
-              {typeof count === 'number' && count > 0 ? (
-                <span className="rounded-full bg-muted px-1 text-overline leading-4 text-muted-foreground">
-                  {count}
-                </span>
-              ) : null}
-            </Button>
+              <Icon className="size-[18px] shrink-0" />
+              <span>
+                {t(`customers.timeline.filter.${type}`, type)}
+                {hasCount ? ` ${count}` : ''}
+              </span>
+            </button>
           )
         })}
       </div>
 
       <Popover>
         <PopoverTrigger asChild>
-          <Button
+          <IconButton
             type="button"
             variant="outline"
             size="sm"
-            className="h-7 rounded-md px-2.5 text-xs text-muted-foreground"
+            className="size-7 rounded-md text-muted-foreground"
+            aria-label={t('customers.people.detail.activities.moreFilters', 'More filters')}
           >
-            <SlidersHorizontal className="size-2.5" />
-            {t('customers.people.detail.activities.moreFilters', 'More')}
-          </Button>
+            <SlidersHorizontal className="size-3.5" />
+          </IconButton>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-72 space-y-3">
           <div className="space-y-1.5">

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

@@ -3,7 +3,6 @@
 import * as React from 'react'
 import { Sparkles } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Button } from '@open-mercato/ui/primitives/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@open-mercato/ui/primitives/tooltip'
 import { AI_TIMELINE_ACTIONS_BY_TYPE, resolveAiActions } from './aiActionCatalog'
 
@@ -17,30 +16,25 @@ export function AiActionChips({ activityType }: AiActionChipsProps) {
 
   return (
     <TooltipProvider delayDuration={300}>
-      <div className="flex items-center gap-0.5">
-        <span className="mr-1 text-xs text-muted-foreground">
+      <div className="flex items-center gap-1.5">
+        <span className="text-[9px] font-bold text-muted-foreground/70">
           {t('customers.ai.prefix', 'AI:')}
         </span>
-        {actions.map((action, index) => (
-          <React.Fragment key={action.key}>
-            {index > 0 && <span className="text-xs text-muted-foreground/40">|</span>}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-auto inline-flex items-center gap-0.5 px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-                >
-                  <Sparkles className="size-2.5" />
-                  {t(action.i18nKey, action.fallback)}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" className="text-xs">
-                {t('customers.ai.comingSoon', 'Coming soon')}
-              </TooltipContent>
-            </Tooltip>
-          </React.Fragment>
+        {actions.map((action) => (
+          <Tooltip key={action.key}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="inline-flex items-center gap-1 rounded-[4px] border border-dashed border-border bg-card pl-1.5 pr-[7px] py-[3px] text-[9px] font-medium text-muted-foreground/70 transition-colors hover:border-muted-foreground hover:text-foreground"
+              >
+                <Sparkles className="size-2.5 shrink-0" />
+                {t(action.i18nKey, action.fallback)}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs">
+              {t('customers.ai.comingSoon', 'Coming soon')}
+            </TooltipContent>
+          </Tooltip>
         ))}
       </div>
     </TooltipProvider>