npm - @open-mercato/core - Versions diffs - 0.5.1-develop.3045.b4b3320cc2 → 0.6.0 - Mend

@open-mercato/core 0.5.1-develop.3045.b4b3320cc2 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist/modules/customers/components/detail/ActivityTimeline.js CHANGED Viewed

@@ -1,16 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Phone, Mail, Users, StickyNote, User } from "lucide-react";
+import { Check, ListTodo, Phone, Mail, Users, StickyNote, User } from "lucide-react";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
 import { AiActionChips } from "./AiActionChips.js";
 const TYPE_ICONS = {
   call: Phone,
   email: Mail,
   meeting: Users,
-  note: StickyNote
+  note: StickyNote,
+  task: ListTodo
 };
-function ActivityTimeline({ activities, onEdit }) {
+function ActivityTimeline({ activities, onEdit, onMarkDone }) {
   const t = useT();
   if (activities.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: t("customers.timeline.empty", "No activities match the current filters.") });
@@ -33,7 +35,8 @@ function ActivityTimeline({ activities, onEdit }) {
           activity,
           t,
           withBorder: index < activities.length - 1,
-          onEdit
+          onEdit,
+          onMarkDone
         }
       )
     ] }, activity.id);
@@ -43,12 +46,25 @@ function TimelineEntry({
   activity,
   t,
   withBorder,
-  onEdit
+  onEdit,
+  onMarkDone
 }) {
   const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt;
   const TypeIcon = TYPE_ICONS[activity.interactionType];
   const title = activity.title ?? activity.body ?? activity.interactionType;
   const duration = activity.duration ? ` (${activity.duration} min)` : "";
+  const isPlanned = activity.status === "planned";
+  const [markingDone, setMarkingDone] = React.useState(false);
+  const handleMarkDone = React.useCallback(async (event) => {
+    event.stopPropagation();
+    if (!onMarkDone || markingDone) return;
+    setMarkingDone(true);
+    try {
+      await onMarkDone(activity.id);
+    } finally {
+      setMarkingDone(false);
+    }
+  }, [activity.id, markingDone, onMarkDone]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -66,9 +82,26 @@ function TimelineEntry({
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-md bg-muted shrink-0", children: TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { className: "size-3.5 text-muted-foreground" }) : null }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "block text-[12px] font-semibold leading-tight text-foreground", children: [
-            title,
-            duration
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "block text-[12px] font-semibold leading-tight text-foreground", children: [
+              title,
+              duration
+            ] }),
+            isPlanned && onMarkDone ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "default",
+                size: "sm",
+                disabled: markingDone,
+                onClick: handleMarkDone,
+                className: "shrink-0",
+                children: [
+                  /* @__PURE__ */ jsx(Check, { className: "size-3.5" }),
+                  t("customers.activities.actions.markDone", "Mark done")
+                ]
+              }
+            ) : null
           ] }),
           activity.body && activity.title && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: activity.body }),
           activity.authorName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[10px] text-muted-foreground", children: [

package/dist/modules/customers/components/detail/ActivityTimeline.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/ActivityTimeline.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { Phone, Mail, Users, StickyNote, User } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { AiActionChips } from './AiActionChips'\nimport type { InteractionSummary } from './types'\n\nconst TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {\n  call: Phone,\n  email: Mail,\n  meeting: Users,\n  note: StickyNote,\n}\n\ninterface ActivityTimelineProps {\n  activities: InteractionSummary[]\n  onEdit?: (activity: InteractionSummary) => void\n}\n\nexport function ActivityTimeline({ activities, onEdit }: ActivityTimelineProps) {\n  const t = useT()\n\n  if (activities.length === 0) {\n    return (\n      <div className=\"py-6 text-center text-sm text-muted-foreground\">\n        {t('customers.timeline.empty', 'No activities match the current filters.')}\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      {activities.map((activity, index) => {\n        const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt\n        const activityYear = dateStr ? new Date(dateStr).getFullYear() : null\n        const prevDateStr = index > 0 ? (activities[index - 1].scheduledAt ?? activities[index - 1].occurredAt ?? activities[index - 1].createdAt) : null\n        const prevYear = prevDateStr ? new Date(prevDateStr).getFullYear() : null\n        const showYearSeparator = activityYear !== null && prevYear !== null && activityYear !== prevYear\n\n        return (\n          <React.Fragment key={activity.id}>\n            {showYearSeparator && (\n              <div className=\"flex items-center gap-3 py-3 px-5\">\n                <div className=\"h-px flex-1 bg-border\" />\n                <span className=\"text-xs font-semibold text-muted-foreground\">\n                  {t('customers.activities.yearSeparator', '{year}', { year: activityYear })}\n                </span>\n                <div className=\"h-px flex-1 bg-border\" />\n              </div>\n            )}\n            <TimelineEntry\n              activity={activity}\n              t={t}\n              withBorder={index < activities.length - 1}\n              onEdit={onEdit}\n            />\n          </React.Fragment>\n        )\n      })}\n    </div>\n  )\n}\n\nfunction TimelineEntry({\n  activity,\n  t,\n  withBorder,\n  onEdit,\n}: {\n  activity: InteractionSummary\n  t: TranslateFn\n  withBorder: boolean\n  onEdit?: (activity: InteractionSummary) => void\n}) {\n  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt\n  const TypeIcon = TYPE_ICONS[activity.interactionType]\n  const title = activity.title ?? activity.body ?? activity.interactionType\n  const duration = activity.duration ? ` (${activity.duration} min)` : ''\n\n  return (\n    <div\n      className={`py-2.5 ${withBorder ? 'border-b border-border/60' : ''} ${onEdit ? 'cursor-pointer hover:bg-accent/40 transition-colors' : ''}`}\n      onClick={() => onEdit?.(activity)}\n      role={onEdit ? 'button' : undefined}\n      tabIndex={onEdit ? 0 : undefined}\n      onKeyDown={onEdit ? (e) => { if (e.key === 'Enter') onEdit(activity) } : undefined}\n    >\n      <div className=\"grid items-start gap-3\" style={{ gridTemplateColumns: '75px 32px 1fr' }}>\n        {/* Column 1: Date */}\n        <div className=\"shrink-0\">\n          <span className=\"block text-[11px] font-semibold leading-tight text-foreground\">\n            {formatRelativeDate(dateStr, t)}\n          </span>\n          <span className=\"block text-[10px] leading-tight text-muted-foreground\">\n            {formatTime(dateStr)}\n          </span>\n        </div>\n\n        {/* Column 2: Type icon */}\n        <div className=\"flex size-8 items-center justify-center rounded-md bg-muted shrink-0\">\n          {TypeIcon ? <TypeIcon className=\"size-3.5 text-muted-foreground\" /> : null}\n        </div>\n\n        {/* Column 3: Content */}\n        <div className=\"min-w-0 space-y-1.5\">\n          <span className=\"block text-[12px] font-semibold leading-tight text-foreground\">\n            {title}{duration}\n          </span>\n\n          {activity.body && activity.title && (\n            <p className=\"text-[11px] leading-snug text-muted-foreground\">\n              {activity.body}\n            </p>\n          )}\n\n          {activity.authorName && (\n            <div className=\"flex items-center gap-1 text-[10px] text-muted-foreground\">\n              <User className=\"size-2.5 shrink-0\" />\n              <span>{t('customers.timeline.author', 'by {{name}}', { name: activity.authorName })}</span>\n            </div>\n          )}\n\n          <AiActionChips activityType={activity.interactionType} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction formatRelativeDate(isoString: string, t: TranslateFn): string {\n  try {\n    const date = new Date(isoString)\n    const now = new Date()\n    // Compare calendar dates (not time-based diff) to correctly handle same-day future times\n    const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate())\n    const nowDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n    const diffDays = Math.round((nowDay.getTime() - dateDay.getTime()) / (1000 * 60 * 60 * 24))\n\n    if (diffDays === 0) return t('customers.timeline.date.today', 'today')\n    if (diffDays === 1) return t('customers.timeline.date.yesterday', 'yesterday')\n    return date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })\n  } catch {\n    return ''\n  }\n}\n\nfunction formatTime(isoString: string): string {\n  try {\n    return new Date(isoString).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })\n  } catch {\n    return ''\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { Check, ListTodo, Phone, Mail, Users, StickyNote, User } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { AiActionChips } from './AiActionChips'\nimport type { InteractionSummary } from './types'\n\nconst TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {\n  call: Phone,\n  email: Mail,\n  meeting: Users,\n  note: StickyNote,\n  task: ListTodo,\n}\n\ninterface ActivityTimelineProps {\n  activities: InteractionSummary[]\n  onEdit?: (activity: InteractionSummary) => void\n  onMarkDone?: (activityId: string) => void | Promise<void>\n}\n\nexport function ActivityTimeline({ activities, onEdit, onMarkDone }: ActivityTimelineProps) {\n  const t = useT()\n\n  if (activities.length === 0) {\n    return (\n      <div className=\"py-6 text-center text-sm text-muted-foreground\">\n        {t('customers.timeline.empty', 'No activities match the current filters.')}\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      {activities.map((activity, index) => {\n        const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt\n        const activityYear = dateStr ? new Date(dateStr).getFullYear() : null\n        const prevDateStr = index > 0 ? (activities[index - 1].scheduledAt ?? activities[index - 1].occurredAt ?? activities[index - 1].createdAt) : null\n        const prevYear = prevDateStr ? new Date(prevDateStr).getFullYear() : null\n        const showYearSeparator = activityYear !== null && prevYear !== null && activityYear !== prevYear\n\n        return (\n          <React.Fragment key={activity.id}>\n            {showYearSeparator && (\n              <div className=\"flex items-center gap-3 py-3 px-5\">\n                <div className=\"h-px flex-1 bg-border\" />\n                <span className=\"text-xs font-semibold text-muted-foreground\">\n                  {t('customers.activities.yearSeparator', '{year}', { year: activityYear })}\n                </span>\n                <div className=\"h-px flex-1 bg-border\" />\n              </div>\n            )}\n            <TimelineEntry\n              activity={activity}\n              t={t}\n              withBorder={index < activities.length - 1}\n              onEdit={onEdit}\n              onMarkDone={onMarkDone}\n            />\n          </React.Fragment>\n        )\n      })}\n    </div>\n  )\n}\n\nfunction TimelineEntry({\n  activity,\n  t,\n  withBorder,\n  onEdit,\n  onMarkDone,\n}: {\n  activity: InteractionSummary\n  t: TranslateFn\n  withBorder: boolean\n  onEdit?: (activity: InteractionSummary) => void\n  onMarkDone?: (activityId: string) => void | Promise<void>\n}) {\n  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt\n  const TypeIcon = TYPE_ICONS[activity.interactionType]\n  const title = activity.title ?? activity.body ?? activity.interactionType\n  const duration = activity.duration ? ` (${activity.duration} min)` : ''\n  const isPlanned = activity.status === 'planned'\n  const [markingDone, setMarkingDone] = React.useState(false)\n\n  const handleMarkDone = React.useCallback(async (event: React.MouseEvent | React.KeyboardEvent) => {\n    event.stopPropagation()\n    if (!onMarkDone || markingDone) return\n    setMarkingDone(true)\n    try {\n      await onMarkDone(activity.id)\n    } finally {\n      setMarkingDone(false)\n    }\n  }, [activity.id, markingDone, onMarkDone])\n\n  return (\n    <div\n      className={`py-2.5 ${withBorder ? 'border-b border-border/60' : ''} ${onEdit ? 'cursor-pointer hover:bg-accent/40 transition-colors' : ''}`}\n      onClick={() => onEdit?.(activity)}\n      role={onEdit ? 'button' : undefined}\n      tabIndex={onEdit ? 0 : undefined}\n      onKeyDown={onEdit ? (e) => { if (e.key === 'Enter') onEdit(activity) } : undefined}\n    >\n      <div className=\"grid items-start gap-3\" style={{ gridTemplateColumns: '75px 32px 1fr' }}>\n        {/* Column 1: Date */}\n        <div className=\"shrink-0\">\n          <span className=\"block text-[11px] font-semibold leading-tight text-foreground\">\n            {formatRelativeDate(dateStr, t)}\n          </span>\n          <span className=\"block text-[10px] leading-tight text-muted-foreground\">\n            {formatTime(dateStr)}\n          </span>\n        </div>\n\n        {/* Column 2: Type icon */}\n        <div className=\"flex size-8 items-center justify-center rounded-md bg-muted shrink-0\">\n          {TypeIcon ? <TypeIcon className=\"size-3.5 text-muted-foreground\" /> : null}\n        </div>\n\n        {/* Column 3: Content */}\n        <div className=\"min-w-0 space-y-1.5\">\n          <div className=\"flex items-start justify-between gap-2\">\n            <span className=\"block text-[12px] font-semibold leading-tight text-foreground\">\n              {title}{duration}\n            </span>\n            {isPlanned && onMarkDone ? (\n              <Button\n                type=\"button\"\n                variant=\"default\"\n                size=\"sm\"\n                disabled={markingDone}\n                onClick={handleMarkDone}\n                className=\"shrink-0\"\n              >\n                <Check className=\"size-3.5\" />\n                {t('customers.activities.actions.markDone', 'Mark done')}\n              </Button>\n            ) : null}\n          </div>\n\n          {activity.body && activity.title && (\n            <p className=\"text-[11px] leading-snug text-muted-foreground\">\n              {activity.body}\n            </p>\n          )}\n\n          {activity.authorName && (\n            <div className=\"flex items-center gap-1 text-[10px] text-muted-foreground\">\n              <User className=\"size-2.5 shrink-0\" />\n              <span>{t('customers.timeline.author', 'by {{name}}', { name: activity.authorName })}</span>\n            </div>\n          )}\n\n          <AiActionChips activityType={activity.interactionType} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction formatRelativeDate(isoString: string, t: TranslateFn): string {\n  try {\n    const date = new Date(isoString)\n    const now = new Date()\n    // Compare calendar dates (not time-based diff) to correctly handle same-day future times\n    const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate())\n    const nowDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n    const diffDays = Math.round((nowDay.getTime() - dateDay.getTime()) / (1000 * 60 * 60 * 24))\n\n    if (diffDays === 0) return t('customers.timeline.date.today', 'today')\n    if (diffDays === 1) return t('customers.timeline.date.yesterday', 'yesterday')\n    return date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })\n  } catch {\n    return ''\n  }\n}\n\nfunction formatTime(isoString: string): string {\n  try {\n    return new Date(isoString).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })\n  } catch {\n    return ''\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/customers/components/detail/ActivityTimelineFilters.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Phone, Mail, Users, StickyNote, SlidersHorizontal } from "lucide-react";
+import { Phone, Mail, Users, StickyNote, ListTodo, 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";
@@ -12,7 +12,8 @@ const FILTER_TYPES = [
   { type: "note", icon: StickyNote },
   { type: "call", icon: Phone },
   { type: "meeting", icon: Users },
-  { type: "email", icon: Mail }
+  { type: "email", icon: Mail },
+  { type: "task", icon: ListTodo }
 ];
 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";
@@ -36,11 +37,19 @@ function ActivityTimelineFilters({
     const controller = new AbortController();
     void (async () => {
       try {
-        const nextCounts = await readApiResultOrThrow(
+        const payload = await readApiResultOrThrow(
           `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,
           { signal: controller.signal }
         );
-        setCounts(nextCounts);
+        const source = payload.result ?? payload;
+        setCounts({
+          call: source.call ?? 0,
+          email: source.email ?? 0,
+          meeting: source.meeting ?? 0,
+          note: source.note ?? 0,
+          task: source.task ?? 0,
+          total: source.total ?? 0
+        });
       } catch {
         setCounts(null);
       }
@@ -60,9 +69,11 @@ function ActivityTimelineFilters({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
           type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleSelectAll,
           "aria-pressed": allActive,
           className: cn(CHIP_BASE, allActive ? CHIP_ACTIVE : CHIP_INACTIVE),
@@ -74,9 +85,11 @@ function ActivityTimelineFilters({
         const count = counts?.[type];
         const hasCount = typeof count === "number" && count > 0;
         return /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
             type: "button",
+            variant: "ghost",
+            size: "sm",
             onClick: () => handleTypeToggle(type),
             "aria-pressed": isActive,
             className: cn(CHIP_BASE, isActive ? CHIP_ACTIVE : CHIP_INACTIVE),

package/dist/modules/customers/components/detail/ActivityTimelineFilters.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/ActivityTimelineFilters.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { Phone, Mail, Users, StickyNote, SlidersHorizontal } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'\n\nconst FILTER_TYPES = [\n  { type: 'note', icon: StickyNote },\n  { type: 'call', icon: Phone },\n  { type: 'meeting', icon: Users },\n  { type: 'email', icon: Mail },\n] as const\n\ntype InteractionCounts = {\n  call: number\n  email: number\n  meeting: number\n  note: number\n  total: number\n}\n\ninterface ActivityTimelineFiltersProps {\n  entityId: string | null\n  activeTypes: string[]\n  dateFrom: string\n  dateTo: string\n  onTypesChange: (types: string[]) => void\n  onDateFromChange: (value: string) => void\n  onDateToChange: (value: string) => void\n  onReset: () => void\n}\n\nconst CHIP_BASE = 'inline-flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium transition-colors'\nconst CHIP_INACTIVE = 'border border-border bg-card text-muted-foreground hover:bg-accent/40'\nconst CHIP_ACTIVE = 'border border-status-info-border bg-status-info-bg text-status-info-text'\n\nexport function ActivityTimelineFilters({\n  entityId,\n  activeTypes,\n  dateFrom,\n  dateTo,\n  onTypesChange,\n  onDateFromChange,\n  onDateToChange,\n  onReset,\n}: ActivityTimelineFiltersProps) {\n  const t = useT()\n  const hasActiveFilters = activeTypes.length > 0 || dateFrom || dateTo\n  const allActive = activeTypes.length === 0\n  const [counts, setCounts] = React.useState<InteractionCounts | null>(null)\n\n  React.useEffect(() => {\n    if (!entityId) return\n    const controller = new AbortController()\n    void (async () => {\n      try {\n        const nextCounts = await readApiResultOrThrow<InteractionCounts>(\n          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,\n          { signal: controller.signal },\n        )\n        setCounts(nextCounts)\n      } catch {\n        setCounts(null)\n      }\n    })()\n    return () => controller.abort()\n  }, [entityId])\n\n  const handleTypeToggle = React.useCallback((type: string) => {\n    if (activeTypes.includes(type)) {\n      onTypesChange(activeTypes.filter((filterType) => filterType !== type))\n    } else {\n      onTypesChange([...activeTypes, type])\n    }\n  }, [activeTypes, onTypesChange])\n\n  const handleSelectAll = React.useCallback(() => {\n    onTypesChange([])\n  }, [onTypesChange])\n\n  return (\n    <div className=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n      <div className=\"flex flex-wrap items-center gap-2.5\">\n        <button\n          type=\"button\"\n          onClick={handleSelectAll}\n          aria-pressed={allActive}\n          className={cn(CHIP_BASE, allActive ? CHIP_ACTIVE : CHIP_INACTIVE)}\n        >\n          <span>{t('customers.timeline.filter.all', 'All Activities')}</span>\n        </button>\n\n        {FILTER_TYPES.map(({ type, icon: Icon }) => {\n          const isActive = activeTypes.includes(type)\n          const count = counts?.[type as keyof InteractionCounts]\n          const hasCount = typeof count === 'number' && count > 0\n          return (\n            <button\n              key={type}\n              type=\"button\"\n              onClick={() => handleTypeToggle(type)}\n              aria-pressed={isActive}\n              className={cn(CHIP_BASE, isActive ? CHIP_ACTIVE : CHIP_INACTIVE)}\n            >\n              <Icon className=\"size-[18px] shrink-0\" />\n              <span>\n                {t(`customers.timeline.filter.${type}`, type)}\n                {hasCount ? ` ${count}` : ''}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n\n      <Popover>\n        <PopoverTrigger asChild>\n          <IconButton\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"size-7 rounded-md text-muted-foreground\"\n            aria-label={t('customers.people.detail.activities.moreFilters', 'More filters')}\n          >\n            <SlidersHorizontal className=\"size-3.5\" />\n          </IconButton>\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"w-72 space-y-3\">\n          <div className=\"space-y-1.5\">\n            <label className=\"text-xs font-medium\">\n              {t('customers.activities.filters.dateRange', 'Date range')}\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <input\n                type=\"date\"\n                value={dateFrom}\n                onChange={(event) => onDateFromChange(event.target.value)}\n                className=\"h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring\"\n                aria-label={t('customers.timeline.filter.from', 'From date')}\n              />\n              <span className=\"shrink-0 text-xs text-muted-foreground\">\u2014</span>\n              <input\n                type=\"date\"\n                value={dateTo}\n                onChange={(event) => onDateToChange(event.target.value)}\n                className=\"h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring\"\n                aria-label={t('customers.timeline.filter.to', 'To date')}\n              />\n            </div>\n          </div>\n\n          {hasActiveFilters ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={onReset}\n              className=\"h-7 w-full text-xs\"\n            >\n              {t('customers.activities.filters.clearAll', 'Clear filters')}\n            </Button>\n          ) : null}\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n"],
-  "mappings": ";AA6FU,cAgBI,YAhBJ;AA5FV,YAAY,WAAW;AACvB,SAAS,OAAO,MAAM,OAAO,YAAY,yBAAyB;AAClE,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,4BAA4B;AAErC,MAAM,eAAe;AAAA,EACnB,EAAE,MAAM,QAAQ,MAAM,WAAW;AAAA,EACjC,EAAE,MAAM,QAAQ,MAAM,MAAM;AAAA,EAC5B,EAAE,MAAM,WAAW,MAAM,MAAM;AAAA,EAC/B,EAAE,MAAM,SAAS,MAAM,KAAK;AAC9B;AAqBA,MAAM,YAAY;AAClB,MAAM,gBAAgB;AACtB,MAAM,cAAc;AAEb,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,IAAI,KAAK;AACf,QAAM,mBAAmB,YAAY,SAAS,KAAK,YAAY;AAC/D,QAAM,YAAY,YAAY,WAAW;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AAEzE,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,SAAU;AACf,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,YAAY;AAChB,UAAI;AACF,cAAM,aAAa,MAAM;AAAA,UACvB,+CAA+C,mBAAmB,QAAQ,CAAC;AAAA,UAC3E,EAAE,QAAQ,WAAW,OAAO;AAAA,QAC9B;AACA,kBAAU,UAAU;AAAA,MACtB,QAAQ;AACN,kBAAU,IAAI;AAAA,MAChB;AAAA,IACF,GAAG;AACH,WAAO,MAAM,WAAW,MAAM;AAAA,EAChC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAAmB,MAAM,YAAY,CAAC,SAAiB;AAC3D,QAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,oBAAc,YAAY,OAAO,CAAC,eAAe,eAAe,IAAI,CAAC;AAAA,IACvE,OAAO;AACL,oBAAc,CAAC,GAAG,aAAa,IAAI,CAAC;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,QAAM,kBAAkB,MAAM,YAAY,MAAM;AAC9C,kBAAc,CAAC,CAAC;AAAA,EAClB,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,qBAAC,SAAI,WAAU,sEACb;AAAA,yBAAC,SAAI,WAAU,uCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,gBAAc;AAAA,UACd,WAAW,GAAG,WAAW,YAAY,cAAc,aAAa;AAAA,UAEhE,8BAAC,UAAM,YAAE,iCAAiC,gBAAgB,GAAE;AAAA;AAAA,MAC9D;AAAA,MAEC,aAAa,IAAI,CAAC,EAAE,MAAM,MAAM,KAAK,MAAM;AAC1C,cAAM,WAAW,YAAY,SAAS,IAAI;AAC1C,cAAM,QAAQ,SAAS,IAA+B;AACtD,cAAM,WAAW,OAAO,UAAU,YAAY,QAAQ;AACtD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,iBAAiB,IAAI;AAAA,YACpC,gBAAc;AAAA,YACd,WAAW,GAAG,WAAW,WAAW,cAAc,aAAa;AAAA,YAE/D;AAAA,kCAAC,QAAK,WAAU,wBAAuB;AAAA,cACvC,qBAAC,UACE;AAAA,kBAAE,6BAA6B,IAAI,IAAI,IAAI;AAAA,gBAC3C,WAAW,IAAI,KAAK,KAAK;AAAA,iBAC5B;AAAA;AAAA;AAAA,UAVK;AAAA,QAWP;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,IAEA,qBAAC,WACC;AAAA,0BAAC,kBAAe,SAAO,MACrB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAY,EAAE,kDAAkD,cAAc;AAAA,UAE9E,8BAAC,qBAAkB,WAAU,YAAW;AAAA;AAAA,MAC1C,GACF;AAAA,MACA,qBAAC,kBAAe,OAAM,OAAM,WAAU,kBACpC;AAAA,6BAAC,SAAI,WAAU,eACb;AAAA,8BAAC,WAAM,WAAU,uBACd,YAAE,0CAA0C,YAAY,GAC3D;AAAA,UACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,UAAU,iBAAiB,MAAM,OAAO,KAAK;AAAA,gBACxD,WAAU;AAAA,gBACV,cAAY,EAAE,kCAAkC,WAAW;AAAA;AAAA,YAC7D;AAAA,YACA,oBAAC,UAAK,WAAU,0CAAyC,oBAAC;AAAA,YAC1D;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA,gBACtD,WAAU;AAAA,gBACV,cAAY,EAAE,gCAAgC,SAAS;AAAA;AAAA,YACzD;AAAA,aACF;AAAA,WACF;AAAA,QAEC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YAET,YAAE,yCAAyC,eAAe;AAAA;AAAA,QAC7D,IACE;AAAA,SACN;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { Phone, Mail, Users, StickyNote, ListTodo, SlidersHorizontal } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'\n\nconst FILTER_TYPES = [\n  { type: 'note', icon: StickyNote },\n  { type: 'call', icon: Phone },\n  { type: 'meeting', icon: Users },\n  { type: 'email', icon: Mail },\n  { type: 'task', icon: ListTodo },\n] as const\n\ntype InteractionCounts = {\n  call: number\n  email: number\n  meeting: number\n  note: number\n  task: number\n  total: number\n}\n\ntype InteractionCountsResponse = {\n  ok?: boolean\n  result?: InteractionCounts\n} & Partial<InteractionCounts>\n\ninterface ActivityTimelineFiltersProps {\n  entityId: string | null\n  activeTypes: string[]\n  dateFrom: string\n  dateTo: string\n  onTypesChange: (types: string[]) => void\n  onDateFromChange: (value: string) => void\n  onDateToChange: (value: string) => void\n  onReset: () => void\n}\n\nconst CHIP_BASE = 'inline-flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium transition-colors'\nconst CHIP_INACTIVE = 'border border-border bg-card text-muted-foreground hover:bg-accent/40'\nconst CHIP_ACTIVE = 'border border-status-info-border bg-status-info-bg text-status-info-text'\n\nexport function ActivityTimelineFilters({\n  entityId,\n  activeTypes,\n  dateFrom,\n  dateTo,\n  onTypesChange,\n  onDateFromChange,\n  onDateToChange,\n  onReset,\n}: ActivityTimelineFiltersProps) {\n  const t = useT()\n  const hasActiveFilters = activeTypes.length > 0 || dateFrom || dateTo\n  const allActive = activeTypes.length === 0\n  const [counts, setCounts] = React.useState<InteractionCounts | null>(null)\n\n  React.useEffect(() => {\n    if (!entityId) return\n    const controller = new AbortController()\n    void (async () => {\n      try {\n        const payload = await readApiResultOrThrow<InteractionCountsResponse>(\n          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,\n          { signal: controller.signal },\n        )\n        // Endpoint envelope is `{ ok, result: {...counts} }`. Some legacy fixtures\n        // return the counts at the top level \u2014 fall back to that shape so the chip\n        // badges keep working in either case.\n        const source = (payload.result ?? payload) as Partial<InteractionCounts>\n        setCounts({\n          call: source.call ?? 0,\n          email: source.email ?? 0,\n          meeting: source.meeting ?? 0,\n          note: source.note ?? 0,\n          task: source.task ?? 0,\n          total: source.total ?? 0,\n        })\n      } catch {\n        setCounts(null)\n      }\n    })()\n    return () => controller.abort()\n  }, [entityId])\n\n  const handleTypeToggle = React.useCallback((type: string) => {\n    if (activeTypes.includes(type)) {\n      onTypesChange(activeTypes.filter((filterType) => filterType !== type))\n    } else {\n      onTypesChange([...activeTypes, type])\n    }\n  }, [activeTypes, onTypesChange])\n\n  const handleSelectAll = React.useCallback(() => {\n    onTypesChange([])\n  }, [onTypesChange])\n\n  return (\n    <div className=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n      <div className=\"flex flex-wrap items-center gap-2.5\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={handleSelectAll}\n          aria-pressed={allActive}\n          className={cn(CHIP_BASE, allActive ? CHIP_ACTIVE : CHIP_INACTIVE)}\n        >\n          <span>{t('customers.timeline.filter.all', 'All Activities')}</span>\n        </Button>\n\n        {FILTER_TYPES.map(({ type, icon: Icon }) => {\n          const isActive = activeTypes.includes(type)\n          const count = counts?.[type as keyof InteractionCounts]\n          const hasCount = typeof count === 'number' && count > 0\n          return (\n            <Button\n              key={type}\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => handleTypeToggle(type)}\n              aria-pressed={isActive}\n              className={cn(CHIP_BASE, isActive ? CHIP_ACTIVE : CHIP_INACTIVE)}\n            >\n              <Icon className=\"size-[18px] shrink-0\" />\n              <span>\n                {t(`customers.timeline.filter.${type}`, type)}\n                {hasCount ? ` ${count}` : ''}\n              </span>\n            </Button>\n          )\n        })}\n      </div>\n\n      <Popover>\n        <PopoverTrigger asChild>\n          <IconButton\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"size-7 rounded-md text-muted-foreground\"\n            aria-label={t('customers.people.detail.activities.moreFilters', 'More filters')}\n          >\n            <SlidersHorizontal className=\"size-3.5\" />\n          </IconButton>\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"w-72 space-y-3\">\n          <div className=\"space-y-1.5\">\n            <label className=\"text-xs font-medium\">\n              {t('customers.activities.filters.dateRange', 'Date range')}\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <input\n                type=\"date\"\n                value={dateFrom}\n                onChange={(event) => onDateFromChange(event.target.value)}\n                className=\"h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring\"\n                aria-label={t('customers.timeline.filter.from', 'From date')}\n              />\n              <span className=\"shrink-0 text-xs text-muted-foreground\">\u2014</span>\n              <input\n                type=\"date\"\n                value={dateTo}\n                onChange={(event) => onDateToChange(event.target.value)}\n                className=\"h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring\"\n                aria-label={t('customers.timeline.filter.to', 'To date')}\n              />\n            </div>\n          </div>\n\n          {hasActiveFilters ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={onReset}\n              className=\"h-7 w-full text-xs\"\n            >\n              {t('customers.activities.filters.clearAll', 'Clear filters')}\n            </Button>\n          ) : null}\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/customers/components/detail/ActivityTypeSelector.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Phone, Mail, Users, StickyNote } from "lucide-react";
+import { ListTodo, 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 { Button } from "@open-mercato/ui/primitives/button";
@@ -8,11 +8,12 @@ const ACTIVITY_TYPES = [
   { type: "call", icon: Phone, labelKey: "customers.activityComposer.types.call", fallback: "Call" },
   { type: "email", icon: Mail, labelKey: "customers.activityComposer.types.email", fallback: "Email" },
   { type: "meeting", icon: Users, labelKey: "customers.activityComposer.types.meeting", fallback: "Meeting" },
-  { type: "note", icon: StickyNote, labelKey: "customers.activityComposer.types.note", fallback: "Note" }
+  { type: "note", icon: StickyNote, labelKey: "customers.activityComposer.types.note", fallback: "Note" },
+  { type: "task", icon: ListTodo, labelKey: "customers.activityComposer.types.task", fallback: "Task" }
 ];
 function ActivityTypeSelector({ selectedType, onSelect }) {
   const t = useT();
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: ACTIVITY_TYPES.map(({ type, icon: Icon, labelKey, fallback }) => {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-2", children: ACTIVITY_TYPES.map(({ type, icon: Icon, labelKey, fallback }) => {
     const isSelected = selectedType === type;
     return /* @__PURE__ */ jsxs(
       Button,

package/dist/modules/customers/components/detail/ActivityTypeSelector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/ActivityTypeSelector.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { Phone, Mail, Users, StickyNote } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nconst ACTIVITY_TYPES = [\n  { type: 'call', icon: Phone, labelKey: 'customers.activityComposer.types.call', fallback: 'Call' },\n  { type: 'email', icon: Mail, labelKey: 'customers.activityComposer.types.email', fallback: 'Email' },\n  { type: 'meeting', icon: Users, labelKey: 'customers.activityComposer.types.meeting', fallback: 'Meeting' },\n  { type: 'note', icon: StickyNote, labelKey: 'customers.activityComposer.types.note', fallback: 'Note' },\n] as const\n\nexport type ActivityType = (typeof ACTIVITY_TYPES)[number]['type']\n\ninterface ActivityTypeSelectorProps {\n  selectedType: ActivityType | null\n  onSelect: (type: ActivityType) => void\n}\n\nexport function ActivityTypeSelector({ selectedType, onSelect }: ActivityTypeSelectorProps) {\n  const t = useT()\n\n  return (\n    <div className=\"grid grid-cols-4 gap-2\">\n      {ACTIVITY_TYPES.map(({ type, icon: Icon, labelKey, fallback }) => {\n        const isSelected = selectedType === type\n        return (\n          <Button\n            key={type}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => onSelect(type)}\n            aria-pressed={isSelected}\n            className={cn(\n              'h-10 gap-2 rounded-lg',\n              isSelected\n                ? 'border-foreground bg-background text-foreground shadow-sm'\n                : 'border-border text-muted-foreground',\n            )}\n          >\n            <Icon className=\"size-4\" />\n            {t(labelKey, fallback)}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { ACTIVITY_TYPES }\n"],
-  "mappings": ";AA6BU,SAcE,KAdF;AA3BV,SAAS,OAAO,MAAM,OAAO,kBAAkB;AAC/C,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,MAAM,iBAAiB;AAAA,EACrB,EAAE,MAAM,QAAQ,MAAM,OAAO,UAAU,yCAAyC,UAAU,OAAO;AAAA,EACjG,EAAE,MAAM,SAAS,MAAM,MAAM,UAAU,0CAA0C,UAAU,QAAQ;AAAA,EACnG,EAAE,MAAM,WAAW,MAAM,OAAO,UAAU,4CAA4C,UAAU,UAAU;AAAA,EAC1G,EAAE,MAAM,QAAQ,MAAM,YAAY,UAAU,yCAAyC,UAAU,OAAO;AACxG;AASO,SAAS,qBAAqB,EAAE,cAAc,SAAS,GAA8B;AAC1F,QAAM,IAAI,KAAK;AAEf,SACE,oBAAC,SAAI,WAAU,0BACZ,yBAAe,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,MAAM;AAChE,UAAM,aAAa,iBAAiB;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,IAAI;AAAA,QAC5B,gBAAc;AAAA,QACd,WAAW;AAAA,UACT;AAAA,UACA,aACI,8DACA;AAAA,QACN;AAAA,QAEA;AAAA,8BAAC,QAAK,WAAU,UAAS;AAAA,UACxB,EAAE,UAAU,QAAQ;AAAA;AAAA;AAAA,MAdhB;AAAA,IAeP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { ListTodo, Mail, Phone, StickyNote, Users } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nconst ACTIVITY_TYPES = [\n  { type: 'call', icon: Phone, labelKey: 'customers.activityComposer.types.call', fallback: 'Call' },\n  { type: 'email', icon: Mail, labelKey: 'customers.activityComposer.types.email', fallback: 'Email' },\n  { type: 'meeting', icon: Users, labelKey: 'customers.activityComposer.types.meeting', fallback: 'Meeting' },\n  { type: 'note', icon: StickyNote, labelKey: 'customers.activityComposer.types.note', fallback: 'Note' },\n  { type: 'task', icon: ListTodo, labelKey: 'customers.activityComposer.types.task', fallback: 'Task' },\n] as const\n\nexport type ActivityType = (typeof ACTIVITY_TYPES)[number]['type']\n\ninterface ActivityTypeSelectorProps {\n  selectedType: ActivityType | null\n  onSelect: (type: ActivityType) => void\n}\n\nexport function ActivityTypeSelector({ selectedType, onSelect }: ActivityTypeSelectorProps) {\n  const t = useT()\n\n  return (\n    <div className=\"grid grid-cols-5 gap-2\">\n      {ACTIVITY_TYPES.map(({ type, icon: Icon, labelKey, fallback }) => {\n        const isSelected = selectedType === type\n        return (\n          <Button\n            key={type}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => onSelect(type)}\n            aria-pressed={isSelected}\n            className={cn(\n              'h-10 gap-2 rounded-lg',\n              isSelected\n                ? 'border-foreground bg-background text-foreground shadow-sm'\n                : 'border-border text-muted-foreground',\n            )}\n          >\n            <Icon className=\"size-4\" />\n            {t(labelKey, fallback)}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { ACTIVITY_TYPES }\n"],
+  "mappings": ";AA8BU,SAcE,KAdF;AA5BV,SAAS,UAAU,MAAM,OAAO,YAAY,aAAa;AACzD,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,MAAM,iBAAiB;AAAA,EACrB,EAAE,MAAM,QAAQ,MAAM,OAAO,UAAU,yCAAyC,UAAU,OAAO;AAAA,EACjG,EAAE,MAAM,SAAS,MAAM,MAAM,UAAU,0CAA0C,UAAU,QAAQ;AAAA,EACnG,EAAE,MAAM,WAAW,MAAM,OAAO,UAAU,4CAA4C,UAAU,UAAU;AAAA,EAC1G,EAAE,MAAM,QAAQ,MAAM,YAAY,UAAU,yCAAyC,UAAU,OAAO;AAAA,EACtG,EAAE,MAAM,QAAQ,MAAM,UAAU,UAAU,yCAAyC,UAAU,OAAO;AACtG;AASO,SAAS,qBAAqB,EAAE,cAAc,SAAS,GAA8B;AAC1F,QAAM,IAAI,KAAK;AAEf,SACE,oBAAC,SAAI,WAAU,0BACZ,yBAAe,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,MAAM;AAChE,UAAM,aAAa,iBAAiB;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,IAAI;AAAA,QAC5B,gBAAc;AAAA,QACd,WAAW;AAAA,UACT;AAAA,UACA,aACI,8DACA;AAAA,QACN;AAAA,QAEA;AAAA,8BAAC,QAAK,WAAU,UAAS;AAAA,UACxB,EAAE,UAAU,QAAQ;AAAA;AAAA;AAAA,MAdhB;AAAA,IAeP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/modules/customers/components/detail/ScheduleActivityDialog.js CHANGED Viewed

@@ -4,7 +4,9 @@ import * as React from "react";
 import { Users, Phone, Check, Mail, Calendar, AlertTriangle, X } from "lucide-react";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { validatePhoneNumber } from "@open-mercato/shared/lib/phone";
 import { apiCallOrThrow, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { mapCrudServerErrorToFormErrors } from "@open-mercato/ui/backend/utils/serverErrors";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
 import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
@@ -12,7 +14,7 @@ import { Button } from "@open-mercato/ui/primitives/button";
 import { IconButton } from "@open-mercato/ui/primitives/icon-button";
 import { Dialog, DialogContent, DialogTitle } from "@open-mercato/ui/primitives/dialog";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { SwitchableMarkdownInput } from "@open-mercato/ui/backend/inputs";
+import { PhoneNumberField, SwitchableMarkdownInput } from "@open-mercato/ui/backend/inputs";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import {
   useScheduleFormState,
@@ -106,14 +108,31 @@ function ScheduleActivityDialog({
   const [callDirection, setCallDirection] = React.useState("outbound");
   const [callOutcome, setCallOutcome] = React.useState(null);
   const [callPhoneNumber, setCallPhoneNumber] = React.useState("");
+  const [callPhoneError, setCallPhoneError] = React.useState(null);
   const [taskPriority, setTaskPriority] = React.useState("medium");
+  const callPhoneInvalidMessage = React.useMemo(
+    () => t(
+      "customers.activities.errors.phoneInvalid",
+      "Enter a valid phone number with country code (e.g. +1 212 555 1234)"
+    ),
+    [t]
+  );
+  const translateErrorMessage = React.useCallback(
+    (message, fallback) => {
+      const key = typeof message === "string" ? message.trim() : "";
+      return key ? t(key, key) : fallback;
+    },
+    [t]
+  );
   React.useEffect(() => {
     if (!open) return;
     const raw = editData;
     const cv = raw?.customValues && typeof raw.customValues === "object" ? raw.customValues : 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 : "");
+    const seededPhone = typeof raw?.phoneNumber === "string" && raw.phoneNumber.trim().length > 0 ? raw.phoneNumber : typeof cv?.callPhoneNumber === "string" ? cv.callPhoneNumber : "";
+    setCallPhoneNumber(seededPhone);
+    setCallPhoneError(null);
     setTaskPriority(typeof cv?.taskPriority === "string" ? cv.taskPriority : "medium");
   }, [open, editData]);
   React.useEffect(() => {
@@ -121,8 +140,13 @@ function ScheduleActivityDialog({
     setCallDirection("outbound");
     setCallOutcome(null);
     setCallPhoneNumber("");
+    setCallPhoneError(null);
     setTaskPriority("medium");
   }, [state.activityType, open, isEditing]);
+  const handleCallPhoneChange = React.useCallback((next) => {
+    setCallPhoneNumber(next ?? "");
+    setCallPhoneError(null);
+  }, []);
   const formSnapshot = React.useMemo(() => JSON.stringify({
     activityType: state.activityType,
     title: state.title,
@@ -264,8 +288,36 @@ function ScheduleActivityDialog({
     }, 500);
     return () => clearTimeout(timer);
   }, [editData?.id, open, state.date, state.startTime, state.duration, state.allDay, t]);
+  const trimmedDate = state.date.trim();
+  const trimmedStartTime = state.startTime.trim();
+  const trimmedCallPhone = callPhoneNumber.trim();
+  const isDateMissing = !trimmedDate;
+  const isTimeMissing = !state.allDay && !trimmedStartTime;
+  const isSubmitDisabled = state.saving || !state.title.trim() || isDateMissing || isTimeMissing;
   const handleSave = React.useCallback(async () => {
     if (!state.title.trim()) return;
+    if (isDateMissing) {
+      flash(t("customers.activities.errors.dateRequired", "Date is required"), "error");
+      return;
+    }
+    if (isTimeMissing) {
+      flash(t("customers.activities.errors.timeRequired", "Time is required"), "error");
+      return;
+    }
+    let phoneNumberForPayload;
+    if (state.activityType === "call" && trimmedCallPhone) {
+      const phoneValidation = validatePhoneNumber(trimmedCallPhone);
+      if (!phoneValidation.valid) {
+        setCallPhoneError(callPhoneInvalidMessage);
+        flash(callPhoneInvalidMessage, "error");
+        return;
+      }
+      phoneNumberForPayload = phoneValidation.normalized ?? trimmedCallPhone;
+      setCallPhoneError(null);
+      if (phoneNumberForPayload !== callPhoneNumber) {
+        setCallPhoneNumber(phoneNumberForPayload);
+      }
+    }
     state.setSaving(true);
     try {
       const scheduledAt = state.allDay ? (/* @__PURE__ */ new Date(`${state.date}T00:00:00`)).toISOString() : (/* @__PURE__ */ new Date(`${state.date}T${state.startTime}:00`)).toISOString();
@@ -275,7 +327,7 @@ function ScheduleActivityDialog({
       if (state.activityType === "call") {
         customValues.callDirection = callDirection;
         if (callOutcome) customValues.callOutcome = callOutcome;
-        if (callPhoneNumber.trim()) customValues.callPhoneNumber = callPhoneNumber.trim();
+        if (phoneNumberForPayload) customValues.callPhoneNumber = phoneNumberForPayload;
       }
       if (state.activityType === "task") {
         customValues.taskPriority = taskPriority;
@@ -288,6 +340,9 @@ function ScheduleActivityDialog({
         title: state.title.trim(),
         body: state.description.trim() || null,
         status: "planned",
+        date: trimmedDate,
+        time: state.allDay ? "00:00" : trimmedStartTime,
+        phoneNumber: state.activityType === "call" ? phoneNumberForPayload : void 0,
         scheduledAt,
         durationMinutes: visibleFields.has("duration") && !state.allDay ? state.duration : null,
         location: visibleFields.has("location") ? state.location.trim() || null : null,
@@ -318,12 +373,23 @@ function ScheduleActivityDialog({
       requestAnimationFrame(() => {
         onActivityCreated?.();
       });
-    } catch {
-      flash(t("customers.schedule.error", "Failed to schedule activity"), "error");
+    } catch (err) {
+      const { message, fieldErrors } = mapCrudServerErrorToFormErrors(err);
+      const phoneFieldError = fieldErrors?.phoneNumber;
+      if (state.activityType === "call" && phoneFieldError) {
+        const translatedPhoneError = translateErrorMessage(phoneFieldError, callPhoneInvalidMessage);
+        setCallPhoneError(translatedPhoneError);
+        flash(translatedPhoneError, "error");
+        return;
+      }
+      flash(
+        translateErrorMessage(message, t("customers.schedule.error", "Failed to schedule activity")),
+        "error"
+      );
     } finally {
       state.setSaving(false);
     }
-  }, [state.activityType, state.allDay, state.date, state.description, dealId, state.duration, editData, entityId, state.guestPermissions, state.linkedEntities, state.location, onActivityCreated, onClose, state.participants, state.recurrenceCount, state.recurrenceDays, state.recurrenceEnabled, state.recurrenceEndDate, state.recurrenceEndType, state.reminderMinutes, runGuardedMutation, state.startTime, t, state.title, state.visibility, visibleFields]);
+  }, [callDirection, callOutcome, callPhoneInvalidMessage, callPhoneNumber, isDateMissing, isTimeMissing, state.activityType, state.allDay, state.date, state.description, dealId, state.duration, editData, entityId, state.guestPermissions, state.linkedEntities, state.location, onActivityCreated, onClose, state.participants, state.recurrenceCount, state.recurrenceDays, state.recurrenceEnabled, state.recurrenceEndDate, state.recurrenceEndType, state.reminderMinutes, runGuardedMutation, state.startTime, t, taskPriority, state.title, translateErrorMessage, trimmedCallPhone, trimmedDate, trimmedStartTime, state.visibility, visibleFields]);
   const handleKeyDown = React.useCallback((e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
@@ -498,15 +564,17 @@ function ScheduleActivityDialog({
           }
         ),
         state.activityType === "call" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsx("label", { className: "text-overline font-semibold uppercase text-muted-foreground tracking-wider", children: t("customers.schedule.call.phoneLabel", "Phone number") }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "schedule-call-phone", className: "text-overline font-semibold uppercase text-muted-foreground tracking-wider", children: t("customers.schedule.call.phoneLabel", "Phone number") }),
           /* @__PURE__ */ jsx(
-            "input",
+            PhoneNumberField,
             {
-              type: "tel",
+              id: "schedule-call-phone",
               value: callPhoneNumber,
-              onChange: (e) => setCallPhoneNumber(e.target.value),
+              onValueChange: handleCallPhoneChange,
               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"
+              externalError: callPhoneError,
+              invalidLabel: callPhoneInvalidMessage,
+              minDigits: 7
             }
           )
         ] }) : /* @__PURE__ */ jsx(
@@ -556,7 +624,7 @@ function ScheduleActivityDialog({
         /* @__PURE__ */ jsx(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", children: t("customers.schedule.cancel", "Cancel") }),
-        /* @__PURE__ */ jsxs(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", children: [
+        /* @__PURE__ */ jsxs(Button, { type: "button", onClick: handleSave, disabled: isSubmitDisabled, 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", children: [
           /* @__PURE__ */ jsx(SaveIcon, { className: "size-3.5" }),
           state.saving ? t("customers.schedule.saving", "Saving...") : isEditing ? t("customers.schedule.update", "Update activity") : t(chrome.saveKey, chrome.saveFallback)
         ] })