@fluid-app/portal-sdk 0.1.46 → 0.1.47

package/dist/{ContactsScreen-C0I1_D_a.cjs → ContactsScreen-9G2HgNsy.cjs}

@@ -1,8 +1,8 @@
 const require_chunk = require("./chunk-DAgNkxik.cjs");
-const require_FluidProvider = require("./FluidProvider-DzrMOFXn.cjs");
+const require_FluidProvider = require("./FluidProvider-CsIC3HL2.cjs");
 const require_parse_api_errors = require("./parse-api-errors-CAnpE2_r.cjs");
-const require_src = require("./src-CWGmmrLZ.cjs");
-const require_src$1 = require("./src-COTid97-.cjs");
+const require_src = require("./src-Da7I1fqK.cjs");
+const require_src$1 = require("./src-DecFyd_1.cjs");
 const require_dist = require("./dist-CtcLRHrv.cjs");
 const require_dist$1 = require("./dist-BUWkpuUk.cjs");
 let react = require("react");
@@ -40,21 +40,233 @@ function StatusBadge({ status, label, className }) {
 }
 //#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/allContacts/contactsTable.tsx
+function getInitials(fullName) {
+	const trimmed = fullName?.trim();
+	if (!trimmed) return "?";
+	const parts = trimmed.split(/\s+/).filter(Boolean);
+	if (parts.length >= 2) {
+		const a = parts[0]?.[0];
+		const b = parts[1]?.[0];
+		return `${a ?? ""}${b ?? ""}`.toUpperCase() || "?";
+	}
+	return trimmed.slice(0, 2).toUpperCase();
+}
+function dedupeGroupLabels(labels) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const label of labels) {
+		const key = label.toLowerCase();
+		if (seen.has(key)) continue;
+		seen.add(key);
+		out.push(label);
+	}
+	return out;
+}
+/** Pull a display label from one API group/tag object or string. */
+function labelFromGroupLikeItem(item) {
+	if (typeof item === "string") return item.trim();
+	if (!item || typeof item !== "object") return "";
+	const o = item;
+	for (const k of [
+		"name",
+		"title",
+		"label",
+		"display_name"
+	]) {
+		const v = o[k];
+		if (typeof v === "string" && v.trim()) return v.trim();
+	}
+	return "";
+}
+function labelsFromGroupArray(value) {
+	if (!Array.isArray(value) || value.length === 0) return [];
+	return dedupeGroupLabels(value.map(labelFromGroupLikeItem).filter(Boolean));
+}
+function labelsFromMetadata(m) {
+	for (const key of [
+		"contact_groups",
+		"contactGroups",
+		"groups",
+		"labels",
+		"tags",
+		"segments"
+	]) {
+		const found = labelsFromGroupArray(m[key]);
+		if (found.length > 0) return found;
+	}
+	for (const key of [
+		"group_name",
+		"contact_group",
+		"group"
+	]) {
+		const v = m[key];
+		if (typeof v === "string" && v.trim()) return [v.trim()];
+		const one = labelFromGroupLikeItem(v);
+		if (one) return [one];
+	}
+	return [];
+}
+function firstNonEmptyGroupList(...candidates) {
+	for (const c of candidates) {
+		const labels = labelsFromGroupArray(c);
+		if (labels.length > 0) return labels;
+	}
+	return [];
+}
+/**
+* Ordered group labels for badges. Prefer plural/array sources before singular
+* `contact_group` so we don't drop additional groups when the API sends both.
+*/
+function resolveContactGroupLabels(contact) {
+	const raw = contact;
+	const fromPlural = firstNonEmptyGroupList(raw.contact_groups, raw.contactGroups, raw.groups, raw.labels, raw.tags, raw.segments);
+	if (fromPlural.length > 0) return fromPlural;
+	const direct = raw.group;
+	if (typeof direct === "string" && direct.trim()) return [direct.trim()];
+	const nested = raw.contact_group;
+	const singleNested = labelFromGroupLikeItem(nested);
+	if (singleNested) return [singleNested];
+	const meta = contact.metadata;
+	if (meta && typeof meta === "object") {
+		const fromMeta = labelsFromMetadata(meta);
+		if (fromMeta.length > 0) return fromMeta;
+	}
+	const lead = contact.lead_type;
+	if (lead && String(lead).trim()) return [String(lead).replaceAll("_", " ")];
+	return [];
+}
+function RepContactCard({ contact, selected, onToggleSelect, onRowClick, onEditContact, setSelectedContacts, setOpenDeleteModal }) {
+	const groupLabels = resolveContactGroupLabels(contact);
+	const groupTitle = groupLabels.length > 0 ? groupLabels.join(", ") : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, {
+		className: require_src.cn("border-border hover:bg-accent/30 h-[100px] w-full flex-col items-start justify-center gap-0 py-0 shadow-sm transition-colors", selected && "bg-accent/40 border-primary/25 ring-primary/20 ring-1"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, {
+			className: "w-full px-3 py-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 sm:gap-3",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex shrink-0 items-center",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							checked: selected,
+							onChange: () => onToggleSelect(contact.id),
+							"aria-label": `Select ${contact.full_name}`,
+							className: "accent-primary h-3.5 w-3.5 rounded sm:h-4 sm:w-4"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "text-foreground focus-visible:ring-ring flex min-w-0 flex-1 items-center gap-2 rounded-md text-left outline-none focus-visible:ring-2 sm:gap-3",
+						onClick: () => onRowClick?.(contact),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Avatar, {
+								className: "size-12 shrink-0",
+								children: [contact.avatar_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarImage, {
+									src: contact.avatar_url,
+									alt: contact.full_name || "Contact"
+								}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarFallback, {
+									className: "border-border text-foreground bg-accent ring-border/80 text-xs font-semibold ring-1",
+									children: getInitials(contact.full_name)
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "max-w-[32%] min-w-0 shrink truncate text-sm leading-tight font-semibold sm:max-w-none sm:flex-[1.15]",
+								title: contact.full_name,
+								children: contact.full_name || "—"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground min-w-0 flex-[1.35] truncate text-xs leading-tight",
+								title: contact.email ?? void 0,
+								children: contact.email || "—"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground min-w-0 flex-[0.95] truncate text-xs leading-tight",
+								title: contact.phone ?? void 0,
+								children: contact.phone || "—"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "text-muted-foreground flex min-w-0 flex-[0.95] items-center gap-1 text-xs leading-tight",
+								title: groupTitle,
+								children: [groupLabels.length > 0 ? groupLabels.slice(0, 2).map((label, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
+									variant: "secondary",
+									className: "max-w-[min(100%,10rem)] shrink truncate font-normal capitalize",
+									title: label,
+									children: label
+								}, `${contact.id}-group-${index}-${label}`)) : "—", groupLabels.length > 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "text-muted-foreground shrink-0 text-[10px]",
+									children: ["+", groupLabels.length - 2]
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex shrink-0 items-center",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+								variant: "ghost",
+								size: "icon-xs",
+								"aria-label": "Contact actions",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EllipsisVertical, { className: "h-4 w-4" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
+							align: "end",
+							children: [onEditContact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+								onClick: () => onEditContact(contact),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" }), "Edit"]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+								className: "text-destructive",
+								onClick: () => {
+									setSelectedContacts([contact]);
+									setOpenDeleteModal(true);
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "h-3.5 w-3.5" }), "Delete"]
+							})]
+						})] })
+					})
+				]
+			})
+		})
+	});
+}
 const TABS = [
 	"All",
 	"Leads",
 	"Customers"
 ];
+function getSortComparable(contact, field) {
+	if (field === "name") return contact.full_name ?? "";
+	return contact.email ?? "";
+}
 const PAGE_SIZE = 25;
-function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setOpenDeleteModal, onEditContact, onRowClick, resetKey }) {
+const CONTACT_SORT_COLUMNS = [{
+	id: "name",
+	name: "Name"
+}, {
+	id: "email",
+	name: "Email"
+}];
+function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setOpenDeleteModal, onEditContact, onRowClick, resetKey, tableLayout }) {
+	const isMemberLayout = tableLayout === "members";
 	const [currentPage, setCurrentPage] = (0, react.useState)(1);
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [activeTab, setActiveTab] = (0, react.useState)("All");
+	const [currentSort, setCurrentSort] = (0, react.useState)({
+		id: "name",
+		desc: false
+	});
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
 	(0, react.useEffect)(() => {
 		setCurrentPage(1);
 		setSelectedIds(/* @__PURE__ */ new Set());
-	}, [searchTerm, activeTab]);
+	}, [
+		searchTerm,
+		activeTab,
+		currentSort
+	]);
 	(0, react.useEffect)(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [currentPage]);
@@ -66,19 +278,34 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		queryKey: [queryKeyPrefix, {
 			searchTerm,
 			currentPage,
-			activeTab
+			activeTab,
+			sortField: currentSort.id,
+			sortDesc: currentSort.desc
 		}],
 		queryFn: () => listContacts({
 			search_query: searchTerm || void 0,
 			page: currentPage,
 			per_page: PAGE_SIZE,
-			...resolvedStatus ? { status: resolvedStatus } : {}
-		})
+			...resolvedStatus ? { status: resolvedStatus } : {},
+			sort_by: currentSort.id,
+			sort_direction: currentSort.desc ? "desc" : "asc"
+		}),
+		placeholderData: _tanstack_react_query.keepPreviousData
 	});
 	const items = (0, react.useMemo)(() => data?.contacts ?? [], [data?.contacts]);
+	const displayItems = (0, react.useMemo)(() => {
+		const sortField = currentSort.id;
+		const sortDir = currentSort.desc ? "desc" : "asc";
+		return [...items].sort((a, b) => {
+			const av = getSortComparable(a, sortField).toLowerCase();
+			const bv = getSortComparable(b, sortField).toLowerCase();
+			const cmp = av.localeCompare(bv, void 0, { sensitivity: "base" });
+			return sortDir === "asc" ? cmp : -cmp;
+		});
+	}, [items, currentSort]);
 	const totalItems = data?.meta?.total_count ?? 0;
 	const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
-	const allSelected = items.length > 0 && items.every((c) => selectedIds.has(c.id));
+	const allSelected = displayItems.length > 0 && displayItems.every((c) => selectedIds.has(c.id));
 	const someSelected = selectedIds.size > 0 && !allSelected;
 	const selectAllRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
@@ -87,11 +314,11 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 	const toggleSelectAll = (0, react.useCallback)(() => {
 		setSelectedIds((prev) => {
 			const next = new Set(prev);
-			if (allSelected) for (const item of items) next.delete(item.id);
-			else for (const item of items) next.add(item.id);
+			if (allSelected) for (const item of displayItems) next.delete(item.id);
+			else for (const item of displayItems) next.add(item.id);
 			return next;
 		});
-	}, [allSelected, items]);
+	}, [allSelected, displayItems]);
 	const toggleSelect = (0, react.useCallback)((id) => {
 		setSelectedIds((prev) => {
 			const next = new Set(prev);
@@ -101,13 +328,13 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		});
 	}, []);
 	const handleBulkDelete = (0, react.useCallback)(() => {
-		const selected = items.filter((c) => selectedIds.has(c.id));
+		const selected = displayItems.filter((c) => selectedIds.has(c.id));
 		if (selected.length > 0) {
 			setSelectedContacts(selected);
 			setOpenDeleteModal(true);
 		}
 	}, [
-		items,
+		displayItems,
 		selectedIds,
 		setSelectedContacts,
 		setOpenDeleteModal
@@ -118,18 +345,55 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex items-center gap-1",
-					children: TABS.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-						variant: "ghost",
-						size: "sm",
-						onClick: () => setActiveTab(tab),
-						className: require_src.cn("rounded-md text-xs", activeTab === tab && "bg-accent font-bold"),
-						children: tab
-					}, tab))
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "relative w-full sm:w-auto sm:min-w-[220px]",
+					className: "flex flex-wrap items-center gap-2 sm:gap-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center gap-1",
+						children: TABS.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => setActiveTab(tab),
+							className: require_src.cn("rounded-md text-xs", activeTab === tab && "bg-accent font-bold"),
+							children: tab
+						}, tab))
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-1 items-center justify-end gap-2 sm:max-w-none",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "shrink-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+								variant: "ghost",
+								size: "icon-xs",
+								"aria-label": "Sort contacts",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpDown, { className: "h-4 w-4" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
+							align: "end",
+							className: "w-48",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuLabel, {
+									className: "text-xs font-medium",
+									children: "Sort by"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {}),
+								CONTACT_SORT_COLUMNS.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+									onClick: () => setCurrentSort((prev) => ({
+										id: col.id,
+										desc: prev.id === col.id ? !prev.desc : false
+									})),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "flex-1",
+										children: col.name
+									}), currentSort.id === col.id && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground text-xs",
+										children: currentSort.desc ? "↓" : "↑"
+									})]
+								}, col.id))
+							]
+						})] })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative min-w-0 flex-1 sm:w-auto sm:min-w-[220px] sm:flex-initial",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "text-muted-foreground h-4 w-4" })
@@ -140,10 +404,81 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 							className: "h-8 w-full pl-10 text-sm",
 							placeholder: "Search contacts..."
 						})]
-					})
+					})]
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			isMemberLayout ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-3 p-3",
+				children: [!isLoading && items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "bg-muted/40 border-border flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: selectAllRef,
+							type: "checkbox",
+							checked: allSelected,
+							onChange: toggleSelectAll,
+							"aria-label": allSelected ? "Deselect all" : "Select all on this page",
+							className: "accent-primary h-4 w-4 shrink-0 rounded"
+						}), selectedIds.size > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "text-foreground text-sm font-medium",
+							children: [selectedIds.size, " selected"]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-muted-foreground text-sm",
+							children: "Select all"
+						})]
+					}), selectedIds.size > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8 gap-1 text-xs",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EllipsisVertical, { className: "h-4 w-4" }), "Actions"]
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
+						align: "end",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+							className: "text-destructive",
+							onClick: handleBulkDelete,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "h-3.5 w-3.5" }),
+								"Delete ",
+								selectedIds.size,
+								" ",
+								selectedIds.size === 1 ? "contact" : "contacts"
+							]
+						})
+					})] }) : null]
+				}) : null, isLoading ? Array(5).fill(0).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, {
+					className: "border-border h-[100px] w-full flex-col items-start justify-center gap-0 py-0 shadow-sm",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, {
+						className: "w-full px-3 py-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2 sm:gap-3",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3.5 w-3.5 shrink-0 rounded sm:h-4 sm:w-4" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-12 shrink-0 rounded-full" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3.5 max-w-[32%] shrink sm:max-w-none sm:flex-[1.15]" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3.5 min-w-0 flex-[1.35]" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3.5 min-w-0 flex-[0.95]" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3.5 min-w-0 flex-[0.95]" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-7 shrink-0 rounded-md" })
+							]
+						})
+					})
+				}, `card-skel-${i}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground py-10 text-center text-sm",
+					children: "No contacts found"
+				}) : displayItems.map((contact) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RepContactCard, {
+					contact,
+					selected: selectedIds.has(contact.id),
+					onToggleSelect: toggleSelect,
+					onRowClick,
+					onEditContact,
+					setSelectedContacts,
+					setOpenDeleteModal
+				}, contact.id))]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "block md:hidden",
 				children: isLoading ? Array(5).fill(0).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "border-border border-b p-4",
@@ -154,11 +489,11 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 				}, `skeleton-${i}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "text-muted-foreground px-3 py-8 text-center text-sm",
 					children: "No contacts found"
-				}) : items.map((contact) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}) : displayItems.map((contact) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "border-border hover:bg-accent cursor-pointer border-b p-4 transition-colors last:border-b-0",
 					onClick: () => onRowClick?.(contact),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center justify-between",
+						className: "flex items-center justify-between gap-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -171,8 +506,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 						}), contact.status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, { status: contact.status })]
 					})
 				}, contact.id))
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "hidden md:block",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Table, {
 					className: "min-w-full table-fixed",
@@ -299,7 +633,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 								colSpan: 7,
 								className: "text-muted-foreground px-3 py-8 text-center",
 								children: "No contacts found"
-							}) }) : items.map((contact) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
+							}) }) : displayItems.map((contact) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
 								className: require_src.cn("cursor-pointer", selectedIds.has(contact.id) && "bg-accent"),
 								onClick: () => onRowClick?.(contact),
 								children: [
@@ -354,10 +688,10 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 											})
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
 											align: "end",
-											children: [onEditContact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+											children: [onEditContact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 												onClick: () => onEditContact(contact),
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" }), "Edit"]
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 												className: "text-destructive",
 												onClick: () => {
 													setSelectedContacts([contact]);
@@ -372,7 +706,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 						})
 					]
 				})
-			}),
+			})] }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.PaginationFooter, {
 				currentPage,
 				totalPages,
@@ -396,7 +730,7 @@ const CONTACTS_QUERY_KEYS = {
 };
 //#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/allContacts/contactsPage.tsx
-function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, onEditContact, onRowClick }) {
+function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, onEditContact, onRowClick, tableLayout }) {
 	const [openDeleteModal, setOpenDeleteModal] = (0, react.useState)(false);
 	const [selectedContacts, setSelectedContacts] = (0, react.useState)([]);
 	const [resetKey, setResetKey] = (0, react.useState)(0);
@@ -435,7 +769,8 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 				setOpenDeleteModal,
 				onEditContact,
 				onRowClick,
-				resetKey
+				resetKey,
+				tableLayout
 			})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
@@ -3708,6 +4043,7 @@ function ContactListView({ client, onNavigate, onContactSelect }) {
 		deleteContacts: (0, react.useCallback)((ids) => bulkDeleteUserContacts(client, { contact_ids: ids }), [client]),
 		queryKeyPrefix: QUERY_KEY_PREFIX,
 		header,
+		tableLayout: "members",
 		onEditContact: handleSelectContact,
 		onRowClick: handleSelectContact
 	});
@@ -3936,4 +4272,4 @@ Object.defineProperty(exports, "contactsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ContactsScreen-C0I1_D_a.cjs.map
+//# sourceMappingURL=ContactsScreen-9G2HgNsy.cjs.map