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

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>

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

@@ -33,6 +33,51 @@ const TYPE_TABS: Array<{ type: ActivityType; icon: React.ComponentType<{ classNa
   { type: 'email', icon: Mail, labelKey: 'customers.schedule.types.email', fallback: 'Email' },
 ]
 
+type DialogChrome = { titleKey: string; titleFallback: string; subtitleKey: string; subtitleFallback: string; saveKey: string; saveFallback: string; saveIcon: React.ComponentType<{ className?: string }> }
+
+const TYPE_CHROME: Record<ActivityType, DialogChrome> = {
+  meeting: {
+    titleKey: 'customers.schedule.meeting.title', titleFallback: 'New meeting',
+    subtitleKey: 'customers.schedule.meeting.subtitle', subtitleFallback: 'Block time on the calendar with attendees',
+    saveKey: 'customers.schedule.meeting.save', saveFallback: 'Save activity', saveIcon: Calendar,
+  },
+  call: {
+    titleKey: 'customers.schedule.call.title', titleFallback: 'Log call',
+    subtitleKey: 'customers.schedule.call.subtitle', subtitleFallback: 'Log a call you just had or schedule one',
+    saveKey: 'customers.schedule.call.save', saveFallback: 'Log call', saveIcon: Phone,
+  },
+  task: {
+    titleKey: 'customers.schedule.task.title', titleFallback: 'New task',
+    subtitleKey: 'customers.schedule.task.subtitle', subtitleFallback: 'Capture something to follow up on',
+    saveKey: 'customers.schedule.task.save', saveFallback: 'Save task', saveIcon: Check,
+  },
+  email: {
+    titleKey: 'customers.schedule.email.title', titleFallback: 'Compose email',
+    subtitleKey: 'customers.schedule.email.subtitle', subtitleFallback: 'Compose and send a tracked email',
+    saveKey: 'customers.schedule.email.save', saveFallback: 'Send email', saveIcon: Mail,
+  },
+}
+
+const CALL_DIRECTIONS: Array<{ key: 'outbound' | 'inbound'; labelKey: string; labelFallback: string; dot: string }> = [
+  { key: 'outbound', labelKey: 'customers.schedule.call.direction.outbound', labelFallback: 'Outbound', dot: 'bg-status-info-icon' },
+  { key: 'inbound', labelKey: 'customers.schedule.call.direction.inbound', labelFallback: 'Inbound', dot: 'bg-status-success-icon' },
+]
+
+const CALL_OUTCOMES: Array<{ key: string; labelKey: string; labelFallback: string; dot: string }> = [
+  { key: 'connected', labelKey: 'customers.schedule.call.outcome.connected', labelFallback: 'Connected', dot: 'bg-status-success-icon' },
+  { key: 'voicemail', labelKey: 'customers.schedule.call.outcome.voicemail', labelFallback: 'Voicemail', dot: 'bg-status-warning-icon' },
+  { key: 'noanswer', labelKey: 'customers.schedule.call.outcome.noAnswer', labelFallback: 'No answer', dot: 'bg-muted-foreground' },
+  { key: 'busy', labelKey: 'customers.schedule.call.outcome.busy', labelFallback: 'Busy', dot: 'bg-status-warning-icon' },
+  { key: 'badnumber', labelKey: 'customers.schedule.call.outcome.badNumber', labelFallback: 'Bad number', dot: 'bg-status-error-icon' },
+]
+
+const TASK_PRIORITIES: Array<{ key: string; labelKey: string; labelFallback: string; dot: string }> = [
+  { key: 'low', labelKey: 'customers.schedule.task.priority.low', labelFallback: 'Low', dot: 'bg-muted-foreground' },
+  { key: 'medium', labelKey: 'customers.schedule.task.priority.medium', labelFallback: 'Medium', dot: 'bg-status-info-icon' },
+  { key: 'high', labelKey: 'customers.schedule.task.priority.high', labelFallback: 'High', dot: 'bg-status-warning-icon' },
+  { key: 'urgent', labelKey: 'customers.schedule.task.priority.urgent', labelFallback: 'Urgent', dot: 'bg-status-error-icon' },
+]
+
 interface ScheduleActivityDialogProps {
   open: boolean
   onClose: () => void
@@ -61,6 +106,33 @@ export function ScheduleActivityDialog({
   const state = useScheduleFormState({ open, editData: editData ?? null })
   const visibleFields = FIELD_VISIBILITY[state.activityType]
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const isEditing = Boolean(editData?.id)
+  const chrome = TYPE_CHROME[state.activityType]
+  const SaveIcon = chrome.saveIcon
+  const [callDirection, setCallDirection] = React.useState<'outbound' | 'inbound'>('outbound')
+  const [callOutcome, setCallOutcome] = React.useState<string | null>(null)
+  const [callPhoneNumber, setCallPhoneNumber] = React.useState('')
+  const [taskPriority, setTaskPriority] = React.useState<string>('medium')
+
+  React.useEffect(() => {
+    if (!open) return
+    const raw = editData as (Record<string, unknown> & { customValues?: unknown }) | null | undefined
+    const cv = (raw?.customValues && typeof raw.customValues === 'object' ? raw.customValues : null) as Record<string, unknown> | null
+    setCallDirection(typeof cv?.callDirection === 'string' && cv.callDirection === 'inbound' ? 'inbound' : 'outbound')
+    setCallOutcome(typeof cv?.callOutcome === 'string' ? cv.callOutcome : null)
+    setCallPhoneNumber(typeof cv?.callPhoneNumber === 'string' ? cv.callPhoneNumber : '')
+    setTaskPriority(typeof cv?.taskPriority === 'string' ? cv.taskPriority : 'medium')
+  }, [open, editData])
+
+  // Reset per-type chip state when the user switches activity type in create mode.
+  // In edit mode, the persisted customValues should win, so we skip the reset.
+  React.useEffect(() => {
+    if (!open || isEditing) return
+    setCallDirection('outbound')
+    setCallOutcome(null)
+    setCallPhoneNumber('')
+    setTaskPriority('medium')
+  }, [state.activityType, open, isEditing])
 
   const formSnapshot = React.useMemo(() => JSON.stringify({
     activityType: state.activityType,
@@ -224,9 +296,18 @@ export function ScheduleActivityDialog({
         ? buildRecurrenceRule(state.recurrenceDays, state.recurrenceEndType, state.recurrenceCount, state.recurrenceEndDate)
         : null
 
-      const isEditing = Boolean(editData?.id)
+      const isSaveEdit = Boolean(editData?.id)
+      const customValues: Record<string, unknown> = {}
+      if (state.activityType === 'call') {
+        customValues.callDirection = callDirection
+        if (callOutcome) customValues.callOutcome = callOutcome
+        if (callPhoneNumber.trim()) customValues.callPhoneNumber = callPhoneNumber.trim()
+      }
+      if (state.activityType === 'task') {
+        customValues.taskPriority = taskPriority
+      }
       const payload = {
-        ...(isEditing ? { id: editData!.id } : {}),
+        ...(isSaveEdit ? { id: editData!.id } : {}),
         entityId,
         dealId,
         interactionType: state.activityType,
@@ -250,16 +331,17 @@ export function ScheduleActivityDialog({
           : null,
         reminderMinutes: visibleFields.has('reminder') ? state.reminderMinutes : null,
         visibility: visibleFields.has('visibility') ? state.visibility : null,
+        ...(Object.keys(customValues).length > 0 ? { customValues } : {}),
       }
       await runGuardedMutation(
         () =>
           apiCallOrThrow('/api/customers/interactions', {
-            method: isEditing ? 'PUT' : 'POST',
+            method: isSaveEdit ? 'PUT' : 'POST',
             headers: { 'content-type': 'application/json' },
             body: JSON.stringify(payload),
           }),
         {
-          operation: isEditing ? 'updateActivity' : 'createActivity',
+          operation: isSaveEdit ? 'updateActivity' : 'createActivity',
           interactionId: editData?.id ?? null,
           interactionType: state.activityType,
         },
@@ -285,26 +367,26 @@ export function ScheduleActivityDialog({
   return (
     <Dialog open={open} onOpenChange={(o) => { if (!o) void guardedClose() }}>
       {ConfirmDialogElement}
-      <DialogContent className="flex max-h-[90vh] flex-col overflow-hidden border-border p-0 shadow-xl sm:max-w-[680px] sm:rounded-xl [&>[data-dialog-close]]:hidden" onKeyDown={handleKeyDown} aria-describedby={undefined}>
+      <DialogContent className="flex max-h-[90vh] flex-col overflow-hidden border-border p-0 shadow-xl sm:max-w-[760px] sm:rounded-xl [&>[data-dialog-close]]:hidden" onKeyDown={handleKeyDown} aria-describedby={undefined}>
         <VisuallyHidden>
-          <DialogTitle>{editData ? t('customers.schedule.editTitle', 'Edit activity') : t('customers.schedule.title', 'Schedule activity')}</DialogTitle>
+          <DialogTitle>{isEditing ? t('customers.schedule.editTitle', 'Edit activity') : t(chrome.titleKey, chrome.titleFallback)}</DialogTitle>
         </VisuallyHidden>
 
         {/* Header */}
         <div className="flex shrink-0 items-start justify-between gap-3 border-b border-border bg-background px-6 py-5">
-          <div className="flex flex-col gap-1.5">
-            <h2 className="text-lg font-bold leading-tight text-foreground">
-              {editData ? t('customers.schedule.editTitle', 'Edit activity') : t('customers.schedule.title', 'Schedule activity')}
+          <div className="flex flex-col gap-1">
+            <h2 className="text-lg font-semibold leading-tight tracking-tight text-foreground">
+              {isEditing ? t('customers.schedule.editTitle', 'Edit activity') : t(chrome.titleKey, chrome.titleFallback)}
             </h2>
-            {entityName && (
-              <div className="flex items-center gap-1.5">
-                <span className="inline-block size-3.5 rounded-full bg-status-success-icon shrink-0" />
-                <span className="text-xs text-muted-foreground">
-                  {t('customers.schedule.context', 'On timeline: {{name}}', { name: entityName })}
-                  {companyName && ` · ${companyName}`}
-                </span>
-              </div>
-            )}
+            <p className="text-sm text-muted-foreground">
+              {t(chrome.subtitleKey, chrome.subtitleFallback)}
+            </p>
+            {entityName ? (
+              <p className="mt-0.5 text-xs text-muted-foreground/80">
+                {t('customers.schedule.context', 'On timeline: {{name}}', { name: entityName })}
+                {companyName ? ` · ${companyName}` : ''}
+              </p>
+            ) : null}
           </div>
           <IconButton type="button" variant="ghost" size="sm" onClick={() => { void guardedClose() }} className="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-background" aria-label={t('customers.schedule.cancel', 'Cancel')}>
             <X className="size-4 text-muted-foreground" />
@@ -325,27 +407,26 @@ export function ScheduleActivityDialog({
           </Alert>
         )}
 
-        {/* Type tabs */}
-        <div className="flex gap-0.5 rounded-md border border-border bg-muted p-1">
+        {/* Type tabs — large rectangular tiles per Figma */}
+        <div className="grid grid-cols-4 gap-2">
           {TYPE_TABS.map(({ type, icon: Icon, labelKey, fallback }) => {
             const isActive = state.activityType === type
             return (
-              <Button
+              <button
                 key={type}
                 type="button"
-                variant="ghost"
-                size="sm"
                 onClick={() => state.setActivityType(type)}
+                aria-pressed={isActive}
                 className={cn(
-                  'h-auto flex items-center gap-2 rounded-md px-3.5 py-2 text-sm transition-colors',
+                  'flex h-[80px] flex-col items-center justify-center gap-2 rounded-md border text-[14px] font-semibold transition-colors',
                   isActive
-                    ? 'bg-background font-semibold text-foreground shadow-sm'
-                    : 'bg-transparent font-normal text-muted-foreground',
+                    ? 'border-transparent bg-foreground text-background'
+                    : 'border-border bg-card text-muted-foreground hover:border-foreground/40 hover:text-foreground',
                 )}
               >
-                <Icon className="size-3.5" />
+                <Icon className="size-[18px]" />
                 {t(labelKey, fallback)}
-              </Button>
+              </button>
             )
           })}
         </div>
@@ -359,13 +440,18 @@ export function ScheduleActivityDialog({
             type="text"
             value={state.title}
             onChange={(e) => state.setTitle(e.target.value)}
-            placeholder={t('customers.schedule.titlePlaceholder', 'Activity title...')}
+            placeholder={
+              state.activityType === 'email'
+                ? t('customers.schedule.subjectPlaceholder', 'Subject...')
+                : t('customers.schedule.titlePlaceholder', 'Activity title...')
+            }
             className="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none focus:border-foreground"
             autoFocus
           />
         </div>
 
-        {/* Date/Time/Duration */}
+        {/* Date/Time/Duration — placed before per-type chip rows so the call/task
+            workflows match Figma 829:50 / 790:280 (date row first, then status chips). */}
         <DateTimeFields
           visible={visibleFields}
           activityType={state.activityType}
@@ -389,6 +475,97 @@ export function ScheduleActivityDialog({
           setRecurrenceEndDate={state.setRecurrenceEndDate}
         />
 
+        {/* Call: Direction + Outcome chips */}
+        {state.activityType === 'call' && (
+          <div className="flex flex-col gap-3">
+            <div>
+              <label className="text-overline font-semibold uppercase text-muted-foreground tracking-wider">
+                {t('customers.schedule.call.directionLabel', 'Direction')}
+              </label>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {CALL_DIRECTIONS.map((opt) => {
+                  const isActive = callDirection === opt.key
+                  return (
+                    <button
+                      key={opt.key}
+                      type="button"
+                      aria-pressed={isActive}
+                      onClick={() => setCallDirection(opt.key)}
+                      className={cn(
+                        'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors',
+                        isActive
+                          ? 'border-transparent bg-foreground text-background'
+                          : 'border-border bg-card text-muted-foreground hover:border-foreground/40',
+                      )}
+                    >
+                      <span className={cn('inline-block size-1.5 rounded-full', opt.dot)} aria-hidden />
+                      {t(opt.labelKey, opt.labelFallback)}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+            <div>
+              <label className="text-overline font-semibold uppercase text-muted-foreground tracking-wider">
+                {t('customers.schedule.call.outcomeLabel', 'Outcome')}
+              </label>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {CALL_OUTCOMES.map((opt) => {
+                  const isActive = callOutcome === opt.key
+                  return (
+                    <button
+                      key={opt.key}
+                      type="button"
+                      aria-pressed={isActive}
+                      onClick={() => setCallOutcome(isActive ? null : opt.key)}
+                      className={cn(
+                        'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors',
+                        isActive
+                          ? 'border-transparent bg-foreground text-background'
+                          : 'border-border bg-card text-muted-foreground hover:border-foreground/40',
+                      )}
+                    >
+                      <span className={cn('inline-block size-1.5 rounded-full', opt.dot)} aria-hidden />
+                      {t(opt.labelKey, opt.labelFallback)}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Task: Priority chips */}
+        {state.activityType === 'task' && (
+          <div>
+            <label className="text-overline font-semibold uppercase text-muted-foreground tracking-wider">
+              {t('customers.schedule.task.priorityLabel', 'Priority')}
+            </label>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {TASK_PRIORITIES.map((opt) => {
+                const isActive = taskPriority === opt.key
+                return (
+                  <button
+                    key={opt.key}
+                    type="button"
+                    aria-pressed={isActive}
+                    onClick={() => setTaskPriority(opt.key)}
+                    className={cn(
+                      'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors',
+                      isActive
+                        ? 'border-transparent bg-foreground text-background'
+                        : 'border-border bg-card text-muted-foreground hover:border-foreground/40',
+                    )}
+                  >
+                    <span className={cn('inline-block size-1.5 rounded-full', opt.dot)} aria-hidden />
+                    {t(opt.labelKey, opt.labelFallback)}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
         {/* Participants */}
         <ParticipantsField
           visible={visibleFields}
@@ -400,13 +577,28 @@ export function ScheduleActivityDialog({
           setGuestPermissions={state.setGuestPermissions}
         />
 
-        {/* Location */}
-        <LocationField
-          visible={visibleFields}
-          activityType={state.activityType}
-          location={state.location}
-          setLocation={state.setLocation}
-        />
+        {/* Location (or phone number for calls) */}
+        {state.activityType === 'call' ? (
+          <div className="flex flex-col gap-1.5">
+            <label className="text-overline font-semibold uppercase text-muted-foreground tracking-wider">
+              {t('customers.schedule.call.phoneLabel', 'Phone number')}
+            </label>
+            <input
+              type="tel"
+              value={callPhoneNumber}
+              onChange={(e) => setCallPhoneNumber(e.target.value)}
+              placeholder={t('customers.schedule.call.phonePlaceholder', '+1 555 000 0000')}
+              className="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none focus:border-foreground"
+            />
+          </div>
+        ) : (
+          <LocationField
+            visible={visibleFields}
+            activityType={state.activityType}
+            location={state.location}
+            setLocation={state.setLocation}
+          />
+        )}
 
         {/* Linked Entities */}
         <LinkedEntitiesField
@@ -450,13 +642,13 @@ export function ScheduleActivityDialog({
           <Button type="button" variant="outline" onClick={() => { void guardedClose() }} className="rounded-md border border-input bg-background px-5 py-3 text-sm font-semibold text-foreground">
             {t('customers.schedule.cancel', 'Cancel')}
           </Button>
-          <Button type="button" onClick={handleSave} disabled={state.saving || !state.title.trim()} className="flex items-center gap-2 rounded-md bg-primary px-5 py-3 text-sm font-semibold text-primary-foreground disabled:opacity-50">
-            <Calendar className="size-3.5" />
+          <Button type="button" onClick={handleSave} disabled={state.saving || !state.title.trim()} className="flex items-center gap-2 rounded-md bg-foreground px-5 py-3 text-sm font-semibold text-background hover:bg-foreground/90 disabled:opacity-50">
+            <SaveIcon className="size-3.5" />
             {state.saving
               ? t('customers.schedule.saving', 'Saving...')
-              : editData
+              : isEditing
                 ? t('customers.schedule.update', 'Update activity')
-                : t('customers.schedule.save', 'Save activity')}
+                : t(chrome.saveKey, chrome.saveFallback)}
           </Button>
         </div>
       </DialogContent>

package/src/modules/customers/components/detail/schedule/DateTimeFields.tsx

@@ -80,7 +80,9 @@ export function DateTimeFields({
         </div>
         {showStartTime && (
           <div className="flex flex-1 flex-col gap-1.5">
-            <label className="text-overline font-semibold text-muted-foreground tracking-wider">{t('customers.schedule.start', 'Start')}</label>
+            <label className="text-overline font-semibold text-muted-foreground tracking-wider">
+              {getFieldLabel(activityType, 'startTime', t, 'customers.schedule.start', 'Start')}
+            </label>
             <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
               <Clock className="size-3.5 text-muted-foreground" />
               <input type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} disabled={allDay} className="flex-1 bg-transparent text-sm text-foreground focus:outline-none disabled:opacity-50" />
@@ -89,7 +91,9 @@ export function DateTimeFields({
         )}
         {showDuration && (
           <div className="flex flex-1 flex-col gap-1.5">
-            <label className="text-overline font-semibold text-muted-foreground tracking-wider">{t('customers.schedule.duration', 'Duration')}</label>
+            <label className="text-overline font-semibold text-muted-foreground tracking-wider">
+              {getFieldLabel(activityType, 'duration', t, 'customers.schedule.duration', 'Duration')}
+            </label>
             <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
               <select
                 value={duration}