@vendure-platform/create 0.4.0 → 0.5.1

package/dist/assets/storefront/src/app/[locale]/account/quotes/page.tsx

@@ -1,18 +1,7 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {client} from '@/lib/vendure/api';
-import {GetMyQuotesQuery} from '@/lib/vendure/queries';
-import {getActiveCustomer} from '@/lib/vendure/actions';
-import {getActiveChannelCached} from '@/lib/vendure/cached';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
+import { Price } from '@/components/commerce/price';
+import { QuoteStatusBadge } from '@/components/commerce/quote-status-badge';
+import { ErrorState } from '@/components/shared/error-state';
+import { Button } from '@/components/ui/button';
 import {
     Pagination,
     PaginationContent,
@@ -22,14 +11,18 @@ import {
     PaginationNext,
     PaginationPrevious,
 } from '@/components/ui/pagination';
-import {ErrorState} from '@/components/shared/error-state';
-import {ArrowRightIcon, Plus} from 'lucide-react';
-import {Button} from '@/components/ui/button';
-import {Price} from '@/components/commerce/price';
-import {QuoteStatusBadge} from '@/components/commerce/quote-status-badge';
-import {formatDate} from '@/lib/format';
-import {setRequestLocale, getTranslations} from 'next-intl/server';
-import {Link, redirect} from '@/i18n/navigation';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Link, redirect } from '@/i18n/navigation';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { formatDate } from '@/lib/format';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { GetMyQuotesQuery } from '@/lib/vendure/queries';
+import { ArrowRightIcon, Plus } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
     title: 'Quotes',
@@ -49,7 +42,17 @@ type QuoteRow = {
 
 type QuotesTranslations = Awaited<ReturnType<typeof getTranslations<'Quotes'>>>;
 
-function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; locale: string; currencyCode: string; t: QuotesTranslations}) {
+function QuoteTable({
+    quotes,
+    locale,
+    currencyCode,
+    t,
+}: {
+    quotes: QuoteRow[];
+    locale: string;
+    currencyCode: string;
+    t: QuotesTranslations;
+}) {
     return (
         <div className="border rounded-lg">
             <Table>
@@ -69,22 +72,16 @@ function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; loca
                             <TableCell className="font-medium">
                                 <Button asChild variant="outline">
                                     <Link href={`/account/quotes/${quote.id}`}>
-                                        {quote.quoteNumber} <ArrowRightIcon/>
+                                        {quote.quoteNumber} <ArrowRightIcon />
                                     </Link>
                                 </Button>
                             </TableCell>
+                            <TableCell>{formatDate(quote.createdAt, locale)}</TableCell>
+                            <TableCell>{quote.requestedBy}</TableCell>
                             <TableCell>
-                                {formatDate(quote.createdAt, locale)}
-                            </TableCell>
-                            <TableCell>
-                                {quote.requestedBy}
-                            </TableCell>
-                            <TableCell>
-                                <QuoteStatusBadge status={quote.status}/>
-                            </TableCell>
-                            <TableCell>
-                                {t('itemCount', {count: quote.itemCount})}
+                                <QuoteStatusBadge status={quote.status} />
                             </TableCell>
+                            <TableCell>{t('itemCount', { count: quote.itemCount })}</TableCell>
                             <TableCell className="text-right">
                                 {quote.total != null ? (
                                     <Price value={quote.total} currencyCode={currencyCode} taxLabel="excl" />
@@ -100,16 +97,34 @@ function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; loca
     );
 }
 
-export default async function QuotesPage(props: {params: Promise<{locale: string}>; searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+export default async function QuotesPage(props: {
+    params: Promise<{ locale: string }>;
+    searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
     return (
-        <Suspense fallback={<div><div className="flex items-center justify-between mb-6"><h1 className="text-3xl font-bold">Quotes</h1></div><p className="text-sm text-muted-foreground">Loading quotes...</p></div>}>
+        <Suspense
+            fallback={
+                <div>
+                    <div className="flex items-center justify-between mb-6">
+                        <h1 className="text-3xl font-bold">Quotes</h1>
+                    </div>
+                    <p className="text-sm text-muted-foreground">Loading quotes...</p>
+                </div>
+            }
+        >
             <QuotesContent params={props.params} searchParamsPromise={props.searchParams} />
         </Suspense>
     );
 }
 
-async function QuotesContent({params, searchParamsPromise}: {params: Promise<{locale: string}>; searchParamsPromise: Promise<Record<string, string | string[] | undefined>>}) {
-    const {locale} = await params;
+async function QuotesContent({
+    params,
+    searchParamsPromise,
+}: {
+    params: Promise<{ locale: string }>;
+    searchParamsPromise: Promise<Record<string, string | string[] | undefined>>;
+}) {
+    const { locale } = await params;
     setRequestLocale(locale);
     const channelToken = await getActiveChannelToken();
     const [t, searchParams, activeCustomer, channel] = await Promise.all([
@@ -124,16 +139,13 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
     const skip = (currentPage - 1) * ITEMS_PER_PAGE;
     if (!activeCustomer) return await redirect('/sign-in');
 
-    const [result, error] = await client.query(
-        GetMyQuotesQuery,
-        {
-            options: {
-                take: ITEMS_PER_PAGE,
-                skip,
-                sort: {createdAt: 'DESC' as any},
-            },
+    const [result, error] = await client.query(GetMyQuotesQuery, {
+        options: {
+            take: ITEMS_PER_PAGE,
+            skip,
+            sort: { createdAt: 'DESC' as any },
         },
-    );
+    });
     if (error) {
         return (
             <div>
@@ -158,9 +170,7 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
             quoteNumber: quote.quoteNumber,
             createdAt: quote.createdAt,
             status: quote.status,
-            requestedBy: quote.customer
-                ? `${quote.customer.firstName} ${quote.customer.lastName}`
-                : '—',
+            requestedBy: quote.customer ? `${quote.customer.firstName} ${quote.customer.lastName}` : '—',
             itemCount: quote.currentVersion?.lineItems.length ?? 0,
             total: quote.currentVersion?.total ?? null,
         };
@@ -192,14 +202,24 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                     {myQuoteRows.length > 0 && (
                         <section>
                             <h2 className="text-2xl font-bold mb-4">{t('myQuotesHeading')}</h2>
-                            <QuoteTable quotes={myQuoteRows} locale={locale} currencyCode={currencyCode} t={t} />
+                            <QuoteTable
+                                quotes={myQuoteRows}
+                                locale={locale}
+                                currencyCode={currencyCode}
+                                t={t}
+                            />
                         </section>
                     )}
 
                     {companyQuoteRows.length > 0 && (
                         <section>
                             <h2 className="text-2xl font-bold mb-4">{t('companyQuotesHeading')}</h2>
-                            <QuoteTable quotes={companyQuoteRows} locale={locale} currencyCode={currencyCode} t={t} />
+                            <QuoteTable
+                                quotes={companyQuoteRows}
+                                locale={locale}
+                                currencyCode={currencyCode}
+                                t={t}
+                            />
                         </section>
                     )}
                 </div>
@@ -215,11 +235,18 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                                     className={currentPage === 1 ? 'pointer-events-none opacity-50' : ''}
                                 />
                             </PaginationItem>
-                            {Array.from({length: totalPages}, (_, i) => i + 1).map((page) => {
-                                if (page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)) {
+                            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
+                                if (
+                                    page === 1 ||
+                                    page === totalPages ||
+                                    (page >= currentPage - 1 && page <= currentPage + 1)
+                                ) {
                                     return (
                                         <PaginationItem key={page}>
-                                            <PaginationLink href={`/account/quotes?page=${page}`} isActive={page === currentPage}>
+                                            <PaginationLink
+                                                href={`/account/quotes?page=${page}`}
+                                                isActive={page === currentPage}
+                                            >
                                                 {page}
                                             </PaginationLink>
                                         </PaginationItem>
@@ -227,7 +254,7 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                                 } else if (page === currentPage - 2 || page === currentPage + 2) {
                                     return (
                                         <PaginationItem key={page}>
-                                            <PaginationEllipsis/>
+                                            <PaginationEllipsis />
                                         </PaginationItem>
                                     );
                                 }
@@ -235,8 +262,14 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                             })}
                             <PaginationItem>
                                 <PaginationNext
-                                    href={currentPage < totalPages ? `/account/quotes?page=${currentPage + 1}` : '#'}
-                                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
+                                    href={
+                                        currentPage < totalPages
+                                            ? `/account/quotes?page=${currentPage + 1}`
+                                            : '#'
+                                    }
+                                    className={
+                                        currentPage === totalPages ? 'pointer-events-none opacity-50' : ''
+                                    }
                                 />
                             </PaginationItem>
                         </PaginationContent>

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/activity-feed.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { roleLabel } from '@/components/commerce/shared-cart-role';
+import { formatDateTime } from '@/lib/format';
+import {
+    CircleDot,
+    CreditCard,
+    Crown,
+    Lock,
+    MinusCircle,
+    PencilLine,
+    PlusCircle,
+    ShieldCheck,
+    UserMinus,
+    UserPlus,
+    type LucideIcon,
+} from 'lucide-react';
+import type { SharedCartData } from '../actions';
+
+type Activity = SharedCartData['activity'][number];
+type Lines = SharedCartData['order']['lines'];
+
+const ICONS: Record<string, LucideIcon> = {
+    'cart-created': CircleDot,
+    'line-added': PlusCircle,
+    'line-removed': MinusCircle,
+    'line-adjusted': PencilLine,
+    'member-added': UserPlus,
+    'member-removed': UserMinus,
+    'role-changed': ShieldCheck,
+    'ownership-transferred': Crown,
+    'checkout-initiated': CreditCard,
+    'cart-closed': Lock,
+};
+
+// This activity-describing logic has a near-twin in the dashboard's shared-cart-detail
+// route. They're deliberately kept separate copies: dashboard code can't import from the
+// storefront (different bundle, no server-side deps allowed), so there's no shared module
+// to reach for. If you change how an activity reads here, mirror it there.
+function actorName(activity: Activity): string {
+    return activity.actorLabel;
+}
+
+// The product an item entry refers to, resolved from the cart's current lines: the affected line
+// for adds/adjusts, or the recorded variant id as a fallback. A removed line is gone, so those
+// entries fall back to the generic "an item".
+function lineName(activity: Activity, lines: Lines): string | null {
+    if (activity.targetLineId) {
+        const byLine = lines.find((l) => String(l.id) === String(activity.targetLineId));
+        if (byLine) return byLine.productVariant.name;
+    }
+    const variantId = (activity.detail as Record<string, unknown> | null)?.productVariantId;
+    if (variantId != null) {
+        const byVariant = lines.find((l) => String(l.productVariant.id) === String(variantId));
+        if (byVariant) return byVariant.productVariant.name;
+    }
+    return null;
+}
+
+function targetName(activity: Activity): string | null {
+    if (!activity.targetCustomer) return null;
+    return `${activity.targetCustomer.firstName} ${activity.targetCustomer.lastName}`.trim() || null;
+}
+
+function describe(activity: Activity, lines: Lines): string {
+    const detail = (activity.detail ?? {}) as Record<string, unknown>;
+    const qty = typeof detail.quantity === 'number' ? detail.quantity : undefined;
+    const item = lineName(activity, lines);
+    const who = targetName(activity);
+    switch (activity.action) {
+        case 'cart-created':
+            return 'created the cart';
+        case 'line-added':
+            if (item) return qty ? `added ${item} (×${qty})` : `added ${item}`;
+            return qty ? `added ${qty} × an item` : 'added an item';
+        case 'line-removed':
+            return item ? `removed ${item}` : 'removed an item';
+        case 'line-adjusted':
+            if (item) return qty != null ? `changed ${item} to qty ${qty}` : `changed ${item}`;
+            return qty != null ? `changed an item to qty ${qty}` : 'changed an item quantity';
+        case 'member-added':
+            if (who)
+                return detail.role ? `added ${who} as ${roleLabel(String(detail.role))}` : `added ${who}`;
+            return detail.role ? `added a member as ${roleLabel(String(detail.role))}` : 'added a member';
+        case 'member-removed':
+            return who ? `removed ${who}` : 'removed a member';
+        case 'role-changed':
+            if (who)
+                return detail.to
+                    ? `changed ${who}'s role to ${roleLabel(String(detail.to))}`
+                    : `changed ${who}'s role`;
+            return detail.to
+                ? `changed a member's role to ${roleLabel(String(detail.to))}`
+                : "changed a member's role";
+        case 'ownership-transferred':
+            return who ? `transferred ownership to ${who}` : 'transferred ownership';
+        case 'checkout-initiated':
+            return 'started checkout';
+        case 'cart-closed':
+            return 'closed the cart';
+        default:
+            return activity.action;
+    }
+}
+
+export function ActivityFeed({
+    activity,
+    lines,
+    locale,
+}: {
+    activity: ReadonlyArray<Activity>;
+    lines: Lines;
+    locale: string;
+}) {
+    // Newest first.
+    const items = [...activity].sort(
+        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
+
+    return (
+        <section className="border rounded-lg">
+            <div className="px-4 py-3 border-b">
+                <h2 className="font-semibold">Activity</h2>
+            </div>
+            {items.length === 0 ? (
+                <p className="px-4 py-6 text-sm text-muted-foreground">No activity yet.</p>
+            ) : (
+                <ul className="divide-y">
+                    {items.map((item) => {
+                        const Icon = ICONS[item.action] ?? CircleDot;
+                        return (
+                            <li key={item.id} className="flex items-start gap-3 px-4 py-3">
+                                <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted">
+                                    <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                    <p className="text-sm">
+                                        <span className="font-medium">{actorName(item)}</span>{' '}
+                                        <span className="text-muted-foreground">{describe(item, lines)}</span>
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                        {formatDateTime(item.createdAt, locale)}
+                                    </p>
+                                </div>
+                            </li>
+                        );
+                    })}
+                </ul>
+            )}
+        </section>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/add-item-search.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { Loader2, Plus, Search } from 'lucide-react';
+import Image from 'next/image';
+import { useEffect, useRef, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import { addItemToSharedCart, searchVariantsForSharedCart, type VariantSearchResult } from '../actions';
+
+export function AddItemSearch({ sharedCartId, onAdded }: { sharedCartId: string; onAdded: () => void }) {
+    const [term, setTerm] = useState('');
+    const [results, setResults] = useState<VariantSearchResult[]>([]);
+    const [open, setOpen] = useState(false);
+    const [isSearching, setIsSearching] = useState(false);
+    const [addingId, setAddingId] = useState<string | null>(null);
+    const [, startTransition] = useTransition();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    // Debounce in the change handler (not an effect) to match the storefront's
+    // search convention and avoid cascading effect re-renders.
+    function onTermChange(value: string) {
+        setTerm(value);
+        clearTimeout(debounceRef.current);
+        const q = value.trim();
+        if (q.length < 2) {
+            setResults([]);
+            setOpen(false);
+            setIsSearching(false);
+            return;
+        }
+        setIsSearching(true);
+        debounceRef.current = setTimeout(async () => {
+            const items = await searchVariantsForSharedCart(q);
+            setResults(items);
+            setOpen(true);
+            setIsSearching(false);
+        }, 300);
+    }
+
+    useEffect(() => {
+        function onClickOutside(e: MouseEvent) {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false);
+        }
+        document.addEventListener('mousedown', onClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', onClickOutside);
+            clearTimeout(debounceRef.current);
+        };
+    }, []);
+
+    function add(item: VariantSearchResult) {
+        setAddingId(item.productVariantId);
+        startTransition(async () => {
+            const result = await addItemToSharedCart(sharedCartId, item.productVariantId, 1);
+            setAddingId(null);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not add item.');
+                return;
+            }
+            toast.success(`Added ${item.productName}`);
+            setTerm('');
+            setResults([]);
+            setOpen(false);
+            onAdded();
+        });
+    }
+
+    return (
+        <div className="relative" ref={containerRef}>
+            <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                    value={term}
+                    onChange={(e) => onTermChange(e.target.value)}
+                    onFocus={() => results.length > 0 && setOpen(true)}
+                    placeholder="Search products to add…"
+                    className="pl-9"
+                />
+                {isSearching && (
+                    <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
+                )}
+            </div>
+
+            {open && (
+                <div className="absolute z-10 mt-1 w-full rounded-lg border bg-background shadow-lg max-h-72 overflow-y-auto">
+                    {results.length === 0 ? (
+                        <p className="p-3 text-sm text-muted-foreground">No products found.</p>
+                    ) : (
+                        results.map((item) => (
+                            <button
+                                key={item.productVariantId}
+                                type="button"
+                                className="flex items-center gap-3 w-full p-3 hover:bg-muted/50 text-left disabled:opacity-60"
+                                onClick={() => add(item)}
+                                disabled={addingId !== null}
+                            >
+                                <div className="h-8 w-8 shrink-0 rounded border bg-muted overflow-hidden">
+                                    {item.imageUrl && (
+                                        <Image
+                                            src={`${item.imageUrl}?preset=tiny`}
+                                            alt={item.productName}
+                                            width={32}
+                                            height={32}
+                                            className="h-full w-full object-cover"
+                                        />
+                                    )}
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <div className="flex items-center gap-1.5">
+                                        <p className="text-sm font-medium truncate">{item.productName}</p>
+                                        {!item.inStock && (
+                                            <span className="shrink-0 text-[10px] font-medium px-1 py-0.5 rounded bg-red-100 text-red-700">
+                                                Out of stock
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">{item.sku}</p>
+                                </div>
+                                {addingId === item.productVariantId ? (
+                                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                ) : (
+                                    <Plus className="h-4 w-4 text-muted-foreground" />
+                                )}
+                            </button>
+                        ))
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/add-member-form.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { ROLE_OPTIONS } from '@/components/commerce/shared-cart-role';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, UserPlus } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import {
+    addSharedCartMember,
+    fetchCompanyMembers,
+    type CompanyMemberOption,
+    type SharedCartRole,
+} from '../actions';
+
+export function AddMemberDialog({
+    cartId,
+    excludeCustomerIds,
+    onAdded,
+}: {
+    cartId: string;
+    excludeCustomerIds: Set<string>;
+    onAdded: () => void;
+}) {
+    const [open, setOpen] = useState(false);
+    const [candidates, setCandidates] = useState<CompanyMemberOption[] | null>(null);
+    const [selected, setSelected] = useState<string>('');
+    const [role, setRole] = useState<SharedCartRole>('edit');
+    const [isPending, startTransition] = useTransition();
+
+    function loadOnOpen(next: boolean) {
+        setOpen(next);
+        if (next && candidates === null) {
+            fetchCompanyMembers().then(setCandidates);
+        }
+    }
+
+    const available = (candidates ?? []).filter((c) => !excludeCustomerIds.has(c.customerId));
+
+    function add() {
+        if (!selected) return;
+        startTransition(async () => {
+            const result = await addSharedCartMember(cartId, selected, role);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not add member.');
+                return;
+            }
+            toast.success('Member added.');
+            setSelected('');
+            setOpen(false);
+            onAdded();
+        });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={loadOnOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline" className="w-full">
+                    <UserPlus className="h-4 w-4 mr-2" />
+                    Add colleague
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Add a colleague</DialogTitle>
+                    <DialogDescription>
+                        Choose someone from your company and the access they should have.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4 py-2">
+                    <div className="space-y-2">
+                        <Label>Colleague</Label>
+                        {candidates === null ? (
+                            <p className="text-sm text-muted-foreground">Loading colleagues…</p>
+                        ) : available.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">
+                                Everyone in your company is already a member.
+                            </p>
+                        ) : (
+                            <Select value={selected} onValueChange={setSelected} disabled={isPending}>
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Select a colleague" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {available.map((c) => (
+                                        <SelectItem key={c.customerId} value={c.customerId}>
+                                            {c.firstName} {c.lastName} — {c.emailAddress}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+                    </div>
+
+                    <div className="space-y-2">
+                        <Label>Role</Label>
+                        <Select
+                            value={role}
+                            onValueChange={(v) => setRole(v as SharedCartRole)}
+                            disabled={isPending}
+                        >
+                            <SelectTrigger className="w-full">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {ROLE_OPTIONS.map((o) => (
+                                    <SelectItem key={o.value} value={o.value}>
+                                        <span className="font-medium">{o.label}</span>
+                                        <span className="text-muted-foreground"> — {o.hint}</span>
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button type="button" variant="ghost" onClick={() => setOpen(false)} disabled={isPending}>
+                        Cancel
+                    </Button>
+                    <Button onClick={add} disabled={!selected || isPending}>
+                        {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                        Add colleague
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}