@fluid-app/portal-sdk 0.1.258 → 0.1.259

package/dist/{ContactsScreen-BFiClnMI.mjs → ContactsScreen-Cg_PgwAi.mjs}

@@ -2,17 +2,17 @@ import { I as __exportAll } from "./portal_tenant_content-DPLnrtOG.mjs";
 import { n as useCountriesApi } from "./countries-api-context-CMh13cfX.mjs";
 import { n as usePortalTenantClient } from "./PortalTenantClientProvider-4ZmY6hac.mjs";
 import { n as useActiveLocale } from "./locale-context-B_ufX9EH.mjs";
-import { A as Select, An as cn, Cn as AlertDialogFooter, D as SheetHeader, E as SheetFooter, En as Button, Et as CardContent, G as FormMessage, H as FormField, J as DropdownMenuContent, L as Input, M as SelectItem, N as SelectTrigger, O as SheetTitle, P as SelectValue, Sn as AlertDialogDescription, T as SheetContent, Tn as AlertDialogTitle, U as FormItem, V as FormControl, W as FormLabel, Y as DropdownMenuItem, b as fluidToast, bn as AlertDialogCancel, dn as Breadcrumb, fn as BreadcrumbItem, gn as BreadcrumbSeparator, hn as BreadcrumbPage, j as SelectContent, kn as useZodForm, mn as BreadcrumbList, pn as BreadcrumbLink, q as DropdownMenu, rt as DropdownMenuTrigger, vn as AlertDialog, w as Sheet, wn as AlertDialogHeader, wt as Card, xn as AlertDialogContent, y as Spinner, yn as AlertDialogAction } from "./src-B3W228vu.mjs";
+import { A as Select, An as cn, Cn as AlertDialogFooter, D as SheetHeader, E as SheetFooter, En as Button, G as FormMessage, H as FormField, J as DropdownMenuContent, L as Input, M as SelectItem, N as SelectTrigger, O as SheetTitle, P as SelectValue, Sn as AlertDialogDescription, T as SheetContent, Tn as AlertDialogTitle, U as FormItem, V as FormControl, W as FormLabel, Y as DropdownMenuItem, b as fluidToast, bn as AlertDialogCancel, ct as DialogFooter, dn as Breadcrumb, fn as BreadcrumbItem, ft as DialogTitle, gn as BreadcrumbSeparator, hn as BreadcrumbPage, it as Dialog, j as SelectContent, kn as useZodForm, lt as DialogHeader, mn as BreadcrumbList, ot as DialogContent, pn as BreadcrumbLink, q as DropdownMenu, rt as DropdownMenuTrigger, vn as AlertDialog, w as Sheet, wn as AlertDialogHeader, xn as AlertDialogContent, y as Spinner, yn as AlertDialogAction } from "./src-B3W228vu.mjs";
 import { t as parseTaskBody } from "./parse-task-body-TDBqeoby.mjs";
 import { n as useScreenHeaderActions, r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-kG_zh0zW.mjs";
 import { r as storeKeys } from "./query-keys-xJy_fapN.mjs";
 import { a as useEditor, n as Heading, o as Placeholder, r as EditorContent, t as StarterKit } from "./dist-PbA1vxAz.mjs";
 import { i as createTranslationContext, n as createDomainTranslations, r as useDomainDict, t as createStaticDictAdapter } from "./static-dict-adapter-CDqZ0OAW.mjs";
 import { n as TextAlign, t as Underline } from "./dist-o2cjwzIa.mjs";
-import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, Calendar, ChevronLeft, ChevronRight, CircleCheck, ClipboardList, EllipsisVertical, List, ListOrdered, Mail, MapPin, MoreHorizontal, Paperclip, Pen, Phone, Plus, Search, SquareCheckBig, StickyNote, Trash2, Users, X } from "lucide-react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Calendar, Check, ChevronLeft, ChevronRight, CircleCheck, Copy, EllipsisVertical, List, ListOrdered, ListTodo, Mail, MapPin, MoreHorizontal, Paperclip, Pencil, Phone, Plus, Search, StickyNote, Trash2, Users, X } from "lucide-react";
 import { FormProvider, useFormContext, useWatch } from "react-hook-form";
 import { z } from "zod";
 //#region ../../platform/api-client-core/src/parse-api-errors.ts
@@ -235,32 +235,6 @@ function useGroups() {
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/shared/components/contacts/statusBadge.tsx
-const statusStyles = {
-	new: "border-[var(--status-new-border)] bg-[var(--status-new)] text-[var(--status-new-foreground)]",
-	active: "border-[var(--status-active-border)] bg-[var(--status-active)] text-[var(--status-active-foreground)]",
-	inactive: "border-border bg-muted text-muted-foreground",
-	lead: "border-[var(--status-lead-border)] bg-[var(--status-lead)] text-[var(--status-lead-foreground)]",
-	customer: "border-[var(--status-customer-border)] bg-[var(--status-customer)] text-[var(--status-customer-foreground)]",
-	success: "border-[var(--badge-success-border)] bg-[var(--badge-success)] text-[var(--badge-success-foreground)]",
-	warning: "border-[var(--badge-warning-border)] bg-[var(--badge-warning)] text-[var(--badge-warning-foreground)]",
-	danger: "border-[var(--badge-danger-border)] bg-[var(--badge-danger)] text-[var(--badge-danger-foreground)]",
-	info: "border-[var(--badge-info-border)] bg-[var(--badge-info)] text-[var(--badge-info-foreground)]",
-	neutral: "border-border bg-muted text-muted-foreground",
-	notice: "border-[var(--badge-notice-border)] bg-[var(--badge-notice)] text-[var(--badge-notice-foreground)]",
-	accent: "border-[var(--badge-accent-border)] bg-[var(--badge-accent)] text-[var(--badge-accent-foreground)]"
-};
-const defaultStyle = "border-border bg-muted text-muted-foreground";
-function getStatusStyle(status) {
-	return statusStyles[status] ?? defaultStyle;
-}
-function StatusBadge({ status, label, className }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize", getStatusStyle(status), className),
-		children: label ?? status
-	});
-}
-//#endregion
 //#region ../../contacts/ui/src/portal/components/contacts/rep-layout/utils.ts
 function getDisplayName(contact) {
 	if (contact.full_name && contact.full_name.trim().length > 0) return contact.full_name;
@@ -303,9 +277,7 @@ function getRelativeUpdated(contact) {
 function ContactsSidebarRow({ contact, isSelected, onSelect }) {
 	const name = getDisplayName(contact);
 	const id = String(contact.id);
-	const status = contact.status?.trim() || null;
-	const relativeLabel = getRelativeUpdated(contact);
-	const secondary = contact.email ?? status ?? null;
+	const secondary = contact.email ?? contact.status?.trim() ?? null;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick: () => onSelect(id),
@@ -313,7 +285,7 @@ function ContactsSidebarRow({ contact, isSelected, onSelect }) {
 		className: cn("group flex w-full items-center gap-3.5 rounded-xl px-3 py-3 text-left transition-colors", isSelected ? "bg-muted" : "hover:bg-muted/60"),
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "bg-muted text-muted-foreground relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl text-base font-semibold shadow-sm",
+				className: cn("text-muted-foreground relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl text-base font-semibold transition-colors", isSelected ? "bg-background" : "bg-muted"),
 				children: contact.avatar_url ? /* @__PURE__ */ jsx("img", {
 					alt: name,
 					src: contact.avatar_url,
@@ -325,36 +297,16 @@ function ContactsSidebarRow({ contact, isSelected, onSelect }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-foreground truncate text-sm font-bold tracking-tight",
-						children: name
-					}), status && /* @__PURE__ */ jsx(StatusBadge, {
-						status,
-						className: "shrink-0"
-					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "text-muted-foreground mt-0.5 flex items-center gap-2 text-sm",
-					children: [
-						secondary && /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: secondary
-						}),
-						secondary && relativeLabel && /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground/60 shrink-0 text-xs",
-							"aria-hidden": "true",
-							children: "·"
-						}),
-						relativeLabel && /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground/60 shrink-0 text-xs",
-							children: relativeLabel
-						})
-					]
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-foreground block truncate text-sm font-semibold tracking-tight",
+					children: name
+				}), secondary && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground mt-0.5 block truncate text-sm",
+					children: secondary
 				})]
 			}),
 			/* @__PURE__ */ jsx(ChevronRight, {
-				className: cn("size-4 shrink-0 transition-all", isSelected ? "text-foreground" : "text-muted-foreground/60 group-hover:text-foreground group-hover:translate-x-0.5"),
+				className: cn("size-4 shrink-0 transition-all", isSelected ? "text-foreground" : "text-muted-foreground/60 opacity-0 group-hover:translate-x-0.5 group-hover:opacity-100"),
 				"aria-hidden": "true"
 			})
 		]
@@ -365,7 +317,7 @@ function ContactsSidebarRow({ contact, isSelected, onSelect }) {
 const DEBOUNCE_MS = 200;
 function useBuiltInFilters() {
 	const { t } = useContactsTranslation();
-	return [
+	return useMemo(() => [
 		{
 			id: "all",
 			label: t("filter_all"),
@@ -387,7 +339,7 @@ function useBuiltInFilters() {
 				status: "customer"
 			}
 		}
-	];
+	], [t]);
 }
 function filterId(value) {
 	if (value.kind === "all") return "all";
@@ -396,6 +348,7 @@ function filterId(value) {
 }
 function ContactsSidebar({ selectedContactId, onSelect, onAdd }) {
 	const { t } = useContactsTranslation();
+	const builtInFilters = useBuiltInFilters();
 	const [searchInput, setSearchInput] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const [filter, setFilter] = useState({ kind: "all" });
@@ -418,8 +371,6 @@ function ContactsSidebar({ selectedContactId, onSelect, onAdd }) {
 		if (filter.kind === "status") return contacts.filter((c) => c.status === filter.status);
 		return contacts;
 	}, [contacts, filter]);
-	const serverTotalCount = data?.pages[0]?.meta.total_count ?? contacts.length;
-	const subtitleCount = filter.kind === "status" ? visibleContacts.length : serverTotalCount;
 	const sentinelRef = useRef(null);
 	const hasAutoSelectedRef = useRef(false);
 	useEffect(() => {
@@ -460,22 +411,26 @@ function ContactsSidebar({ selectedContactId, onSelect, onAdd }) {
 	const activeFilterId = filterId(filter);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
-			className: "px-7 pt-8 pb-5",
+			className: "border-border/50 border-b px-6 py-3",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between gap-3",
+				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0",
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: "text-foreground text-2xl font-extrabold tracking-tight",
-						children: t("breadcrumb")
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground mt-1.5 text-sm",
-						children: isLoading ? t("loading") : hasNextPage && filter.kind === "status" ? t("searching") : subtitleCount === 1 ? t("person_count", { count: subtitleCount }) : t("people_count", { count: subtitleCount })
+					className: "bg-muted focus-within:ring-foreground/20 flex min-w-0 flex-1 items-center gap-2 rounded-lg px-3 py-1.5 transition focus-within:ring-2",
+					children: [/* @__PURE__ */ jsx(Search, {
+						className: "text-muted-foreground size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx(Input, {
+						value: searchInput,
+						onChange: (e) => setSearchInput(e.target.value),
+						placeholder: t("search_placeholder"),
+						type: "search",
+						className: "placeholder:text-muted-foreground/80 h-auto flex-1 border-0 bg-transparent p-0 text-xs font-medium shadow-none focus-visible:ring-0",
+						"aria-label": t("search_placeholder")
 					})]
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: onAdd,
-					className: "bg-foreground text-background hover:bg-foreground/90 inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold transition-colors",
+					className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors",
 					children: [/* @__PURE__ */ jsx(Plus, {
 						className: "size-3.5",
 						"aria-hidden": "true"
@@ -483,25 +438,9 @@ function ContactsSidebar({ selectedContactId, onSelect, onAdd }) {
 				})]
 			})
 		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "px-6 pb-3",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "bg-muted focus-within:ring-foreground/20 flex items-center gap-2.5 rounded-xl px-3.5 py-2.5 transition focus-within:ring-2",
-				children: [/* @__PURE__ */ jsx(Search, {
-					className: "text-muted-foreground size-4 shrink-0",
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ jsx(Input, {
-					value: searchInput,
-					onChange: (e) => setSearchInput(e.target.value),
-					placeholder: t("search_placeholder"),
-					type: "search",
-					className: "placeholder:text-muted-foreground/80 h-auto flex-1 border-0 bg-transparent p-0 text-sm font-medium shadow-none focus-visible:ring-0",
-					"aria-label": t("search_placeholder")
-				})]
-			})
-		}),
 		/* @__PURE__ */ jsx(FilterPills, {
 			activeId: activeFilterId,
+			builtInFilters,
 			groups: groups.map((g) => g.name),
 			onChange: setFilter
 		}),
@@ -545,12 +484,11 @@ function ContactsSidebar({ selectedContactId, onSelect, onAdd }) {
 		})
 	] });
 }
-function FilterPills({ activeId, groups, onChange }) {
-	const builtInFilters = useBuiltInFilters();
+function FilterPills({ activeId, builtInFilters, groups, onChange }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "px-6 pb-4",
+		className: "overflow-x-auto pt-4 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "flex gap-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			className: "flex gap-1.5 px-6",
 			children: useMemo(() => [...builtInFilters, ...groups.map((tag) => ({
 				id: `group:${tag}`,
 				label: tag,
@@ -564,7 +502,7 @@ function FilterPills({ activeId, groups, onChange }) {
 					type: "button",
 					onClick: () => onChange(value),
 					"aria-pressed": isActive,
-					className: cn("shrink-0 rounded-full px-4 py-1.5 text-sm font-semibold capitalize transition-colors", isActive ? "bg-foreground text-background" : "border-border bg-muted text-foreground hover:bg-muted/70 border"),
+					className: cn("shrink-0 rounded-full px-4 py-1.5 text-sm font-semibold capitalize transition-colors", isActive ? "bg-primary text-primary-foreground" : "border-border/50 bg-muted text-foreground hover:bg-muted/70 border"),
 					children: label
 				}, id);
 			})
@@ -591,448 +529,853 @@ function SidebarSkeleton() {
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/shared/hooks/useContactDetail.ts
-function useContactDetail(contactId, queryKeyPrefix = "contacts") {
-	const api = useContactsCrud();
-	return useQuery({
-		queryKey: CONTACTS_QUERY_KEYS.detail(queryKeyPrefix, contactId),
-		queryFn: () => api.getContact(contactId),
-		enabled: !!contactId
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/shared/hooks/useUpdateContactMutation.ts
-function useUpdateContactMutation(contactId, queryKeyPrefix = "contacts", options) {
-	const queryClient = useQueryClient();
-	const api = useContactsCrud();
-	return useMutation({
-		mutationFn: ({ id, data }) => api.updateContact(id, data),
-		onSuccess: () => {
-			fluidToast({
-				title: "Contact updated successfully",
-				type: "success"
-			});
-			queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all(queryKeyPrefix) });
-			options?.onSuccess?.();
-		},
-		onError: (error) => {
-			fluidToast({
-				title: "Failed to save contact",
-				type: "error",
-				description: parseApiErrors(error)
-			});
-			options?.onError?.(error);
-		}
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/shared/hooks/useDeleteContactMutation.ts
-function useDeleteContactMutation(queryKeyPrefix = "contacts", options) {
-	const queryClient = useQueryClient();
-	const api = useContactsCrud();
-	return useMutation({
-		mutationFn: (contactId) => api.deleteContact(contactId),
-		onSuccess: () => {
-			fluidToast({
-				title: "Contact deleted successfully",
-				type: "success"
-			});
-			queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all(queryKeyPrefix) });
-			options?.onSuccess?.();
-		},
-		onError: (error) => {
-			fluidToast({
-				title: "Failed to delete contact",
-				type: "error",
-				description: parseApiErrors(error)
-			});
-			options?.onError?.(error);
-		}
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/shared/schemas/contactFormSchema.ts
-/**
-* Form schema for creating a contact.
-* Matches CompanyContactCreate / ContactCreate from the OpenAPI spec.
-*
-* @see CompanyContactCreate in company_contacts.d.ts
-* @see ContactCreate in users_contacts.d.ts
-*/
-const createContactFormSchema = z.object({
-	first_name: z.string().min(1, { message: "First name is required" }),
-	last_name: z.string().min(1, { message: "Last name is required" }),
-	status: z.string().nullable().optional(),
-	email: z.string().email().or(z.literal("")).nullable().optional(),
-	phone: z.string().nullable().optional(),
-	address: z.string().nullable().optional(),
-	city: z.string().nullable().optional(),
-	state: z.string().nullable().optional(),
-	postal_code: z.string().nullable().optional(),
-	country_code: z.coerce.string().nullable().optional(),
-	language_code: z.coerce.string().nullable().optional(),
-	affiliate: z.record(z.string(), z.unknown()).nullable().optional(),
-	metadata: z.record(z.string(), z.unknown()).optional()
-});
-/**
-* Form schema for editing a contact.
-* Same fields as create plus id. Uses .passthrough() so extra fields
-* from the Contact read model (full_name, avatar_url, etc.) don't
-* cause validation failures.
-*
-* @see CompanyContactUpdate in company_contacts.d.ts
-*/
-const editContactFormSchema = createContactFormSchema.passthrough();
-//#endregion
-//#region ../../contacts/ui/src/shared/hooks/useContactDetailPage.ts
-const mutableKeys = Object.keys(createContactFormSchema.shape);
-function useContactDetailPage(contactId, options) {
-	const queryKeyPrefix = options?.queryKeyPrefix ?? "contacts";
-	const { data, isLoading } = useContactDetail(contactId, queryKeyPrefix);
-	const { data: countries } = useQuery({
-		queryKey: ["countries"],
-		queryFn: options?.getCountries ?? (() => Promise.resolve([])),
-		enabled: !!options?.getCountries
-	});
-	const countryOptions = useMemo(() => [...countries?.map((c) => ({
-		name: c.name,
-		value: c.iso ?? c.id.toString()
-	})) ?? []].sort((a, b) => a.name.localeCompare(b.name)), [countries]);
-	const contact = data?.contact;
-	const methods = useZodForm(editContactFormSchema, {
-		values: useMemo(() => {
-			if (!contact) return void 0;
-			return {
-				...contact,
-				country_code: contact.country?.iso ?? contact.country_id?.toString() ?? null
-			};
-		}, [contact]),
-		mode: "onBlur"
-	});
-	const updateMutation = useUpdateContactMutation(contactId, queryKeyPrefix, { onSuccess: () => {
-		methods.reset(methods.getValues());
-	} });
-	const deleteMutation = useDeleteContactMutation(queryKeyPrefix, { onSuccess: () => {
-		options?.onDeleteSuccess?.();
-	} });
-	const onSave = useCallback(() => {
-		methods.handleSubmit((formData) => {
-			const payload = {};
-			for (const key of mutableKeys) if (key in formData) payload[key] = formData[key];
-			updateMutation.mutate({
-				id: contactId,
-				data: payload
-			});
-		}, (errors) => {
-			fluidToast({
-				title: "Please fix the form errors before saving",
-				description: Object.entries(errors).map(([field, err]) => {
-					const msg = typeof err?.message === "string" ? err.message : "invalid";
-					return `${field.replace(/_/g, " ")}: ${msg}`;
-				}).join(", ") || void 0,
-				type: "error"
-			});
-		})();
-	}, [
-		methods,
-		updateMutation,
-		contactId
-	]);
-	const onDelete = useCallback(() => {
-		deleteMutation.mutate(contactId);
-	}, [deleteMutation, contactId]);
-	return {
-		contact,
-		isLoading,
-		methods,
-		countryOptions,
-		isDirty: methods.formState.isDirty,
-		isSubmitting: updateMutation.isPending,
-		isDeleting: deleteMutation.isPending,
-		onSave,
-		onDelete
-	};
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/hooks/contacts/use-contact-tasks.ts
-function useContactTasks(contactId) {
-	const api = useTasksApi();
-	return useQuery({
-		queryKey: contactsKeys.tasks(contactId),
-		queryFn: () => api.listTasks(contactId),
-		enabled: !!contactId,
-		select: (data) => data.tasks
+//#region ../../contacts/ui/src/shared/components/contacts/contactDetailsForm.tsx
+const DEFAULT_COUNTRIES = [];
+const statusOptions = [
+	{
+		name: "New",
+		value: "new"
+	},
+	{
+		name: "Active",
+		value: "active"
+	},
+	{
+		name: "Inactive",
+		value: "inactive"
+	},
+	{
+		name: "Cold",
+		value: "cold"
+	},
+	{
+		name: "Lead",
+		value: "lead"
+	},
+	{
+		name: "Customer",
+		value: "customer"
+	}
+];
+const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAvatarPicker }) => {
+	const { control, watch, setValue } = useFormContext();
+	const currentStatus = useWatch({
+		control,
+		name: "status"
 	});
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/hooks/notes/use-contact-notes.ts
-function useContactNotes(contactId) {
-	const api = useNotesApi();
-	return useQuery({
-		queryKey: contactsKeys.notes(contactId),
-		queryFn: () => api.listNotes(contactId),
-		enabled: !!contactId,
-		select: (data) => data.notes
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/components/contacts/rep-layout/ContactDetailHero.tsx
-function ContactDetailHero({ contact, tasksCount, notesCount }) {
-	const { t } = useContactsTranslation();
-	const name = getDisplayName(contact);
-	const status = contact.status?.trim();
-	const lastUpdated = getRelativeUpdated(contact);
+	const avatarUrl = watch("avatar_url") ?? null;
+	const effectiveStatusOptions = useMemo(() => {
+		if (currentStatus && typeof currentStatus === "string" && !statusOptions.some((o) => o.value === currentStatus)) return [{
+			name: currentStatus.charAt(0).toUpperCase() + currentStatus.slice(1).replace(/_/g, " "),
+			value: currentStatus
+		}, ...statusOptions];
+		return statusOptions;
+	}, [currentStatus]);
+	const initials = [watch("first_name")?.[0] ?? "", watch("last_name")?.[0] ?? ""].filter(Boolean).join("").toUpperCase() || "?";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-5 md:flex-row md:items-start md:justify-between md:gap-8",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4 md:flex-row md:items-start md:gap-5",
+		className: cn("space-y-6", className),
+		children: [renderAvatarPicker && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-3",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "bg-muted text-muted-foreground relative flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-xl text-2xl font-semibold shadow-sm md:size-24 md:text-2xl",
-				children: contact.avatar_url ? /* @__PURE__ */ jsx("img", {
-					alt: name,
-					src: contact.avatar_url,
-					className: "size-full object-cover"
-				}) : /* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					children: getInitials(name)
+				className: "border-border bg-background relative h-20 w-20 shrink-0 overflow-hidden rounded-full border-2",
+				children: avatarUrl ? /* @__PURE__ */ jsx("img", {
+					src: avatarUrl,
+					alt: "",
+					className: "h-full w-full object-cover"
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
+					children: initials
 				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-foreground text-2xl leading-tight font-extrabold tracking-tight",
-					children: name
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "mt-3 flex flex-wrap items-center gap-2.5",
-					children: [status && /* @__PURE__ */ jsx(StatusBadge, { status }), lastUpdated && /* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground text-sm",
-						children: t("last_updated", { date: lastUpdated })
-					})]
-				})]
+			}), renderAvatarPicker({
+				value: avatarUrl,
+				onChange: (url) => setValue("avatar_url", url ?? "", { shouldDirty: true })
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "bg-muted flex shrink-0 gap-6 rounded-xl px-5 py-4",
+			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
 			children: [
-				/* @__PURE__ */ jsx(Stat, {
-					label: t("tab_tasks"),
-					value: tasksCount
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "first_name",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "First Name"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter first name",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
 				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "bg-border w-px",
-					"aria-hidden": "true"
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "last_name",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "Last Name"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter last name",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
 				}),
-				/* @__PURE__ */ jsx(Stat, {
-					label: t("tab_notes"),
-					value: notesCount
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "email",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "Email"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter email address",
+							type: "email",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "phone",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "Phone"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter phone number",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "status",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "Status"
+						}),
+						/* @__PURE__ */ jsxs(Select, {
+							value: field.value ?? "",
+							onValueChange: field.onChange,
+							children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select status" })
+							}) }), /* @__PURE__ */ jsx(SelectContent, {
+								position: "popper",
+								sideOffset: 4,
+								children: effectiveStatusOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
+									value: opt.value,
+									children: opt.name
+								}, opt.value))
+							})]
+						}),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "address",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, {
+						className: "lg:col-span-2",
+						children: [
+							/* @__PURE__ */ jsx(FormLabel, {
+								className: "font-inter text-foreground font-medium",
+								children: "Full Address"
+							}),
+							/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+								placeholder: "Enter street address",
+								...field,
+								value: field.value ?? "",
+								className: "ring-input"
+							}) }),
+							/* @__PURE__ */ jsx(FormMessage, {})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "city",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "City"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter city",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "state",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "State/Province"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter state or province",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "postal_code",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "Postal Code"
+						}),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							placeholder: "Enter postal code",
+							...field,
+							value: field.value ?? "",
+							className: "ring-input"
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					control,
+					name: "country_code",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, {
+							className: "font-inter text-foreground font-medium",
+							children: "Country"
+						}),
+						/* @__PURE__ */ jsxs(Select, {
+							value: field.value ?? "",
+							onValueChange: field.onChange,
+							children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select country" })
+							}) }), /* @__PURE__ */ jsx(SelectContent, {
+								position: "popper",
+								sideOffset: 4,
+								children: countries.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
+									value: opt.value,
+									children: opt.name
+								}, opt.value))
+							})]
+						}),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
 				})
 			]
 		})]
 	});
-}
-function Stat({ label, value }) {
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-		className: "text-muted-foreground text-xs font-bold tracking-wider uppercase",
-		children: label
-	}), /* @__PURE__ */ jsx("div", {
-		className: "text-foreground mt-1 text-lg font-bold tracking-tight",
-		children: value
-	})] });
-}
+};
 //#endregion
-//#region ../../contacts/ui/src/portal/components/contacts/rep-layout/ContactInfoRow.tsx
-function buildAddressLine(contact) {
-	const parts = [
-		contact.address,
-		contact.city,
-		contact.state,
-		contact.postal_code
-	].filter((part) => Boolean(part?.trim()));
-	if (parts.length === 0) return null;
-	return parts.join(", ");
-}
-function ContactInfoRow({ contact }) {
-	const { t } = useContactsTranslation();
-	const address = buildAddressLine(contact);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "border-border bg-card mt-6 grid grid-cols-1 gap-x-6 gap-y-3 rounded-xl border p-4 md:grid-cols-3 md:p-5",
-		children: [
-			/* @__PURE__ */ jsx(InfoCell, {
-				icon: /* @__PURE__ */ jsx(Mail, {
-					className: "size-3.5",
-					"aria-hidden": "true"
-				}),
-				label: t("label_email"),
-				value: contact.email,
-				notSetLabel: t("not_set")
-			}),
-			/* @__PURE__ */ jsx(InfoCell, {
-				icon: /* @__PURE__ */ jsx(Phone, {
-					className: "size-3.5",
-					"aria-hidden": "true"
-				}),
-				label: t("label_phone"),
-				value: contact.phone,
-				notSetLabel: t("not_set")
-			}),
-			/* @__PURE__ */ jsx(InfoCell, {
-				icon: /* @__PURE__ */ jsx(MapPin, {
-					className: "size-3.5",
-					"aria-hidden": "true"
-				}),
-				label: t("label_address"),
-				value: address,
-				notSetLabel: t("not_set")
-			})
-		]
-	});
-}
-function InfoCell({ icon, label, value, notSetLabel }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "min-w-0",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "text-muted-foreground flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground",
-				children: icon
-			}), label]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "text-foreground mt-1 truncate text-sm font-medium",
-			children: value && value.trim().length > 0 ? value : /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground/60 font-normal italic",
-				children: notSetLabel
-			})
-		})]
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/hooks/contacts/use-toggle-task-completion.ts
-function useToggleTaskCompletion(contactId) {
-	const queryClient = useQueryClient();
-	const api = useTasksApi();
-	return useMutation({
-		mutationFn: ({ taskId, isCompleted }) => api.updateTask(taskId, contactId, { completed_at: isCompleted ? null : (/* @__PURE__ */ new Date()).toISOString() }),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
-		},
-		onError: (error) => {
-			fluidToast({
-				title: "Failed to update task",
-				type: "error",
-				description: parseApiErrors(error)
-			});
-		}
+//#region ../../contacts/ui/src/shared/hooks/useContactDetail.ts
+function useContactDetail(contactId, queryKeyPrefix = "contacts") {
+	const api = useContactsCrud();
+	return useQuery({
+		queryKey: CONTACTS_QUERY_KEYS.detail(queryKeyPrefix, contactId),
+		queryFn: () => api.getContact(contactId),
+		enabled: !!contactId
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/portal/hooks/contacts/use-delete-contact-task.ts
-function useDeleteContactTask(contactId, options) {
+//#region ../../contacts/ui/src/shared/hooks/useUpdateContactMutation.ts
+function useUpdateContactMutation(contactId, queryKeyPrefix = "contacts", options) {
 	const queryClient = useQueryClient();
-	const api = useTasksApi();
+	const api = useContactsCrud();
 	return useMutation({
-		mutationFn: (taskId) => api.deleteTask(taskId, contactId),
+		mutationFn: ({ id, data }) => api.updateContact(id, data),
 		onSuccess: () => {
 			fluidToast({
-				title: "Task deleted",
+				title: "Contact updated successfully",
 				type: "success"
 			});
-			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
+			queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all(queryKeyPrefix) });
 			options?.onSuccess?.();
 		},
 		onError: (error) => {
 			fluidToast({
-				title: "Failed to delete task",
+				title: "Failed to save contact",
 				type: "error",
 				description: parseApiErrors(error)
 			});
+			options?.onError?.(error);
 		}
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/portal/hooks/contacts/use-create-contact-task.ts
-function useCreateContactTask(contactId, options) {
+//#region ../../contacts/ui/src/shared/hooks/useDeleteContactMutation.ts
+function useDeleteContactMutation(queryKeyPrefix = "contacts", options) {
 	const queryClient = useQueryClient();
-	const api = useTasksApi();
+	const api = useContactsCrud();
 	return useMutation({
-		mutationFn: (input) => api.createTask(contactId, input),
+		mutationFn: (contactId) => api.deleteContact(contactId),
 		onSuccess: () => {
 			fluidToast({
-				title: "Task created",
+				title: "Contact deleted successfully",
 				type: "success"
 			});
-			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
+			queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all(queryKeyPrefix) });
 			options?.onSuccess?.();
 		},
 		onError: (error) => {
 			fluidToast({
-				title: "Failed to create task",
+				title: "Failed to delete contact",
 				type: "error",
 				description: parseApiErrors(error)
 			});
+			options?.onError?.(error);
 		}
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/portal/hooks/contacts/use-update-contact-task.ts
-function useUpdateContactTask(contactId, options) {
-	const queryClient = useQueryClient();
-	const api = useTasksApi();
-	return useMutation({
-		mutationFn: ({ taskId, input }) => api.updateTask(taskId, contactId, input),
-		onSuccess: () => {
-			fluidToast({
-				title: "Task updated",
-				type: "success"
+//#region ../../contacts/ui/src/shared/schemas/contactFormSchema.ts
+/**
+* Form schema for creating a contact.
+* Matches CompanyContactCreate / ContactCreate from the OpenAPI spec.
+*
+* @see CompanyContactCreate in company_contacts.d.ts
+* @see ContactCreate in users_contacts.d.ts
+*/
+const createContactFormSchema = z.object({
+	first_name: z.string().min(1, { message: "First name is required" }),
+	last_name: z.string().min(1, { message: "Last name is required" }),
+	status: z.string().nullable().optional(),
+	email: z.string().email().or(z.literal("")).nullable().optional(),
+	phone: z.string().nullable().optional(),
+	address: z.string().nullable().optional(),
+	city: z.string().nullable().optional(),
+	state: z.string().nullable().optional(),
+	postal_code: z.string().nullable().optional(),
+	country_code: z.coerce.string().nullable().optional(),
+	language_code: z.coerce.string().nullable().optional(),
+	affiliate: z.record(z.string(), z.unknown()).nullable().optional(),
+	metadata: z.record(z.string(), z.unknown()).optional()
+});
+/**
+* Form schema for editing a contact.
+* Same fields as create plus id. Uses .passthrough() so extra fields
+* from the Contact read model (full_name, avatar_url, etc.) don't
+* cause validation failures.
+*
+* @see CompanyContactUpdate in company_contacts.d.ts
+*/
+const editContactFormSchema = createContactFormSchema.passthrough();
+//#endregion
+//#region ../../contacts/ui/src/shared/hooks/useContactDetailPage.ts
+const mutableKeys = Object.keys(createContactFormSchema.shape);
+function useContactDetailPage(contactId, options) {
+	const queryKeyPrefix = options?.queryKeyPrefix ?? "contacts";
+	const { data, isLoading } = useContactDetail(contactId, queryKeyPrefix);
+	const { data: countries } = useQuery({
+		queryKey: ["countries"],
+		queryFn: options?.getCountries ?? (() => Promise.resolve([])),
+		enabled: !!options?.getCountries
+	});
+	const countryOptions = useMemo(() => [...countries?.map((c) => ({
+		name: c.name,
+		value: c.iso ?? c.id.toString()
+	})) ?? []].sort((a, b) => a.name.localeCompare(b.name)), [countries]);
+	const contact = data?.contact;
+	const methods = useZodForm(editContactFormSchema, {
+		values: useMemo(() => {
+			if (!contact) return void 0;
+			return {
+				...contact,
+				country_code: contact.country?.iso ?? contact.country_id?.toString() ?? null
+			};
+		}, [contact]),
+		mode: "onBlur"
+	});
+	const updateMutation = useUpdateContactMutation(contactId, queryKeyPrefix, { onSuccess: () => {
+		methods.reset(methods.getValues());
+		options?.onSaveSuccess?.();
+	} });
+	const deleteMutation = useDeleteContactMutation(queryKeyPrefix, { onSuccess: () => {
+		options?.onDeleteSuccess?.();
+	} });
+	const onSave = useCallback(() => {
+		methods.handleSubmit((formData) => {
+			const payload = {};
+			for (const key of mutableKeys) if (key in formData) payload[key] = formData[key];
+			updateMutation.mutate({
+				id: contactId,
+				data: payload
 			});
-			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
-			options?.onSuccess?.();
-		},
-		onError: (error) => {
+		}, (errors) => {
 			fluidToast({
-				title: "Failed to update task",
-				type: "error",
-				description: parseApiErrors(error)
+				title: "Please fix the form errors before saving",
+				description: Object.entries(errors).map(([field, err]) => {
+					const msg = typeof err?.message === "string" ? err.message : "invalid";
+					return `${field.replace(/_/g, " ")}: ${msg}`;
+				}).join(", ") || void 0,
+				type: "error"
 			});
-		}
-	});
+		})();
+	}, [
+		methods,
+		updateMutation,
+		contactId
+	]);
+	const onDelete = useCallback(() => {
+		deleteMutation.mutate(contactId);
+	}, [deleteMutation, contactId]);
+	return {
+		contact,
+		isLoading,
+		methods,
+		countryOptions,
+		isDirty: methods.formState.isDirty,
+		isSubmitting: updateMutation.isPending,
+		isDeleting: deleteMutation.isPending,
+		onSave,
+		onDelete
+	};
 }
 //#endregion
-//#region ../../contacts/ui/src/portal/utils/format-date.ts
-function formatDateForDisplay(dateStr) {
-	return new Date(dateStr).toLocaleDateString("en-US", {
-		month: "short",
-		day: "numeric",
-		year: "numeric"
+//#region ../../contacts/ui/src/portal/hooks/contacts/use-contact-tasks.ts
+function useContactTasks(contactId) {
+	const api = useTasksApi();
+	return useQuery({
+		queryKey: contactsKeys.tasks(contactId),
+		queryFn: () => api.listTasks(contactId),
+		enabled: !!contactId,
+		select: (data) => data.tasks
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/portal/components/editor/note-task-editor.tsx
-function extractTitleAndBody(editor) {
-	if (!editor) return {
-		title: "",
-		body: ""
-	};
-	const doc = editor.state.doc;
-	let title = "";
-	const bodyParts = [];
-	doc.forEach((node) => {
-		if (node.type.name === "heading" && !title) title = node.textContent.trim();
-		else {
-			const text = node.textContent.trim();
-			if (text) bodyParts.push(text);
-		}
-	});
-	return {
-		title,
-		body: bodyParts.join("\n")
-	};
-}
-function extractBodyOnly(editor) {
-	if (!editor) return "";
-	const parts = [];
-	editor.state.doc.forEach((node) => {
-		const text = node.textContent.trim();
-		if (text) parts.push(text);
+//#region ../../contacts/ui/src/portal/hooks/notes/use-contact-notes.ts
+function useContactNotes(contactId) {
+	const api = useNotesApi();
+	return useQuery({
+		queryKey: contactsKeys.notes(contactId),
+		queryFn: () => api.listNotes(contactId),
+		enabled: !!contactId,
+		select: (data) => data.notes
 	});
-	return parts.join("\n");
+}
+//#endregion
+//#region ../../contacts/ui/src/shared/components/contacts/statusBadge.tsx
+const statusStyles = {
+	new: "border-[var(--status-new-border)] bg-[var(--status-new)] text-[var(--status-new-foreground)]",
+	active: "border-[var(--status-active-border)] bg-[var(--status-active)] text-[var(--status-active-foreground)]",
+	inactive: "border-border bg-muted text-muted-foreground",
+	lead: "border-[var(--status-lead-border)] bg-[var(--status-lead)] text-[var(--status-lead-foreground)]",
+	customer: "border-[var(--status-customer-border)] bg-[var(--status-customer)] text-[var(--status-customer-foreground)]",
+	success: "border-[var(--badge-success-border)] bg-[var(--badge-success)] text-[var(--badge-success-foreground)]",
+	warning: "border-[var(--badge-warning-border)] bg-[var(--badge-warning)] text-[var(--badge-warning-foreground)]",
+	danger: "border-[var(--badge-danger-border)] bg-[var(--badge-danger)] text-[var(--badge-danger-foreground)]",
+	info: "border-[var(--badge-info-border)] bg-[var(--badge-info)] text-[var(--badge-info-foreground)]",
+	neutral: "border-border bg-muted text-muted-foreground",
+	notice: "border-[var(--badge-notice-border)] bg-[var(--badge-notice)] text-[var(--badge-notice-foreground)]",
+	accent: "border-[var(--badge-accent-border)] bg-[var(--badge-accent)] text-[var(--badge-accent-foreground)]"
+};
+const defaultStyle = "border-border bg-muted text-muted-foreground";
+function getStatusStyle(status) {
+	return statusStyles[status] ?? defaultStyle;
+}
+function StatusBadge({ status, label, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize", getStatusStyle(status), className),
+		children: label ?? status
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/components/contacts/rep-layout/ContactDetailHero.tsx
+function ContactDetailHero({ contact, tasksCount, notesCount }) {
+	const { t } = useContactsTranslation();
+	const name = getDisplayName(contact);
+	const status = contact.status?.trim();
+	const lastUpdated = getRelativeUpdated(contact);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between md:gap-8",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "bg-muted relative flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-2xl md:size-24",
+				children: contact.avatar_url ? /* @__PURE__ */ jsx("img", {
+					alt: name,
+					src: contact.avatar_url,
+					className: "size-full object-cover"
+				}) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "text-muted-foreground text-2xl font-bold tracking-tight md:text-3xl",
+					children: getInitials(name)
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-foreground text-2xl leading-tight font-bold tracking-tight md:text-3xl",
+					children: name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-2.5 flex flex-wrap items-center gap-2",
+					children: [
+						status && /* @__PURE__ */ jsx(StatusBadge, { status }),
+						status && lastUpdated && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "text-muted-foreground/40 text-sm",
+							children: "·"
+						}),
+						lastUpdated && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-sm",
+							children: t("last_updated", { date: lastUpdated })
+						})
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-6 md:gap-8",
+			children: [
+				/* @__PURE__ */ jsx(Stat, {
+					label: t("tab_tasks"),
+					value: tasksCount,
+					icon: ListTodo
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-border h-10 w-px",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx(Stat, {
+					label: t("tab_notes"),
+					value: notesCount,
+					icon: StickyNote
+				})
+			]
+		})]
+	});
+}
+function Stat({ label, value, icon: Icon }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-start gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				className: "size-3.5",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-foreground text-2xl font-bold tracking-tight tabular-nums",
+			children: value
+		})]
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/components/contacts/rep-layout/ContactInfoRow.tsx
+function buildAddressLine(contact) {
+	const parts = [
+		contact.address,
+		contact.city,
+		contact.state,
+		contact.postal_code
+	].filter((part) => Boolean(part?.trim()));
+	if (parts.length === 0) return null;
+	return parts.join(", ");
+}
+function ContactInfoRow({ contact, onEditEmpty }) {
+	const { t } = useContactsTranslation();
+	const address = buildAddressLine(contact);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border/50 divide-border/50 mt-6 divide-y overflow-hidden rounded-2xl border",
+		children: [
+			/* @__PURE__ */ jsx(InfoRow, {
+				icon: Mail,
+				label: t("label_email"),
+				value: contact.email,
+				href: contact.email ? `mailto:${contact.email}` : void 0,
+				onEditEmpty
+			}),
+			/* @__PURE__ */ jsx(InfoRow, {
+				icon: Phone,
+				label: t("label_phone"),
+				value: contact.phone,
+				href: contact.phone ? `tel:${contact.phone}` : void 0,
+				onEditEmpty
+			}),
+			/* @__PURE__ */ jsx(InfoRow, {
+				icon: MapPin,
+				label: t("label_address"),
+				value: address,
+				href: address ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}` : void 0,
+				external: true,
+				onEditEmpty
+			})
+		]
+	});
+}
+function InfoRow({ icon: Icon, label, value, href, external = false, onEditEmpty }) {
+	const { t } = useContactsTranslation();
+	const trimmed = value?.trim();
+	const isEmpty = !trimmed;
+	const [copied, setCopied] = useState(false);
+	const handleCopy = () => {
+		if (!trimmed) return;
+		if (typeof navigator === "undefined" || !navigator.clipboard) return;
+		navigator.clipboard.writeText(trimmed).then(() => {
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1500);
+		}).catch(() => {});
+	};
+	if (isEmpty) {
+		const addText = t("add_field", { field: label });
+		if (!onEditEmpty) return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 px-4 py-2.5 md:px-5",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "border-border/50 text-muted-foreground/50 flex size-9 shrink-0 items-center justify-center rounded-full border-2 border-dashed",
+					children: /* @__PURE__ */ jsx(Icon, {
+						className: "size-4",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground text-xs font-medium",
+						children: label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground/70 truncate text-sm italic",
+						children: addText
+					})]
+				}),
+				/* @__PURE__ */ jsx(Plus, {
+					className: "text-muted-foreground/40 size-4 shrink-0",
+					"aria-hidden": true
+				})
+			]
+		});
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onEditEmpty,
+			"aria-label": addText,
+			className: "hover:bg-muted/60 group flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors md:px-5",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "border-border/50 text-muted-foreground/50 group-hover:border-foreground/30 group-hover:text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-full border-2 border-dashed transition-colors",
+					children: /* @__PURE__ */ jsx(Icon, {
+						className: "size-4",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground text-xs font-medium",
+						children: label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground/70 group-hover:text-muted-foreground truncate text-sm italic transition-colors",
+						children: addText
+					})]
+				}),
+				/* @__PURE__ */ jsx(Plus, {
+					className: "text-muted-foreground/40 group-hover:text-foreground size-4 shrink-0 transition-colors",
+					"aria-hidden": true
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "hover:bg-muted/60 group flex items-center transition-colors",
+		children: [/* @__PURE__ */ jsxs("a", {
+			href,
+			...external ? {
+				target: "_blank",
+				rel: "noopener noreferrer"
+			} : {},
+			className: "flex min-w-0 flex-1 items-center gap-3 px-4 py-2.5 md:px-5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "bg-muted text-muted-foreground group-hover:bg-muted/70 group-hover:text-foreground flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground text-xs font-medium",
+					children: label
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-foreground truncate text-sm font-semibold",
+					children: trimmed
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleCopy,
+			"aria-label": copied ? t("copied_field", { field: label }) : t("copy_field", { field: label }),
+			className: "text-muted-foreground hover:bg-muted hover:text-foreground mr-3 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors",
+			children: copied ? /* @__PURE__ */ jsx(Check, {
+				className: "text-primary size-3.5",
+				"aria-hidden": true
+			}) : /* @__PURE__ */ jsx(Copy, {
+				className: "size-3.5",
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+//#endregion
+//#region ../../contacts/core/src/iso-date.ts
+/**
+* Format a date as YYYY-MM-DD in the renderer's local timezone, optionally
+* shifted by `offsetDays`. Use this for due-date inputs where "today" must
+* resolve to the user's local calendar date — never `toISOString().slice(0, 10)`,
+* which returns the UTC date and silently rolls over a day for users east/west
+* of UTC at the wrong hours.
+*/
+function isoDate(offsetDays, now = /* @__PURE__ */ new Date()) {
+	const d = new Date(now);
+	d.setDate(d.getDate() + offsetDays);
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+/**
+* Return a Date pinned to local midnight of the calendar day represented by
+* `input`. Use this whenever you need to compare two due dates by calendar day
+* (overdue / today / tomorrow / future).
+*
+* Why not just `new Date(input)`?  `new Date("YYYY-MM-DD")` parses the string
+* as UTC midnight, which lands on the *previous* calendar day in any UTC−
+* timezone — a task due "May 1" then reads as April 30 for a user in the
+* Americas, classifying it as "Overdue" all day. Parse the date components
+* directly so the calendar-day intent of the string is preserved.
+*/
+function startOfLocalDay(input) {
+	if (typeof input === "string") {
+		const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(input);
+		if (match?.[1] && match[2] && match[3]) return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+	}
+	const d = typeof input === "string" ? new Date(input) : input;
+	return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/hooks/contacts/use-toggle-task-completion.ts
+function useToggleTaskCompletion(contactId) {
+	const queryClient = useQueryClient();
+	const api = useTasksApi();
+	return useMutation({
+		mutationFn: ({ taskId, isCompleted }) => api.updateTask(taskId, contactId, { completed_at: isCompleted ? null : (/* @__PURE__ */ new Date()).toISOString() }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
+		},
+		onError: (error) => {
+			fluidToast({
+				title: "Failed to update task",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/hooks/contacts/use-delete-contact-task.ts
+function useDeleteContactTask(contactId, options) {
+	const queryClient = useQueryClient();
+	const api = useTasksApi();
+	return useMutation({
+		mutationFn: (taskId) => api.deleteTask(taskId, contactId),
+		onSuccess: () => {
+			fluidToast({
+				title: "Task deleted",
+				type: "success"
+			});
+			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
+			options?.onSuccess?.();
+		},
+		onError: (error) => {
+			fluidToast({
+				title: "Failed to delete task",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/hooks/contacts/use-update-contact-task.ts
+function useUpdateContactTask(contactId, options) {
+	const queryClient = useQueryClient();
+	const api = useTasksApi();
+	return useMutation({
+		mutationFn: ({ taskId, input }) => api.updateTask(taskId, contactId, input),
+		onSuccess: () => {
+			fluidToast({
+				title: "Task updated",
+				type: "success"
+			});
+			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
+			options?.onSuccess?.();
+		},
+		onError: (error) => {
+			fluidToast({
+				title: "Failed to update task",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/utils/format-date.ts
+function formatDateForDisplay(dateStr) {
+	return new Date(dateStr).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/components/editor/note-task-editor.tsx
+function extractTitleAndBody(editor) {
+	if (!editor) return {
+		title: "",
+		body: ""
+	};
+	const doc = editor.state.doc;
+	let title = "";
+	const bodyParts = [];
+	doc.forEach((node) => {
+		if (node.type.name === "heading" && !title) title = node.textContent.trim();
+		else {
+			const text = node.textContent.trim();
+			if (text) bodyParts.push(text);
+		}
+	});
+	return {
+		title,
+		body: bodyParts.join("\n")
+	};
+}
+function extractBodyOnly(editor) {
+	if (!editor) return "";
+	const parts = [];
+	editor.state.doc.forEach((node) => {
+		const text = node.textContent.trim();
+		if (text) parts.push(text);
+	});
+	return parts.join("\n");
 }
 function NoteTaskEditor({ titlePlaceholder = "New Note", bodyPlaceholder = "Start writing...", onChange, className, initialTitle, initialBody, showDueDate = false, initialDueDate, showTitle = true, editorClassName }) {
 	const [dueDate, setDueDate] = useState(initialDueDate);
@@ -1122,10 +1465,10 @@ function NoteTaskEditor({ titlePlaceholder = "New Note", bodyPlaceholder = "Star
 	const buttonInactive = "text-muted-foreground hover:bg-muted/50";
 	const toolbarSeparator = /* @__PURE__ */ jsx("div", { className: "bg-border mx-1 h-5 w-px" });
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("border-border flex flex-col overflow-hidden rounded-lg border", className),
+		className: cn("border-border/50 flex flex-col overflow-hidden rounded-lg border", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "border-border bg-muted/50 flex items-center gap-0.5 border-b px-2 py-1.5",
+				className: "border-border/50 bg-muted/50 flex items-center gap-0.5 border-b px-2 py-1.5",
 				children: [
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -1391,7 +1734,7 @@ function formatDueDate$1(dateStr) {
 		year: "numeric"
 	});
 }
-function formatRelativeTime(dateStr) {
+function formatRelativeTime(dateStr, t) {
 	const date = new Date(dateStr);
 	const diffMs = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
 	const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
@@ -1399,45 +1742,50 @@ function formatRelativeTime(dateStr) {
 		hour: "numeric",
 		minute: "2-digit"
 	});
-	else if (diffDays === 1) return "Yesterday";
-	else return `${diffDays} days ago`;
+	if (diffDays === 1) return t("task_yesterday");
+	return diffDays === 1 ? t("task_days_ago_one") : t("task_days_ago_other", { count: diffDays });
 }
-function EmptyState$1({ onCreateTask }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-center justify-center px-4 py-12 text-center",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative mb-6",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-teal-100 to-emerald-100",
-					children: /* @__PURE__ */ jsx(ClipboardList, { className: "h-9 w-9 text-teal-500" })
-				}), /* @__PURE__ */ jsx("div", {
-					className: "border-background absolute -right-2 -bottom-1 flex h-9 w-9 items-center justify-center rounded-full border-2 bg-gradient-to-br from-blue-100 to-indigo-100 shadow-sm",
-					children: /* @__PURE__ */ jsx(SquareCheckBig, { className: "h-4 w-4 text-blue-500" })
-				})]
-			}),
-			/* @__PURE__ */ jsx("h4", {
-				className: "text-foreground text-base font-semibold",
-				children: "No tasks yet"
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground mt-1.5 max-w-[260px] text-sm leading-relaxed",
-				children: "Stay organized by creating tasks to track follow-ups for this contact"
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: onCreateTask,
-				className: "bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-				children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), "New Task"]
-			})
-		]
-	});
+function classifyDue(dueAt, isCompleted, t) {
+	if (isCompleted) return {
+		label: t("task_due", { date: formatDueDate$1(dueAt) }),
+		tone: "done"
+	};
+	const due = startOfLocalDay(dueAt);
+	const today = startOfLocalDay(/* @__PURE__ */ new Date());
+	const tomorrow = new Date(today);
+	tomorrow.setDate(today.getDate() + 1);
+	const dueTime = due.getTime();
+	if (dueTime < today.getTime()) return {
+		label: t("task_overdue_due", { date: formatDueDate$1(dueAt) }),
+		tone: "overdue"
+	};
+	if (dueTime === today.getTime()) return {
+		label: t("quick_today"),
+		tone: "today"
+	};
+	if (dueTime === tomorrow.getTime()) return {
+		label: t("quick_tomorrow"),
+		tone: "tomorrow"
+	};
+	return {
+		label: formatDueDate$1(dueAt),
+		tone: "future"
+	};
 }
+const DUE_TONE_CLASS = {
+	overdue: "bg-destructive/10 text-destructive",
+	today: "bg-primary/10 text-primary",
+	tomorrow: "bg-primary/10 text-primary",
+	future: "bg-muted text-muted-foreground",
+	done: "bg-muted text-muted-foreground"
+};
 function TaskCard({ task, toggleCompletion, onEdit, onDeleteClick }) {
+	const { t } = useContactsTranslation();
 	const isCompleted = !!task.completed_at;
 	const { title, body: bodyText } = parseTaskBody(task.body ?? "");
-	const timestamp = task.created_at ? formatRelativeTime(task.created_at) : "";
-	return /* @__PURE__ */ jsx("div", {
+	const timestamp = task.created_at ? formatRelativeTime(task.created_at, t) : "";
+	const due = task.due_at ? classifyDue(task.due_at, isCompleted, t) : null;
+	return /* @__PURE__ */ jsxs("div", {
 		role: "button",
 		tabIndex: 0,
 		onClick: () => onEdit(task),
@@ -1447,8 +1795,8 @@ function TaskCard({ task, toggleCompletion, onEdit, onDeleteClick }) {
 				onEdit(task);
 			}
 		},
-		className: "border-border bg-card min-w-[250px] cursor-pointer rounded-xl border p-4 transition-colors",
-		children: /* @__PURE__ */ jsxs("div", {
+		className: "group border-border/50 hover:border-foreground/20 hover:bg-muted/40 relative cursor-pointer rounded-xl border p-4 transition-all hover:shadow-sm",
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-3",
 			children: [/* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -1460,133 +1808,99 @@ function TaskCard({ task, toggleCompletion, onEdit, onDeleteClick }) {
 					});
 				},
 				disabled: toggleCompletion.isPending,
-				className: "mt-0.5 shrink-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50",
-				"aria-label": isCompleted ? "Mark as open" : "Mark as completed",
-				children: isCompleted ? /* @__PURE__ */ jsx(CircleCheck, { className: "text-primary h-5 w-5" }) : /* @__PURE__ */ jsx("div", { className: "border-muted-foreground h-5 w-5 rounded-full border-2" })
+				className: "mt-0.5 shrink-0 transition-transform hover:scale-110 disabled:cursor-not-allowed disabled:opacity-50",
+				"aria-label": isCompleted ? t("mark_as_open") : t("mark_as_completed"),
+				children: isCompleted ? /* @__PURE__ */ jsx(CircleCheck, {
+					className: "text-primary size-5",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx("div", { className: "border-muted-foreground/40 group-hover:border-primary size-5 rounded-full border-2 transition-colors" })
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-start justify-between gap-2",
-						children: [/* @__PURE__ */ jsx("h4", {
-							className: cn("text-foreground line-clamp-2 font-semibold", isCompleted && "text-muted-foreground line-through"),
-							children: title
-						}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-							asChild: true,
-							children: /* @__PURE__ */ jsx(Button, {
-								variant: "ghost",
-								size: "icon-xs",
-								onClick: (e) => e.stopPropagation(),
-								children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" })
-							})
-						}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-							align: "end",
-							children: /* @__PURE__ */ jsx(DropdownMenuItem, {
-								className: "text-destructive",
-								onClick: (e) => {
-									e.stopPropagation();
-									onDeleteClick(task);
-								},
-								children: "Delete"
-							})
-						})] })]
+					/* @__PURE__ */ jsx("h4", {
+						className: cn("text-foreground line-clamp-2 text-sm leading-snug font-semibold", isCompleted && "text-muted-foreground line-through"),
+						children: title
 					}),
 					bodyText && /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground mt-1 line-clamp-3 text-sm",
-						style: isCompleted ? { textDecoration: "line-through" } : void 0,
+						className: cn("text-muted-foreground mt-1 line-clamp-2 text-xs leading-relaxed", isCompleted && "line-through"),
 						children: bodyText
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "mt-2 flex flex-row items-center gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground text-xs",
+					(due || timestamp) && /* @__PURE__ */ jsxs("div", {
+						className: "mt-2.5 flex flex-wrap items-center gap-1.5",
+						children: [due && /* @__PURE__ */ jsxs("span", {
+							className: cn("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", DUE_TONE_CLASS[due.tone]),
+							children: [/* @__PURE__ */ jsx(Calendar, {
+								className: "size-3",
+								"aria-hidden": "true"
+							}), due.label]
+						}), timestamp && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground/60 text-xs",
 							children: timestamp
-						}), task.due_at && /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ jsx(Calendar, { className: cn("h-3.5 w-3.5", isCompleted ? "text-muted-foreground" : "text-primary") }), /* @__PURE__ */ jsxs("span", {
-								className: cn("text-xs font-medium", isCompleted ? "text-muted-foreground" : "text-primary"),
-								children: ["Due ", formatDueDate$1(task.due_at)]
-							})]
 						})]
 					})
 				]
 			})]
-		})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute top-3 right-3 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100",
+			children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: (e) => e.stopPropagation(),
+					"aria-label": t("task_actions"),
+					children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "size-4" })
+				})
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+					className: "text-destructive",
+					onClick: (e) => {
+						e.stopPropagation();
+						onDeleteClick(task);
+					},
+					children: t("delete")
+				})
+			})] })
+		})]
 	});
 }
-function TaskList({ tasks, isLoading, contactId, hideHeader = false, ref }) {
+function TaskList({ tasks, isLoading, contactId }) {
+	const { t } = useContactsTranslation();
 	const [taskToDelete, setTaskToDelete] = useState(null);
-	const [modalOpen, setModalOpen] = useState(false);
 	const [editingTask, setEditingTask] = useState(null);
 	const toggleCompletion = useToggleTaskCompletion(contactId);
 	const deleteTask = useDeleteContactTask(contactId, { onSuccess: () => setTaskToDelete(null) });
-	const createTask = useCreateContactTask(contactId, { onSuccess: () => setModalOpen(false) });
 	const updateTask = useUpdateContactTask(contactId, { onSuccess: () => setEditingTask(null) });
-	const openCreateModal = () => {
-		setEditingTask(null);
-		setModalOpen(true);
-	};
-	useImperativeHandle(ref, () => openCreateModal);
 	const handleSave = (data) => {
+		if (!editingTask) return;
 		const taskBody = data.body ? `${data.title}\n\n${data.body}` : data.title;
-		if (editingTask) updateTask.mutate({
+		updateTask.mutate({
 			taskId: editingTask.id,
 			input: {
 				body: taskBody,
 				due_at: data.dueDate ?? null
 			}
 		});
-		else createTask.mutate({
-			body: taskBody,
-			due_at: data.dueDate ?? null
-		});
 	};
 	const editingParsed = editingTask ? parseTaskBody(editingTask.body ?? "") : null;
-	const isModalOpen = modalOpen || editingTask !== null;
 	const handleModalOpenChange = (open) => {
-		if (!open) {
-			setModalOpen(false);
-			setEditingTask(null);
-		}
+		if (!open) setEditingTask(null);
 	};
-	if (isLoading) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [!hideHeader && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { className: "bg-muted h-5 w-24 animate-pulse rounded" }), /* @__PURE__ */ jsx("div", { className: "bg-muted mt-1 h-4 w-48 animate-pulse rounded" })] }), /* @__PURE__ */ jsx("div", { className: "bg-muted h-8 w-24 animate-pulse rounded-lg" })]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-			children: [
-				1,
-				2,
-				3
-			].map((i) => /* @__PURE__ */ jsx("div", { className: "border-border bg-muted/50 h-32 animate-pulse rounded-xl border" }, i))
-		})]
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			1,
+			2,
+			3
+		].map((i) => /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted/50 h-32 animate-pulse rounded-xl border" }, i))
 	});
+	if (tasks.length === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
-			!hideHeader && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
-					className: "text-foreground text-base font-semibold",
-					children: [
-						"Tasks (",
-						tasks.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mt-0.5 text-sm",
-					children: "Manage tasks and follow-ups for this contact"
-				})] }), /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: openCreateModal,
-					className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
-					children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), "Add Task"]
-				})]
-			}),
-			tasks.length === 0 ? /* @__PURE__ */ jsx(EmptyState$1, { onCreateTask: openCreateModal }) : /* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3",
 				children: tasks.map((task) => /* @__PURE__ */ jsx(TaskCard, {
 					task,
 					toggleCompletion,
@@ -1595,717 +1909,544 @@ function TaskList({ tasks, isLoading, contactId, hideHeader = false, ref }) {
 				}, task.id))
 			}),
 			/* @__PURE__ */ jsx(NoteTaskModal, {
-				open: isModalOpen,
+				open: editingTask !== null,
 				onOpenChange: handleModalOpenChange,
-				mode: editingTask ? "edit" : "create",
+				mode: "edit",
 				type: "task",
 				initialTitle: editingParsed?.title ?? "",
 				initialBody: editingParsed?.body ?? "",
 				initialDueDate: editingTask?.due_at ?? void 0,
 				showDueDate: true,
 				onSave: handleSave,
-				isPending: createTask.isPending || updateTask.isPending,
+				isPending: updateTask.isPending,
 				isCompleted: editingTask ? !!editingTask.completed_at : void 0,
 				onToggleComplete: editingTask ? () => toggleCompletion.mutate({
 					taskId: editingTask.id,
 					isCompleted: !!editingTask.completed_at
 				}, { onSuccess: () => setEditingTask(null) }) : void 0,
 				isTogglePending: toggleCompletion.isPending
-			}, editingTask?.id ?? "create"),
+			}, editingTask?.id ?? "edit"),
 			/* @__PURE__ */ jsx(AlertDialog, {
 				open: taskToDelete !== null,
 				onOpenChange: (open) => {
 					if (!open) setTaskToDelete(null);
 				},
-				children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete Task" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Are you sure you want to delete this task? This action cannot be undone." })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+				children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: t("delete_task_title") }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: t("delete_task_confirm") })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: t("cancel") }), /* @__PURE__ */ jsx(AlertDialogAction, {
 					variant: "destructive",
 					onClick: () => {
 						if (taskToDelete) deleteTask.mutate(taskToDelete.id);
 					},
-					children: "Delete"
+					children: t("delete")
 				})] })] })
 			})
 		]
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/portal/hooks/notes/use-delete-contact-note.ts
-function useDeleteContactNote(contactId, options) {
-	const queryClient = useQueryClient();
-	const api = useNotesApi();
-	return useMutation({
-		mutationFn: (noteId) => api.deleteNote(noteId, contactId),
-		onSuccess: () => {
-			fluidToast({
-				title: "Note deleted",
-				type: "success"
-			});
-			queryClient.invalidateQueries({ queryKey: contactsKeys.notes(contactId) });
-			options?.onSuccess?.();
-		},
-		onError: (error) => {
-			fluidToast({
-				title: "Failed to delete note",
-				type: "error",
-				description: parseApiErrors(error)
-			});
-		}
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/hooks/notes/use-create-contact-note.ts
-function useCreateContactNote(contactId, options) {
-	const queryClient = useQueryClient();
-	const api = useNotesApi();
-	return useMutation({
-		mutationFn: (input) => api.createNote(contactId, input),
-		onSuccess: () => {
-			fluidToast({
-				title: "Note created",
-				type: "success"
-			});
-			queryClient.invalidateQueries({ queryKey: contactsKeys.notes(contactId) });
-			options?.onSuccess?.();
-		},
-		onError: (error) => {
-			fluidToast({
-				title: "Failed to create note",
-				type: "error",
-				description: parseApiErrors(error)
-			});
-		}
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/hooks/notes/use-update-contact-note.ts
-function useUpdateContactNote(contactId, options) {
+//#region ../../contacts/ui/src/portal/hooks/contacts/use-create-contact-task.ts
+function useCreateContactTask(contactId, options) {
 	const queryClient = useQueryClient();
-	const api = useNotesApi();
+	const api = useTasksApi();
 	return useMutation({
-		mutationFn: ({ noteId, input }) => api.updateNote(noteId, contactId, input),
+		mutationFn: (input) => api.createTask(contactId, input),
 		onSuccess: () => {
 			fluidToast({
-				title: "Note updated",
+				title: "Task created",
 				type: "success"
 			});
-			queryClient.invalidateQueries({ queryKey: contactsKeys.notes(contactId) });
+			queryClient.invalidateQueries({ queryKey: contactsKeys.tasks(contactId) });
 			options?.onSuccess?.();
 		},
 		onError: (error) => {
 			fluidToast({
-				title: "Failed to update note",
-				type: "error",
-				description: parseApiErrors(error)
-			});
-		}
-	});
-}
-//#endregion
-//#region ../../contacts/ui/src/portal/components/notes/notes-list.tsx
-function formatDueDate(dateStr) {
-	return new Date(dateStr).toLocaleDateString("en-US", {
-		month: "short",
-		day: "numeric",
-		year: "numeric"
-	});
-}
-function EmptyState({ onCreateNote }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-center justify-center px-4 py-12 text-center",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative mb-6",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-yellow-100",
-					children: /* @__PURE__ */ jsx(StickyNote, { className: "h-9 w-9 text-amber-500" })
-				}), /* @__PURE__ */ jsx("div", {
-					className: "border-background absolute -right-2 -bottom-1 flex h-9 w-9 items-center justify-center rounded-full border-2 bg-gradient-to-br from-orange-100 to-red-100 shadow-sm",
-					children: /* @__PURE__ */ jsx(Pen, { className: "h-4 w-4 text-orange-500" })
-				})]
-			}),
-			/* @__PURE__ */ jsx("h4", {
-				className: "text-foreground text-base font-semibold",
-				children: "No notes yet"
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground mt-1.5 max-w-[260px] text-sm leading-relaxed",
-				children: "Capture key details and insights about this contact to stay on top of every conversation"
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: onCreateNote,
-				className: "bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-				children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), "New Note"]
-			})
-		]
-	});
-}
-function NoteCard({ note, onEdit, onDelete }) {
-	const assetCount = note.assets?.length ?? 0;
-	return /* @__PURE__ */ jsxs("div", {
-		role: "button",
-		tabIndex: 0,
-		onClick: () => onEdit(note),
-		onKeyDown: (e) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				onEdit(note);
-			}
-		},
-		className: "border-border bg-card hover:border-border/80 cursor-pointer rounded-xl border p-5 transition-colors",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between gap-2",
-				children: [/* @__PURE__ */ jsx("h4", {
-					className: "text-foreground line-clamp-1 text-sm font-semibold",
-					children: note.title
-				}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: (e) => e.stopPropagation(),
-						className: "text-muted-foreground inline-flex h-6 w-6 items-center justify-center rounded-md hover:opacity-70",
-						children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" })
-					})
-				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-					align: "end",
-					children: /* @__PURE__ */ jsx(DropdownMenuItem, {
-						className: "text-destructive",
-						onClick: (e) => {
-							e.stopPropagation();
-							onDelete(note);
-						},
-						children: "Delete"
-					})
-				})] })]
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground mt-1.5 line-clamp-4 text-sm leading-relaxed",
-				children: note.body
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mt-3 flex flex-wrap items-center gap-4",
-				children: [
-					note.due_at && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx(Calendar, { className: "text-primary h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", {
-							className: "text-primary text-xs font-medium",
-							children: ["Due ", formatDueDate(note.due_at)]
-						})]
-					}),
-					!note.due_at && note.due_date && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx(Calendar, { className: "text-primary h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", {
-							className: "text-primary text-xs font-medium",
-							children: ["Due ", formatDueDate(note.due_date)]
-						})]
-					}),
-					assetCount > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx(Paperclip, { className: "text-muted-foreground h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground text-xs",
-							children: [
-								assetCount,
-								" ",
-								assetCount === 1 ? "Attachment" : "Attachments"
-							]
-						})]
-					})
-				]
-			})
-		]
-	});
-}
-function NotesList({ notes, isLoading, contactId, ref }) {
-	const [noteToDelete, setNoteToDelete] = useState(null);
-	const [modalOpen, setModalOpen] = useState(false);
-	const [editingNote, setEditingNote] = useState(null);
-	const deleteNote = useDeleteContactNote(contactId);
-	const createNote = useCreateContactNote(contactId, { onSuccess: () => setModalOpen(false) });
-	const updateNote = useUpdateContactNote(contactId, { onSuccess: () => setEditingNote(null) });
-	const openCreateModal = () => {
-		setEditingNote(null);
-		setModalOpen(true);
-	};
-	useImperativeHandle(ref, () => openCreateModal);
-	const handleSave = (data) => {
-		if (editingNote) updateNote.mutate({
-			noteId: editingNote.id,
-			input: {
-				title: data.title,
-				body: data.body
-			}
-		});
-		else createNote.mutate({
-			title: data.title,
-			body: data.body
-		});
-	};
-	const isModalOpen = modalOpen || editingNote !== null;
-	const handleModalOpenChange = (open) => {
-		if (!open) {
-			setModalOpen(false);
-			setEditingNote(null);
-		}
-	};
-	if (isLoading) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { className: "bg-muted h-5 w-24 animate-pulse rounded" }), /* @__PURE__ */ jsx("div", { className: "bg-muted mt-1 h-4 w-48 animate-pulse rounded" })] }), /* @__PURE__ */ jsx("div", { className: "bg-muted h-8 w-24 animate-pulse rounded-lg" })]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: [
-				1,
-				2,
-				3
-			].map((i) => /* @__PURE__ */ jsx("div", { className: "border-border bg-muted/50 h-40 animate-pulse rounded-xl border" }, i))
-		})]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
-					className: "text-foreground text-base font-semibold",
-					children: [
-						"Notes (",
-						notes.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mt-0.5 text-sm",
-					children: "Capture key details and insights about this contact"
-				})] }), /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: openCreateModal,
-					className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
-					children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), "Add Note"]
-				})]
-			}),
-			notes.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { onCreateNote: openCreateModal }) : /* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: notes.map((note) => /* @__PURE__ */ jsx(NoteCard, {
-					note,
-					onEdit: setEditingNote,
-					onDelete: setNoteToDelete
-				}, note.id))
-			}),
-			/* @__PURE__ */ jsx(NoteTaskModal, {
-				open: isModalOpen,
-				onOpenChange: handleModalOpenChange,
-				mode: editingNote ? "edit" : "create",
-				type: "note",
-				initialTitle: editingNote?.title ?? "",
-				initialBody: editingNote?.body ?? "",
-				onSave: handleSave,
-				isPending: createNote.isPending || updateNote.isPending
-			}, editingNote?.id ?? "create"),
-			/* @__PURE__ */ jsx(AlertDialog, {
-				open: !!noteToDelete,
-				onOpenChange: (open) => {
-					if (!open) setNoteToDelete(null);
-				},
-				children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete Note" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
-					"Are you sure you want to delete \"",
-					noteToDelete?.title,
-					"\"? This action cannot be undone."
-				] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
-					variant: "destructive",
-					onClick: () => {
-						if (noteToDelete) deleteNote.mutate(noteToDelete.id);
-					},
-					children: "Delete"
-				})] })] })
-			})
-		]
+				title: "Failed to create task",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
 	});
 }
 //#endregion
-//#region ../../contacts/ui/src/shared/components/contacts/contactDetailsForm.tsx
-const DEFAULT_COUNTRIES = [];
-const statusOptions = [
-	{
-		name: "New",
-		value: "new"
-	},
-	{
-		name: "Active",
-		value: "active"
-	},
-	{
-		name: "Inactive",
-		value: "inactive"
-	},
+//#region ../../contacts/ui/src/portal/components/tasks/inline-task-composer.tsx
+const QUICK_DATES = [
 	{
-		name: "Cold",
-		value: "cold"
+		key: "today",
+		offsetDays: 0
 	},
 	{
-		name: "Lead",
-		value: "lead"
+		key: "tomorrow",
+		offsetDays: 1
 	},
 	{
-		name: "Customer",
-		value: "customer"
+		key: "next_week",
+		offsetDays: 7
 	}
 ];
-const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAvatarPicker }) => {
-	const { control, watch, setValue } = useFormContext();
-	const currentStatus = useWatch({
-		control,
-		name: "status"
-	});
-	const avatarUrl = watch("avatar_url") ?? null;
-	const effectiveStatusOptions = useMemo(() => {
-		if (currentStatus && typeof currentStatus === "string" && !statusOptions.some((o) => o.value === currentStatus)) return [{
-			name: currentStatus.charAt(0).toUpperCase() + currentStatus.slice(1).replace(/_/g, " "),
-			value: currentStatus
-		}, ...statusOptions];
-		return statusOptions;
-	}, [currentStatus]);
-	const initials = [watch("first_name")?.[0] ?? "", watch("last_name")?.[0] ?? ""].filter(Boolean).join("").toUpperCase() || "?";
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("space-y-6", className),
-		children: [renderAvatarPicker && /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "border-border bg-background relative h-20 w-20 shrink-0 overflow-hidden rounded-full border-2",
-				children: avatarUrl ? /* @__PURE__ */ jsx("img", {
-					src: avatarUrl,
-					alt: "",
-					className: "h-full w-full object-cover"
-				}) : /* @__PURE__ */ jsx("div", {
-					className: "text-muted-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
-					children: initials
-				})
-			}), renderAvatarPicker({
-				value: avatarUrl,
-				onChange: (url) => setValue("avatar_url", url ?? "", { shouldDirty: true })
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
-			children: [
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "first_name",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "First Name"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter first name",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "last_name",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "Last Name"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter last name",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "email",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "Email"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter email address",
-							type: "email",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "phone",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "Phone"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter phone number",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "status",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "Status"
-						}),
-						/* @__PURE__ */ jsxs(Select, {
-							value: field.value ?? "",
-							onValueChange: field.onChange,
-							children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
-								className: "w-full",
-								children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select status" })
-							}) }), /* @__PURE__ */ jsx(SelectContent, {
-								position: "popper",
-								sideOffset: 4,
-								children: effectiveStatusOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
-									value: opt.value,
-									children: opt.name
-								}, opt.value))
-							})]
-						}),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "address",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, {
-						className: "lg:col-span-2",
-						children: [
-							/* @__PURE__ */ jsx(FormLabel, {
-								className: "font-inter text-foreground font-medium",
-								children: "Full Address"
-							}),
-							/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-								placeholder: "Enter street address",
-								...field,
-								value: field.value ?? "",
-								className: "ring-input"
-							}) }),
-							/* @__PURE__ */ jsx(FormMessage, {})
-						]
-					})
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "city",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "City"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter city",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "state",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "State/Province"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter state or province",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "postal_code",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "Postal Code"
-						}),
-						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
-							placeholder: "Enter postal code",
-							...field,
-							value: field.value ?? "",
-							className: "ring-input"
-						}) }),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
-				}),
-				/* @__PURE__ */ jsx(FormField, {
-					control,
-					name: "country_code",
-					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-						/* @__PURE__ */ jsx(FormLabel, {
-							className: "font-inter text-foreground font-medium",
-							children: "Country"
-						}),
-						/* @__PURE__ */ jsxs(Select, {
-							value: field.value ?? "",
-							onValueChange: field.onChange,
-							children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
-								className: "w-full",
-								children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select country" })
-							}) }), /* @__PURE__ */ jsx(SelectContent, {
-								position: "popper",
-								sideOffset: 4,
-								children: countries.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
-									value: opt.value,
-									children: opt.name
-								}, opt.value))
-							})]
-						}),
-						/* @__PURE__ */ jsx(FormMessage, {})
-					] })
+function InlineTaskComposer({ contactId }) {
+	const { t } = useContactsTranslation();
+	const [isOpen, setIsOpen] = useState(false);
+	const [body, setBody] = useState("");
+	const [dueDate, setDueDate] = useState(null);
+	const inputRef = useRef(null);
+	const createTask = useCreateContactTask(contactId, { onSuccess: () => {
+		setBody("");
+		setDueDate(null);
+		setIsOpen(false);
+	} });
+	useEffect(() => {
+		if (isOpen) inputRef.current?.focus();
+	}, [isOpen]);
+	const quickDates = useMemo(() => QUICK_DATES.map((q) => ({
+		key: q.key,
+		iso: isoDate(q.offsetDays)
+	})), []);
+	const quickLabels = {
+		today: t("quick_today"),
+		tomorrow: t("quick_tomorrow"),
+		next_week: t("quick_next_week")
+	};
+	const close = () => {
+		setIsOpen(false);
+		setBody("");
+		setDueDate(null);
+	};
+	const submit = () => {
+		const trimmed = body.trim();
+		if (!trimmed || createTask.isPending) return;
+		createTask.mutate({
+			body: trimmed,
+			due_at: dueDate
+		});
+	};
+	const canSubmit = body.trim().length > 0 && !createTask.isPending;
+	if (!isOpen) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setIsOpen(true),
+		className: "border-border/50 text-muted-foreground hover:border-foreground/30 hover:bg-muted/40 hover:text-foreground flex w-full items-center gap-3 rounded-xl border border-dashed px-5 py-4 text-sm font-medium transition-colors",
+		children: [/* @__PURE__ */ jsx(Plus, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), t("new_task")]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border/50 focus-within:border-foreground/30 rounded-xl border p-3 transition-colors",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "border-muted-foreground/50 mt-1.5 size-5 shrink-0 rounded-full border-2",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					value: body,
+					onChange: (e) => setBody(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" && !e.shiftKey) {
+							e.preventDefault();
+							submit();
+						} else if (e.key === "Escape") {
+							e.preventDefault();
+							close();
+						}
+					},
+					placeholder: t("task_describe_placeholder"),
+					"aria-label": t("task_description_aria"),
+					className: "placeholder:text-muted-foreground/80 text-foreground flex-1 border-0 bg-transparent text-sm font-medium outline-none"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: close,
+					"aria-label": t("task_discard_aria"),
+					className: "text-muted-foreground hover:bg-muted hover:text-foreground -mt-0.5 -mr-0.5 flex size-7 shrink-0 items-center justify-center rounded-md transition-colors",
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 flex items-center gap-1.5 pl-8",
+			children: [
+				quickDates.map((q) => {
+					const isActive = dueDate === q.iso;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setDueDate(isActive ? null : q.iso),
+						"aria-pressed": isActive,
+						className: cn("shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors", isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/70"),
+						children: quickLabels[q.key]
+					}, q.key);
+				}),
+				/* @__PURE__ */ jsx("div", { className: "ml-auto" }),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: submit,
+					disabled: !canSubmit,
+					className: "bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground inline-flex shrink-0 items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-semibold transition-colors disabled:cursor-not-allowed",
+					children: createTask.isPending ? t("adding") : t("add_task")
 				})
 			]
 		})]
 	});
-};
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/hooks/notes/use-delete-contact-note.ts
+function useDeleteContactNote(contactId, options) {
+	const queryClient = useQueryClient();
+	const api = useNotesApi();
+	return useMutation({
+		mutationFn: (noteId) => api.deleteNote(noteId, contactId),
+		onSuccess: () => {
+			fluidToast({
+				title: "Note deleted",
+				type: "success"
+			});
+			queryClient.invalidateQueries({ queryKey: contactsKeys.notes(contactId) });
+			options?.onSuccess?.();
+		},
+		onError: (error) => {
+			fluidToast({
+				title: "Failed to delete note",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/hooks/notes/use-update-contact-note.ts
+function useUpdateContactNote(contactId, options) {
+	const queryClient = useQueryClient();
+	const api = useNotesApi();
+	return useMutation({
+		mutationFn: ({ noteId, input }) => api.updateNote(noteId, contactId, input),
+		onSuccess: () => {
+			fluidToast({
+				title: "Note updated",
+				type: "success"
+			});
+			queryClient.invalidateQueries({ queryKey: contactsKeys.notes(contactId) });
+			options?.onSuccess?.();
+		},
+		onError: (error) => {
+			fluidToast({
+				title: "Failed to update note",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/hooks/notes/use-create-contact-note.ts
+function useCreateContactNote(contactId, options) {
+	const queryClient = useQueryClient();
+	const api = useNotesApi();
+	return useMutation({
+		mutationFn: (input) => api.createNote(contactId, input),
+		onSuccess: () => {
+			fluidToast({
+				title: "Note created",
+				type: "success"
+			});
+			queryClient.invalidateQueries({ queryKey: contactsKeys.notes(contactId) });
+			options?.onSuccess?.();
+		},
+		onError: (error) => {
+			fluidToast({
+				title: "Failed to create note",
+				type: "error",
+				description: parseApiErrors(error)
+			});
+		}
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/components/notes/inline-note-composer.tsx
+function detectMacPlatform() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.userAgentData?.platform ?? navigator.userAgent ?? "";
+	return /Mac|iPhone|iPad/i.test(platform);
+}
+function InlineNoteComposer({ contactId }) {
+	const { t } = useContactsTranslation();
+	const [body, setBody] = useState("");
+	const [isFocused, setIsFocused] = useState(false);
+	const [isMac, setIsMac] = useState(false);
+	const textareaRef = useRef(null);
+	useEffect(() => {
+		setIsMac(detectMacPlatform());
+	}, []);
+	const createNote = useCreateContactNote(contactId, { onSuccess: () => {
+		setBody("");
+		textareaRef.current?.blur();
+	} });
+	const submit = () => {
+		const trimmed = body.trim();
+		if (!trimmed || createNote.isPending) return;
+		const firstLine = trimmed.split("\n")[0]?.slice(0, 120) ?? "Note";
+		createNote.mutate({
+			title: firstLine,
+			body: trimmed
+		});
+	};
+	const canSubmit = body.trim().length > 0 && !createNote.isPending;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("border-border/50 focus-within:border-foreground/30 rounded-2xl border p-4 transition-colors", isFocused && "border-foreground/30"),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: textareaRef,
+			value: body,
+			onChange: (e) => setBody(e.target.value),
+			onFocus: () => setIsFocused(true),
+			onBlur: () => setIsFocused(false),
+			onKeyDown: (e) => {
+				if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+					e.preventDefault();
+					submit();
+				}
+			},
+			placeholder: t("note_placeholder"),
+			"aria-label": t("note_body_aria"),
+			rows: 3,
+			className: "placeholder:text-muted-foreground text-foreground min-h-[80px] w-full resize-none border-0 bg-transparent text-sm leading-relaxed outline-none"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: isMac ? t("tip_save_shortcut_mac") : t("tip_save_shortcut_other")
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: submit,
+				disabled: !canSubmit,
+				className: "bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground inline-flex shrink-0 items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-semibold transition-colors disabled:cursor-not-allowed",
+				children: createNote.isPending ? t("adding") : t("add_note")
+			})]
+		})]
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/portal/components/notes/notes-list.tsx
+function formatDueDate(dateStr) {
+	return new Date(dateStr).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function formatRelativeNote(dateStr, t) {
+	const date = new Date(dateStr);
+	const diffMs = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+	const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+	if (diffDays === 0) return date.toLocaleTimeString("en-US", {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+	if (diffDays === 1) return t("task_yesterday");
+	if (diffDays < 7) return t("task_days_ago_other", { count: diffDays });
+	return formatDueDate(dateStr);
+}
+function NoteCard({ note, onEdit, onDelete }) {
+	const { t } = useContactsTranslation();
+	const assetCount = note.assets?.length ?? 0;
+	const showTitle = !!note.title?.trim() && note.title.trim() !== note.body?.trim();
+	const dueDateValue = note.due_at ?? note.due_date ?? null;
+	const createdLabel = note.created_at ? formatRelativeNote(note.created_at, t) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: () => onEdit(note),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onEdit(note);
+			}
+		},
+		className: "group border-border/50 hover:border-foreground/20 hover:bg-muted/40 relative cursor-pointer rounded-xl border p-4 transition-all hover:shadow-sm",
+		children: [
+			showTitle && /* @__PURE__ */ jsx("h4", {
+				className: "text-foreground line-clamp-1 text-sm font-semibold",
+				children: note.title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: cn("text-foreground line-clamp-4 text-sm leading-relaxed whitespace-pre-wrap", showTitle && "text-muted-foreground mt-1"),
+				children: note.body
+			}),
+			(createdLabel || dueDateValue || assetCount > 0) && /* @__PURE__ */ jsxs("div", {
+				className: "mt-2.5 flex flex-wrap items-center gap-3",
+				children: [
+					createdLabel && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/70 text-xs",
+						children: createdLabel
+					}),
+					dueDateValue && /* @__PURE__ */ jsxs("span", {
+						className: "bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+						children: [/* @__PURE__ */ jsx(Calendar, {
+							className: "size-3",
+							"aria-hidden": "true"
+						}), t("task_due", { date: formatDueDate(dueDateValue) })]
+					}),
+					assetCount > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground inline-flex items-center gap-1 text-xs",
+						children: [/* @__PURE__ */ jsx(Paperclip, {
+							className: "size-3",
+							"aria-hidden": "true"
+						}), assetCount === 1 ? t("attachment_one") : t("attachment_other", { count: assetCount })]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute top-3 right-3 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100",
+				children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: (e) => e.stopPropagation(),
+						"aria-label": t("note_actions"),
+						children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "size-4" })
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "end",
+					children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+						className: "text-destructive",
+						onClick: (e) => {
+							e.stopPropagation();
+							onDelete(note);
+						},
+						children: t("delete")
+					})
+				})] })
+			})
+		]
+	});
+}
+function NotesList({ notes, isLoading, contactId }) {
+	const { t } = useContactsTranslation();
+	const [noteToDelete, setNoteToDelete] = useState(null);
+	const [editingNote, setEditingNote] = useState(null);
+	const deleteNote = useDeleteContactNote(contactId, { onSuccess: () => setNoteToDelete(null) });
+	const updateNote = useUpdateContactNote(contactId, { onSuccess: () => setEditingNote(null) });
+	const handleEditSave = (data) => {
+		if (!editingNote) return;
+		updateNote.mutate({
+			noteId: editingNote.id,
+			input: {
+				title: data.title,
+				body: data.body
+			}
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsx(InlineNoteComposer, { contactId }),
+			isLoading ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3",
+				children: [
+					1,
+					2,
+					3
+				].map((i) => /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted/50 h-20 animate-pulse rounded-xl border" }, i))
+			}) : notes.length === 0 ? null : /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3",
+				children: notes.map((note) => /* @__PURE__ */ jsx(NoteCard, {
+					note,
+					onEdit: setEditingNote,
+					onDelete: setNoteToDelete
+				}, note.id))
+			}),
+			/* @__PURE__ */ jsx(NoteTaskModal, {
+				open: editingNote !== null,
+				onOpenChange: (open) => {
+					if (!open) setEditingNote(null);
+				},
+				mode: "edit",
+				type: "note",
+				initialTitle: editingNote?.title ?? "",
+				initialBody: editingNote?.body ?? "",
+				onSave: handleEditSave,
+				isPending: updateNote.isPending
+			}, editingNote?.id ?? "edit"),
+			/* @__PURE__ */ jsx(AlertDialog, {
+				open: !!noteToDelete,
+				onOpenChange: (open) => {
+					if (!open) setNoteToDelete(null);
+				},
+				children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: t("delete_note_title") }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: t("delete_note_irreversible") })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: t("cancel") }), /* @__PURE__ */ jsx(AlertDialogAction, {
+					variant: "destructive",
+					onClick: () => {
+						if (noteToDelete) deleteNote.mutate(noteToDelete.id);
+					},
+					children: t("delete")
+				})] })] })
+			})
+		]
+	});
+}
 //#endregion
 //#region ../../contacts/ui/src/portal/components/contacts/rep-layout/ContactDetailTabs.tsx
-const NON_PROFILE_TABS = [
-	"Tasks",
-	"Notes",
-	"Profile"
-].filter((t) => t !== "Profile");
-function ContactDetailTabs({ contactId, contactName, countryOptions, isDirty, isSubmitting, onSave, tasks, isLoadingTasks, notes, isLoadingNotes }) {
+const VISIBLE_TABS = ["Tasks", "Notes"];
+function ContactDetailTabs({ contactId, tasks, isLoadingTasks, notes, isLoadingNotes, activeTab, onTabChange }) {
 	const { t } = useContactsTranslation();
-	const [activeTab, setActiveTab] = useState("Tasks");
 	const tabLabels = {
 		Tasks: t("tab_tasks"),
-		Notes: t("tab_notes"),
-		Profile: t("edit_profile")
+		Notes: t("tab_notes")
 	};
-	const openTaskModalRef = useRef(null);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mt-8",
-		children: [activeTab === "Profile" ? /* @__PURE__ */ jsxs("div", {
-			className: "border-border flex flex-col gap-3 border-b sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-x-4 sm:gap-y-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-1",
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => setActiveTab("Tasks"),
-					className: "text-muted-foreground hover:bg-muted hover:text-foreground hidden size-9 shrink-0 items-center justify-center rounded-md transition-colors sm:flex",
-					"aria-label": t("back_to_tasks"),
-					children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
-				}), /* @__PURE__ */ jsx("span", {
-					className: "border-foreground text-foreground -mb-px border-b-2 py-3 text-sm font-medium",
-					children: t("editing_name", { name: contactName })
-				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex w-full flex-col gap-2 sm:w-auto sm:shrink-0 sm:flex-row sm:items-center sm:gap-3",
-				children: [/* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "secondary",
-					onClick: () => setActiveTab("Tasks"),
-					disabled: isSubmitting,
-					className: "w-full sm:w-auto",
-					children: t("cancel")
-				}), /* @__PURE__ */ jsxs(Button, {
-					type: "button",
-					onClick: onSave,
-					disabled: !isDirty || isSubmitting,
-					"aria-busy": isSubmitting,
-					className: "w-full sm:w-auto",
-					children: [isSubmitting && /* @__PURE__ */ jsx(Spinner, { className: "size-4" }), isSubmitting ? t("saving") : t("update_contact")]
-				})]
-			})]
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "border-border flex items-center gap-1 border-b",
-			children: [NON_PROFILE_TABS.map((tab) => {
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-border/50 flex items-center gap-1 border-b",
+			children: VISIBLE_TABS.map((tab) => {
 				const count = tab === "Tasks" ? tasks.length : notes.length;
 				const isActive = activeTab === tab;
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => setActiveTab(tab),
+					onClick: () => onTabChange(tab),
 					className: cn("relative flex items-center gap-1.5 px-3 py-2.5 text-sm font-semibold transition-colors", isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
 					children: [
 						tabLabels[tab],
 						/* @__PURE__ */ jsx("span", {
-							className: cn("rounded-full px-1.5 text-xs leading-5 font-bold", isActive ? "bg-foreground text-background" : "bg-muted text-muted-foreground"),
+							className: cn("rounded-full px-1.5 text-xs leading-5 font-bold", isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"),
 							children: count
 						}),
 						isActive && /* @__PURE__ */ jsx("span", {
-							className: "bg-foreground absolute inset-x-0 -bottom-px h-0.5",
+							className: "bg-primary absolute inset-x-0 -bottom-px h-0.5",
 							"aria-hidden": "true"
 						})
 					]
 				}, tab);
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => setActiveTab("Profile"),
-				className: "text-muted-foreground hover:text-foreground ml-auto px-3 py-2.5 text-sm font-semibold transition-colors",
-				children: t("edit_profile")
-			})]
+			})
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "pt-6",
-			children: [
-				activeTab === "Tasks" && /* @__PURE__ */ jsxs("div", {
-					className: "space-y-4",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: () => openTaskModalRef.current?.(),
-						className: "border-border text-muted-foreground hover:border-foreground/30 hover:bg-muted/40 hover:text-foreground flex w-full items-center gap-3 rounded-xl border border-dashed px-5 py-4 text-sm font-medium transition-colors",
-						children: [/* @__PURE__ */ jsx(Plus, {
-							className: "size-4",
-							"aria-hidden": "true"
-						}), t("new_task")]
-					}), /* @__PURE__ */ jsx(TaskList, {
-						tasks,
-						isLoading: isLoadingTasks,
-						contactId,
-						hideHeader: true,
-						ref: openTaskModalRef
-					})]
-				}),
-				activeTab === "Notes" && /* @__PURE__ */ jsx(NotesList, {
-					notes,
-					isLoading: isLoadingNotes,
-					contactId
-				}),
-				activeTab === "Profile" && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mb-6 text-sm",
-					children: t("profile_edit_description")
-				}), /* @__PURE__ */ jsx(ContactDetailsForm, { countries: countryOptions })] }) })
-			]
+			children: [activeTab === "Tasks" && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx(InlineTaskComposer, { contactId }), /* @__PURE__ */ jsx(TaskList, {
+					tasks,
+					isLoading: isLoadingTasks,
+					contactId,
+					hideHeader: true
+				})]
+			}), activeTab === "Notes" && /* @__PURE__ */ jsx(NotesList, {
+				notes,
+				isLoading: isLoadingNotes,
+				contactId
+			})]
 		})]
 	});
 }
 //#endregion
 //#region ../../contacts/ui/src/portal/components/contacts/rep-layout/ContactDetailPane.tsx
 function ContactDetailPane({ contactId, queryKeyPrefix, getCountries, onBack }) {
+	const { t } = useContactsTranslation();
 	const { contact, isLoading, methods, countryOptions, isDirty, isSubmitting, isDeleting, onSave, onDelete } = useContactDetailPage(contactId, {
 		queryKeyPrefix,
 		getCountries,
-		onDeleteSuccess: onBack
+		onDeleteSuccess: onBack,
+		onSaveSuccess: () => setEditProfileOpen(false)
 	});
 	const { data: tasks = [], isLoading: isLoadingTasks } = useContactTasks(contactId);
 	const { data: notes = [], isLoading: isLoadingNotes } = useContactNotes(contactId);
-	const { t } = useContactsTranslation();
 	const [confirmDelete, setConfirmDelete] = useState(false);
+	const [activeTab, setActiveTab] = useState("Tasks");
+	const [editProfileOpen, setEditProfileOpen] = useState(false);
 	const handleConfirmDelete = useCallback(() => {
 		setConfirmDelete(false);
 		onDelete();
@@ -2317,7 +2458,8 @@ function ContactDetailPane({ contactId, queryKeyPrefix, getCountries, onBack })
 			onBack,
 			phone: null,
 			email: null,
-			onDelete: null
+			onDelete: null,
+			onEditProfile: null
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto flex max-w-md flex-col items-center px-6 py-16 text-center",
 			children: [/* @__PURE__ */ jsx("h2", {
@@ -2339,7 +2481,8 @@ function ContactDetailPane({ contactId, queryKeyPrefix, getCountries, onBack })
 					onBack,
 					phone: contact.phone ?? null,
 					email: contact.email ?? null,
-					onDelete: () => setConfirmDelete(true)
+					onDelete: () => setConfirmDelete(true),
+					onEditProfile: () => setEditProfileOpen(true)
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "flex-1 overflow-y-auto",
@@ -2351,22 +2494,49 @@ function ContactDetailPane({ contactId, queryKeyPrefix, getCountries, onBack })
 								tasksCount: tasks.length,
 								notesCount: notes.length
 							}),
-							/* @__PURE__ */ jsx(ContactInfoRow, { contact }),
+							/* @__PURE__ */ jsx(ContactInfoRow, {
+								contact,
+								onEditEmpty: () => setEditProfileOpen(true)
+							}),
 							/* @__PURE__ */ jsx(ContactDetailTabs, {
 								contactId,
-								contactName: fullName,
-								countryOptions,
-								isDirty,
-								isSubmitting,
-								onSave,
 								tasks,
 								isLoadingTasks,
 								notes,
-								isLoadingNotes
+								isLoadingNotes,
+								activeTab,
+								onTabChange: setActiveTab
 							})
 						]
 					})
 				}),
+				/* @__PURE__ */ jsx(Dialog, {
+					open: editProfileOpen,
+					onOpenChange: (open) => {
+						if (!open && isSubmitting) return;
+						setEditProfileOpen(open);
+					},
+					children: /* @__PURE__ */ jsxs(DialogContent, {
+						className: "max-h-[90vh] max-w-2xl overflow-y-auto",
+						children: [
+							/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("edit_contact_name", { name: fullName }) }) }),
+							/* @__PURE__ */ jsx(ContactDetailsForm, { countries: countryOptions }),
+							/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "secondary",
+								onClick: () => setEditProfileOpen(false),
+								disabled: isSubmitting,
+								children: t("cancel")
+							}), /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								onClick: onSave,
+								disabled: !isDirty || isSubmitting,
+								"aria-busy": isSubmitting,
+								children: [isSubmitting && /* @__PURE__ */ jsx(Spinner, { className: "size-4" }), isSubmitting ? t("saving") : t("save_changes")]
+							})] })
+						]
+					})
+				}),
 				/* @__PURE__ */ jsx(AlertDialog, {
 					open: confirmDelete,
 					onOpenChange: setConfirmDelete,
@@ -2384,10 +2554,10 @@ function ContactDetailPane({ contactId, queryKeyPrefix, getCountries, onBack })
 		})
 	});
 }
-function DetailTopBar({ onBack, phone, email, onDelete }) {
+function DetailTopBar({ onBack, phone, email, onDelete, onEditProfile }) {
 	const { t } = useContactsTranslation();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "border-border bg-background/90 sticky top-0 z-10 flex items-center justify-between border-b px-4 py-3 backdrop-blur md:px-8",
+		className: "border-border/50 bg-background/90 sticky top-0 z-10 flex items-center justify-between border-b px-4 py-3 backdrop-blur md:px-8",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ jsx("button", {
@@ -2403,6 +2573,16 @@ function DetailTopBar({ onBack, phone, email, onDelete }) {
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
 			children: [
+				onEditProfile && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onEditProfile,
+					className: "text-muted-foreground hover:bg-muted hover:text-foreground flex size-8 items-center justify-center rounded-full transition-colors",
+					"aria-label": t("edit_profile"),
+					children: /* @__PURE__ */ jsx(Pencil, {
+						className: "size-4",
+						"aria-hidden": "true"
+					})
+				}),
 				/* @__PURE__ */ jsx(ActionLink, {
 					href: phone ? `tel:${phone}` : null,
 					label: t("label_call"),
@@ -2466,7 +2646,8 @@ function ContactDetailSkeleton({ onBack }) {
 			onBack,
 			phone: null,
 			email: null,
-			onDelete: null
+			onDelete: null,
+			onEditProfile: null
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto w-full max-w-[900px] flex-1 space-y-6 px-6 pt-8 pb-16 md:px-8 md:pt-10",
 			children: [
@@ -2514,7 +2695,7 @@ function RepContactsLayout({ selectedContactId, onSelect, onAdd, queryKeyPrefix,
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bg-background flex h-full overflow-hidden",
 		children: [/* @__PURE__ */ jsx("aside", {
-			className: cn("border-border bg-background w-full shrink-0 overflow-hidden border-r md:flex md:w-[420px] md:flex-col", selectedContactId ? "hidden" : "flex flex-col"),
+			className: cn("border-border/50 bg-background w-full shrink-0 overflow-hidden border-r md:flex md:w-[420px] md:flex-col", selectedContactId ? "hidden" : "flex flex-col"),
 			children: /* @__PURE__ */ jsx(ContactsSidebar, {
 				selectedContactId,
 				onSelect,
@@ -3014,7 +3195,39 @@ const contactsDomain = createDomainTranslations({
 		back_to_tasks: "Back to Tasks",
 		filter_all: "All",
 		filter_leads: "Leads",
-		filter_customers: "Customers"
+		filter_customers: "Customers",
+		note_placeholder: "Leave a note about this contact…",
+		note_body_aria: "Note body",
+		add_note: "Add note",
+		tip_save_shortcut_mac: "Tip: ⌘ + Enter to save",
+		tip_save_shortcut_other: "Tip: Ctrl + Enter to save",
+		task_describe_placeholder: "Describe the task…",
+		task_description_aria: "Task description",
+		task_discard_aria: "Discard task",
+		add_task: "Add task",
+		quick_today: "Today",
+		quick_tomorrow: "Tomorrow",
+		quick_next_week: "Next week",
+		edit_contact_name: "Edit {{name}}",
+		save_changes: "Save changes",
+		add_field: "Add {{field}}",
+		copy_field: "Copy {{field}}",
+		copied_field: "Copied {{field}}",
+		attachment_one: "1 attachment",
+		attachment_other: "{{count}} attachments",
+		note_actions: "Note actions",
+		delete_note_title: "Delete note?",
+		delete_note_irreversible: "This action cannot be undone.",
+		task_yesterday: "Yesterday",
+		task_days_ago_one: "1 day ago",
+		task_days_ago_other: "{{count}} days ago",
+		task_overdue_due: "Overdue · {{date}}",
+		task_due: "Due {{date}}",
+		mark_as_open: "Mark as open",
+		mark_as_completed: "Mark as completed",
+		task_actions: "Task actions",
+		delete_task_title: "Delete task?",
+		delete_task_confirm: "Are you sure you want to delete this task? This action cannot be undone."
 	},
 	loaders: {
 		de: () => import("./de-5dJcGXHd.mjs").then((m) => m.default),
@@ -3185,4 +3398,4 @@ const contactsScreenPropertySchema = {
 //#endregion
 export { ContactsScreen_exports as n, contactsScreenPropertySchema as r, ContactsScreen as t };
 
-//# sourceMappingURL=ContactsScreen-BFiClnMI.mjs.map
+//# sourceMappingURL=ContactsScreen-Cg_PgwAi.mjs.map