hey-pharmacist-ecommerce 1.1.11 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/CartItem.tsx

@@ -32,6 +32,18 @@ export function CartItem({ item }: CartItemProps) {
   };
 
   const itemTotal = item.productVariantData.finalPrice * item.quantity;
+  const unitPrice = item.productVariantData.finalPrice;
+
+  // Extract attributes from variant
+  const attributes: string[] = [];
+  if (item.productVariantData.attribute) {
+    if (item.productVariantData.attribute.color) {
+      attributes.push(`Color: ${item.productVariantData.attribute.color}`);
+    }
+    if (item.productVariantData.attribute.size) {
+      attributes.push(`Size: ${item.productVariantData.attribute.size}`);
+    }
+  }
 
   return (
     <motion.div
@@ -39,38 +51,52 @@ export function CartItem({ item }: CartItemProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, x: -100 }}
-      className="flex gap-4 bg-white p-4 rounded-xl border border-gray-200 hover:border-primary-300 transition-colors"
+      className="relative bg-white rounded-lg shadow-sm border border-gray-200 p-4"
     >
-      {/* Product Image */}
-      <div className="relative w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100">
-        <Image
-          src={item.productVariantData.productMedia[0]?.file || '/placeholder-product.jpg'}
-          alt={item.productVariantData.name}
-          fill
-          className="object-cover"
-        />
-      </div>
+      {/* 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>
 
-      {/* Product Info */}
-      <div className="flex-1 min-w-0">
-        <h3 className="text-lg font-semibold text-gray-900 truncate">
-          {item.productVariantData.name}
-        </h3>
-        <p className="text-sm text-gray-500 mt-1">
-          {formatPrice(item.productVariantData.finalPrice)} each
-        </p>
+      <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">
+          <Image
+            src={item.productVariantData.productMedia[0]?.file || '/placeholder-product.jpg'}
+            alt={item.productVariantData.name}
+            fill
+            className="object-cover"
+            sizes="80px"
+          />
+        </div>
 
-        {/* Quantity Controls */}
-        <div className="flex items-center gap-3 mt-3">
-          <div className="flex items-center border-2 border-gray-200 rounded-lg">
+        {/* 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 <= 0}
-              className="p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              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" />
+              <Minus className="w-4 h-4 text-gray-600" />
             </button>
-            <span className="px-4 font-medium min-w-[3rem] text-center">
+            <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" />
               ) : (
@@ -79,28 +105,23 @@ export function CartItem({ item }: CartItemProps) {
             </span>
             <button
               onClick={() => handleUpdateQuantity(item.quantity + 1)}
-              disabled={isUpdating || item.quantity >= item.productVariantData.inventoryCount}
-              className="p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              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" />
+              <Plus className="w-4 h-4 text-gray-600" />
             </button>
           </div>
-
-          <button
-            onClick={handleRemove}
-            className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-            aria-label="Remove item"
-          >
-            <Trash2 className="w-5 h-5" />
-          </button>
         </div>
-      </div>
 
-      {/* Item Total */}
-      <div className="text-right">
-        <p className="text-xl font-bold text-gray-900">
-          {formatPrice(itemTotal)}
-        </p>
+        {/* 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/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/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>
   );
 }