hey-pharmacist-ecommerce 1.1.12 → 1.1.14

package/src/components/FilterChips.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Check, Search } from 'lucide-react';
+import { Check, ChevronDown, X } from 'lucide-react';
 
 interface FilterChipsProps {
   label: string;
@@ -22,11 +22,8 @@ export function FilterChips({
   variant = 'primary',
 }: FilterChipsProps) {
   const [isOverflowOpen, setIsOverflowOpen] = useState(false);
-  const [filterSearchTerm, setFilterSearchTerm] = useState('');
   const overflowMenuRef = useRef<HTMLDivElement | null>(null);
 
-  const color = variant === 'primary' ? 'primary' : 'secondary';
-
   const { visibleFilters, overflowFilters } = useMemo(() => {
     const basePrimary = filters.slice(0, maxVisible);
 
@@ -52,19 +49,6 @@ export function FilterChips({
     };
   }, [filters, maxVisible, selected]);
 
-  const filteredOverflowFilters = useMemo(() => {
-    if (!filterSearchTerm.trim()) return overflowFilters;
-    return overflowFilters.filter((filter) =>
-      filter.toLowerCase().includes(filterSearchTerm.toLowerCase())
-    );
-  }, [filterSearchTerm, overflowFilters]);
-
-  useEffect(() => {
-    if (!isOverflowOpen) {
-      setFilterSearchTerm('');
-    }
-  }, [isOverflowOpen]);
-
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target as Node)) {
@@ -81,71 +65,76 @@ export function FilterChips({
     };
   }, [isOverflowOpen]);
 
+  const isPrimary = variant === 'primary';
+
   return (
-    <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
-      <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600">
-        <Icon className="h-4 w-4" />
-        {label}
-      </span>
-      <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-3">
-        <div className="flex flex-wrap gap-2">
-          {visibleFilters.map((filter) => (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-slate-500" />
+        <span className="text-sm font-medium text-slate-700">{label}</span>
+        {selected !== 'All' && (
+          <button
+            type="button"
+            onClick={() => onSelect('All')}
+            className="ml-auto text-xs text-primary-600 hover:text-primary-700 font-medium"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      
+      <div className="flex flex-wrap items-center gap-2">
+        {visibleFilters.map((filter) => {
+          const isSelected = selected === filter;
+          return (
             <button
               key={filter}
               type="button"
               onClick={() => onSelect(filter)}
-              className={`rounded-full border px-3 py-1 text-sm font-medium transition ${
-                selected === filter
-                  ? `border-${color}-600 bg-${color}-600 text-white shadow-lg shadow-${color}-500/30`
-                  : `border-slate-200 bg-slate-50 text-slate-600 hover:border-${color}-300 hover:text-${color}-600`
+              className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
+                isSelected
+                  ? isPrimary
+                    ? 'border-primary-500 bg-primary-500 text-white shadow-sm'
+                    : 'border-secondary-500 bg-secondary-500 text-white shadow-sm'
+                  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
               }`}
             >
               {filter}
+              {isSelected && <X className="h-3.5 w-3.5" />}
             </button>
-          ))}
-        </div>
+          );
+        })}
 
         {overflowFilters.length > 0 && (
           <div className="relative" ref={overflowMenuRef}>
             <button
               type="button"
               onClick={() => setIsOverflowOpen((prev) => !prev)}
-              className={`flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium transition ${
+              className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
                 overflowFilters.includes(selected)
-                  ? `border-${color}-600 bg-${color}-50 text-${color}-700 shadow-lg shadow-${color}-500/20`
-                  : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
+                  ? isPrimary
+                    ? 'border-primary-500 bg-primary-50 text-primary-700'
+                    : 'border-secondary-500 bg-secondary-50 text-secondary-700'
+                  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
               }`}
             >
               <span>{overflowFilters.includes(selected) ? selected : 'More'}</span>
-              <span className={`inline-flex h-5 min-w-[1.5rem] items-center justify-center rounded-full bg-${color}-100 px-1 text-xs font-semibold text-${color}-600`}>
-                {overflowFilters.length}
-              </span>
+              <ChevronDown className={`h-3.5 w-3.5 transition-transform ${isOverflowOpen ? 'rotate-180' : ''}`} />
             </button>
 
             <AnimatePresence>
               {isOverflowOpen && (
                 <motion.div
-                  initial={{ opacity: 0, y: 8 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: 8 }}
+                  initial={{ opacity: 0, y: 8, scale: 0.95 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 8, scale: 0.95 }}
                   transition={{ duration: 0.15 }}
-                  className="absolute right-0 z-50 mt-2 w-64 rounded-2xl border border-slate-100 bg-white shadow-xl shadow-primary-50"
+                  className="absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg"
                 >
-                  <div className="border-b border-slate-100 px-4 py-3">
-                    <div className="relative">
-                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-                      <input
-                        type="text"
-                        placeholder={`Search ${label.toLowerCase()}`}
-                        value={filterSearchTerm}
-                        onChange={(event) => setFilterSearchTerm(event.target.value)}
-                        className="w-full rounded-full border border-slate-200 bg-slate-50 py-2 pl-9 pr-3 text-sm text-slate-600 outline-none transition focus:border-primary-300 focus:bg-white focus:ring-2 focus:ring-primary-200"
-                      />
-                    </div>
-                  </div>
-                  <div className="max-h-60 overflow-y-auto px-2 py-2">
-                    {filteredOverflowFilters.length > 0 ? (
-                      filteredOverflowFilters.map((filter) => (
+                  <div className="max-h-64 overflow-y-auto p-1.5">
+                    {overflowFilters.map((filter) => {
+                      const isSelected = selected === filter;
+                      return (
                         <button
                           key={filter}
                           type="button"
@@ -153,34 +142,19 @@ export function FilterChips({
                             onSelect(filter);
                             setIsOverflowOpen(false);
                           }}
-                          className={`flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${
-                            selected === filter
-                              ? `bg-${color}-600 text-white shadow-lg shadow-${color}-500/30`
-                              : 'text-slate-600 hover:bg-slate-100'
+                          className={`flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition ${
+                            isSelected
+                              ? isPrimary
+                                ? 'bg-primary-500 text-white'
+                                : 'bg-secondary-500 text-white'
+                              : 'text-slate-700 hover:bg-slate-100'
                           }`}
                         >
                           <span>{filter}</span>
-                          {selected === filter && <Check className="h-4 w-4" />}
+                          {isSelected && <Check className="h-4 w-4" />}
                         </button>
-                      ))
-                    ) : (
-                      <p className="px-3 py-4 text-sm text-slate-500">No items found.</p>
-                    )}
-                  </div>
-                  <div className="flex items-center justify-between gap-2 border-t border-slate-100 px-4 py-3">
-                    <span className="text-xs font-semibold uppercase tracking-wide text-slate-400">
-                      Quick actions
-                    </span>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        onSelect('All');
-                        setIsOverflowOpen(false);
-                      }}
-                      className="text-xs font-semibold uppercase tracking-wide text-primary-600 hover:text-primary-700"
-                    >
-                      Reset to All
-                    </button>
+                      );
+                    })}
                   </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')}

package/src/components/Notification.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CheckCircle2, XCircle, AlertCircle, Info, X } from 'lucide-react';
+
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+
+export interface NotificationData {
+    id: string;
+    type: NotificationType;
+    message: string;
+    description?: string;
+    duration?: number;
+}
+
+interface NotificationProps {
+    notification: NotificationData;
+    onDismiss: (id: string) => void;
+}
+
+const notificationConfig = {
+    success: {
+        icon: CheckCircle2,
+        gradient: 'from-emerald-500 to-green-600',
+        iconColor: 'text-emerald-600',
+        bgColor: 'bg-emerald-50',
+        borderColor: 'border-emerald-200',
+    },
+    error: {
+        icon: XCircle,
+        gradient: 'from-red-500 to-rose-600',
+        iconColor: 'text-red-600',
+        bgColor: 'bg-red-50',
+        borderColor: 'border-red-200',
+    },
+    warning: {
+        icon: AlertCircle,
+        gradient: 'from-orange-500 to-amber-600',
+        iconColor: 'text-orange-600',
+        bgColor: 'bg-orange-50',
+        borderColor: 'border-orange-200',
+    },
+    info: {
+        icon: Info,
+        gradient: 'from-blue-500 to-indigo-600',
+        iconColor: 'text-blue-600',
+        bgColor: 'bg-blue-50',
+        borderColor: 'border-blue-200',
+    },
+};
+
+export function Notification({ notification, onDismiss }: NotificationProps) {
+    const [progress, setProgress] = useState(100);
+    const config = notificationConfig[notification.type];
+    const Icon = config.icon;
+    const duration = notification.duration || 4000;
+
+    useEffect(() => {
+        const startTime = Date.now();
+        const timer = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            const remaining = Math.max(0, 100 - (elapsed / duration) * 100);
+            setProgress(remaining);
+
+            if (remaining === 0) {
+                clearInterval(timer);
+                onDismiss(notification.id);
+            }
+        }, 16);
+
+        return () => clearInterval(timer);
+    }, [notification.id, duration, onDismiss]);
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: -20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, x: 100, scale: 0.95 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+            className={`relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
+        >
+            {/* Gradient accent bar */}
+            <div className={`h-1 bg-gradient-to-r ${config.gradient}`} />
+
+            <div className="p-4 flex items-start gap-3">
+                {/* Icon */}
+                <motion.div
+                    initial={{ scale: 0, rotate: -180 }}
+                    animate={{ scale: 1, rotate: 0 }}
+                    transition={{ delay: 0.1, type: 'spring', stiffness: 500 }}
+                    className={`size-10 rounded-full ${config.bgColor} flex items-center justify-center shrink-0`}
+                >
+                    <Icon className={`size-5 ${config.iconColor}`} />
+                </motion.div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                    <p className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] mb-1">
+                        {notification.message}
+                    </p>
+                    {notification.description && (
+                        <p className="font-['Poppins',sans-serif] text-[12px] text-[#676c80] leading-relaxed">
+                            {notification.description}
+                        </p>
+                    )}
+                </div>
+
+                {/* Close button */}
+                <button
+                    onClick={() => onDismiss(notification.id)}
+                    className="p-1.5 hover:bg-gray-100 rounded-full transition-colors shrink-0"
+                    aria-label="Dismiss notification"
+                >
+                    <X className="size-4 text-[#676c80]" />
+                </button>
+            </div>
+
+            {/* Progress bar */}
+            <div className="h-1 bg-gray-100">
+                <motion.div
+                    className={`h-full bg-gradient-to-r ${config.gradient}`}
+                    style={{ width: `${progress}%` }}
+                    transition={{ duration: 0.016, ease: 'linear' }}
+                />
+            </div>
+        </motion.div>
+    );
+}
+
+interface NotificationContainerProps {
+    notifications: NotificationData[];
+    onDismiss: (id: string) => void;
+}
+
+export function NotificationContainer({ notifications, onDismiss }: NotificationContainerProps) {
+    return (
+        <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3 pointer-events-none">
+            <AnimatePresence mode="popLayout">
+                {notifications.map((notification) => (
+                    <div key={notification.id} className="pointer-events-auto">
+                        <Notification notification={notification} onDismiss={onDismiss} />
+                    </div>
+                ))}
+            </AnimatePresence>
+        </div>
+    );
+}

package/src/components/OrderCard.tsx

@@ -2,91 +2,124 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Package, Calendar, CreditCard, ExternalLink } from 'lucide-react';
+import { CreditCard } from 'lucide-react';
 import { PaymentPaymentMethodEnum, PaymentPaymentStatusEnum, PopulatedOrder } from '@/lib/Apis';
 import { formatPrice, formatDate } from '@/lib/utils/format';
 import { Badge } from './ui/Badge';
-import Link from 'next/link';
 import Image from 'next/image';
-import { useBasePath } from '@/providers/BasePathProvider';
 
 interface OrderCardProps {
   order: PopulatedOrder;
 }
 
 export function OrderCard({ order }: OrderCardProps) {
-  const { buildPath } = useBasePath();
   const config = order.orderStatus;
+  const itemCount = order.items?.length || 0;
+  const showPriceBreakdown = (order.shippingCost && order.shippingCost > 0) || 
+                             (order.tax && order.tax > 0) || 
+                             (order.discountedAmount && order.discountedAmount > 0);
 
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      whileHover={{ y: -4 }}
-      className="bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100"
+      className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-shadow"
     >
-      {/* Header */}
-      <div className="flex justify-between items-start mb-4">
-        <div>
-          <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
-            <Package className="w-5 h-5 text-primary-600" />
-            Order #{order?._id?.slice(0, 6) || ''}
+      {/* Header - Compact */}
+      <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
+        <div className="flex items-center gap-3">
+          <h3 className="text-base font-bold text-slate-900">
+            Order #{order?._id?.slice(0, 8) || ''}
           </h3>
-          <p className="text-sm text-gray-500 mt-1 flex items-center gap-2">
-            <Calendar className="w-4 h-4" />
-            {formatDate(order.createdAt || new Date(), 'long')}
-          </p>
+          <Badge variant={config as 'success' | 'warning' | 'primary' | 'danger' | 'gray'}>{config}</Badge>
+          <span className="text-xs text-gray-500">
+            {formatDate(order.createdAt || new Date(), 'short')}
+          </span>
+        </div>
+        <div className="text-right">
+          <p className="text-lg font-bold text-slate-900">{formatPrice(order.grandTotal || 0)}</p>
+          {itemCount > 0 && (
+            <p className="text-xs text-gray-500">{itemCount} {itemCount === 1 ? 'item' : 'items'}</p>
+          )}
         </div>
-        <Badge variant={config as 'success' | 'warning' | 'primary' | 'danger' | 'gray'}>{config}</Badge>
       </div>
 
-      {/* Items Preview */}
+      {/* Items List - Compact */}
       <div className="space-y-2 mb-4">
-        {order.items?.slice(0, 2).map((item) => (
-          <div key={item.productVariantId} className="flex items-center gap-3 text-sm">
-            <Image src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'} alt={item?.productVariantData?.name || 'Product image'} width={48} height={48} className="w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0" />
-            <div className="flex-1 min-w-0">
-              <p className="font-medium text-gray-900 truncate">{item.productVariantData.name}</p>
-              <p className="text-gray-500">Qty: {item.quantity}</p>
-            </div>
-            <p className="font-semibold text-gray-900">{formatPrice(item.productVariantData.finalPrice)}</p>
-          </div>
-        ))}
-        {order.items?.length && order.items?.length > 2 && (
-          <p className="text-sm text-gray-500 pl-15">
-            +{order.items.length - 2} more item{order.items.length - 2 > 1 ? 's' : ''}
+        {order.items && order.items.length > 0 ? (
+          order.items.slice(0, 3).map((item) => {
+            const itemPrice = item.productVariantData?.finalPrice || 0;
+            const itemTotal = itemPrice * item.quantity;
+
+            return (
+              <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
+                <div className="relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden">
+                  <Image
+                    src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
+                    alt={item?.productVariantData?.name || 'Product image'}
+                    fill
+                    className="object-cover"
+                    sizes="48px"
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium text-slate-900 truncate text-sm">
+                    {item.productVariantData?.name || 'Unknown Product'}
+                  </p>
+                  <p className="text-xs text-gray-500">Qty: {item.quantity}</p>
+                </div>
+                <p className="font-semibold text-slate-900 text-sm">{formatPrice(itemTotal)}</p>
+              </div>
+            );
+          })
+        ) : (
+          <p className="text-sm text-gray-500 text-center py-2">No items found</p>
+        )}
+        {order.items && order.items.length > 3 && (
+          <p className="text-xs text-gray-500 text-center pt-1">
+            +{order.items.length - 3} more {order.items.length - 3 === 1 ? 'item' : 'items'}
           </p>
         )}
       </div>
 
-      {/* Footer */}
-      <div className="flex justify-between items-center pt-4 border-t border-gray-200">
-        <div>
-          <p className="text-sm text-gray-500">Total Amount</p>
-          <p className="text-2xl font-bold text-gray-900">{formatPrice(order.grandTotal || 0)}</p>
-        </div>
-        
-        <div className="flex gap-2">
-          {order.payment.paymentStatus !== PaymentPaymentStatusEnum.Paid && order.payment.paymentMethod === PaymentPaymentMethodEnum.Card && (
-            <a
-              href={order?.payment?.paymentIntent?.hostedInvoiceUrl || ''}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-            >
-              <CreditCard className="w-4 h-4" />
-              Pay Now
-            </a>
+      {/* Price Breakdown - Only if needed */}
+      {showPriceBreakdown && (
+        <div className="mb-4 pb-4 border-b border-gray-200 space-y-1 text-xs">
+          {order.shippingCost !== undefined && order.shippingCost > 0 && (
+            <div className="flex justify-between text-gray-600">
+              <span>Shipping</span>
+              <span>{formatPrice(order.shippingCost)}</span>
+            </div>
           )}
-          {/* <Link
-            href={buildPath(`/orders/${order.id}`)}
-            className="inline-flex items-center gap-2 px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+          {order.tax !== undefined && order.tax > 0 && (
+            <div className="flex justify-between text-gray-600">
+              <span>Tax</span>
+              <span>{formatPrice(order.tax)}</span>
+            </div>
+          )}
+          {order.discountedAmount !== undefined && order.discountedAmount > 0 && (
+            <div className="flex justify-between text-green-600">
+              <span>Discount</span>
+              <span>-{formatPrice(order.discountedAmount)}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Footer Actions */}
+      {order.payment?.paymentStatus !== PaymentPaymentStatusEnum.Paid && order.payment?.paymentMethod === PaymentPaymentMethodEnum.Card && (
+        <div className="flex justify-end">
+          <button
+            onClick={() => {
+              window.open(order?.payment?.hostedInvoiceUrl || '', '_blank')
+            }}
+            className="inline-flex items-center gap-2 rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 text-sm font-medium transition-colors"
           >
-            View Details
-            <ExternalLink className="w-4 h-4" />
-          </Link> */}
+            <CreditCard className="w-4 h-4" />
+            Pay Now
+          </button>
         </div>
-      </div>
+      )}
     </motion.div>
   );
 }