@vendure-platform/create 0.5.0 → 0.5.1

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

@@ -1,28 +1,25 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {client} from '@/lib/vendure/api';
-import {GetMySharedCartsQuery, GetCompanySharedCartsQuery} from '@/lib/vendure/queries';
-import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
+import { Price } from '@/components/commerce/price';
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
-import {Pagination} from '@/components/shared/pagination';
-import {Badge} from '@/components/ui/badge';
-import {ErrorState} from '@/components/shared/error-state';
-import {ArrowRight, Plus, Users, ShoppingCart} from 'lucide-react';
-import {Button} from '@/components/ui/button';
-import {Price} from '@/components/commerce/price';
-import {SharedCartStatusBadge} from '@/components/commerce/shared-cart-status-badge';
-import {roleLabel, canCreateSharedCarts, canManageSharedCarts} from '@/components/commerce/shared-cart-role';
-import {formatDate} from '@/lib/format';
-import {cn} from '@/lib/utils';
-import {setRequestLocale} from 'next-intl/server';
-import {Link, redirect} from '@/i18n/navigation';
+    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',
@@ -31,7 +28,7 @@ export const metadata: Metadata = {
 const ITEMS_PER_PAGE = 10;
 
 export default function SharedCartsPage(props: {
-    params: Promise<{locale: string}>;
+    params: Promise<{ locale: string }>;
     searchParams: Promise<Record<string, string | string[] | undefined>>;
 }) {
     return (
@@ -54,10 +51,10 @@ async function SharedCartsContent({
     params,
     searchParamsPromise,
 }: {
-    params: Promise<{locale: string}>;
+    params: Promise<{ locale: string }>;
     searchParamsPromise: Promise<Record<string, string | string[] | undefined>>;
 }) {
-    const {locale} = await params;
+    const { locale } = await params;
     setRequestLocale(locale);
     const [searchParams, activeCustomer, companyAccount] = await Promise.all([
         searchParamsPromise,
@@ -80,11 +77,11 @@ async function SharedCartsContent({
     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 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});
+            ? await client.query(GetCompanySharedCartsQuery, { options })
+            : await client.query(GetMySharedCartsQuery, { options });
 
     if (error) {
         return (
@@ -96,7 +93,8 @@ async function SharedCartsContent({
         );
     }
 
-    const list = 'companySharedCarts' in result.data ? result.data.companySharedCarts : result.data.mySharedCarts;
+    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);
@@ -125,9 +123,11 @@ async function SharedCartsContent({
                             </TableRow>
                         </TableHeader>
                         <TableBody>
-                            {carts.map(cart => {
+                            {carts.map((cart) => {
                                 const isOwner = cart.owner.id === activeCustomer.id;
-                                const membership = cart.members.find(m => m.customer.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">
@@ -154,17 +154,28 @@ async function SharedCartsContent({
                                         <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-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" />
+                                            <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}`}>
+                                                <Link
+                                                    href={`/account/shared-carts/${cart.id}`}
+                                                    aria-label={`Open ${cart.name}`}
+                                                >
                                                     <ArrowRight className="h-4 w-4" />
                                                 </Link>
                                             </Button>
@@ -186,7 +197,7 @@ async function SharedCartsContent({
     );
 }
 
-function Header({canCreate}: {canCreate: boolean}) {
+function Header({ canCreate }: { canCreate: boolean }) {
     return (
         <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
             <div>
@@ -210,11 +221,13 @@ function Header({canCreate}: {canCreate: boolean}) {
 
 // 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'}) {
+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',
+            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">
@@ -228,7 +241,7 @@ function ScopeTabs({scope}: {scope: 'mine' | 'company'}) {
     );
 }
 
-function EmptyState({canCreate, scope}: {canCreate: boolean; scope: 'mine' | 'company'}) {
+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">

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 (

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

@@ -1,22 +1,14 @@
-import type { Metadata } from 'next';
-import { getActiveCustomer } from '@/lib/vendure/actions';
-import { getActiveUserShoppingLists } from './actions';
+import { ErrorState } from '@/components/shared/error-state';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
-import { ErrorState } from '@/components/shared/error-state';
-import { ArrowRightIcon } from 'lucide-react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Link, redirect } from '@/i18n/navigation';
 import { formatDate } from '@/lib/format';
-import { setRequestLocale, getTranslations } from 'next-intl/server';
-import {Link} from '@/i18n/navigation';
-import { redirect } from '@/i18n/navigation';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { ArrowRightIcon } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { getActiveUserShoppingLists } from './actions';
 import { CreateShoppingListForm } from './create-shopping-list-form';
 
 export const metadata: Metadata = {
@@ -36,7 +28,17 @@ type ShoppingListRow = {
 
 type ShoppingListsTranslations = Awaited<ReturnType<typeof getTranslations<'ShoppingLists'>>>;
 
-function ShoppingListTable({ lists, showOwner, locale, t }: { lists: ShoppingListRow[]; showOwner?: boolean; locale: string; t: ShoppingListsTranslations }) {
+function ShoppingListTable({
+    lists,
+    showOwner,
+    locale,
+    t,
+}: {
+    lists: ShoppingListRow[];
+    showOwner?: boolean;
+    locale: string;
+    t: ShoppingListsTranslations;
+}) {
     return (
         <div className="border rounded-lg">
             <Table>
@@ -55,33 +57,26 @@ function ShoppingListTable({ lists, showOwner, locale, t }: { lists: ShoppingLis
                         <TableRow key={list.id} className="hover:bg-muted/50">
                             <TableCell className="font-medium">
                                 <span className="flex items-center gap-2">
-                                    <Link href={`/account/shopping-lists/${list.id}`} className="hover:underline">
+                                    <Link
+                                        href={`/account/shopping-lists/${list.id}`}
+                                        className="hover:underline"
+                                    >
                                         {list.name}
                                     </Link>
-                                    {list.isDefault && (
-                                        <Badge variant="outline">{t('defaultBadge')}</Badge>
-                                    )}
+                                    {list.isDefault && <Badge variant="outline">{t('defaultBadge')}</Badge>}
                                 </span>
                                 {list.description && (
-                                    <p className="text-sm text-muted-foreground mt-1">
-                                        {list.description}
-                                    </p>
+                                    <p className="text-sm text-muted-foreground mt-1">{list.description}</p>
                                 )}
                             </TableCell>
-                            {showOwner && (
-                                <TableCell>{list.owner}</TableCell>
-                            )}
-                            <TableCell>
-                                {t('itemCount', {count: list.totalItems})}
-                            </TableCell>
+                            {showOwner && <TableCell>{list.owner}</TableCell>}
+                            <TableCell>{t('itemCount', { count: list.totalItems })}</TableCell>
                             <TableCell>
                                 <Badge variant={list.isPublic ? 'default' : 'secondary'}>
                                     {list.isPublic ? t('publicBadge') : t('privateBadge')}
                                 </Badge>
                             </TableCell>
-                            <TableCell>
-                                {formatDate(list.createdAt, locale)}
-                            </TableCell>
+                            <TableCell>{formatDate(list.createdAt, locale)}</TableCell>
                             <TableCell>
                                 <Button asChild variant="outline" size="sm">
                                     <Link href={`/account/shopping-lists/${list.id}`}>
@@ -97,13 +92,10 @@ function ShoppingListTable({ lists, showOwner, locale, t }: { lists: ShoppingLis
     );
 }
 
-export default async function ShoppingListsPage({params}: {params: Promise<{locale: string}>}) {
-    const {locale} = await params;
+export default async function ShoppingListsPage({ params }: { params: Promise<{ locale: string }> }) {
+    const { locale } = await params;
     setRequestLocale(locale);
-    const [t, customer] = await Promise.all([
-        getTranslations('ShoppingLists'),
-        getActiveCustomer(),
-    ]);
+    const [t, customer] = await Promise.all([getTranslations('ShoppingLists'), getActiveCustomer()]);
     if (!customer) {
         return await redirect('/sign-in');
     }
@@ -130,9 +122,7 @@ export default async function ShoppingListsPage({params}: {params: Promise<{loca
             isPublic: list.isPublic,
             totalItems: list.totalItems,
             createdAt: list.createdAt,
-            owner: list.customer
-                ? `${list.customer.firstName} ${list.customer.lastName}`
-                : undefined,
+            owner: list.customer ? `${list.customer.firstName} ${list.customer.lastName}` : undefined,
         };
         if (list.customer?.id === customer.id) {
             myLists.push(row);