@fluid-app/portal-sdk 0.1.46 → 0.1.47

package/dist/{ContactsScreen-DO7EwobV.cjs → ContactsScreen-BmM91s6y.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-DAgNkxik.cjs");
-require("./FluidProvider-DzrMOFXn.cjs");
+require("./FluidProvider-CsIC3HL2.cjs");
 require("./error-state-CGCSDJIJ.cjs");
 require("./ScreenRenderer-C-H-ju1C.cjs");
 require("./WidgetInteractionContext-ywxCBIMm.cjs");
@@ -11,16 +11,16 @@ require("./BulletListWidget-BUMq15V1.cjs");
 require("./CalendarWidget-DLkcnQVx.cjs");
 require("./CardWidget-B4cJHq6g.cjs");
 require("./purify.es-CmsCRU2T.cjs");
-require("./src-CWGmmrLZ.cjs");
+require("./src-Da7I1fqK.cjs");
 require("./scroll-arrows-Dw7eLYdG.cjs");
 require("./MediaRenderer-CEV-eeB-.cjs");
-require("./CarouselWidget-Bx5jrthO.cjs");
+require("./CarouselWidget-BRauT5r7.cjs");
 require("./CatchUpWidget-CFL4REYX.cjs");
-require("./ChartWidget-DWWeWN0Q.cjs");
+require("./ChartWidget-pFCP3KBK.cjs");
 require("./LayoutWidget-CsdItxHF.cjs");
 require("./ContainerWidget-DZXzmDZl.cjs");
 require("./ImageWidget-DwM4H6SC.cjs");
-require("./LinkWidget-CJKveS10.cjs");
+require("./LinkWidget-Dk_01CMC.cjs");
 require("./ListWidget-D8yMrpa5.cjs");
 require("./MySiteWidget-DeAwyK5y.cjs");
 require("./NestedWidget-CZuN2QY2.cjs");
@@ -28,12 +28,12 @@ require("./QuickShareWidget-CIfXUWCx.cjs");
 require("./RecentActivityWidget-kRfjO1IV.cjs");
 require("./SeparatorWidget-BUXIxV-F.cjs");
 require("./SpacerWidget-DW_7QXrs.cjs");
-require("./TableWidget-DFWfQIWv.cjs");
+require("./TableWidget-DFpr7R3o.cjs");
 require("./ToDoWidget-GmeRwP_0.cjs");
 require("./VideoWidget-CN8nMeGP.cjs");
-require("./src-COTid97-.cjs");
+require("./src-DecFyd_1.cjs");
 require("./dist-CtcLRHrv.cjs");
-const require_ContactsScreen = require("./ContactsScreen-C0I1_D_a.cjs");
+const require_ContactsScreen = require("./ContactsScreen-9G2HgNsy.cjs");
 require("./dist-BUWkpuUk.cjs");
 exports.ContactsScreen = require_ContactsScreen.ContactsScreen;
 exports.contactsScreenPropertySchema = require_ContactsScreen.contactsScreenPropertySchema;

package/dist/{ContactsScreen-B4FZ0Qeu.mjs → ContactsScreen-Cx3DlL9d.mjs}

@@ -1,4 +1,4 @@
-import "./FluidProvider-iYl6DSax.mjs";
+import "./FluidProvider-Dj4ToywG.mjs";
 import "./error-state-BGEvTYIh.mjs";
 import "./ScreenRenderer-Dt-Qrx9w.mjs";
 import "./WidgetInteractionContext-DAN31Alw.mjs";
@@ -10,16 +10,16 @@ import "./BulletListWidget-riFNn47D.mjs";
 import "./CalendarWidget-B9I__jsL.mjs";
 import "./CardWidget-CzRI-odk.mjs";
 import "./purify.es-CKZbQnR8.mjs";
-import "./src-BVkLGnwV.mjs";
+import "./src-DvSsESTu.mjs";
 import "./scroll-arrows-E2JL1tu6.mjs";
 import "./MediaRenderer-CI67k-ti.mjs";
-import "./CarouselWidget-C04z7JxO.mjs";
+import "./CarouselWidget-C7vsjw7r.mjs";
 import "./CatchUpWidget-Cb0B0G90.mjs";
-import "./ChartWidget-WaLM-zc-.mjs";
+import "./ChartWidget-BqidaXNw.mjs";
 import "./LayoutWidget-pS3AMhD7.mjs";
 import "./ContainerWidget-PNfcrIfV.mjs";
 import "./ImageWidget-CvRlDtEa.mjs";
-import "./LinkWidget-NR2OqU4Y.mjs";
+import "./LinkWidget-sDGQRCy9.mjs";
 import "./ListWidget-Dl2vSYmI.mjs";
 import "./MySiteWidget-CD1fK3lT.mjs";
 import "./NestedWidget-DjZumiak.mjs";
@@ -27,11 +27,11 @@ import "./QuickShareWidget-CvdvBmEn.mjs";
 import "./RecentActivityWidget-uegOsG5c.mjs";
 import "./SeparatorWidget-CkFIxxkI.mjs";
 import "./SpacerWidget-CilIbCTV.mjs";
-import "./TableWidget-aZUcob2U.mjs";
+import "./TableWidget-DF5i7arL.mjs";
 import "./ToDoWidget-iiVItJrO.mjs";
 import "./VideoWidget-BAxtPtq5.mjs";
-import "./src-Dd1iRW7j.mjs";
+import "./src-BtBYwiNS.mjs";
 import "./dist-NMbUD0qE.mjs";
-import { n as contactsScreenPropertySchema, t as ContactsScreen } from "./ContactsScreen-CoFB7EM3.mjs";
+import { n as contactsScreenPropertySchema, t as ContactsScreen } from "./ContactsScreen-VftTRDXR.mjs";
 import "./dist-_HuMD-TB.mjs";
 export { ContactsScreen, contactsScreenPropertySchema };

package/dist/{ContactsScreen-CoFB7EM3.mjs → ContactsScreen-VftTRDXR.mjs}

@@ -1,14 +1,14 @@
-import { J as createFetchClient, n as useFluidContext } from "./FluidProvider-iYl6DSax.mjs";
+import { J as createFetchClient, n as useFluidContext } from "./FluidProvider-Dj4ToywG.mjs";
 import { t as parseApiErrors } from "./parse-api-errors-Dy2gL1eC.mjs";
-import { $t as AlertDialogCancel, A as SelectContent, C as SheetContent, E as SheetTitle, G as Label, I as Input, J as DropdownMenuItem, K as DropdownMenu, M as SelectTrigger, N as SelectValue, Qt as AlertDialogAction, S as Sheet, St as CardTitle, T as SheetHeader, Zt as AlertDialog, an as AlertDialogTitle, bt as CardContent, c as TabsList, d as TableBody, en as AlertDialogContent, et as DropdownMenuTrigger, f as TableCell, h as TableRow, i as TooltipTrigger, j as SelectItem, k as Select, l as TabsTrigger, m as TableHeader, mn as cn, n as TooltipContent, nn as AlertDialogFooter, o as Tabs, on as Button, p as TableHead, pn as useZodForm, q as DropdownMenuContent, r as TooltipProvider, rn as AlertDialogHeader, s as TabsContent, t as Tooltip, tn as AlertDialogDescription, u as Table$1, vt as Card, w as SheetFooter, x as Skeleton, xt as CardHeader, y as fluidToast } from "./src-BVkLGnwV.mjs";
-import { i as PaginationFooter } from "./src-Dd1iRW7j.mjs";
+import { $t as AlertDialogAction, A as SelectContent, C as SheetContent, E as SheetTitle, G as Label, I as Input, J as DropdownMenuItem, Jt as Badge, K as DropdownMenu, M as SelectTrigger, N as SelectValue, Qt as AlertDialog, S as Sheet, St as CardTitle, T as SheetHeader, X as DropdownMenuSeparator, Xt as AvatarFallback, Y as DropdownMenuLabel, Yt as Avatar, Zt as AvatarImage, bt as CardContent, c as TabsList, d as TableBody, en as AlertDialogCancel, et as DropdownMenuTrigger, f as TableCell, h as TableRow, hn as cn, i as TooltipTrigger, in as AlertDialogHeader, j as SelectItem, k as Select, l as TabsTrigger, m as TableHeader, mn as useZodForm, n as TooltipContent, nn as AlertDialogDescription, o as Tabs, on as AlertDialogTitle, p as TableHead, q as DropdownMenuContent, r as TooltipProvider, rn as AlertDialogFooter, s as TabsContent, sn as Button, t as Tooltip, tn as AlertDialogContent, u as Table$1, vt as Card, w as SheetFooter, x as Skeleton, xt as CardHeader, y as fluidToast } from "./src-DvSsESTu.mjs";
+import { i as PaginationFooter } from "./src-BtBYwiNS.mjs";
 import { a as useEditor, n as Heading, o as Placeholder, r as EditorContent, t as StarterKit } from "./dist-NMbUD0qE.mjs";
 import { n as TextAlign, t as Underline } from "./dist-_HuMD-TB.mjs";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { z } from "zod";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, Bell, Building, Calendar, CalendarDays, ChevronLeft, ChevronRight, CircleCheck, ClipboardList, EllipsisVertical, Eye, List, ListChecks, ListOrdered, Mail, MessageCircle, Paperclip, Pen, Pencil, Phone, Play, Plus, Repeat2, Rocket, Search, Share2, ShoppingCart, SquareCheckBig, Star, StickyNote, Trash2, Trophy, User, UserPlus, X } from "lucide-react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, ArrowUpDown, Bell, Building, Calendar, CalendarDays, ChevronLeft, ChevronRight, CircleCheck, ClipboardList, EllipsisVertical, Eye, List, ListChecks, ListOrdered, Mail, MessageCircle, Paperclip, Pen, Pencil, Phone, Play, Plus, Repeat2, Rocket, Search, Share2, ShoppingCart, SquareCheckBig, Star, StickyNote, Trash2, Trophy, User, UserPlus, X } from "lucide-react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useController, useForm, useFormContext, useWatch } from "react-hook-form";
 //#region ../../contacts/ui/src/shared/components/contacts/statusBadge.tsx
@@ -38,21 +38,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__ */ jsx(Card, {
+		className: 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__ */ jsx(CardContent, {
+			className: "w-full px-3 py-0",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 sm:gap-3",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ 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__ */ 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__ */ jsxs(Avatar, {
+								className: "size-12 shrink-0",
+								children: [contact.avatar_url ? /* @__PURE__ */ jsx(AvatarImage, {
+									src: contact.avatar_url,
+									alt: contact.full_name || "Contact"
+								}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+									className: "border-border text-foreground bg-accent ring-border/80 text-xs font-semibold ring-1",
+									children: getInitials(contact.full_name)
+								})]
+							}),
+							/* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(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__ */ jsxs("span", {
+									className: "text-muted-foreground shrink-0 text-[10px]",
+									children: ["+", groupLabels.length - 2]
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-xs",
+								"aria-label": "Contact actions",
+								children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" })
+							})
+						}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+							align: "end",
+							children: [onEditContact && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+								onClick: () => onEditContact(contact),
+								children: [/* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"]
+							}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+								className: "text-destructive",
+								onClick: () => {
+									setSelectedContacts([contact]);
+									setOpenDeleteModal(true);
+								},
+								children: [/* @__PURE__ */ jsx(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] = useState(1);
 	const [searchTerm, setSearchTerm] = useState("");
 	const [activeTab, setActiveTab] = useState("All");
+	const [currentSort, setCurrentSort] = useState({
+		id: "name",
+		desc: false
+	});
 	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
 	useEffect(() => {
 		setCurrentPage(1);
 		setSelectedIds(/* @__PURE__ */ new Set());
-	}, [searchTerm, activeTab]);
+	}, [
+		searchTerm,
+		activeTab,
+		currentSort
+	]);
 	useEffect(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [currentPage]);
@@ -64,19 +276,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: keepPreviousData
 	});
 	const items = useMemo(() => data?.contacts ?? [], [data?.contacts]);
+	const displayItems = 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 = useRef(null);
 	useEffect(() => {
@@ -85,11 +312,11 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 	const toggleSelectAll = 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 = useCallback((id) => {
 		setSelectedIds((prev) => {
 			const next = new Set(prev);
@@ -99,13 +326,13 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		});
 	}, []);
 	const handleBulkDelete = 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
@@ -116,18 +343,55 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-1",
-					children: TABS.map((tab) => /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "sm",
-						onClick: () => setActiveTab(tab),
-						className: cn("rounded-md text-xs", activeTab === tab && "bg-accent font-bold"),
-						children: tab
-					}, tab))
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ 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__ */ jsx("div", {
+						className: "flex items-center gap-1",
+						children: TABS.map((tab) => /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => setActiveTab(tab),
+							className: cn("rounded-md text-xs", activeTab === tab && "bg-accent font-bold"),
+							children: tab
+						}, tab))
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 items-center justify-end gap-2 sm:max-w-none",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "shrink-0",
+						children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-xs",
+								"aria-label": "Sort contacts",
+								children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" })
+							})
+						}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+							align: "end",
+							className: "w-48",
+							children: [
+								/* @__PURE__ */ jsx(DropdownMenuLabel, {
+									className: "text-xs font-medium",
+									children: "Sort by"
+								}),
+								/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+								CONTACT_SORT_COLUMNS.map((col) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+									onClick: () => setCurrentSort((prev) => ({
+										id: col.id,
+										desc: prev.id === col.id ? !prev.desc : false
+									})),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "flex-1",
+										children: col.name
+									}), currentSort.id === col.id && /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-xs",
+										children: currentSort.desc ? "↓" : "↑"
+									})]
+								}, col.id))
+							]
+						})] })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-0 flex-1 sm:w-auto sm:min-w-[220px] sm:flex-initial",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
 							children: /* @__PURE__ */ jsx(Search, { className: "text-muted-foreground h-4 w-4" })
@@ -138,10 +402,81 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 							className: "h-8 w-full pl-10 text-sm",
 							placeholder: "Search contacts..."
 						})]
-					})
+					})]
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
+			isMemberLayout ? /* @__PURE__ */ jsxs("div", {
+				className: "space-y-3 p-3",
+				children: [!isLoading && items.length > 0 ? /* @__PURE__ */ 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__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ 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__ */ jsxs("span", {
+							className: "text-foreground text-sm font-medium",
+							children: [selectedIds.size, " selected"]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-sm",
+							children: "Select all"
+						})]
+					}), selectedIds.size > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8 gap-1 text-xs",
+							children: [/* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" }), "Actions"]
+						})
+					}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+						align: "end",
+						children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							className: "text-destructive",
+							onClick: handleBulkDelete,
+							children: [
+								/* @__PURE__ */ jsx(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__ */ jsx(Card, {
+					className: "border-border h-[100px] w-full flex-col items-start justify-center gap-0 py-0 shadow-sm",
+					children: /* @__PURE__ */ jsx(CardContent, {
+						className: "w-full px-3 py-0",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 sm:gap-3",
+							children: [
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-3.5 shrink-0 rounded sm:h-4 sm:w-4" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "size-12 shrink-0 rounded-full" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 max-w-[32%] shrink sm:max-w-none sm:flex-[1.15]" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 min-w-0 flex-[1.35]" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 min-w-0 flex-[0.95]" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 min-w-0 flex-[0.95]" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "size-7 shrink-0 rounded-md" })
+							]
+						})
+					})
+				}, `card-skel-${i}`)) : items.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground py-10 text-center text-sm",
+					children: "No contacts found"
+				}) : displayItems.map((contact) => /* @__PURE__ */ jsx(RepContactCard, {
+					contact,
+					selected: selectedIds.has(contact.id),
+					onToggleSelect: toggleSelect,
+					onRowClick,
+					onEditContact,
+					setSelectedContacts,
+					setOpenDeleteModal
+				}, contact.id))]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				className: "block md:hidden",
 				children: isLoading ? Array(5).fill(0).map((_, i) => /* @__PURE__ */ jsx("div", {
 					className: "border-border border-b p-4",
@@ -152,11 +487,11 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 				}, `skeleton-${i}`)) : items.length === 0 ? /* @__PURE__ */ jsx("div", {
 					className: "text-muted-foreground px-3 py-8 text-center text-sm",
 					children: "No contacts found"
-				}) : items.map((contact) => /* @__PURE__ */ jsx("div", {
+				}) : displayItems.map((contact) => /* @__PURE__ */ 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__ */ jsxs("div", {
-						className: "flex items-center justify-between",
+						className: "flex items-center justify-between gap-3",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ jsx("p", {
@@ -169,8 +504,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 						}), contact.status && /* @__PURE__ */ jsx(StatusBadge, { status: contact.status })]
 					})
 				}, contact.id))
-			}),
-			/* @__PURE__ */ jsx("div", {
+			}), /* @__PURE__ */ jsx("div", {
 				className: "hidden md:block",
 				children: /* @__PURE__ */ jsxs(Table$1, {
 					className: "min-w-full table-fixed",
@@ -297,7 +631,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__ */ jsxs(TableRow, {
+							}) }) : displayItems.map((contact) => /* @__PURE__ */ jsxs(TableRow, {
 								className: cn("cursor-pointer", selectedIds.has(contact.id) && "bg-accent"),
 								onClick: () => onRowClick?.(contact),
 								children: [
@@ -352,10 +686,10 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 											})
 										}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 											align: "end",
-											children: [onEditContact && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+											children: [onEditContact && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
 												onClick: () => onEditContact(contact),
 												children: [/* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"]
-											}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+											}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
 												className: "text-destructive",
 												onClick: () => {
 													setSelectedContacts([contact]);
@@ -370,7 +704,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 						})
 					]
 				})
-			}),
+			})] }),
 			/* @__PURE__ */ jsx(PaginationFooter, {
 				currentPage,
 				totalPages,
@@ -394,7 +728,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] = useState(false);
 	const [selectedContacts, setSelectedContacts] = useState([]);
 	const [resetKey, setResetKey] = useState(0);
@@ -433,7 +767,8 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 				setOpenDeleteModal,
 				onEditContact,
 				onRowClick,
-				resetKey
+				resetKey,
+				tableLayout
 			})
 		}),
 		/* @__PURE__ */ jsx(AlertDialog, {
@@ -3702,6 +4037,7 @@ function ContactListView({ client, onNavigate, onContactSelect }) {
 		deleteContacts: useCallback((ids) => bulkDeleteUserContacts(client, { contact_ids: ids }), [client]),
 		queryKeyPrefix: QUERY_KEY_PREFIX,
 		header,
+		tableLayout: "members",
 		onEditContact: handleSelectContact,
 		onRowClick: handleSelectContact
 	});
@@ -3919,4 +4255,4 @@ const contactsScreenPropertySchema = {
 //#endregion
 export { contactsScreenPropertySchema as n, ContactsScreen as t };
 
-//# sourceMappingURL=ContactsScreen-CoFB7EM3.mjs.map
+//# sourceMappingURL=ContactsScreen-VftTRDXR.mjs.map