@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/dist/modules/customers/components/detail/PlannedActivitiesSection.js

@@ -0,0 +1,222 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Phone, Mail, Users, StickyNote, Clock, AlertCircle, CalendarClock, Check, MoreHorizontal, Plus } from "lucide-react";
+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";
+const TYPE_ICONS = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote
+};
+function PlannedActivitiesSection({ activities, onComplete, onSchedule, onEdit, onCancel }) {
+  const t = useT();
+  if (activities.length === 0) return null;
+  const now = /* @__PURE__ */ new Date();
+  const classified = activities.map((activity) => {
+    const scheduledDate = activity.scheduledAt ? new Date(activity.scheduledAt) : null;
+    const isOverdue = scheduledDate ? scheduledDate < now : false;
+    return { ...activity, isOverdue };
+  });
+  const overdue = classified.filter((a) => a.isOverdue);
+  const upcoming = classified.filter((a) => !a.isOverdue);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
+        /* @__PURE__ */ jsx(CalendarClock, { className: "size-4 text-muted-foreground" }),
+        t("customers.timeline.planned.title", "Planned activities"),
+        /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: activities.length }),
+        overdue.length > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-destructive", children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "size-3" }),
+          overdue.length,
+          " ",
+          t("customers.timeline.planned.overdueCount", "overdue")
+        ] })
+      ] }),
+      onSchedule && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 text-xs", onClick: onSchedule, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "mr-1 size-3" }),
+        t("customers.timeline.planned.schedule", "Schedule")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "divide-y", children: [
+      overdue.map((activity) => {
+        const TypeIcon = TYPE_ICONS[activity.interactionType];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-3 border-l-2 border-l-destructive px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors",
+            onClick: () => onEdit?.(activity),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") onEdit?.(activity);
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-8 rounded-full bg-destructive/10 shrink-0", children: TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { className: "size-4 text-destructive" }) : /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium block truncate", children: activity.title ?? activity.body ?? activity.interactionType }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 font-medium text-destructive", children: t("customers.timeline.planned.overdue", "Overdue") }),
+                  /* @__PURE__ */ jsx("span", { children: activity.scheduledAt ? formatRelativeOverdue(activity.scheduledAt, t) : "" }),
+                  activity.authorName && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                    /* @__PURE__ */ jsx("span", { children: activity.authorName })
+                  ] })
+                ] })
+              ] }),
+              onComplete && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 shrink-0 text-xs",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onComplete(activity.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Check, { className: "mr-1 size-3" }),
+                    t("customers.timeline.planned.markDone", "Mark done")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(Popover, { children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "xs", "aria-label": t("customers.timeline.more", "More"), onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" }) }) }),
+                /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-40 p-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      className: "w-full justify-start text-xs",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        onEdit?.(activity);
+                      },
+                      children: t("customers.timeline.planned.reschedule", "Reschedule")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      className: "w-full justify-start text-xs text-destructive hover:text-destructive",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        onCancel?.(activity.id);
+                      },
+                      children: t("customers.timeline.planned.cancel", "Cancel")
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          activity.id
+        );
+      }),
+      upcoming.map((activity) => {
+        const TypeIcon = TYPE_ICONS[activity.interactionType];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors",
+            onClick: () => onEdit?.(activity),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") onEdit?.(activity);
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-8 rounded-full bg-muted shrink-0", children: TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Clock, { className: "size-4 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium block truncate", children: activity.title ?? activity.body ?? activity.interactionType }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("span", { children: activity.scheduledAt ? formatScheduledDate(activity.scheduledAt) : "" }),
+                  activity.authorName && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                    /* @__PURE__ */ jsx("span", { children: activity.authorName })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Popover, { children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "xs", "aria-label": t("customers.timeline.more", "More"), onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" }) }) }),
+                /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-40 p-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      className: "w-full justify-start text-xs",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        onEdit?.(activity);
+                      },
+                      children: t("customers.timeline.planned.reschedule", "Reschedule")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      className: "w-full justify-start text-xs text-destructive hover:text-destructive",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        onCancel?.(activity.id);
+                      },
+                      children: t("customers.timeline.planned.cancel", "Cancel")
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          activity.id
+        );
+      })
+    ] })
+  ] });
+}
+function formatRelativeOverdue(isoString, t) {
+  try {
+    const date = new Date(isoString);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+    if (diffDays <= 0) return t("customers.timeline.planned.overdueToday", "due today");
+    if (diffDays === 1) return t("customers.timeline.planned.overdueSince", "since yesterday");
+    return t("customers.timeline.planned.overdueDays", "overdue {{days}} days", { days: diffDays });
+  } catch {
+    return "";
+  }
+}
+function formatScheduledDate(isoString) {
+  try {
+    const date = new Date(isoString);
+    const now = /* @__PURE__ */ new Date();
+    const tomorrow = new Date(now);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const dayName = date.toLocaleDateString(void 0, { weekday: "short" });
+    const dateStr = date.toLocaleDateString(void 0, { day: "numeric", month: "short" });
+    const timeStr = date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+    if (date.toDateString() === tomorrow.toDateString()) {
+      return `Tomorrow ${timeStr}`;
+    }
+    return `${dayName}, ${dateStr} \xB7 ${timeStr}`;
+  } catch {
+    return isoString;
+  }
+}
+export {
+  PlannedActivitiesSection
+};
+//# sourceMappingURL=PlannedActivitiesSection.js.map

package/dist/modules/customers/components/detail/PlannedActivitiesSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/PlannedActivitiesSection.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { Phone, Mail, Users, StickyNote, Clock, AlertCircle, CalendarClock, Check, MoreHorizontal, Plus } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT, type TranslateFn } 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 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 PlannedActivitiesSectionProps {\n  activities: InteractionSummary[]\n  onComplete?: (id: string) => void\n  onSchedule?: () => void\n  onEdit?: (activity: InteractionSummary) => void\n  onCancel?: (id: string) => void\n}\n\nexport function PlannedActivitiesSection({ activities, onComplete, onSchedule, onEdit, onCancel }: PlannedActivitiesSectionProps) {\n  const t = useT()\n\n  if (activities.length === 0) return null\n\n  const now = new Date()\n\n  const classified = activities.map((activity) => {\n    const scheduledDate = activity.scheduledAt ? new Date(activity.scheduledAt) : null\n    const isOverdue = scheduledDate ? scheduledDate < now : false\n    return { ...activity, isOverdue }\n  })\n\n  const overdue = classified.filter((a) => a.isOverdue)\n  const upcoming = classified.filter((a) => !a.isOverdue)\n\n  return (\n    <div className=\"rounded-lg border bg-card\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-4 py-3 border-b\">\n        <div className=\"flex items-center gap-2 text-sm font-medium\">\n          <CalendarClock className=\"size-4 text-muted-foreground\" />\n          {t('customers.timeline.planned.title', 'Planned activities')}\n          <span className=\"rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground\">\n            {activities.length}\n          </span>\n          {overdue.length > 0 && (\n            <span className=\"flex items-center gap-1 text-xs font-medium text-destructive\">\n              <AlertCircle className=\"size-3\" />\n              {overdue.length} {t('customers.timeline.planned.overdueCount', 'overdue')}\n            </span>\n          )}\n        </div>\n        {onSchedule && (\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"h-7 text-xs\" onClick={onSchedule}>\n            <Plus className=\"mr-1 size-3\" />\n            {t('customers.timeline.planned.schedule', 'Schedule')}\n          </Button>\n        )}\n      </div>\n\n      {/* Items */}\n      <div className=\"divide-y\">\n        {overdue.map((activity) => {\n          const TypeIcon = TYPE_ICONS[activity.interactionType]\n          return (\n            <div\n              key={activity.id}\n              className=\"flex items-center gap-3 border-l-2 border-l-destructive px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors\"\n              onClick={() => onEdit?.(activity)}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={(e) => { if (e.key === 'Enter') onEdit?.(activity) }}\n            >\n              <div className=\"flex items-center justify-center size-8 rounded-full bg-destructive/10 shrink-0\">\n                {TypeIcon ? <TypeIcon className=\"size-4 text-destructive\" /> : <AlertCircle className=\"size-4 text-destructive\" />}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"text-sm font-medium block truncate\">\n                  {activity.title ?? activity.body ?? activity.interactionType}\n                </span>\n                <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                  <span className=\"inline-flex items-center gap-1 font-medium text-destructive\">\n                    {t('customers.timeline.planned.overdue', 'Overdue')}\n                  </span>\n                  <span>\n                    {activity.scheduledAt ? formatRelativeOverdue(activity.scheduledAt, t) : ''}\n                  </span>\n                  {activity.authorName && (\n                    <>\n                      <span>\u00B7</span>\n                      <span>{activity.authorName}</span>\n                    </>\n                  )}\n                </div>\n              </div>\n              {onComplete && (\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"h-7 shrink-0 text-xs\"\n                  onClick={(event) => {\n                    event.stopPropagation()\n                    onComplete(activity.id)\n                  }}\n                >\n                  <Check className=\"mr-1 size-3\" />\n                  {t('customers.timeline.planned.markDone', 'Mark done')}\n                </Button>\n              )}\n              <Popover>\n                <PopoverTrigger asChild>\n                  <IconButton type=\"button\" variant=\"ghost\" size=\"xs\" aria-label={t('customers.timeline.more', 'More')} onClick={(e) => e.stopPropagation()}>\n                    <MoreHorizontal className=\"size-3.5\" />\n                  </IconButton>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-40 p-1\">\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"w-full justify-start text-xs\"\n                    onClick={(event) => {\n                      event.stopPropagation()\n                      onEdit?.(activity)\n                    }}\n                  >\n                    {t('customers.timeline.planned.reschedule', 'Reschedule')}\n                  </Button>\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"w-full justify-start text-xs text-destructive hover:text-destructive\"\n                    onClick={(event) => {\n                      event.stopPropagation()\n                      onCancel?.(activity.id)\n                    }}\n                  >\n                    {t('customers.timeline.planned.cancel', 'Cancel')}\n                  </Button>\n                </PopoverContent>\n              </Popover>\n            </div>\n          )\n        })}\n\n        {upcoming.map((activity) => {\n          const TypeIcon = TYPE_ICONS[activity.interactionType]\n          return (\n            <div\n              key={activity.id}\n              className=\"flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors\"\n              onClick={() => onEdit?.(activity)}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={(e) => { if (e.key === 'Enter') onEdit?.(activity) }}\n            >\n              <div className=\"flex items-center justify-center size-8 rounded-full bg-muted shrink-0\">\n                {TypeIcon ? <TypeIcon className=\"size-4 text-muted-foreground\" /> : <Clock className=\"size-4 text-muted-foreground\" />}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"text-sm font-medium block truncate\">\n                  {activity.title ?? activity.body ?? activity.interactionType}\n                </span>\n                <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                  <span>{activity.scheduledAt ? formatScheduledDate(activity.scheduledAt) : ''}</span>\n                  {activity.authorName && (\n                    <>\n                      <span>\u00B7</span>\n                      <span>{activity.authorName}</span>\n                    </>\n                  )}\n                </div>\n              </div>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <IconButton type=\"button\" variant=\"ghost\" size=\"xs\" aria-label={t('customers.timeline.more', 'More')} onClick={(e) => e.stopPropagation()}>\n                    <MoreHorizontal className=\"size-3.5\" />\n                  </IconButton>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-40 p-1\">\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"w-full justify-start text-xs\"\n                    onClick={(event) => {\n                      event.stopPropagation()\n                      onEdit?.(activity)\n                    }}\n                  >\n                    {t('customers.timeline.planned.reschedule', 'Reschedule')}\n                  </Button>\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"w-full justify-start text-xs text-destructive hover:text-destructive\"\n                    onClick={(event) => {\n                      event.stopPropagation()\n                      onCancel?.(activity.id)\n                    }}\n                  >\n                    {t('customers.timeline.planned.cancel', 'Cancel')}\n                  </Button>\n                </PopoverContent>\n              </Popover>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction formatRelativeOverdue(isoString: string, t: TranslateFn): string {\n  try {\n    const date = new Date(isoString)\n    const now = new Date()\n    const diffMs = now.getTime() - date.getTime()\n    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))\n    if (diffDays <= 0) return t('customers.timeline.planned.overdueToday', 'due today')\n    if (diffDays === 1) return t('customers.timeline.planned.overdueSince', 'since yesterday')\n    return t('customers.timeline.planned.overdueDays', 'overdue {{days}} days', { days: diffDays })\n  } catch {\n    return ''\n  }\n}\n\nfunction formatScheduledDate(isoString: string): string {\n  try {\n    const date = new Date(isoString)\n    const now = new Date()\n    const tomorrow = new Date(now)\n    tomorrow.setDate(tomorrow.getDate() + 1)\n\n    const dayName = date.toLocaleDateString(undefined, { weekday: 'short' })\n    const dateStr = date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })\n    const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })\n\n    if (date.toDateString() === tomorrow.toDateString()) {\n      return `Tomorrow ${timeStr}`\n    }\n    return `${dayName}, ${dateStr} \u00B7 ${timeStr}`\n  } catch {\n    return isoString\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/customers/components/detail/RelationshipHealthCard.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Heart, EyeOff } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { computeHealthScore, HEALTH_BADGE_CLASSES, HEALTH_ICON_CLASSES } from "./healthScoreUtils.js";
+function RelationshipHealthCard({ interactions, onHide }) {
+  const t = useT();
+  const health = React.useMemo(() => computeHealthScore(interactions), [interactions]);
+  return /* @__PURE__ */ jsxs("div", { className: "group relative rounded-lg border bg-card p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+        /* @__PURE__ */ jsx(Heart, { className: cn("size-4", HEALTH_ICON_CLASSES[health.variant]) }),
+        t("customers.companies.detail.health.title", "Relationship health")
+      ] }),
+      onHide && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          onClick: onHide,
+          className: "opacity-0 transition-opacity group-hover:opacity-60",
+          "aria-label": t("customers.companies.dashboard.hideTile", "Hide tile"),
+          children: /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center justify-center", children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold", HEALTH_ICON_CLASSES[health.variant]), children: health.score }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "/100" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { className: cn("text-xs", HEALTH_BADGE_CLASSES[health.variant]), children: t(`customers.companies.detail.health.${health.label}`, health.label) }) }),
+      health.lastContactDays !== null && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        t("customers.companies.detail.health.lastContact", "Last contact"),
+        ": ",
+        health.lastContactDays === 0 ? t("customers.health.today", "today") : t("customers.health.daysAgo", "{days} days ago", { days: health.lastContactDays })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  RelationshipHealthCard
+};
+//# sourceMappingURL=RelationshipHealthCard.js.map

package/dist/modules/customers/components/detail/RelationshipHealthCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/RelationshipHealthCard.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Heart, EyeOff } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport type { InteractionSummary } from '../formConfig'\nimport { computeHealthScore, HEALTH_BADGE_CLASSES, HEALTH_ICON_CLASSES } from './healthScoreUtils'\n\ntype RelationshipHealthCardProps = {\n  interactions: InteractionSummary[]\n  onHide?: () => void\n}\n\nexport function RelationshipHealthCard({ interactions, onHide }: RelationshipHealthCardProps) {\n  const t = useT()\n  const health = React.useMemo(() => computeHealthScore(interactions), [interactions])\n\n  return (\n    <div className=\"group relative rounded-lg border bg-card p-5\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"flex items-center gap-2 text-sm font-semibold text-foreground\">\n          <Heart className={cn('size-4', HEALTH_ICON_CLASSES[health.variant])} />\n          {t('customers.companies.detail.health.title', 'Relationship health')}\n        </h3>\n        {onHide && (\n          <IconButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"xs\"\n            onClick={onHide}\n            className=\"opacity-0 transition-opacity group-hover:opacity-60\"\n            aria-label={t('customers.companies.dashboard.hideTile', 'Hide tile')}\n          >\n            <EyeOff className=\"size-3.5\" />\n          </IconButton>\n        )}\n      </div>\n      <div className=\"mt-4 flex items-center justify-center\">\n        <div className=\"space-y-2 text-center\">\n          <div className=\"relative inline-flex items-center justify-center\">\n            <span className={cn('text-4xl font-bold', HEALTH_ICON_CLASSES[health.variant])}>{health.score}</span>\n            <span className=\"text-sm text-muted-foreground\">/100</span>\n          </div>\n          <div>\n            <Badge className={cn('text-xs', HEALTH_BADGE_CLASSES[health.variant])}>\n              {t(`customers.companies.detail.health.${health.label}`, health.label)}\n            </Badge>\n          </div>\n          {health.lastContactDays !== null && (\n            <p className=\"text-xs text-muted-foreground\">\n              {t('customers.companies.detail.health.lastContact', 'Last contact')}: {health.lastContactDays === 0\n                ? t('customers.health.today', 'today')\n                : t('customers.health.daysAgo', '{days} days ago', { days: health.lastContactDays })}\n            </p>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAuBQ,SACE,KADF;AArBR,YAAY,WAAW;AACvB,SAAS,OAAO,cAAc;AAC9B,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB,sBAAsB,2BAA2B;AAOvE,SAAS,uBAAuB,EAAE,cAAc,OAAO,GAAgC;AAC5F,QAAM,IAAI,KAAK;AACf,QAAM,SAAS,MAAM,QAAQ,MAAM,mBAAmB,YAAY,GAAG,CAAC,YAAY,CAAC;AAEnF,SACE,qBAAC,SAAI,WAAU,gDACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,QAAG,WAAU,iEACZ;AAAA,4BAAC,SAAM,WAAW,GAAG,UAAU,oBAAoB,OAAO,OAAO,CAAC,GAAG;AAAA,QACpE,EAAE,2CAA2C,qBAAqB;AAAA,SACrE;AAAA,MACC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACV,cAAY,EAAE,0CAA0C,WAAW;AAAA,UAEnE,8BAAC,UAAO,WAAU,YAAW;AAAA;AAAA,MAC/B;AAAA,OAEJ;AAAA,IACA,oBAAC,SAAI,WAAU,yCACb,+BAAC,SAAI,WAAU,yBACb;AAAA,2BAAC,SAAI,WAAU,oDACb;AAAA,4BAAC,UAAK,WAAW,GAAG,sBAAsB,oBAAoB,OAAO,OAAO,CAAC,GAAI,iBAAO,OAAM;AAAA,QAC9F,oBAAC,UAAK,WAAU,iCAAgC,kBAAI;AAAA,SACtD;AAAA,MACA,oBAAC,SACC,8BAAC,SAAM,WAAW,GAAG,WAAW,qBAAqB,OAAO,OAAO,CAAC,GACjE,YAAE,qCAAqC,OAAO,KAAK,IAAI,OAAO,KAAK,GACtE,GACF;AAAA,MACC,OAAO,oBAAoB,QAC1B,qBAAC,OAAE,WAAU,iCACV;AAAA,UAAE,iDAAiD,cAAc;AAAA,QAAE;AAAA,QAAG,OAAO,oBAAoB,IAC9F,EAAE,0BAA0B,OAAO,IACnC,EAAE,4BAA4B,mBAAmB,EAAE,MAAM,OAAO,gBAAgB,CAAC;AAAA,SACvF;AAAA,OAEJ,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/modules/customers/components/detail/RoleAssignmentRow.js

@@ -0,0 +1,189 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Mail, Phone, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { apiCallOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { LookupSelect } from "@open-mercato/ui/backend/inputs/LookupSelect";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { fetchAssignableStaffMembers } from "./assignableStaff.js";
+import { getInitials } from "./utils.js";
+function formatAssignedAt(value, t) {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  const diffMs = Date.now() - date.getTime();
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffDays <= 0) return t("customers.roles.assignedToday", "Assigned today");
+  if (diffDays === 1) return t("customers.roles.assignedYesterday", "Assigned yesterday");
+  return t("customers.roles.assignedDaysAgo", "Assigned {{count}} days ago", { count: diffDays });
+}
+function RoleAssignmentRow({
+  role,
+  roleTypeLabel,
+  runMutationWithContext,
+  entityType,
+  entityId,
+  onRemoved,
+  onUpdated
+}) {
+  const t = useT();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const [removing, setRemoving] = React.useState(false);
+  const [changingUser, setChangingUser] = React.useState(false);
+  const searchUsers = React.useCallback(async (query) => {
+    try {
+      const members = await fetchAssignableStaffMembers(query, { pageSize: 20 });
+      return members.map((member) => ({
+        id: member.userId,
+        title: member.displayName,
+        subtitle: member.displayName && member.email ? member.email : null
+      }));
+    } catch (error) {
+      console.error("customers.roles.searchUsers failed", error);
+      return [];
+    }
+  }, []);
+  const handleUserChange = React.useCallback(async (userId) => {
+    if (!userId || userId === role.userId) return;
+    const basePath = entityType === "company" ? "companies" : "people";
+    try {
+      await runMutationWithContext(
+        () => apiCallOrThrow(`/api/customers/${basePath}/${entityId}/roles?roleId=${role.id}`, {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ userId })
+        }),
+        { roleId: role.id, userId }
+      );
+      setChangingUser(false);
+      onUpdated();
+    } catch (error) {
+      console.error("customers.roles.update failed", error);
+      flash(t("customers.roles.updateFailed", "Failed to update role assignment."), "error");
+      setChangingUser(false);
+    }
+  }, [entityId, entityType, onUpdated, role.id, role.userId, runMutationWithContext, t]);
+  const handleRemove = React.useCallback(async () => {
+    const confirmed = await confirm({
+      title: t("customers.roles.removeConfirm", "Remove this role assignment?"),
+      variant: "default"
+    });
+    if (!confirmed) return;
+    setRemoving(true);
+    const basePath = entityType === "company" ? "companies" : "people";
+    try {
+      await runMutationWithContext(
+        () => apiCallOrThrow(`/api/customers/${basePath}/${entityId}/roles?roleId=${role.id}`, {
+          method: "DELETE"
+        }),
+        { roleId: role.id }
+      );
+      onRemoved();
+    } catch (error) {
+      console.error("customers.roles.remove failed", error);
+      flash(t("customers.roles.removeFailed", "Failed to remove role assignment."), "error");
+    } finally {
+      setRemoving(false);
+    }
+  }, [confirm, entityId, entityType, onRemoved, role.id, runMutationWithContext, t]);
+  const currentUserOptions = React.useMemo(
+    () => role.userId ? [{
+      id: role.userId,
+      title: role.userName ?? role.userEmail ?? role.userId,
+      subtitle: role.userName && role.userEmail ? role.userEmail : null
+    }] : [],
+    [role.userEmail, role.userId, role.userName]
+  );
+  const initials = React.useMemo(() => {
+    const name = role.userName ?? role.userEmail ?? "";
+    return getInitials(name || "?");
+  }, [role.userEmail, role.userName]);
+  const displayName = role.userName ?? role.userEmail ?? role.userId;
+  const assignedLabel = formatAssignedAt(role.createdAt, t);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ConfirmDialogElement,
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 flex-col overflow-hidden rounded-xl border bg-card p-4 shadow-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "max-w-full break-words rounded-full px-2 py-0 text-left text-xs font-semibold", children: roleTypeLabel }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: handleRemove,
+            disabled: removing,
+            "aria-label": t("customers.roles.remove", "Remove role"),
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-bold text-muted-foreground", children: initials }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "break-all text-sm font-semibold leading-5 text-foreground", children: displayName }),
+          role.userEmail ? /* @__PURE__ */ jsx("div", { className: "mt-1 break-all text-xs text-muted-foreground", children: role.userEmail }) : null,
+          assignedLabel ? /* @__PURE__ */ jsx("div", { className: "mt-2 text-overline uppercase tracking-[0.08em] text-muted-foreground", children: assignedLabel }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [
+        role.userEmail ? /* @__PURE__ */ jsx(IconButton, { asChild: true, variant: "outline", size: "sm", className: "shrink-0", children: /* @__PURE__ */ jsx("a", { href: `mailto:${role.userEmail}`, "aria-label": t("customers.roles.email", "Send email"), children: /* @__PURE__ */ jsx(Mail, { className: "size-4" }) }) }) : /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "shrink-0",
+            disabled: true,
+            "aria-label": t("customers.roles.emailUnavailable", "Email unavailable"),
+            children: /* @__PURE__ */ jsx(Mail, { className: "size-4" })
+          }
+        ),
+        role.userPhone ? /* @__PURE__ */ jsx(IconButton, { asChild: true, variant: "outline", size: "sm", className: "shrink-0", children: /* @__PURE__ */ jsx("a", { href: `tel:${role.userPhone}`, "aria-label": t("customers.roles.call", "Call"), children: /* @__PURE__ */ jsx(Phone, { className: "size-4" }) }) }) : /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "shrink-0",
+            disabled: true,
+            "aria-label": t("customers.roles.phoneUnavailable", "Phone unavailable"),
+            children: /* @__PURE__ */ jsx(Phone, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-auto w-full justify-start px-2 py-1 text-xs sm:ml-auto sm:w-auto",
+            onClick: () => setChangingUser((current) => !current),
+            children: t("customers.roles.changeUser", "Change user")
+          }
+        )
+      ] }),
+      changingUser ? /* @__PURE__ */ jsx("div", { className: "mt-4 border-t pt-4", children: /* @__PURE__ */ jsx(
+        LookupSelect,
+        {
+          value: role.userId,
+          onChange: async (userId) => {
+            await handleUserChange(userId);
+          },
+          fetchItems: searchUsers,
+          options: currentUserOptions,
+          placeholder: t("customers.roles.searchPlaceholder", "Search team member...")
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+export {
+  RoleAssignmentRow
+};
+//# sourceMappingURL=RoleAssignmentRow.js.map

package/dist/modules/customers/components/detail/RoleAssignmentRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/RoleAssignmentRow.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Mail, Phone, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs/LookupSelect'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'\nimport { fetchAssignableStaffMembers } from './assignableStaff'\nimport { getInitials } from './utils'\n\nexport interface RoleAssignment {\n  id: string\n  roleType: string\n  userId: string\n  userName?: string | null\n  userEmail?: string | null\n  userPhone?: string | null\n  createdAt?: string\n  updatedAt?: string\n}\n\ninterface RoleAssignmentRowProps {\n  role: RoleAssignment\n  roleTypeLabel: string\n  runMutationWithContext: <T,>(\n    operation: () => Promise<T>,\n    mutationPayload?: Record<string, unknown>,\n  ) => Promise<T>\n  entityType: 'company' | 'person'\n  entityId: string\n  onRemoved: () => void\n  onUpdated: () => void\n}\n\nfunction formatAssignedAt(value: string | undefined, t: ReturnType<typeof useT>): string | null {\n  if (!value) return null\n  const date = new Date(value)\n  if (Number.isNaN(date.getTime())) return null\n  const diffMs = Date.now() - date.getTime()\n  const diffDays = Math.floor(diffMs / 86_400_000)\n  if (diffDays <= 0) return t('customers.roles.assignedToday', 'Assigned today')\n  if (diffDays === 1) return t('customers.roles.assignedYesterday', 'Assigned yesterday')\n  return t('customers.roles.assignedDaysAgo', 'Assigned {{count}} days ago', { count: diffDays })\n}\n\nexport function RoleAssignmentRow({\n  role,\n  roleTypeLabel,\n  runMutationWithContext,\n  entityType,\n  entityId,\n  onRemoved,\n  onUpdated,\n}: RoleAssignmentRowProps) {\n  const t = useT()\n  const { confirm, ConfirmDialogElement } = useConfirmDialog()\n  const [removing, setRemoving] = React.useState(false)\n  const [changingUser, setChangingUser] = React.useState(false)\n\n  const searchUsers = React.useCallback(async (query: string): Promise<LookupSelectItem[]> => {\n    try {\n      const members = await fetchAssignableStaffMembers(query, { pageSize: 20 })\n      return members.map((member) => ({\n        id: member.userId,\n        title: member.displayName,\n        subtitle: member.displayName && member.email ? member.email : null,\n      }))\n    } catch (error) {\n      console.error('customers.roles.searchUsers failed', error)\n      return []\n    }\n  }, [])\n\n  const handleUserChange = React.useCallback(async (userId: string | null) => {\n    if (!userId || userId === role.userId) return\n    const basePath = entityType === 'company' ? 'companies' : 'people'\n    try {\n      await runMutationWithContext(\n        () =>\n          apiCallOrThrow(`/api/customers/${basePath}/${entityId}/roles?roleId=${role.id}`, {\n            method: 'PUT',\n            headers: { 'content-type': 'application/json' },\n            body: JSON.stringify({ userId }),\n          }),\n        { roleId: role.id, userId },\n      )\n      setChangingUser(false)\n      onUpdated()\n    } catch (error) {\n      console.error('customers.roles.update failed', error)\n      flash(t('customers.roles.updateFailed', 'Failed to update role assignment.'), 'error')\n      setChangingUser(false)\n    }\n  }, [entityId, entityType, onUpdated, role.id, role.userId, runMutationWithContext, t])\n\n  const handleRemove = React.useCallback(async () => {\n    const confirmed = await confirm({\n      title: t('customers.roles.removeConfirm', 'Remove this role assignment?'),\n      variant: 'default',\n    })\n    if (!confirmed) return\n\n    setRemoving(true)\n    const basePath = entityType === 'company' ? 'companies' : 'people'\n    try {\n      await runMutationWithContext(\n        () =>\n          apiCallOrThrow(`/api/customers/${basePath}/${entityId}/roles?roleId=${role.id}`, {\n            method: 'DELETE',\n          }),\n        { roleId: role.id },\n      )\n      onRemoved()\n    } catch (error) {\n      console.error('customers.roles.remove failed', error)\n      flash(t('customers.roles.removeFailed', 'Failed to remove role assignment.'), 'error')\n    } finally {\n      setRemoving(false)\n    }\n  }, [confirm, entityId, entityType, onRemoved, role.id, runMutationWithContext, t])\n\n  const currentUserOptions = React.useMemo<LookupSelectItem[]>(\n    () =>\n      role.userId\n        ? [{\n            id: role.userId,\n            title: role.userName ?? role.userEmail ?? role.userId,\n            subtitle: role.userName && role.userEmail ? role.userEmail : null,\n          }]\n        : [],\n    [role.userEmail, role.userId, role.userName],\n  )\n\n  const initials = React.useMemo(() => {\n    const name = role.userName ?? role.userEmail ?? ''\n    return getInitials(name || '?')\n  }, [role.userEmail, role.userName])\n\n  const displayName = role.userName ?? role.userEmail ?? role.userId\n  const assignedLabel = formatAssignedAt(role.createdAt, t)\n\n  return (\n    <>\n      {ConfirmDialogElement}\n      <div className=\"flex h-full min-w-0 flex-col overflow-hidden rounded-xl border bg-card p-4 shadow-sm\">\n        <div className=\"flex flex-wrap items-start justify-between gap-3\">\n          <Badge variant=\"outline\" className=\"max-w-full break-words rounded-full px-2 py-0 text-left text-xs font-semibold\">\n            {roleTypeLabel}\n          </Badge>\n          <IconButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleRemove}\n            disabled={removing}\n            aria-label={t('customers.roles.remove', 'Remove role')}\n          >\n            <X className=\"size-4\" />\n          </IconButton>\n        </div>\n\n        <div className=\"mt-4 flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start\">\n          <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-bold text-muted-foreground\">\n            {initials}\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"break-all text-sm font-semibold leading-5 text-foreground\">{displayName}</div>\n            {role.userEmail ? (\n              <div className=\"mt-1 break-all text-xs text-muted-foreground\">{role.userEmail}</div>\n            ) : null}\n            {assignedLabel ? (\n              <div className=\"mt-2 text-overline uppercase tracking-[0.08em] text-muted-foreground\">\n                {assignedLabel}\n              </div>\n            ) : null}\n          </div>\n        </div>\n\n        <div className=\"mt-4 flex flex-wrap items-center gap-2\">\n          {role.userEmail ? (\n            <IconButton asChild variant=\"outline\" size=\"sm\" className=\"shrink-0\">\n              <a href={`mailto:${role.userEmail}`} aria-label={t('customers.roles.email', 'Send email')}>\n                <Mail className=\"size-4\" />\n              </a>\n            </IconButton>\n          ) : (\n            <IconButton\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"shrink-0\"\n              disabled\n              aria-label={t('customers.roles.emailUnavailable', 'Email unavailable')}\n            >\n              <Mail className=\"size-4\" />\n            </IconButton>\n          )}\n          {role.userPhone ? (\n            <IconButton asChild variant=\"outline\" size=\"sm\" className=\"shrink-0\">\n              <a href={`tel:${role.userPhone}`} aria-label={t('customers.roles.call', 'Call')}>\n                <Phone className=\"size-4\" />\n              </a>\n            </IconButton>\n          ) : (\n            <IconButton\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"shrink-0\"\n              disabled\n              aria-label={t('customers.roles.phoneUnavailable', 'Phone unavailable')}\n            >\n              <Phone className=\"size-4\" />\n            </IconButton>\n          )}\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-auto w-full justify-start px-2 py-1 text-xs sm:ml-auto sm:w-auto\"\n            onClick={() => setChangingUser((current) => !current)}\n          >\n            {t('customers.roles.changeUser', 'Change user')}\n          </Button>\n        </div>\n\n        {changingUser ? (\n          <div className=\"mt-4 border-t pt-4\">\n            <LookupSelect\n              value={role.userId}\n              onChange={async (userId) => {\n                await handleUserChange(userId)\n              }}\n              fetchItems={searchUsers}\n              options={currentUserOptions}\n              placeholder={t('customers.roles.searchPlaceholder', 'Search team member...')}\n            />\n          </div>\n        ) : null}\n      </div>\n    </>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}