@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -0,0 +1,276 @@
+import { Price } from '@/components/commerce/price';
+import {
+    canCreateSharedCarts,
+    canManageSharedCarts,
+    roleLabel,
+} from '@/components/commerce/shared-cart-role';
+import { SharedCartStatusBadge } from '@/components/commerce/shared-cart-status-badge';
+import { ErrorState } from '@/components/shared/error-state';
+import { Pagination } from '@/components/shared/pagination';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Link, redirect } from '@/i18n/navigation';
+import { formatDate } from '@/lib/format';
+import { cn } from '@/lib/utils';
+import { getActiveCustomer, getCompanyAccount } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { GetCompanySharedCartsQuery, GetMySharedCartsQuery } from '@/lib/vendure/queries';
+import { ArrowRight, Plus, ShoppingCart, Users } from 'lucide-react';
+import type { Metadata } from 'next';
+import { setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
+
+export const metadata: Metadata = {
+    title: 'Shared Carts',
+};
+
+const ITEMS_PER_PAGE = 10;
+
+export default function SharedCartsPage(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">Shared Carts</h1>
+                    </div>
+                    <p className="text-sm text-muted-foreground">Loading shared carts…</p>
+                </div>
+            }
+        >
+            <SharedCartsContent params={props.params} searchParamsPromise={props.searchParams} />
+        </Suspense>
+    );
+}
+
+async function SharedCartsContent({
+    params,
+    searchParamsPromise,
+}: {
+    params: Promise<{ locale: string }>;
+    searchParamsPromise: Promise<Record<string, string | string[] | undefined>>;
+}) {
+    const { locale } = await params;
+    setRequestLocale(locale);
+    const [searchParams, activeCustomer, companyAccount] = await Promise.all([
+        searchParamsPromise,
+        getActiveCustomer(),
+        getCompanyAccount(),
+    ]);
+    if (!activeCustomer) return await redirect('/sign-in');
+    const canCreate = canCreateSharedCarts(companyAccount?.permissions);
+    const isAdmin = canManageSharedCarts(companyAccount?.permissions);
+
+    // Company admins get a second "All company carts" view; everyone else only ever sees their own.
+    const scopeParam = searchParams.scope;
+    const scope =
+        isAdmin && (Array.isArray(scopeParam) ? scopeParam[0] : scopeParam) === 'company'
+            ? 'company'
+            : 'mine';
+
+    const pageParam = searchParams.page;
+    const parsedPage = parseInt(Array.isArray(pageParam) ? pageParam[0] : pageParam || '1', 10);
+    const currentPage = Number.isFinite(parsedPage) && parsedPage > 0 ? parsedPage : 1;
+    const skip = (currentPage - 1) * ITEMS_PER_PAGE;
+
+    const options = { take: ITEMS_PER_PAGE, skip, sort: { updatedAt: 'DESC' as never } };
+    const [result, error] =
+        scope === 'company'
+            ? await client.query(GetCompanySharedCartsQuery, { options })
+            : await client.query(GetMySharedCartsQuery, { options });
+
+    if (error) {
+        return (
+            <div>
+                <Header canCreate={canCreate} />
+                {isAdmin && <ScopeTabs scope={scope} />}
+                <ErrorState message="We couldn't load your shared carts. Please try again later." />
+            </div>
+        );
+    }
+
+    const list =
+        'companySharedCarts' in result.data ? result.data.companySharedCarts : result.data.mySharedCarts;
+    const carts = list.items;
+    const totalItems = list.totalItems;
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+    return (
+        <div>
+            <Header canCreate={canCreate} />
+            {isAdmin && <ScopeTabs scope={scope} />}
+
+            {carts.length === 0 ? (
+                <EmptyState canCreate={canCreate} scope={scope} />
+            ) : (
+                <div className="border rounded-lg overflow-hidden">
+                    <Table>
+                        <TableHeader className="bg-muted">
+                            <TableRow>
+                                <TableHead>Name</TableHead>
+                                <TableHead>Status</TableHead>
+                                <TableHead>Your role</TableHead>
+                                <TableHead>Owner</TableHead>
+                                <TableHead className="text-center">Members</TableHead>
+                                <TableHead className="text-center">Items</TableHead>
+                                <TableHead className="text-right">Total</TableHead>
+                                <TableHead>Updated</TableHead>
+                                <TableHead className="w-12" />
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {carts.map((cart) => {
+                                const isOwner = cart.owner.id === activeCustomer.id;
+                                const membership = cart.members.find(
+                                    (m) => m.customer.id === activeCustomer.id,
+                                );
+                                const yourRole = isOwner ? 'owner' : membership?.role;
+                                return (
+                                    <TableRow key={cart.id} className="hover:bg-muted/50">
+                                        <TableCell className="font-medium">
+                                            <Link
+                                                href={`/account/shared-carts/${cart.id}`}
+                                                className="hover:underline underline-offset-4"
+                                            >
+                                                {cart.name}
+                                            </Link>
+                                        </TableCell>
+                                        <TableCell>
+                                            <SharedCartStatusBadge status={cart.status} />
+                                        </TableCell>
+                                        <TableCell>
+                                            {yourRole ? (
+                                                <Badge variant={isOwner ? 'default' : 'outline'}>
+                                                    {isOwner ? 'Owner' : roleLabel(yourRole)}
+                                                </Badge>
+                                            ) : (
+                                                <span className="text-muted-foreground">—</span>
+                                            )}
+                                        </TableCell>
+                                        <TableCell>
+                                            {cart.owner.firstName} {cart.owner.lastName}
+                                        </TableCell>
+                                        <TableCell className="text-center tabular-nums">
+                                            {cart.members.length}
+                                        </TableCell>
+                                        <TableCell className="text-center tabular-nums">
+                                            {cart.order.totalQuantity}
+                                        </TableCell>
+                                        <TableCell className="text-right">
+                                            <Price
+                                                value={cart.order.totalWithTax}
+                                                currencyCode={cart.order.currencyCode}
+                                                taxLabel="incl"
+                                            />
+                                        </TableCell>
+                                        <TableCell className="text-muted-foreground whitespace-nowrap">
+                                            {formatDate(cart.updatedAt, locale)}
+                                        </TableCell>
+                                        <TableCell>
+                                            <Button asChild variant="ghost" size="icon">
+                                                <Link
+                                                    href={`/account/shared-carts/${cart.id}`}
+                                                    aria-label={`Open ${cart.name}`}
+                                                >
+                                                    <ArrowRight className="h-4 w-4" />
+                                                </Link>
+                                            </Button>
+                                        </TableCell>
+                                    </TableRow>
+                                );
+                            })}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+
+            {totalPages > 1 && (
+                <div className="mt-6">
+                    <Pagination currentPage={currentPage} totalPages={totalPages} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+function Header({ canCreate }: { canCreate: boolean }) {
+    return (
+        <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
+            <div>
+                <h1 className="text-3xl font-bold">Shared Carts</h1>
+                <p className="text-sm text-muted-foreground mt-1 max-w-prose">
+                    Build orders together with your colleagues. Add items, set who can edit, and hand off to
+                    checkout when you&apos;re ready.
+                </p>
+            </div>
+            {canCreate && (
+                <Button asChild>
+                    <Link href="/account/shared-carts/new">
+                        <Plus className="h-4 w-4 mr-2" />
+                        New shared cart
+                    </Link>
+                </Button>
+            )}
+        </div>
+    );
+}
+
+// Segmented control letting a company admin switch between their own carts and every cart in the
+// company. Rendered only for admins; the query and access check are enforced server-side.
+function ScopeTabs({ scope }: { scope: 'mine' | 'company' }) {
+    const tabClass = (active: boolean) =>
+        cn(
+            'px-3 py-1.5 text-sm font-medium rounded-md transition-colors',
+            active
+                ? 'bg-background shadow-sm text-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+        );
+    return (
+        <div className="mb-6 inline-flex rounded-lg border bg-muted p-1">
+            <Link href="/account/shared-carts" className={tabClass(scope === 'mine')}>
+                My carts
+            </Link>
+            <Link href="/account/shared-carts?scope=company" className={tabClass(scope === 'company')}>
+                All company carts
+            </Link>
+        </div>
+    );
+}
+
+function EmptyState({ canCreate, scope }: { canCreate: boolean; scope: 'mine' | 'company' }) {
+    return (
+        <div className="border border-dashed rounded-lg py-16 px-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+                <Users className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <h2 className="text-lg font-semibold">No shared carts yet</h2>
+            <p className="text-sm text-muted-foreground mt-1 mx-auto max-w-sm">
+                {scope === 'company'
+                    ? 'No one in your company has created a shared cart yet.'
+                    : canCreate
+                    ? 'Start a cart your team can build together, or share your current cart from the cart page.'
+                    : "You're not a member of any shared carts yet. A colleague can add you to one."}
+            </p>
+            {canCreate && (
+                <div className="mt-6 flex items-center justify-center gap-3">
+                    <Button asChild>
+                        <Link href="/account/shared-carts/new">
+                            <Plus className="h-4 w-4 mr-2" />
+                            New shared cart
+                        </Link>
+                    </Button>
+                    <Button asChild variant="outline">
+                        <Link href="/cart">
+                            <ShoppingCart className="h-4 w-4 mr-2" />
+                            Go to cart
+                        </Link>
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/[id]/page.tsx

@@ -1,26 +1,40 @@
-import type { Metadata } from 'next';
-import { Suspense } from 'react';
+import { redirect } from '@/i18n/navigation';
+import { getActiveChannelToken } from '@/lib/channel-server';
 import { getActiveCustomer } from '@/lib/vendure/actions';
 import { getActiveChannelCached } from '@/lib/vendure/cached';
-import { getActiveChannelToken } from '@/lib/channel-server';
-import { getActiveUserShoppingList, getActiveUserShoppingLists } from '../actions';
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { redirect } from '@/i18n/navigation';
+import { Suspense } from 'react';
+import { getActiveUserShoppingList, getActiveUserShoppingLists } from '../actions';
 import { ShoppingListDetailClient } from './shopping-list-detail-client';
 
 export const metadata: Metadata = {
     title: 'Shopping List',
 };
 
-export default async function ShoppingListDetailPage({ params }: { params: Promise<{ locale: string; id: string }> }) {
+export default async function ShoppingListDetailPage({
+    params,
+}: {
+    params: Promise<{ locale: string; id: string }>;
+}) {
     return (
-        <Suspense fallback={<div className="flex items-center justify-center py-12"><p className="text-sm text-muted-foreground">Loading...</p></div>}>
+        <Suspense
+            fallback={
+                <div className="flex items-center justify-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <ShoppingListDetailContent paramsPromise={params} />
         </Suspense>
     );
 }
 
-async function ShoppingListDetailContent({ paramsPromise }: { paramsPromise: Promise<{ locale: string; id: string }> }) {
+async function ShoppingListDetailContent({
+    paramsPromise,
+}: {
+    paramsPromise: Promise<{ locale: string; id: string }>;
+}) {
     const { id } = await paramsPromise;
 
     const customer = await getActiveCustomer();

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/[id]/shopping-list-detail-client.tsx

@@ -1,21 +1,6 @@
 'use client';
 
-import { useCallback, useRef, useState, useTransition } from 'react';
-import { useLocale, useTranslations } from 'next-intl';
-import { useRouter } from '@/i18n/navigation';
-import Image from 'next/image';
-import {Link} from '@/i18n/navigation';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Switch } from '@/components/ui/switch';
-import { Badge } from '@/components/ui/badge';
-import { Label } from '@/components/ui/label';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { Price } from '@/components/commerce/price';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -27,30 +12,44 @@ import {
     AlertDialogTitle,
     AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { Link, useRouter } from '@/i18n/navigation';
+import { formatDate } from '@/lib/format';
 import {
     ArrowLeft,
+    Check,
     Copy,
-    MoreHorizontal,
+    MessageSquare,
     Minus,
+    MoreHorizontal,
+    MoveRight,
     Pencil,
     Plus,
     ShoppingCart,
     Trash2,
-    MoveRight,
-    Check,
-    MessageSquare,
 } from 'lucide-react';
-import { Price } from '@/components/commerce/price';
-import { formatDate } from '@/lib/format';
+import { useLocale, useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useCallback, useRef, useState, useTransition } from 'react';
 import { toast } from 'sonner';
-import { Textarea } from '@/components/ui/textarea';
 import {
-    updateShoppingList,
-    deleteShoppingList,
-    setShoppingListVisibility,
-    removeFromShoppingList,
     addShoppingListItemsToOrder,
+    deleteShoppingList,
     moveShoppingListItems,
+    removeFromShoppingList,
+    setShoppingListVisibility,
+    updateShoppingList,
     updateShoppingListItem,
 } from '../actions';
 
@@ -224,7 +223,11 @@ function ItemNoteEditor({
     );
 }
 
-export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, currencyCode }: ShoppingListDetailClientProps) {
+export function ShoppingListDetailClient({
+    shoppingList,
+    otherShoppingLists,
+    currencyCode,
+}: ShoppingListDetailClientProps) {
     const tRoot = useTranslations('ShoppingLists');
     const t = useTranslations('ShoppingLists.detail');
     const router = useRouter();
@@ -412,7 +415,7 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
                                 <AlertDialogHeader>
                                     <AlertDialogTitle>{t('deleteDialogTitle')}</AlertDialogTitle>
                                     <AlertDialogDescription>
-                                        {t('deleteDialogDescription', {name: shoppingList.name})}
+                                        {t('deleteDialogDescription', { name: shoppingList.name })}
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>
@@ -435,13 +438,13 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
             {items.length > 0 && (
                 <div className="flex items-center justify-between mb-4">
                     <p className="text-sm text-muted-foreground">
-                        {tRoot('itemCount', {count: shoppingList.totalItems})}
+                        {tRoot('itemCount', { count: shoppingList.totalItems })}
                     </p>
                     <Button onClick={handleAddAllToCart} disabled={isPending || inStockItems.length === 0}>
                         <ShoppingCart className="mr-2 h-4 w-4" />
                         {inStockItems.length === items.length
                             ? t('addAllToCartButton')
-                            : t('addInStockToCartButton', {count: inStockItems.length})}
+                            : t('addInStockToCartButton', { count: inStockItems.length })}
                     </Button>
                 </div>
             )}
@@ -457,15 +460,15 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
             ) : (
                 <div className="space-y-4">
                     {items.map((item) => (
-                        <div
-                            key={item.id}
-                            className="flex items-center gap-4 border rounded-lg p-4"
-                        >
+                        <div key={item.id} className="flex items-center gap-4 border rounded-lg p-4">
                             {/* Thumbnail */}
                             <Link href={`/product/${item.productVariant.product.slug}`} className="shrink-0">
                                 {item.productVariant.product.featuredAsset ? (
                                     <Image
-                                        src={item.productVariant.product.featuredAsset.preview + '?preset=thumb'}
+                                        src={
+                                            item.productVariant.product.featuredAsset.preview +
+                                            '?preset=thumb'
+                                        }
                                         alt={item.productVariant.product.name}
                                         width={80}
                                         height={80}
@@ -486,14 +489,19 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
                                 </Link>
                                 <p className="text-sm text-muted-foreground">{item.productVariant.name}</p>
                                 <div className="flex items-center gap-2 mt-1">
-                                    <Price value={item.productVariant.priceWithTax} currencyCode={currencyCode} />
+                                    <Price
+                                        value={item.productVariant.priceWithTax}
+                                        currencyCode={currencyCode}
+                                    />
                                     {item.purchased && (
                                         <Badge variant="secondary">{t('purchasedBadge')}</Badge>
                                     )}
                                     {item.productVariant.stockLevel === OUT_OF_STOCK ? (
                                         <Badge variant="destructive">{t('outOfStockBadge')}</Badge>
                                     ) : (
-                                        <Badge variant="outline" className="text-green-600 border-green-600">{t('inStockBadge')}</Badge>
+                                        <Badge variant="outline" className="text-green-600 border-green-600">
+                                            {t('inStockBadge')}
+                                        </Badge>
                                     )}
                                 </div>
                                 <ItemQuantityControl
@@ -511,7 +519,7 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
                                     disabled={isPending}
                                 />
                                 <p className="text-xs text-muted-foreground mt-1">
-                                    {t('addedDate', {date: formatDate(item.createdAt, locale)})}
+                                    {t('addedDate', { date: formatDate(item.createdAt, locale) })}
                                 </p>
                             </div>
 
@@ -522,7 +530,11 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
                                     size="sm"
                                     onClick={() => handleAddItemToCart(item.id)}
                                     disabled={isPending || item.productVariant.stockLevel === OUT_OF_STOCK}
-                                    title={item.productVariant.stockLevel === OUT_OF_STOCK ? t('outOfStockTitle') : t('addToCartTitle')}
+                                    title={
+                                        item.productVariant.stockLevel === OUT_OF_STOCK
+                                            ? t('outOfStockTitle')
+                                            : t('addToCartTitle')
+                                    }
                                 >
                                     <ShoppingCart className="h-4 w-4" />
                                 </Button>
@@ -534,15 +546,16 @@ export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, cur
                                         </Button>
                                     </DropdownMenuTrigger>
                                     <DropdownMenuContent align="end">
-                                        {otherShoppingLists.length > 0 && otherShoppingLists.map((target) => (
-                                            <DropdownMenuItem
-                                                key={target.id}
-                                                onClick={() => handleMoveItem(item.id, target.id)}
-                                            >
-                                                <MoveRight className="mr-2 h-4 w-4" />
-                                                {t('moveToMenuItem', {listName: target.name})}
-                                            </DropdownMenuItem>
-                                        ))}
+                                        {otherShoppingLists.length > 0 &&
+                                            otherShoppingLists.map((target) => (
+                                                <DropdownMenuItem
+                                                    key={target.id}
+                                                    onClick={() => handleMoveItem(item.id, target.id)}
+                                                >
+                                                    <MoveRight className="mr-2 h-4 w-4" />
+                                                    {t('moveToMenuItem', { listName: target.name })}
+                                                </DropdownMenuItem>
+                                            ))}
                                         <DropdownMenuItem
                                             onClick={() => handleRemoveItem(item.id)}
                                             className="text-destructive"

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/actions.ts

@@ -1,12 +1,13 @@
 'use server';
 
 import { FragmentOf, readFragment } from '@/graphql';
+import { redirect } from '@/i18n/navigation';
 import { getAuthToken, setAuthToken } from '@/lib/auth';
 import { client } from '@/lib/vendure/api';
 import { ShoppingListFragment, ShoppingListItemFragment } from '@/lib/vendure/fragments';
 import {
-    AddToShoppingListMutation,
     AddShoppingListItemsToOrderMutation,
+    AddToShoppingListMutation,
     CreateShoppingListMutation,
     DeleteShoppingListMutation,
     MoveShoppingListItemsMutation,
@@ -22,7 +23,6 @@ import {
     GetShoppingListsWithItemVariantsQuery,
 } from '@/lib/vendure/queries';
 import { updateTag } from 'next/cache';
-import { redirect } from '@/i18n/navigation';
 
 // --- Data fetching (query + unmask) ---
 
@@ -162,7 +162,9 @@ export async function createShoppingList(name: string, description?: string) {
 }
 
 export async function updateShoppingList(id: string, name?: string, description?: string) {
-    const [result, error] = await client.mutate(UpdateShoppingListMutation, { input: { id, name, description } });
+    const [result, error] = await client.mutate(UpdateShoppingListMutation, {
+        input: { id, name, description },
+    });
 
     if (error) {
         return { success: false, error: 'Failed to update shopping list' };
@@ -210,7 +212,10 @@ export async function addShoppingListItemsToOrder(itemIds: string[]) {
 }
 
 export async function moveShoppingListItems(itemIds: string[], targetShoppingListId: string) {
-    const [result, error] = await client.mutate(MoveShoppingListItemsMutation, { itemIds, targetShoppingListId });
+    const [result, error] = await client.mutate(MoveShoppingListItemsMutation, {
+        itemIds,
+        targetShoppingListId,
+    });
 
     if (error) {
         return { success: false, error: 'Failed to move shopping list items' };

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/create-shopping-list-form.tsx

@@ -1,21 +1,15 @@
 'use client';
 
-import { useState, useTransition } from 'react';
 import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog';
+import { useRouter } from '@/i18n/navigation';
 import { Plus } from 'lucide-react';
-import { createShoppingList } from './actions';
+import { useTranslations } from 'next-intl';
+import { useState, useTransition } from 'react';
 import { toast } from 'sonner';
-import { useRouter } from '@/i18n/navigation';
-import {useTranslations} from 'next-intl';
+import { createShoppingList } from './actions';
 
 export function CreateShoppingListForm() {
     const tRoot = useTranslations('ShoppingLists');

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/loading.tsx

@@ -1,5 +1,5 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 
 export default function ShoppingListsLoading() {
     return (