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

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}

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

@@ -5,7 +5,27 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { ActivityType, ScheduleFieldId } from './fieldConfig'
 import { isVisible, getFieldLabel } from './fieldConfig'
 
-const REMINDER_OPTIONS = [0, 5, 10, 15, 30, 60]
+const REMINDER_OPTIONS = [0, 5, 10, 15, 30, 60, 240, 1440]
+
+function formatReminderLabel(
+  minutes: number,
+  t: (key: string, fallback: string, params?: Record<string, string | number>) => string,
+): string {
+  if (minutes === 0) return t('customers.schedule.reminder.none', 'None')
+  if (minutes >= 1440) {
+    const days = Math.round(minutes / 1440)
+    return days === 1
+      ? t('customers.schedule.reminder.dayBefore', '1 day before')
+      : t('customers.schedule.reminder.daysBefore', '{days} days before', { days })
+  }
+  if (minutes >= 60) {
+    const hours = Math.round(minutes / 60)
+    return hours === 1
+      ? t('customers.schedule.reminder.hourBefore', '1 hour before')
+      : t('customers.schedule.reminder.hoursBefore', '{hours} hours before', { hours })
+  }
+  return t('customers.schedule.reminder.minutesBefore', '{minutes} min before', { minutes })
+}
 
 interface FooterFieldsProps {
   visible: Set<ScheduleFieldId>
@@ -47,7 +67,7 @@ export function FooterFields({
             >
               {REMINDER_OPTIONS.map((m) => (
                 <option key={m} value={m}>
-                  {m === 0 ? t('customers.schedule.reminder.none', 'None') : `${m} min`}
+                  {formatReminderLabel(m, t)}
                 </option>
               ))}
             </select>

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

@@ -9,7 +9,7 @@ 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 type { ActivityType, ScheduleFieldId } from './fieldConfig'
-import { isVisible } from './fieldConfig'
+import { isVisible, getFieldLabel } from './fieldConfig'
 import type { LinkedEntity } from './useScheduleFormState'
 
 const ENTITY_LINK_TYPES = ['company', 'deal', 'offer'] as const
@@ -242,10 +242,18 @@ export function LinkedEntitiesField({
 
   if (!isVisible(activityType, 'linkedEntities')) return null
 
+  const sectionLabel = getFieldLabel(
+    activityType,
+    'linkedEntities',
+    t,
+    'customers.schedule.linkedEntities',
+    'Linked entities',
+  )
+
   return (
     <div>
       <label className="text-overline font-semibold uppercase text-muted-foreground tracking-wider">
-        {t('customers.schedule.linkedEntities', 'Linked entities')}
+        {sectionLabel}
       </label>
       <div className="mt-2.5 flex flex-wrap content-center items-center gap-2">
         {linkedEntities.map((entity) => (

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

@@ -9,7 +9,7 @@ import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
 import { fetchAssignableStaffMembersPage } from '../assignableStaff'
 import type { ActivityType, ScheduleFieldId } from './fieldConfig'
-import { isVisible } from './fieldConfig'
+import { isVisible, getFieldLabel } from './fieldConfig'
 import type { Participant, RsvpStatus } from './useScheduleFormState'
 import { PARTICIPANT_COLORS } from './useScheduleFormState'
 
@@ -186,10 +186,18 @@ export function ParticipantsField({
 
   if (!isVisible(activityType, 'participants')) return null
 
+  const sectionLabel = getFieldLabel(
+    activityType,
+    'participants',
+    t,
+    'customers.schedule.participants',
+    'Participants',
+  )
+
   return (
     <div>
       <label className="text-overline font-semibold uppercase text-muted-foreground tracking-wider">
-        {t('customers.schedule.participants', 'Participants')}
+        {sectionLabel}
       </label>
       <div className="mt-2.5 flex flex-wrap content-center items-center gap-2 rounded-lg border border-border bg-background px-3 py-2.5">
         {participants.map((p) => (

package/src/modules/customers/components/detail/schedule/fieldConfig.ts

@@ -27,29 +27,49 @@ export const FIELD_VISIBILITY: Record<ActivityType, Set<ScheduleFieldId>> = {
     'participants', 'linkedEntities', 'description',
     'reminder', 'visibility',
   ]),
+  // Task: now also surfaces Due time (startTime) + Estimate (duration) per Figma 790:280.
   task: new Set([
-    'title', 'date',
+    'title', 'date', 'startTime', 'duration',
     'linkedEntities', 'description',
     'reminder', 'visibility',
   ]),
+  // Email: surface participants as TO recipients per Figma 790:510.
   email: new Set([
     'title', 'date', 'startTime',
-    'linkedEntities', 'description',
-    'visibility',
+    'participants', 'linkedEntities', 'description',
+    'reminder', 'visibility',
   ]),
 }
 
 type LabelOverride = { key: string; fallback: string }
 
+// Per-type section labels (Figma 784:1255 / 829:50 / 790:280 / 790:510).
+// `participants` / `linkedEntities` / `description` resolve via these overrides
+// when present; otherwise the field components fall back to their generic key.
 export const FIELD_LABEL_OVERRIDES: Partial<
   Record<ActivityType, Partial<Record<ScheduleFieldId, LabelOverride>>>
 > = {
-  email: {
-    title: { key: 'customers.schedule.subject', fallback: 'Subject' },
-    description: { key: 'customers.schedule.body', fallback: 'Body' },
+  meeting: {
+    participants: { key: 'customers.schedule.attendees', fallback: 'Attendees' },
+    linkedEntities: { key: 'customers.schedule.connections', fallback: 'Connections' },
+  },
+  call: {
+    participants: { key: 'customers.schedule.contact', fallback: 'Contact' },
+    linkedEntities: { key: 'customers.schedule.connections', fallback: 'Connections' },
+    description: { key: 'customers.schedule.callNotes', fallback: 'Call notes' },
   },
   task: {
     date: { key: 'customers.schedule.dueDate', fallback: 'Due date' },
+    startTime: { key: 'customers.schedule.dueTime', fallback: 'Due time' },
+    duration: { key: 'customers.schedule.estimate', fallback: 'Estimate' },
+    linkedEntities: { key: 'customers.schedule.connections', fallback: 'Connections' },
+    description: { key: 'customers.schedule.details', fallback: 'Details' },
+  },
+  email: {
+    title: { key: 'customers.schedule.subject', fallback: 'Subject' },
+    participants: { key: 'customers.schedule.to', fallback: 'To' },
+    linkedEntities: { key: 'customers.schedule.connections', fallback: 'Connections' },
+    description: { key: 'customers.schedule.message', fallback: 'Message' },
   },
 }
 

package/src/modules/customers/components/detail/schedule/useScheduleFormState.ts

@@ -44,6 +44,18 @@ export const PARTICIPANT_COLORS = [
   'bg-chart-teal',
 ]
 
+// Per-Figma defaults for the Reminder dropdown when the user picks an activity
+// type. Meeting/email keep the standard 15 min; tasks default to 1 day (1440 min)
+// because they're plan-ahead artefacts; calls default to 5 min as a stand-in for
+// the Figma "After call ends" treatment (which would need a non-numeric sentinel
+// in the API contract — tracked as a follow-up).
+const DEFAULT_REMINDER_MINUTES: Record<ActivityType, number> = {
+  meeting: 15,
+  call: 5,
+  task: 1440,
+  email: 15,
+}
+
 interface UseScheduleFormStateParams {
   open: boolean
   editData: ScheduleActivityEditData | null | undefined
@@ -76,7 +88,8 @@ export function useScheduleFormState({ open, editData }: UseScheduleFormStatePar
     if (open) {
       if (editData) {
         // Edit mode: populate from existing interaction
-        setActivityType((editData.interactionType as ActivityType) ?? 'meeting')
+        const resolvedType = (editData.interactionType as ActivityType) ?? 'meeting'
+        setActivityType(resolvedType)
         setTitle(editData.title ?? '')
         const scheduledDate = editData.scheduledAt ? new Date(editData.scheduledAt) : new Date()
         setDate(scheduledDate.toISOString().slice(0, 10))
@@ -85,7 +98,9 @@ export function useScheduleFormState({ open, editData }: UseScheduleFormStatePar
         setAllDay(editData.allDay ?? false)
         setDescription(editData.body ?? '')
         setLocation(editData.location ?? '')
-        setReminderMinutes(editData.reminderMinutes ?? 15)
+        // Use per-type default when the editData omits an explicit reminder
+        // (the menu-driven "New X" flow opens the dialog with `reminderMinutes: null`).
+        setReminderMinutes(editData.reminderMinutes ?? DEFAULT_REMINDER_MINUTES[resolvedType])
         setVisibility(editData.visibility ?? 'team')
         setParticipants(
           Array.isArray(editData.participants)
@@ -145,7 +160,7 @@ export function useScheduleFormState({ open, editData }: UseScheduleFormStatePar
         setAllDay(false)
         setDescription('')
         setLocation('')
-        setReminderMinutes(15)
+        setReminderMinutes(DEFAULT_REMINDER_MINUTES.meeting)
         setVisibility('team')
         setParticipants([])
         setLinkedEntities([])
@@ -160,6 +175,20 @@ export function useScheduleFormState({ open, editData }: UseScheduleFormStatePar
     }
   }, [open, editData])
 
+  // Update the Reminder default when the activity type changes in create mode.
+  // Skipped in edit mode (the persisted value wins), and gated by `open` to
+  // avoid flipping the default in a closed-but-mounted dialog.
+  const lastReminderTypeRef = React.useRef<ActivityType>('meeting')
+  React.useEffect(() => {
+    if (!open || editData) {
+      lastReminderTypeRef.current = activityType
+      return
+    }
+    if (lastReminderTypeRef.current === activityType) return
+    lastReminderTypeRef.current = activityType
+    setReminderMinutes(DEFAULT_REMINDER_MINUTES[activityType])
+  }, [activityType, editData, open])
+
   const removeParticipant = React.useCallback((userId: string) => {
     setParticipants((prev) => prev.filter((p) => p.userId !== userId))
   }, [])