@vendure-platform/create 0.4.0 → 0.5.1

package/dist/assets/storefront/src/components/commerce/add-to-shared-cart.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import {
+    addItemsToSharedCart,
+    fetchEditableOpenSharedCarts,
+    shareMyCart,
+    type EditableSharedCart,
+} from '@/app/[locale]/account/shared-carts/actions';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { useRouter } from '@/i18n/navigation';
+import { ChevronDown, Loader2, Plus, Users } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
+
+type CartLine = { productVariantId: string; quantity: number };
+
+export function AddToSharedCart({
+    lines,
+    disabled,
+    canCreate,
+    defaultName,
+    label = 'Add to shared cart',
+    size = 'lg',
+    className,
+}: {
+    /** Items to add to (or seed a new) shared cart — one line on a PDP, the whole order on the cart page. */
+    lines: CartLine[];
+    disabled?: boolean;
+    canCreate?: boolean;
+    /** Pre-filled name for the create dialog. */
+    defaultName?: string;
+    label?: string;
+    size?: 'default' | 'lg';
+    className?: string;
+}) {
+    const router = useRouter();
+    const [carts, setCarts] = useState<EditableSharedCart[] | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isPending, startTransition] = useTransition();
+    const [createOpen, setCreateOpen] = useState(false);
+
+    function loadCarts(open: boolean) {
+        if (!open || carts !== null) return;
+        setIsLoading(true);
+        fetchEditableOpenSharedCarts().then((result) => {
+            setCarts(result);
+            setIsLoading(false);
+        });
+    }
+
+    function add(cart: EditableSharedCart) {
+        if (lines.length === 0) return;
+        startTransition(async () => {
+            const result = await addItemsToSharedCart(cart.id, lines);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not add to the shared cart.');
+                return;
+            }
+            toast.success(`Added to “${cart.name}”`, {
+                description: 'Personal discounts don’t apply to shared carts — priced at your company rate.',
+                action: { label: 'View', onClick: () => router.push(`/account/shared-carts/${cart.id}`) },
+            });
+        });
+    }
+
+    const hasCarts = carts !== null && carts.length > 0;
+
+    return (
+        <>
+            <DropdownMenu onOpenChange={loadCarts}>
+                <DropdownMenuTrigger asChild>
+                    <Button
+                        variant="outline"
+                        size={size}
+                        disabled={disabled || isPending}
+                        className={className ?? 'gap-2'}
+                    >
+                        {isPending ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <Users className="h-4 w-4" />
+                        )}
+                        {label}
+                        <ChevronDown className="h-4 w-4 opacity-60" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-64">
+                    <DropdownMenuLabel>Add to a shared cart</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {isLoading || carts === null ? (
+                        <div className="px-2 py-3 text-sm text-muted-foreground flex items-center gap-2">
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                            Loading…
+                        </div>
+                    ) : (
+                        <>
+                            {hasCarts &&
+                                carts.map((cart) => (
+                                    <DropdownMenuItem
+                                        key={cart.id}
+                                        onSelect={() => add(cart)}
+                                        disabled={isPending}
+                                    >
+                                        <Users className="h-4 w-4 mr-2 opacity-70" />
+                                        <span className="truncate">{cart.name}</span>
+                                    </DropdownMenuItem>
+                                ))}
+                            {canCreate ? (
+                                <>
+                                    {hasCarts && <DropdownMenuSeparator />}
+                                    <DropdownMenuItem
+                                        onSelect={() => setCreateOpen(true)}
+                                        disabled={isPending}
+                                    >
+                                        <Plus className="h-4 w-4 mr-2" />
+                                        Create new shared cart
+                                    </DropdownMenuItem>
+                                </>
+                            ) : (
+                                !hasCarts && (
+                                    <div className="px-2 py-2 text-sm text-muted-foreground">
+                                        No shared carts you can add to.
+                                    </div>
+                                )
+                            )}
+                        </>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+
+            <CreateSharedCartDialog
+                open={createOpen}
+                onOpenChange={setCreateOpen}
+                lines={lines}
+                defaultName={defaultName ?? 'Shared cart'}
+            />
+        </>
+    );
+}
+
+function CreateSharedCartDialog({
+    open,
+    onOpenChange,
+    lines,
+    defaultName,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    lines: CartLine[];
+    defaultName: string;
+}) {
+    const router = useRouter();
+    const [name, setName] = useState(defaultName);
+    const [description, setDescription] = useState('');
+    const [isPending, startTransition] = useTransition();
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        const trimmed = name.trim();
+        if (!trimmed || lines.length === 0) return;
+        startTransition(async () => {
+            const result = await shareMyCart(trimmed, description.trim() || undefined, lines);
+            // The cart may be created even if some items failed to copy; land on
+            // it regardless so the user isn't stranded, warning on partial copy.
+            if (!result.id) {
+                toast.error(result.message ?? 'Could not create the shared cart.');
+                return;
+            }
+            if (!result.success && result.message) toast.warning(result.message);
+            router.push(`/account/shared-carts/${result.id}`);
+        });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <form onSubmit={handleSubmit}>
+                    <DialogHeader>
+                        <DialogTitle>Create a shared cart</DialogTitle>
+                        <DialogDescription>
+                            Start a new shared cart with {lines.length}{' '}
+                            {lines.length === 1 ? 'item' : 'items'} so colleagues can build the order with
+                            you.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="create-shared-cart-name">Name</Label>
+                            <Input
+                                id="create-shared-cart-name"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                maxLength={255}
+                                required
+                                autoFocus
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="create-shared-cart-description">Description (optional)</Label>
+                            <Textarea
+                                id="create-shared-cart-description"
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                                rows={3}
+                                maxLength={1000}
+                                placeholder="What is this cart for?"
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={() => onOpenChange(false)}
+                            disabled={isPending}
+                        >
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={!name.trim() || isPending}>
+                            {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                            Create shared cart
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/dist/assets/storefront/src/components/commerce/approval-decision-form.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import {useState, useTransition} from 'react';
-import {Button} from '@/components/ui/button';
-import {Textarea} from '@/components/ui/textarea';
-import {CheckCircle, XCircle} from 'lucide-react';
-import {submitApprovalDecision} from '@/app/[locale]/account/approvals/actions';
+import { submitApprovalDecision } from '@/app/[locale]/account/approvals/actions';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { CheckCircle, XCircle } from 'lucide-react';
+import { useState, useTransition } from 'react';
 
 interface ApprovalDecisionFormProps {
     approvalRequestId: string;
 }
 
-export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormProps) {
+export function ApprovalDecisionForm({ approvalRequestId }: ApprovalDecisionFormProps) {
     const [comment, setComment] = useState('');
     const [isPending, startTransition] = useTransition();
     const [result, setResult] = useState<{ success: boolean; message?: string } | null>(null);
@@ -47,12 +47,8 @@ export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormPr
                 <p className="text-sm text-red-600">{result.message || 'An error occurred'}</p>
             )}
             <div className="flex gap-2">
-                <Button
-                    size="sm"
-                    onClick={() => handleDecision('APPROVED')}
-                    disabled={isPending}
-                >
-                    <CheckCircle className="h-4 w-4 mr-1"/>
+                <Button size="sm" onClick={() => handleDecision('APPROVED')} disabled={isPending}>
+                    <CheckCircle className="h-4 w-4 mr-1" />
                     Approve
                 </Button>
                 <Button
@@ -61,7 +57,7 @@ export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormPr
                     onClick={() => handleDecision('REJECTED')}
                     disabled={isPending}
                 >
-                    <XCircle className="h-4 w-4 mr-1"/>
+                    <XCircle className="h-4 w-4 mr-1" />
                     Reject
                 </Button>
             </div>

package/dist/assets/storefront/src/components/commerce/approval-status-badge.tsx

@@ -1,36 +1,44 @@
-import {Badge} from '@/components/ui/badge';
+import { Badge } from '@/components/ui/badge';
 import {
-    Clock,
+    Ban,
     CheckCircle,
-    XCircle,
+    Clock,
     Loader2,
-    Ban,
-    Timer,
     MessageSquare,
+    Timer,
+    XCircle,
     type LucideIcon,
 } from 'lucide-react';
 
 const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
-    PENDING: {color: 'bg-gray-100 text-gray-800', label: 'Pending', icon: Clock},
-    IN_PROGRESS: {color: 'bg-blue-100 text-blue-800', label: 'In Progress', icon: Loader2},
-    APPROVED: {color: 'bg-green-100 text-green-800', label: 'Approved', icon: CheckCircle},
-    REJECTED: {color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle},
-    CANCELLED: {color: 'bg-gray-100 text-gray-500', label: 'Cancelled', icon: Ban},
-    EXPIRED: {color: 'bg-yellow-100 text-yellow-800', label: 'Expired', icon: Timer},
-    CHANGES_REQUESTED: {color: 'bg-orange-100 text-orange-800', label: 'Changes Requested', icon: MessageSquare},
+    PENDING: { color: 'bg-gray-100 text-gray-800', label: 'Pending', icon: Clock },
+    IN_PROGRESS: { color: 'bg-blue-100 text-blue-800', label: 'In Progress', icon: Loader2 },
+    APPROVED: { color: 'bg-green-100 text-green-800', label: 'Approved', icon: CheckCircle },
+    REJECTED: { color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle },
+    CANCELLED: { color: 'bg-gray-100 text-gray-500', label: 'Cancelled', icon: Ban },
+    EXPIRED: { color: 'bg-yellow-100 text-yellow-800', label: 'Expired', icon: Timer },
+    CHANGES_REQUESTED: {
+        color: 'bg-orange-100 text-orange-800',
+        label: 'Changes Requested',
+        icon: MessageSquare,
+    },
 };
 
 interface ApprovalStatusBadgeProps {
     status: string;
 }
 
-export function ApprovalStatusBadge({status}: ApprovalStatusBadgeProps) {
-    const config = STATUS_CONFIG[status] || {color: 'bg-gray-100 text-gray-800', label: status, icon: Clock};
+export function ApprovalStatusBadge({ status }: ApprovalStatusBadgeProps) {
+    const config = STATUS_CONFIG[status] || {
+        color: 'bg-gray-100 text-gray-800',
+        label: status,
+        icon: Clock,
+    };
     const Icon = config.icon;
 
     return (
         <Badge className={config.color} variant="secondary">
-            <Icon className="h-3 w-3 mr-1"/>
+            <Icon className="h-3 w-3 mr-1" />
             {config.label}
         </Badge>
     );

package/dist/assets/storefront/src/components/commerce/business-unit-switcher.tsx

@@ -1,23 +1,23 @@
 'use client';
 
-import {useTransition} from 'react';
+import { switchBusinessUnitAction } from '@/components/layout/navbar/actions';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {Button} from '@/components/ui/button';
-import {Building2, Check, ChevronDown} from 'lucide-react';
-import {switchBusinessUnitAction} from '@/components/layout/navbar/actions';
+import { Building2, Check, ChevronDown } from 'lucide-react';
+import { useTransition } from 'react';
 interface BusinessUnitSwitcherProps {
     businessUnits: Array<{ id: string; name: string }>;
     activeBusinessUnitId: string | null;
 }
 
-export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: BusinessUnitSwitcherProps) {
+export function BusinessUnitSwitcher({ businessUnits, activeBusinessUnitId }: BusinessUnitSwitcherProps) {
     const [isPending, startTransition] = useTransition();
-    const activeBu = businessUnits.find(bu => bu.id === activeBusinessUnitId);
+    const activeBu = businessUnits.find((bu) => bu.id === activeBusinessUnitId);
 
     if (businessUnits.length <= 1) {
         return null;
@@ -28,14 +28,14 @@ export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: Busi
             <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="w-full justify-between" disabled={isPending}>
                     <span className="flex items-center gap-2">
-                        <Building2 className="h-4 w-4"/>
-                        {isPending ? 'Switching...' : (activeBu?.name ?? 'Select Unit')}
+                        <Building2 className="h-4 w-4" />
+                        {isPending ? 'Switching...' : activeBu?.name ?? 'Select Unit'}
                     </span>
-                    <ChevronDown className="h-3 w-3"/>
+                    <ChevronDown className="h-3 w-3" />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">
-                {businessUnits.map(bu => (
+                {businessUnits.map((bu) => (
                     <DropdownMenuItem
                         key={bu.id}
                         onClick={() => {
@@ -45,7 +45,7 @@ export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: Busi
                         }}
                     >
                         <span className="flex items-center gap-2">
-                            {bu.id === activeBusinessUnitId && <Check className="h-3 w-3"/>}
+                            {bu.id === activeBusinessUnitId && <Check className="h-3 w-3" />}
                             {bu.name}
                         </span>
                     </DropdownMenuItem>

package/dist/assets/storefront/src/components/commerce/catalog-search-bar.tsx

@@ -3,11 +3,11 @@
 import { InstantSearchDropdown } from '@/components/commerce/instant-search-dropdown';
 import { Input } from '@/components/ui/input';
 import { KbdShortcut } from '@/components/ui/kbd-shortcut';
+import { useRouter } from '@/i18n/navigation';
 import { useSearchBar } from '@/lib/search-bar-context';
 import { Search } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useRouter } from '@/i18n/navigation';
+import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 
 export function CatalogSearchBar() {

package/dist/assets/storefront/src/components/commerce/category-product-section.tsx

@@ -1,12 +1,12 @@
-import {Link} from '@/i18n/navigation';
-import { ArrowRight } from 'lucide-react';
-import { cacheLife, cacheTag } from 'next/cache';
-import {getTranslations} from 'next-intl/server';
-import { publicClient } from '@/lib/vendure/api';
-import { SearchProductsQuery } from '@/lib/vendure/queries';
+import { ProductCard } from '@/components/commerce/product-card';
 import { readFragment } from '@/graphql';
+import { Link } from '@/i18n/navigation';
+import { publicClient } from '@/lib/vendure/api';
 import { ProductCardFragment } from '@/lib/vendure/fragments';
-import { ProductCard } from '@/components/commerce/product-card';
+import { SearchProductsQuery } from '@/lib/vendure/queries';
+import { ArrowRight } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
 const PRODUCTS_PER_SECTION = 4;
 
 interface CategoryProductSectionProps {
@@ -21,19 +21,28 @@ async function getCollectionPreviewProducts(slug: string, locale: string, channe
     cacheLife('hours');
     cacheTag(`collection-preview-${slug}-${locale}${channelToken ? `-${channelToken}` : ''}`);
 
-    const [result, error] = await publicClient.query(SearchProductsQuery, {
-        input: {
-            collectionSlug: slug,
-            take: PRODUCTS_PER_SECTION,
-            skip: 0,
-            groupByProduct: true,
+    const [result, error] = await publicClient.query(
+        SearchProductsQuery,
+        {
+            input: {
+                collectionSlug: slug,
+                take: PRODUCTS_PER_SECTION,
+                skip: 0,
+                groupByProduct: true,
+            },
         },
-    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+        { languageCode: locale, ...(channelToken ? { channelToken } : {}) },
+    );
     if (error) return [];
     return result.data.search.items;
 }
 
-export async function CategoryProductSection({ name, slug, locale, channelToken }: CategoryProductSectionProps) {
+export async function CategoryProductSection({
+    name,
+    slug,
+    locale,
+    channelToken,
+}: CategoryProductSectionProps) {
     const [products, t] = await Promise.all([
         getCollectionPreviewProducts(slug, locale, channelToken),
         getTranslations('Catalog'),
@@ -61,7 +70,10 @@ export async function CategoryProductSection({ name, slug, locale, channelToken
             </div>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 {products.map((product) => (
-                    <ProductCard key={readFragment(ProductCardFragment, product).productId} product={product} />
+                    <ProductCard
+                        key={readFragment(ProductCardFragment, product).productId}
+                        product={product}
+                    />
                 ))}
             </div>
         </section>

package/dist/assets/storefront/src/components/commerce/category-sidebar.tsx

@@ -1,20 +1,14 @@
 'use client';
 
-import Image from 'next/image';
-import {useTranslations} from 'next-intl';
-import {Link, usePathname} from '@/i18n/navigation';
-import { ChevronRight, Layers, LayoutGrid } from 'lucide-react';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import type { ResultOf } from '@/graphql';
+import { Link, usePathname } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
 import type { GetTopCollectionsQuery } from '@/lib/vendure/queries';
+import { ChevronRight, Layers, LayoutGrid } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 
 type Collection = ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
 
@@ -22,7 +16,17 @@ interface CategorySidebarProps {
     collections: Collection[];
 }
 
-function CategoryLinks({ collections, pathname, categoriesLabel, viewAllLabel }: { collections: Collection[]; pathname: string; categoriesLabel: string; viewAllLabel: string }) {
+function CategoryLinks({
+    collections,
+    pathname,
+    categoriesLabel,
+    viewAllLabel,
+}: {
+    collections: Collection[];
+    pathname: string;
+    categoriesLabel: string;
+    viewAllLabel: string;
+}) {
     return (
         <nav className="space-y-1">
             <h2 className="font-semibold text-sm pb-2 flex items-center gap-2">
@@ -33,9 +37,8 @@ function CategoryLinks({ collections, pathname, categoriesLabel, viewAllLabel }:
                 const href = `/collection/${collection.slug}`;
                 const isActive = pathname === href;
                 const hasChildren = collection.children && collection.children.length > 0;
-                const childActive = hasChildren && collection.children!.some(
-                    (c) => pathname === `/collection/${c.slug}`,
-                );
+                const childActive =
+                    hasChildren && collection.children!.some((c) => pathname === `/collection/${c.slug}`);
 
                 return (
                     <div key={collection.id}>
@@ -106,7 +109,12 @@ export function CategorySidebar({ collections }: CategorySidebarProps) {
         <>
             {/* Desktop: sticky sidebar */}
             <div className="hidden lg:block sticky top-20">
-                <CategoryLinks collections={collections} pathname={pathname} categoriesLabel={t('categories')} viewAllLabel={t('viewAll')} />
+                <CategoryLinks
+                    collections={collections}
+                    pathname={pathname}
+                    categoriesLabel={t('categories')}
+                    viewAllLabel={t('viewAll')}
+                />
             </div>
 
             {/* Mobile: sheet trigger */}
@@ -123,7 +131,12 @@ export function CategorySidebar({ collections }: CategorySidebarProps) {
                             <SheetTitle>{t('categories')}</SheetTitle>
                         </SheetHeader>
                         <div className="px-4 pb-4">
-                            <CategoryLinks collections={collections} pathname={pathname} categoriesLabel={t('categories')} viewAllLabel={t('viewAll')} />
+                            <CategoryLinks
+                                collections={collections}
+                                pathname={pathname}
+                                categoriesLabel={t('categories')}
+                                viewAllLabel={t('viewAll')}
+                            />
                         </div>
                     </SheetContent>
                 </Sheet>

package/dist/assets/storefront/src/components/commerce/collection-hero-banner.tsx

@@ -6,7 +6,7 @@ interface CollectionHeroBannerProps {
     imageUrl: string;
 }
 
-export function CollectionHeroBanner({name, description, imageUrl}: CollectionHeroBannerProps) {
+export function CollectionHeroBanner({ name, description, imageUrl }: CollectionHeroBannerProps) {
     return (
         <section className="relative overflow-hidden rounded-lg mb-6 aspect-[21/9] lg:aspect-[14/3]">
             <Image
@@ -22,9 +22,7 @@ export function CollectionHeroBanner({name, description, imageUrl}: CollectionHe
                 className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10"
             />
             <div className="absolute inset-x-0 bottom-0 p-6 md:p-8 text-white">
-                <h1 className="text-2xl md:text-4xl font-bold tracking-tight drop-shadow">
-                    {name}
-                </h1>
+                <h1 className="text-2xl md:text-4xl font-bold tracking-tight drop-shadow">{name}</h1>
                 {description && (
                     <p className="mt-2 max-w-2xl text-sm md:text-base text-white/80 line-clamp-2 drop-shadow">
                         {description}

package/dist/assets/storefront/src/components/commerce/company-state-badge.tsx

@@ -1,31 +1,25 @@
-import {Badge} from '@/components/ui/badge';
-import {
-    Clock,
-    CheckCircle,
-    XCircle,
-    Ban,
-    type LucideIcon,
-} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Ban, CheckCircle, Clock, XCircle, type LucideIcon } from 'lucide-react';
 
 const STATE_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
-    Pending: {color: 'bg-amber-100 text-amber-800', label: 'Pending', icon: Clock},
-    Active: {color: 'bg-green-100 text-green-800', label: 'Active', icon: CheckCircle},
-    Suspended: {color: 'bg-red-100 text-red-800', label: 'Suspended', icon: XCircle},
-    Denied: {color: 'bg-red-100 text-red-800', label: 'Denied', icon: Ban},
-    Closed: {color: 'bg-gray-100 text-gray-500', label: 'Closed', icon: Ban},
+    Pending: { color: 'bg-amber-100 text-amber-800', label: 'Pending', icon: Clock },
+    Active: { color: 'bg-green-100 text-green-800', label: 'Active', icon: CheckCircle },
+    Suspended: { color: 'bg-red-100 text-red-800', label: 'Suspended', icon: XCircle },
+    Denied: { color: 'bg-red-100 text-red-800', label: 'Denied', icon: Ban },
+    Closed: { color: 'bg-gray-100 text-gray-500', label: 'Closed', icon: Ban },
 };
 
 interface CompanyStateBadgeProps {
     state: string;
 }
 
-export function CompanyStateBadge({state}: CompanyStateBadgeProps) {
-    const config = STATE_CONFIG[state] || {color: 'bg-gray-100 text-gray-800', label: state, icon: Clock};
+export function CompanyStateBadge({ state }: CompanyStateBadgeProps) {
+    const config = STATE_CONFIG[state] || { color: 'bg-gray-100 text-gray-800', label: state, icon: Clock };
     const Icon = config.icon;
 
     return (
         <Badge className={config.color} variant="secondary">
-            <Icon className="h-3 w-3 mr-1"/>
+            <Icon className="h-3 w-3 mr-1" />
             {config.label}
         </Badge>
     );