hey-pharmacist-ecommerce 1.1.35 → 1.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.35",
+  "version": "1.1.37",
   "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/AccountOrdersTab.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React from 'react';
 import { Package, Truck } from 'lucide-react';
 import { useCurrentOrders } from '@/hooks/useOrders';
@@ -102,7 +104,7 @@ export function AccountOrdersTab() {
                                         <div key={item.productVariantId || index} className="flex items-center gap-3">
                                             <div className="relative w-12 h-12 rounded-lg bg-slate-100 shrink-0 overflow-hidden">
                                                 <Image
-                                                    src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.png'}
+                                                    src={item?.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                                     alt={item?.productVariantData?.name || 'Product image'}
                                                     fill
                                                     className="object-cover"

package/src/components/CartItem.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Minus, Plus, Trash2 } from 'lucide-react';
+
 import { formatPrice } from '@/lib/utils/format';
 import { useCart } from '@/providers/CartProvider';
 import Image from 'next/image';
@@ -52,10 +55,11 @@ export function CartItem({ item }: CartItemProps) {
 
 
       <div className="flex gap-4 pr-8">
-        {/* Product Image */}
+
+
         <div className="w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
           <Image
-            src={item.productVariantData.media[0]?.file || '/placeholder-product.png'}
+            src={item.productVariantData.media[0]?.file || PLACEHOLDER_IMAGE_SRC}
             alt={item.productVariantData.name}
             className="w-full h-full object-cover"
             height={112}

package/src/components/NotificationBell.tsx

@@ -5,29 +5,82 @@ import { Bell } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useNotificationCenter } from '@/providers/NotificationCenterProvider';
 
+import { NotificationModal } from './NotificationModal';
+
 export function NotificationBell() {
-    const { unreadCount, openDrawer } = useNotificationCenter();
+    const { unreadCount, isDrawerOpen, openDrawer, closeDrawer } = useNotificationCenter();
+
+    const handleToggle = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (isDrawerOpen) {
+            closeDrawer();
+        } else {
+            openDrawer();
+        }
+    };
 
     return (
-        <button
-            onClick={openDrawer}
-            className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
-            aria-label="Notifications"
-        >
-            <Bell className="w-6 h-6 text-gray-700" />
-
-            <AnimatePresence>
-                {unreadCount > 0 && (
-                    <motion.span
-                        initial={{ scale: 0 }}
-                        animate={{ scale: 1 }}
-                        exit={{ scale: 0 }}
-                        className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
-                    >
-                        {unreadCount > 99 ? '99+' : unreadCount}
-                    </motion.span>
-                )}
-            </AnimatePresence>
-        </button>
+        <div className="relative">
+            <motion.button
+                id="notification-bell-button"
+                onClick={handleToggle}
+                onMouseDown={(e) => e.stopPropagation()}
+                className={`relative p-2.5 rounded-xl transition-all duration-300 group flex items-center justify-center ${isDrawerOpen
+                    ? 'bg-primary-50 text-primary-600'
+                    : 'hover:bg-gradient-to-br hover:from-primary-50 hover:to-primary-100/50 text-gray-700'
+                    }`}
+                aria-label="Notifications"
+                whileHover={isDrawerOpen ? {} : { scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+            >
+                {/* Bell Icon */}
+                <Bell
+                    className={`w-6 h-6 transition-colors duration-300 ${isDrawerOpen ? 'text-primary-600 bg-gray-100 rounded-lg p-2 w-10 h-10 transition-all duration-300' : 'group-hover:text-primary-600'
+                        }`}
+                    strokeWidth={2}
+                />
+
+                {/* Unread Badge */}
+                <AnimatePresence>
+                    {unreadCount > 0 && (
+                        <>
+                            {/* Pulse ring animation */}
+                            <motion.span
+                                initial={{ scale: 0.8, opacity: 0 }}
+                                animate={{
+                                    scale: [1, 1.4, 1.4],
+                                    opacity: [0.6, 0, 0]
+                                }}
+                                exit={{ scale: 0, opacity: 0 }}
+                                transition={{
+                                    duration: 2,
+                                    repeat: Infinity,
+                                    repeatDelay: 0.5
+                                }}
+                                className="absolute -top-0.5 -right-0.5 w-6 h-6 bg-red-500 rounded-full"
+                            />
+
+                            {/* Badge */}
+                            <motion.span
+                                initial={{ scale: 0, rotate: -180 }}
+                                animate={{ scale: 1, rotate: 0 }}
+                                exit={{ scale: 0, rotate: 180 }}
+                                transition={{
+                                    type: 'spring',
+                                    damping: 15,
+                                    stiffness: 300
+                                }}
+                                className="absolute -top-1 -right-1 min-w-[20px] h-5 bg-gradient-to-br from-red-500 to-red-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center px-1.5 shadow-lg shadow-red-500/40 border-2 border-white"
+                            >
+                                {unreadCount > 99 ? '99+' : unreadCount}
+                            </motion.span>
+                        </>
+                    )}
+                </AnimatePresence>
+            </motion.button>
+
+            {/* Notification Dropdown */}
+            <NotificationModal />
+        </div>
     );
 }

package/src/components/NotificationModal.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import React, {
+    useEffect,
+    useRef,
+    useCallback,
+    useMemo,
+} from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Settings, CheckCheck, BellOff } from 'lucide-react';
+import { useNotificationCenter } from '@/providers/NotificationCenterProvider';
+import { NotificationCard } from './NotificationCard';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+const modalVariants = {
+    hidden: { opacity: 0, y: -8, scale: 0.96 },
+    visible: { opacity: 1, y: 0, scale: 1 },
+    exit: { opacity: 0, y: -8, scale: 0.96 },
+};
+
+export function NotificationModal() {
+    const {
+        isDrawerOpen,
+        closeDrawer,
+        notifications,
+        unreadCount,
+        isLoading,
+        markAsRead,
+        markAllAsRead,
+        deleteNotification,
+        loadMore,
+        hasMore,
+    } = useNotificationCenter();
+
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const lastScrollTrigger = useRef(0);
+
+    /* ---------------------------- Handlers ---------------------------- */
+
+    const handleScroll = useCallback(() => {
+        if (!scrollRef.current || isLoading || !hasMore) return;
+
+        const now = Date.now();
+        if (now - lastScrollTrigger.current < 300) return;
+
+        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+        if ((scrollTop + clientHeight) / scrollHeight > 0.8) {
+            lastScrollTrigger.current = now;
+            loadMore();
+        }
+    }, [isLoading, hasMore, loadMore]);
+
+    const handleSettingsClick = useCallback(() => {
+        closeDrawer();
+        router.push(buildPath('/account/notifications'));
+    }, [closeDrawer, router, buildPath]);
+
+
+    useEffect(() => {
+        if (!isDrawerOpen) return;
+
+        modalRef.current?.focus();
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') closeDrawer();
+        };
+
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [isDrawerOpen, closeDrawer]);
+
+    useEffect(() => {
+        if (!isDrawerOpen) return;
+
+        const handleClickOutside = (e: MouseEvent) => {
+            const bellButton = document.getElementById('notification-bell-button');
+            if (
+                modalRef.current &&
+                !modalRef.current.contains(e.target as Node) &&
+                !bellButton?.contains(e.target as Node)
+            ) {
+                closeDrawer();
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isDrawerOpen, closeDrawer]);
+
+    const hasNotifications = notifications.length > 0;
+
+
+    return (
+        <AnimatePresence>
+            {isDrawerOpen && (
+                <>
+                    {/* Backdrop */}
+                    {/* <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 0.4 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black z-40"
+                    /> */}
+
+                    <motion.div
+                        ref={modalRef}
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="notification-title"
+                        tabIndex={-1}
+                        variants={modalVariants}
+                        initial="hidden"
+                        animate="visible"
+                        exit="exit"
+                        transition={{ type: 'spring', stiffness: 350, damping: 28 }}
+                        className="absolute top-full lg:right-0 mt-1 lg:w-screen lg:max-w-sm bg-white rounded-2xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.15)] z-[100] flex flex-col overflow-hidden border border-gray-100 origin-top-right rounded-lg border border-slate-200 bg-white shadow-lg"
+                        style={{ maxHeight: 'calc(100vh - 120px)' }}
+                    >
+                        {/* Elegant arrow pointer connecting to the bell */}
+                        <div className="absolute -top-1 right-5 w-3 h-3 bg-white border-l border-t border-gray-100 transform rotate-45 z-10" />
+                        {/* Header */}
+                        <div className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-primary-50 to-white">
+                            <div className="flex items-center gap-2">
+                                <h2
+                                    id="notification-title"
+                                    className="text-lg font-bold text-gray-900"
+                                >
+                                    Notifications
+                                </h2>
+                                <span
+                                    aria-live="polite"
+                                    className="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full"
+                                >
+                                    {unreadCount}
+                                </span>
+                            </div>
+
+                            <div className="flex items-center gap-1">
+                                {unreadCount > 0 && (
+                                    <button
+                                        onClick={markAllAsRead}
+                                        title="Mark all as read"
+                                        className="p-2 rounded-lg hover:bg-white transition"
+                                    >
+                                        <CheckCheck className="w-4 h-4 text-gray-600" />
+                                    </button>
+                                )}
+
+                                <button
+                                    onClick={handleSettingsClick}
+                                    title="Notification settings"
+                                    className="p-2 rounded-lg hover:bg-white transition"
+                                >
+                                    <Settings className="w-4 h-4 text-gray-600" />
+                                </button>
+
+                                <button
+                                    onClick={closeDrawer}
+                                    aria-label="Close notifications"
+                                    className="p-2 rounded-lg hover:bg-red-50 transition"
+                                >
+                                    <X className="w-4 h-4 text-gray-600" />
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* List */}
+                        <div
+                            ref={scrollRef}
+                            onScroll={handleScroll}
+                            className="flex-1 overflow-y-auto p-3 space-y-2 bg-gray-50 scrollbar-thin scrollbar-thumb-gray-300"
+                        >
+                            {!hasNotifications && !isLoading ? (
+                                <div className="flex flex-col items-center justify-center py-14 text-center">
+                                    <BellOff className="w-10 h-10 text-gray-400 mb-3" />
+                                    <p className="text-sm font-medium text-gray-700">
+                                        No notifications yet
+                                    </p>
+                                    <p className="text-xs text-gray-500 mt-1">
+                                        You’re all caught up 🎉
+                                    </p>
+                                </div>
+                            ) : (
+                                <>
+                                    {notifications.map((notification) => (
+                                        <NotificationCard
+                                            key={notification._id}
+                                            notification={notification}
+                                            onMarkAsRead={markAsRead}
+                                            onDelete={deleteNotification}
+                                        />
+                                    ))}
+
+                                    {isLoading && (
+                                        <div className="space-y-2 py-2">
+                                            {[...Array(3)].map((_, i) => (
+                                                <div
+                                                    key={i}
+                                                    className="h-16 rounded-xl bg-gray-200 animate-pulse"
+                                                />
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    {!hasMore && hasNotifications && (
+                                        <div className="text-center py-3 text-xs text-gray-500">
+                                            You’re all caught up 🎉
+                                        </div>
+                                    )}
+                                </>
+                            )}
+                        </div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+}

package/src/components/OrderCard.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useRef, useState } from 'react';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { CreditCard, Star, Trash2 } from 'lucide-react';
@@ -106,7 +108,7 @@ export function OrderCard({ order, onDelete }: OrderCardProps) {
                 <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
                   <div className="relative w-12 h-12 rounded-sm bg-gray-100 shrink-0 overflow-hidden">
                     <Image
-                      src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.png'}
+                      src={item?.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                       alt={item?.productVariantData?.name || 'Product image'}
                       fill
                       className="object-cover"

package/src/components/ProductCard.tsx

@@ -13,6 +13,7 @@ import { useBasePath } from '@/providers/BasePathProvider';
 import { QuickViewModal } from './QuickViewModal';
 import { useNotification } from '@/providers/NotificationProvider';
 import { useAuth } from '@/providers/AuthProvider';
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
 
 interface ProductCardProps {
   product: Product;
@@ -157,8 +158,12 @@ export function ProductCard({
     return selectedVariant ? selectedVariant.inventoryCount : product.variants?.[0]?.inventoryCount;
   }, [selectedVariant, product.variants]);
 
+
+
+  // ... (inside component)
+
   const imageSource = useMemo(() => {
-    const src = selectedVariantImage || selectedVariant?.media?.[0]?.file || product.media?.[0]?.file || '/placeholder-product.png';
+    const src = selectedVariantImage || selectedVariant?.media?.[0]?.file || product.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC;
     return {
       src,
       alt: product.name || 'Product image'

package/src/components/QuickViewModal.tsx

@@ -210,7 +210,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                       }}
                       className={`size-10 rounded-full border-2 transition-all ${selectedVariantIndex === index
                         ? 'border-primary scale-110'
-                        : 'border-gray-200 hover:border-primary/50'
+                        : 'border-gray-200 hover:border-primary-50'
                         }`}
                       style={{ backgroundColor: variant.colorHex }}
                       title={variant.color}

package/src/lib/constants/assets.ts

@@ -0,0 +1 @@
+export const PLACEHOLDER_IMAGE_SRC = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjNmNGY2Ii8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzljYTNhZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSI+Tm8gSW1hZ2U8L3RleHQ+CiAgPHJlY3QgeD0iMTUwIiB5PSIxMjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBzdHJva2U9IiM5Y2EzYWYiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgcng9IjgiLz4KICA8cGF0aCBkPSJNMTUwIDE4MCBMMTcwIDE2MCBMMjAwIDE5MCBMMjIwIDE3MCBMMjUwIDIwMCBMMjUwIDIyMCBMMTUwIDIyMCBaIiBmaWxsPSIjOWNhM2FmIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+`;

package/src/providers/EcommerceProvider.tsx

@@ -43,7 +43,6 @@ export function EcommerceProvider({ config, children, withToaster = true, basePa
                   <DiscountProvider>
                     <WishlistProvider>
                       {children}
-                      <NotificationDrawer />
                     </WishlistProvider>
                   </DiscountProvider>
                 </CartProvider>
@@ -55,4 +54,3 @@ export function EcommerceProvider({ config, children, withToaster = true, basePa
     </QueryClientProvider>
   );
 }
-

package/src/screens/CheckoutScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
@@ -868,7 +870,7 @@ export function CheckoutScreen() {
                               {/* Provider Logo */}
                               <div className="shrink-0">
                                 <Image
-                                  src={rate.providerImage75 || '/placeholder-product.png'}
+                                  src={rate.providerImage75 || PLACEHOLDER_IMAGE_SRC}
                                   alt={rate.provider}
                                   className="w-12 h-12 rounded-lg object-contain bg-white border border-gray-200 p-1"
                                   onError={(e: any) => {
@@ -987,7 +989,7 @@ export function CheckoutScreen() {
                   {cart?.cartBody?.items?.map((item: any) => (
                     <div key={item.productVariantId || item.id} className="flex gap-3">
                       <div className="w-16 h-16 rounded-xl overflow-hidden bg-white shrink-0">
-                        <Image src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.png'} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
+                        <Image src={item.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
@@ -1008,8 +1010,8 @@ export function CheckoutScreen() {
 
                 {/* Coupon Code Section */}
                 <div className="mb-6">
-                  <CouponCodeInput 
-                    userId={user?.id} 
+                  <CouponCodeInput
+                    userId={user?.id}
                     className="mb-4"
                   />
                 </div>

package/src/screens/OrderDetailScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React from 'react';
 import { motion } from 'framer-motion';
 import {
@@ -36,7 +38,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
     if (isLoading) {
         return (
             <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
-                <div className="w-16 h-16 border-4 border-primary/20 border-t-primary rounded-full animate-spin mb-4" />
+                <div className="w-16 h-16 border-4 border-primary-20 border-t-primary rounded-full animate-spin mb-4" />
                 <p className="text-muted font-medium animate-pulse">Retrieving order details...</p>
             </div>
         );
@@ -143,9 +145,11 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                         <div className="divide-y divide-slate-100">
                             {items.map((item, idx) => (
                                 <div key={item._id || idx} className="p-6 flex gap-6 group hover:bg-slate-50/50 transition-colors">
+
+
                                     <div className="relative w-20 h-20 bg-slate-100 rounded-2xl overflow-hidden shrink-0 border border-slate-100 group-hover:scale-105 transition-transform duration-300">
                                         <Image
-                                            src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.png'}
+                                            src={item.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                             alt={item.productVariantData?.name || 'Item'}
                                             fill
                                             className="object-cover"
@@ -225,7 +229,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                     <motion.div
                         initial={{ opacity: 0, x: 20 }}
                         animate={{ opacity: 1, x: 0 }}
-                        className="bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary/20 sticky top-8"
+                        className="bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary-20 sticky top-8"
                     >
                         <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
                             Summary View

package/src/screens/ProductDetailScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useEffect, useState, useMemo } from 'react';
 import { motion } from 'framer-motion';
 import {
@@ -435,8 +437,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                             type="button"
                             onClick={() => setActiveImageIndex(index)}
                             className={`relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index
-                              ? 'border-primary/50 ring-2 ring-primary/80 ring-offset-2 shadow-md'
-                              : 'border-slate-200 hover:border-primary/50'
+                              ? 'border-primary-50 ring-2 ring-primary-80 ring-offset-2 shadow-md'
+                              : 'border-slate-200 hover:border-primary-50'
                               }`}
                           >
                             <Image
@@ -555,15 +557,15 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           const variantImage = variant.media?.[0]?.file
                             || product.media?.[0]?.file
                             || product.images?.[0]
-                            || '/placeholder-product.png';
+                            || PLACEHOLDER_IMAGE_SRC;
                           return (
                             <button
                               key={variant._id}
                               type="button"
                               onClick={() => handleVariantSelect(variant)}
                               className={`flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected
-                                ? 'border-primary bg-primary/5'
-                                : 'border-gray-200 hover:border-primary/50'
+                                ? 'border-primary bg-primary-5'
+                                : 'border-gray-200 hover:border-primary-50'
                                 }`}
                             >
                               <div className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
@@ -658,7 +660,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       )
                       }
                     </button>
-                    <button className="sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary/5 transition-all flex items-center justify-center"
+                    <button className="sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary-5 transition-all flex items-center justify-center"
                       onClick={handleToggleFavorite}>
                       <Heart className={`h-4 w-4  ${isFavorited ? 'fill-red-500 text-red-500' : 'text-primary'}`} />
                     </button>

package/src/screens/ShopScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import {
   useCallback,
   useEffect,
@@ -843,7 +845,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     type="button"
                     onClick={applyCustomPrice}
                     disabled={!isCustomPriceDirty}
-                    className="w-full rounded-lg border border-primary bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary/20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
+                    className="w-full rounded-lg border border-primary bg-primary-10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary-20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
                   >
                     Apply
                   </button>
@@ -941,7 +943,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
               <div className="relative">
                 <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter
                   ? 'bg-white/20'
-                  : 'bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                  : 'bg-linear-to-br from-primary-10 to-secondary-10 group-hover:scale-110'
                   }`}>
                   <Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-primary'
                     }`} />
@@ -976,7 +978,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   <div className="relative">
                     <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected
                       ? 'bg-white/20'
-                      : 'bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                      : 'bg-linear-to-br from-primary-10 to-secondary-10 group-hover:scale-110'
                       }`}>
                       <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-primary'
                         }`} />
@@ -1126,7 +1128,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                             >
                               <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
                                 <Image
-                                  src={product.media?.[0]?.file || '/placeholder-product.png'}
+                                  src={product.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                   alt={product.name}
                                   fill
                                   className="object-cover transition duration-500 group-hover:scale-105"

package/src/screens/WishlistScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useEffect, useMemo, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
@@ -347,7 +349,7 @@ export default function WishlistScreen() {
                                                             <div className="relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40">
                                                                 <Image
                                                                     fill
-                                                                    src={product.media?.[0]?.file || '/placeholder-product.png'}
+                                                                    src={product.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                                                     alt={product.name || 'Wishlist item'}
                                                                     className="h-full w-full object-cover"
                                                                 />
@@ -389,7 +391,7 @@ export default function WishlistScreen() {
                                                                     <Button
                                                                         size="sm"
                                                                         onClick={() => router.push(buildPath(`/products/${product._id}`))}
-                                                                        className='bg-primary/90 text-white hover:bg-primary/70'
+                                                                        className='bg-primary-90 text-white hover:bg-primary-70'
                                                                     >
                                                                         View details
                                                                     </Button>