update

frontend/src/pages/Deals.jsx

@@ -27,6 +27,69 @@ const STAGES = [
 
 const EMPTY_COUNTRY_KEY = '__country_none__';
 const EMPTY_OWNER_KEY = '__owner_none__';
+const MEMBER_TAKE_OWNERSHIP_VALUE = '__member_take_ownership__';
+
+/** Stable accent per user id for owner avatars (table, pipeline, grouped headers). */
+const OWNER_AVATAR_PALETTES = [
+    { ring: 'border-rose-200', bg: 'bg-rose-100', text: 'text-rose-800' },
+    { ring: 'border-amber-200', bg: 'bg-amber-100', text: 'text-amber-900' },
+    { ring: 'border-emerald-200', bg: 'bg-emerald-100', text: 'text-emerald-900' },
+    { ring: 'border-sky-200', bg: 'bg-sky-100', text: 'text-sky-900' },
+    { ring: 'border-violet-200', bg: 'bg-violet-100', text: 'text-violet-800' },
+    { ring: 'border-fuchsia-200', bg: 'bg-fuchsia-100', text: 'text-fuchsia-900' },
+    { ring: 'border-cyan-200', bg: 'bg-cyan-100', text: 'text-cyan-900' },
+    { ring: 'border-orange-200', bg: 'bg-orange-100', text: 'text-orange-900' },
+    { ring: 'border-lime-200', bg: 'bg-lime-100', text: 'text-lime-900' },
+    { ring: 'border-indigo-200', bg: 'bg-indigo-100', text: 'text-indigo-900' },
+    { ring: 'border-teal-200', bg: 'bg-teal-100', text: 'text-teal-900' },
+];
+
+const UNASSIGNED_AVATAR_PALETTE = {
+    ring: 'border-slate-200',
+    bg: 'bg-slate-100',
+    text: 'text-slate-500',
+};
+
+function hashStringToUint(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+    return Math.abs(h);
+}
+
+function ownerAvatarPalette(userId) {
+    if (userId == null || userId === '') return UNASSIGNED_AVATAR_PALETTE;
+    const idx = hashStringToUint(String(userId)) % OWNER_AVATAR_PALETTES.length;
+    return OWNER_AVATAR_PALETTES[idx];
+}
+
+function ownerDisplayLabel(deal) {
+    if (deal.owner_user_id == null || deal.owner_user_id === '') return 'Unassigned';
+    return (
+        deal.owner_display_name ||
+        deal.owner_initials ||
+        `User ${deal.owner_user_id}`
+    );
+}
+
+function OwnerAvatarCircle({ userId, initials, className }) {
+    const pal = ownerAvatarPalette(userId);
+    const unassigned = userId == null || userId === '';
+    const label = unassigned ? '?' : (initials || '?').toString().slice(0, 2).toUpperCase();
+    return (
+        <span
+            className={cn(
+                'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold leading-none',
+                pal.ring,
+                pal.bg,
+                pal.text,
+                className
+            )}
+            aria-hidden
+        >
+            {label}
+        </span>
+    );
+}
 
 /** Accent bars for By Country / By Owner groups (rotate). */
 const GROUP_BAR_ROTATING = [
@@ -203,7 +266,6 @@ const pipelineHeaderClip = {
 };
 
 function PipelineDealCard({ deal, openDeal }) {
-    const initials = (deal.owner_initials || '?').toString().slice(0, 2).toUpperCase();
     return (
         <div
             role="button"
@@ -237,12 +299,11 @@ function PipelineDealCard({ deal, openDeal }) {
             </div>
             <div className="mt-2 flex items-end justify-between gap-1.5 sm:mt-3 sm:gap-2">
                 <div className="min-w-0 flex flex-1 flex-wrap items-center gap-2">
-                    <div
-                        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-violet-200 bg-violet-100 text-xs font-bold text-violet-800"
-                        title="Owner"
-                    >
-                        {initials}
-                    </div>
+                    <OwnerAvatarCircle
+                        userId={deal.owner_user_id}
+                        initials={deal.owner_initials}
+                        className="h-8 w-8 font-bold"
+                    />
                     {deal.contact_display ? (
                         <span className="truncate rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-800">
                             {deal.contact_display}
@@ -475,25 +536,34 @@ function DealRow({
                     >
                         <SelectTrigger
                             className={cn(
-                                'h-9 min-w-[10.5rem] max-w-[14rem] border-slate-200 shadow-none px-2 py-1',
-                                'gap-2 [&>svg]:shrink-0'
+                                'h-9 w-9 shrink-0 p-0 justify-center border-slate-200 shadow-none',
+                                '[&>svg]:hidden'
                             )}
                             title="Change owner"
+                            aria-label={`Owner: ${ownerDisplayLabel(deal)}. Open menu to change.`}
                         >
-                            <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
-                                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-violet-200 bg-violet-100 text-xs font-semibold text-violet-800">
-                                    {(deal.owner_initials || '?').toString().slice(0, 2).toUpperCase()}
-                                </div>
-                                <span className="truncate text-xs font-medium text-slate-800">
-                                    {deal.owner_user_id == null
-                                        ? 'Unassigned'
-                                        : deal.owner_display_name ||
-                                          deal.owner_initials ||
-                                          `User ${deal.owner_user_id}`}
-                                </span>
-                            </div>
+                            <OwnerAvatarCircle
+                                userId={deal.owner_user_id}
+                                initials={deal.owner_initials}
+                            />
                         </SelectTrigger>
                         <SelectContent className="min-w-[12rem]">
+                            <div
+                                role="presentation"
+                                className="pointer-events-none border-b border-slate-100 px-2 py-2 mb-1"
+                            >
+                                <div className="flex items-center gap-2">
+                                    <OwnerAvatarCircle
+                                        userId={deal.owner_user_id}
+                                        initials={deal.owner_initials}
+                                    />
+                                    <div className="min-w-0 flex-1">
+                                        <div className="truncate text-sm font-semibold text-slate-900">
+                                            {ownerDisplayLabel(deal)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                             <SelectItem value={EMPTY_OWNER_KEY}>Unassigned</SelectItem>
                             {(tenantMembers || []).map((m) => (
                                 <SelectItem key={m.user_id} value={String(m.user_id)}>
@@ -503,30 +573,56 @@ function DealRow({
                         </SelectContent>
                     </Select>
                 ) : (
-                    <div className="flex flex-wrap items-center gap-2">
-                        <div
-                            className="h-8 w-8 shrink-0 rounded-full bg-violet-100 text-violet-700 text-xs font-semibold flex items-center justify-center border border-violet-200"
-                            title={deal.owner_display_name || deal.owner_initials || 'Unassigned'}
+                    <Select
+                        value={
+                            deal.owner_user_id != null && deal.owner_user_id !== ''
+                                ? String(deal.owner_user_id)
+                                : EMPTY_OWNER_KEY
+                        }
+                        onValueChange={(v) => {
+                            if (v === MEMBER_TAKE_OWNERSHIP_VALUE) {
+                                patchDeal(deal.id, { owner_user_id: currentUserId });
+                            }
+                        }}
+                    >
+                        <SelectTrigger
+                            className={cn(
+                                'h-9 w-9 shrink-0 p-0 justify-center border-slate-200 shadow-none',
+                                '[&>svg]:hidden'
+                            )}
+                            title={ownerDisplayLabel(deal)}
+                            aria-label={`Owner: ${ownerDisplayLabel(deal)}. Open menu for details.`}
                         >
-                            {(deal.owner_initials || '?').toString().slice(0, 2).toUpperCase()}
-                        </div>
-                        {!isAdmin &&
-                        currentUserId != null &&
-                        (deal.owner_user_id == null || deal.owner_user_id === '') ? (
-                            <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                className="h-7 text-xs shrink-0"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    patchDeal(deal.id, { owner_user_id: currentUserId });
-                                }}
+                            <OwnerAvatarCircle
+                                userId={deal.owner_user_id}
+                                initials={deal.owner_initials}
+                            />
+                        </SelectTrigger>
+                        <SelectContent className="min-w-[12rem]">
+                            <div
+                                role="presentation"
+                                className="pointer-events-none border-b border-slate-100 px-2 py-2 mb-1"
                             >
-                                Take ownership
-                            </Button>
-                        ) : null}
-                    </div>
+                                <div className="flex items-center gap-2">
+                                    <OwnerAvatarCircle
+                                        userId={deal.owner_user_id}
+                                        initials={deal.owner_initials}
+                                    />
+                                    <div className="min-w-0 flex-1">
+                                        <div className="truncate text-sm font-semibold text-slate-900">
+                                            {ownerDisplayLabel(deal)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {currentUserId != null &&
+                            (deal.owner_user_id == null || deal.owner_user_id === '') ? (
+                                <SelectItem value={MEMBER_TAKE_OWNERSHIP_VALUE}>
+                                    Take ownership
+                                </SelectItem>
+                            ) : null}
+                        </SelectContent>
+                    </Select>
                 )}
             </td>
             <td className="px-3 py-2 align-top tabular-nums min-w-[10rem] w-40 max-w-[16rem]">
@@ -770,7 +866,13 @@ export default function Deals() {
                       `User ${d.owner_user_id}`
                   ).trim();
             if (!map.has(sortKey)) {
-                map.set(sortKey, { sortKey, displayLabel, deals: [] });
+                map.set(sortKey, {
+                    sortKey,
+                    displayLabel,
+                    ownerUserId: unassigned ? null : d.owner_user_id,
+                    ownerInitials: unassigned ? null : d.owner_initials,
+                    deals: [],
+                });
             }
             map.get(sortKey).deals.push(d);
         }
@@ -1185,11 +1287,11 @@ export default function Deals() {
                                         }
                                         headerContent={
                                             <div className="flex flex-wrap items-center gap-2">
-                                                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-100 text-xs font-semibold text-violet-800 border border-violet-200">
-                                                    {group.sortKey === EMPTY_OWNER_KEY
-                                                        ? '?'
-                                                        : group.displayLabel.slice(0, 2).toUpperCase()}
-                                                </div>
+                                                <OwnerAvatarCircle
+                                                    userId={group.ownerUserId}
+                                                    initials={group.ownerInitials}
+                                                    className="font-bold"
+                                                />
                                                 <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800">
                                                     {group.displayLabel}
                                                 </span>