hey-pharmacist-ecommerce 1.1.13 → 1.1.14

package/src/components/AccountPaymentTab.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import React, { useState } from 'react';
+import { CreditCard, Plus, Trash2 } from 'lucide-react';
+import { usePaymentMethods } from '@/hooks/usePaymentMethods';
+import { EmptyState } from './EmptyState';
+import { Button } from './ui/Button';
+import { Badge } from './ui/Badge';
+
+export function AccountPaymentTab() {
+    const { paymentMethods, isLoading, error, deletePaymentMethod } = usePaymentMethods();
+    const [deletingId, setDeletingId] = useState<string | null>(null);
+
+    const handleDelete = async (paymentMethodId: string) => {
+        if (!confirm('Are you sure you want to remove this payment method?')) return;
+
+        setDeletingId(paymentMethodId);
+        try {
+            await deletePaymentMethod(paymentMethodId);
+        } catch (error) {
+            console.error('Failed to delete payment method:', error);
+            alert('Failed to delete payment method. Please try again.');
+        } finally {
+            setDeletingId(null);
+        }
+    };
+
+    if (isLoading) {
+        return (
+            <div className="p-6">
+                <div className="space-y-4">
+                    {Array.from({ length: 2 }).map((_, index) => (
+                        <div
+                            key={index}
+                            className="h-24 animate-pulse rounded-lg border border-slate-100 bg-slate-50"
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="p-6">
+                <div className="rounded-lg border border-red-100 bg-red-50 p-6 text-sm text-red-700">
+                    {error.message}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-6">
+            <div className="mb-6 flex items-center justify-between">
+                <div>
+                    <h3 className="text-lg font-semibold text-slate-900">Payment Methods</h3>
+                    <p className="text-sm text-slate-600">Manage your saved payment methods</p>
+                </div>
+                <Button variant="primary" size="sm">
+                    <Plus className="h-4 w-4" />
+                    Add Card
+                </Button>
+            </div>
+
+            {paymentMethods.length === 0 ? (
+                <EmptyState
+                    icon={CreditCard}
+                    title="No payment methods"
+                    description="Add a payment method to make checkout faster and easier."
+                    actionLabel="Add your first card"
+                    onAction={() => {
+                        // TODO: Implement add payment method modal
+                        alert('Add payment method functionality coming soon');
+                    }}
+                />
+            ) : (
+                <div className="space-y-4">
+                    {paymentMethods.map((method) => (
+                        <div
+                            key={method.id}
+                            className="flex items-center justify-between rounded-lg border border-slate-200 bg-white p-4 hover:shadow-md transition-shadow"
+                        >
+                            <div className="flex items-center gap-4">
+                                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-50">
+                                    <CreditCard className="h-6 w-6 text-primary-600" />
+                                </div>
+                                {/* <div>
+                                    <div className="flex items-center gap-2">
+                                        <p className="font-medium text-slate-900">
+                                            {method.card?.brand || 'Card'} •••• {method.card?.last4 || '****'}
+                                        </p>
+                                        {method.isDefault && (
+                                            <Badge variant="success">Default</Badge>
+                                        )}
+                                    </div>
+                                    <p className="text-sm text-slate-500">
+                                        Expires {method.card?.expMonth}/{method.card?.expYear}
+                                    </p>
+                                </div> */}
+                            </div>
+                            <button
+                                onClick={() => handleDelete(method.id)}
+                                disabled={deletingId === method.id}
+                                className="inline-flex items-center gap-2 rounded-full border border-red-200 px-3 py-1 text-sm font-semibold text-red-600 transition hover:border-red-300 hover:text-red-700 disabled:opacity-50"
+                            >
+                                <Trash2 className="h-4 w-4" />
+                                {deletingId === method.id ? 'Deleting...' : 'Delete'}
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/AccountSavedItemsTab.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { Heart, ShoppingCart } from 'lucide-react';
+import { useWishlist } from '@/providers/WishlistProvider';
+import { useWishlistProducts } from '@/hooks/useWishlistProducts';
+import { ProductCard } from './ProductCard';
+import { EmptyState } from './EmptyState';
+
+export function AccountSavedItemsTab() {
+    const { products: wishlistProductIds } = useWishlist();
+
+    const { products: wishlistProducts, isLoading, error } = useWishlistProducts(
+        wishlistProductIds as string[]
+    );
+
+    const products = wishlistProducts || [];
+    console.log(products);
+
+    if (isLoading) {
+        return (
+            <div className="p-6">
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {Array.from({ length: 3 }).map((_, index) => (
+                        <div
+                            key={index}
+                            className="h-80 animate-pulse rounded-lg border border-slate-100 bg-slate-50"
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="p-6">
+                <div className="rounded-lg border border-red-100 bg-red-50 p-6 text-sm text-red-700">
+                    {error.message}
+                </div>
+            </div>
+        );
+    }
+
+    if (products.length === 0) {
+        return (
+            <div className="p-6">
+                <EmptyState
+                    icon={Heart}
+                    title="No saved items"
+                    description="Items you save will appear here for easy access later."
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className="pb-24 p-6">
+            <div className="p-6 bg-white rounded-xl">
+                <div className="mb-4">
+                    <h3 className="text-lg font-semibold text-secondary">
+                        Saved for Later
+                    </h3>
+                    <p className="text-sm text-secondary">
+                        {products.length} {products.length === 1 ? 'item' : 'items'} saved
+                    </p>
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {products.map((product) => (
+                        <ProductCard key={product._id} product={product} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/AccountSettingsTab.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Bell, Lock, Trash2 } from 'lucide-react';
+import { Button } from './ui/Button';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+export function AccountSettingsTab() {
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+    const [emailNotifications, setEmailNotifications] = useState(true);
+    const [orderUpdates, setOrderUpdates] = useState(true);
+    const [promotionalEmails, setPromotionalEmails] = useState(false);
+
+    return (
+        <div className="p-6 space-y-6">
+            {/* Account Preferences */}
+            <div className="rounded-2xl border border-slate-200 bg-white p-6">
+                <div className="flex items-center gap-2 mb-4">
+                    <Bell className="h-5 w-5 text-secondary" />
+                    <h3 className="text-lg font-semibold text-secondary">Account Preferences</h3>
+                </div>
+                <div className="space-y-4">
+                    <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                        <div>
+                            <p className="text-sm font-medium text-secondary">Email Notifications</p>
+                            <p className="text-xs text-muted">Receive updates about your orders</p>
+                        </div>
+                        <input
+                            type="checkbox"
+                            checked={emailNotifications}
+                            onChange={(e) => setEmailNotifications(e.target.checked)}
+                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                        />
+                    </label>
+                    <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                        <div>
+                            <p className="text-sm font-medium text-secondary">Order Updates</p>
+                            <p className="text-xs text-muted">Get notified about shipping status</p>
+                        </div>
+                        <input
+                            type="checkbox"
+                            checked={orderUpdates}
+                            onChange={(e) => setOrderUpdates(e.target.checked)}
+                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                        />
+                    </label>
+                    <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                        <div>
+                            <p className="text-sm font-medium text-secondary">Promotional Emails</p>
+                            <p className="text-xs text-muted">Receive special offers and discounts</p>
+                        </div>
+                        <input
+                            type="checkbox"
+                            checked={promotionalEmails}
+                            onChange={(e) => setPromotionalEmails(e.target.checked)}
+                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                        />
+                    </label>
+                </div>
+            </div>
+
+            {/* Security */}
+            <div className="rounded-2xl border border-slate-200 bg-white p-6">
+                <div className="flex items-center gap-2 mb-4">
+                    <Lock className="h-5 w-5 text-secondary" />
+                    <h3 className="text-lg font-semibold text-secondary">Security</h3>
+                </div>
+                <div className="space-y-3">
+                    <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                        <div>
+                            <p className="text-sm font-medium text-secondary">Change Password</p>
+                            <p className="text-xs text-muted">Update your account password</p>
+                        </div>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => router.push(buildPath('/account/change-password'))}
+                        >
+                            Change
+                        </Button>
+                    </div>
+                    {/* <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                        <div>
+                            <p className="text-sm font-medium text-secondary">Two-Factor Authentication</p>
+                            <p className="text-xs text-muted">Add an extra layer of security</p>
+                        </div>
+                        <Button variant="outline" size="sm">
+                            Enable
+                        </Button>
+                    </div> */}
+                    <div className="flex items-center justify-between rounded-lg border border-red-100 bg-red-50 px-4 py-3">
+                        <div>
+                            <p className="text-sm font-medium text-red-900">Delete Account</p>
+                            <p className="text-xs text-red-600">Permanently delete your account and data</p>
+                        </div>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="border-red-200 text-red-600 hover:bg-red-50"
+                            onClick={() => {
+                                if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
+                                    alert('Account deletion functionality coming soon');
+                                }
+                            }}
+                        >
+                            <Trash2 className="h-4 w-4" />
+                            Delete
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/AddressFormModal.tsx

@@ -8,7 +8,7 @@ import { addressSchema, type AddressFormData } from '@/lib/validations/address';
 import { AddressesApi } from '@/lib/Apis/apis/addresses-api';
 import { Address } from '@/lib/Apis';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
-import { toast } from 'sonner';
+import { useNotification } from '@/providers/NotificationProvider';
 
 interface AddressFormModalProps {
   isOpen: boolean;
@@ -20,6 +20,7 @@ interface AddressFormModalProps {
 
 export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, initialAddress }: AddressFormModalProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const notification = useNotification();
 
   const {
     register,
@@ -69,7 +70,10 @@ export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpd
           country: data.country,
           phone: data.phone,
         }, initialAddress.id);
-        toast.success('Address updated successfully');
+        notification.success(
+          'Address updated',
+          'Your address has been updated successfully.'
+        );
         reset();
         onClose();
         if (onAddressUpdated) onAddressUpdated(response.data);
@@ -85,16 +89,25 @@ export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpd
           phone: data.phone,
         });
         if (response.status === 201) {
-          toast.success('Address added successfully');
+          notification.success(
+            'Address added',
+            'Your new address has been saved to your account.'
+          );
           reset();
           onClose();
           if (onAddressAdded) onAddressAdded(response.data);
         } else {
-          toast.error('Failed to add address');
+          notification.error(
+            'Could not add address',
+            'We could not save this address. Please try again.'
+          );
         }
       }
     } catch (error) {
-      toast.error('Failed to add address');
+      notification.error(
+        'Could not save address',
+        'Something went wrong while saving your address. Please try again.'
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -162,16 +175,16 @@ export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpd
           />
         </div>
         <div className="flex justify-end gap-4">
-          <Button
+          <button
             type="button"
-            variant="outline"
             onClick={onClose}
+            className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors text-secondary text-sm'
           >
             Cancel
-          </Button>
-          <Button type="submit" disabled={isSubmitting}>
+          </button>
+          <button type="submit" disabled={isSubmitting} className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm'>
             {isSubmitting ? 'Adding Address...' : 'Add Address'}
-          </Button>
+          </button>
         </div>
       </form>
     </Modal>

package/src/components/CartItem.tsx

@@ -51,77 +51,81 @@ export function CartItem({ item }: CartItemProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, x: -100 }}
-      className="relative bg-white rounded-lg shadow-sm border border-gray-200 p-4"
+      className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-[#5B9BD5]/30 transition-all duration-300"
     >
-      {/* Delete Icon - Top Right */}
-      <button
-        onClick={handleRemove}
-        className="absolute top-4 right-4 p-1 text-gray-400 hover:text-red-600 transition-colors"
-        aria-label="Remove item"
-      >
-        <Trash2 className="w-5 h-5" />
-      </button>
+
 
       <div className="flex gap-4 pr-8">
         {/* Product Image */}
-        <div className="relative w-20 h-24 rounded-md overflow-hidden flex-shrink-0 bg-gray-100">
+        <div className="w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
           <Image
             src={item.productVariantData.productMedia[0]?.file || '/placeholder-product.jpg'}
             alt={item.productVariantData.name}
-            fill
-            className="object-cover"
-            sizes="80px"
+            className="w-full h-full object-cover"
+            height={112}
+            width={112}
           />
         </div>
 
         {/* Product Info */}
         <div className="flex-1 min-w-0">
-          <h3 className="text-base font-bold text-gray-900">
-            {item.productVariantData.name}
-          </h3>
-          
-          {/* Attributes */}
-          {attributes.length > 0 && (
-            <p className="text-sm text-gray-500 mt-1">
-              {attributes.join(' ')}
-            </p>
-          )}
-
-          {/* Quantity Controls */}
-          <div className="flex items-center gap-2 mt-3">
-            <button
-              onClick={() => handleUpdateQuantity(item.quantity - 1)}
-              disabled={isUpdating || item.quantity <= 1}
-              className="p-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors rounded"
-            >
-              <Minus className="w-4 h-4 text-gray-600" />
-            </button>
-            <span className="px-3 font-medium min-w-[2rem] text-center text-gray-900">
-              {isUpdating ? (
-                <span className="inline-block h-4 w-4 align-middle animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
-              ) : (
-                item.quantity
-              )}
+          <div className="flex items-start justify-between gap-4 mb-3">
+            <div className="flex-1 min-w-0">
+              <h3 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2">
+                {item.productVariantData.name}
+              </h3>
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="font-['Poppins',sans-serif] text-[12px] text-[#676c80]">
+              Variant: <span className="font-medium text-[#2B4B7C]">{item.productVariantData.name}</span>
             </span>
-            <button
-              onClick={() => handleUpdateQuantity(item.quantity + 1)}
-              disabled={isUpdating || item.quantity >= (item.productVariantData.inventoryCount || 999)}
-              className="p-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors rounded"
-            >
-              <Plus className="w-4 h-4 text-gray-600" />
-            </button>
           </div>
-        </div>
+          </div>
+
+          {/* Delete Icon - Top Right */}
+          <button
+            onClick={handleRemove}
+            className="p-2 hover:bg-red-50 rounded-full transition-colors group"
+            aria-label="Remove item"
+          >
+            <Trash2 className="size-5 text-[#676c80] group-hover:text-red-500 transition-colors" />
+          </button>
+          </div>
+          
+          {/* Quantity and Price */}
+          <div className="flex items-center justify-between gap-4">
+            {/* Quantity Controls */}
+            <div className="flex items-center gap-3 bg-gray-50 rounded-full px-4 py-2">
+              <button
+                onClick={() => handleUpdateQuantity(item.quantity - 1)}
+                disabled={isUpdating || item.quantity <= 1}
+                className="p-1 hover:bg-white rounded-full transition-colors"
+              >
+                <Minus className="size-4 text-[#2B4B7C]" />
+              </button>
+              <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] min-w-[20px] text-center">
+                {item.quantity}
+              </span>
+              <button
+                onClick={() => handleUpdateQuantity(item.quantity + 1)}
+                disabled={isUpdating || item.quantity >= (item.productVariantData.inventoryCount || 999)}
+                className="p-1 hover:bg-white rounded-full transition-colors"
+              >
+                <Plus className="size-4 text-[#2B4B7C]" />
+              </button>
+            </div>
+
+            {/* Price */}
+            <div className="text-right">
+              <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-[#E67E50]">
+                {formatPrice(itemTotal)}
+              </p>
+              <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
+                {formatPrice(unitPrice)} each
+              </p>
+            </div>
+          </div>
+          </div>
 
-        {/* Pricing - Right Side */}
-        <div className="text-right flex-shrink-0">
-          <p className="text-lg font-bold text-orange-600">
-            {formatPrice(itemTotal)}
-          </p>
-          <p className="text-sm text-gray-500 mt-1">
-            {formatPrice(unitPrice)} each
-          </p>
-        </div>
       </div>
     </motion.div>
   );

package/src/components/Header.tsx

@@ -2,36 +2,50 @@
 
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ShoppingCart, User, Menu, X, Search, Heart } from 'lucide-react';
+import { ShoppingCart, User, Menu, X, Search, Heart, ChevronDown, Settings, LogOut } from 'lucide-react';
 import { useAuth } from '@/providers/AuthProvider';
 import { useCart } from '@/providers/CartProvider';
 import { useTheme } from '@/providers/ThemeProvider';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { getInitials } from '@/lib/utils/format';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
 
 export function Header() {
   const { config } = useTheme();
-  const { user, isAuthenticated } = useAuth();
+  const { user, isAuthenticated, logout } = useAuth();
   const { cart } = useCart() || { cart: { itemCount: 0 } };
   const { getWishlistCount } = useWishlist();
   const wishlistCount = getWishlistCount?.() || 0;
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const { buildPath } = useBasePath();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await logout();
+      router.push(buildPath('/'));
+    } catch (error) {
+      console.error('Logout failed:', error);
+    } finally {
+      setIsLoggingOut(false);
+      setIsDropdownOpen(false);
+    }
+  };
 
   const navLinks = [
     { href: buildPath('/shop'), label: 'Shop' },
-    { href: buildPath('/categories'), label: 'Categories' },
-    { href: buildPath('/orders'), label: 'Orders' },
-    { href: buildPath('/about'), label: 'About' },
-    { href: buildPath('/contact'), label: 'Contact' },
   ];
 
   return (
-    <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm">
+    <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
@@ -44,9 +58,6 @@ export function Header() {
                 className="object-contain"
               />
             </div>
-            <span className="text-2xl font-bold text-gray-900 hidden sm:block">
-              {config.storeName}
-            </span>
           </Link>
 
           {/* Desktop Navigation */}
@@ -134,12 +145,54 @@ export function Header() {
 
               {/* User Menu */}
               {isAuthenticated ? (
-                <Link
-                  href={buildPath('/account')}
-                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                >
-                  <User className="w-6 h-6 text-gray-700" />
-                </Link>
+                <div className="relative">
+                  <button
+                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                    className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 hover:bg-slate-50 transition-colors"
+                  >
+                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700">
+                      {getInitials(user?.firstname || '', user?.lastname || '')}
+                    </div>
+                    <ChevronDown className={`h-4 w-4 text-slate-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
+                  </button>
+
+                  {/* Dropdown Menu */}
+                  {isDropdownOpen && (
+                    <>
+                      <div
+                        className="fixed inset-0 z-10"
+                        onClick={() => setIsDropdownOpen(false)}
+                      />
+                      <div className="absolute right-0 top-full mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg z-20">
+                        <div className="p-2">
+                          <div className="px-3 py-2 border-b border-slate-200 mb-1">
+                            <p className="text-sm font-medium text-secondary truncate">
+                              {user?.firstname} {user?.lastname}
+                            </p>
+                            <p className="text-xs text-slate-500 truncate">{user?.email}</p>
+                          </div>
+                          <Link
+                            href={buildPath('/account')}
+                            onClick={() => setIsDropdownOpen(false)}
+                            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 transition-colors"
+                          >
+                            <User className="h-4 w-4" />
+                            My Account
+                          </Link>
+                          <div className="my-1 border-t border-slate-200" />
+                          <button
+                            onClick={handleLogout}
+                            disabled={isLoggingOut}
+                            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                          >
+                            <LogOut className="h-4 w-4" />
+                            {isLoggingOut ? 'Signing out...' : 'Sign Out'}
+                          </button>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
               ) : (
                 <Link
                   href={buildPath('/login')}