hey-pharmacist-ecommerce 1.0.0

package/src/screens/LoginScreen.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Lock, Mail, Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useAuth } from '@/providers/AuthProvider';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { toast } from 'sonner';
+import Link from 'next/link';
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export function LoginScreen() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirectUrl = searchParams?.get('redirect') || '/';
+  const { login } = useAuth();
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    setIsSubmitting(true);
+    try {
+      await login(data);
+      toast.success('Welcome back!');
+      router.push(redirectUrl);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Invalid credentials');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-600 flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md"
+      >
+        <div className="bg-white rounded-3xl shadow-2xl p-8">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Lock className="w-8 h-8 text-primary-600" />
+            </div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h1>
+            <p className="text-gray-600">Sign in to your account to continue</p>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div>
+              <Input
+                type="email"
+                label="Email Address"
+                placeholder="you@example.com"
+                {...register('email')}
+                error={errors.email?.message}
+              />
+            </div>
+
+            <div className="relative">
+              <Input
+                type={showPassword ? 'text' : 'password'}
+                label="Password"
+                placeholder="••••••••"
+                {...register('password')}
+                error={errors.password?.message}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-[42px] text-gray-500 hover:text-gray-700"
+              >
+                {showPassword ? (
+                  <EyeOff className="w-5 h-5" />
+                ) : (
+                  <Eye className="w-5 h-5" />
+                )}
+              </button>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  className="w-4 h-4 text-primary-600 rounded"
+                />
+                <span className="text-sm text-gray-700">Remember me</span>
+              </label>
+              <Link
+                href="/forgot-password"
+                className="text-sm text-primary-600 hover:text-primary-700 font-medium"
+              >
+                Forgot password?
+              </Link>
+            </div>
+
+            <Button
+              type="submit"
+              size="lg"
+              isLoading={isSubmitting}
+              className="w-full"
+            >
+              Sign In
+            </Button>
+          </form>
+
+          {/* Divider */}
+          <div className="relative my-8">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-200"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-4 bg-white text-gray-500">New to our store?</span>
+            </div>
+          </div>
+
+          {/* Register Link */}
+          <Link href="/register">
+            <Button variant="outline" size="lg" className="w-full">
+              Create an Account
+            </Button>
+          </Link>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+

package/src/screens/OrdersScreen.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Package, ChevronLeft, ChevronRight } from 'lucide-react';
+import { OrderCard } from '@/components/OrderCard';
+import { OrderCardSkeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/EmptyState';
+import { Button } from '@/components/ui/Button';
+import { useOrders } from '@/hooks/useOrders';
+import { useRouter } from 'next/navigation';
+
+export function OrdersScreen() {
+  const router = useRouter();
+  const [page, setPage] = useState(1);
+  const { orders, isLoading, pagination } = useOrders(page, 10);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="container mx-auto px-4 max-w-5xl">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">Order History</h1>
+          <p className="text-gray-600">
+            View and manage all your past orders
+          </p>
+        </motion.div>
+
+        {/* Orders List */}
+        {isLoading ? (
+          <div className="space-y-4">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <OrderCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : orders.length > 0 ? (
+          <>
+            <div className="space-y-4 mb-8">
+              {orders.map((order) => (
+                <OrderCard key={order.id} order={order} />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {pagination.totalPages > 1 && (
+              <div className="flex justify-center items-center gap-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setPage(page - 1)}
+                  disabled={page === 1}
+                >
+                  <ChevronLeft className="w-5 h-5" />
+                  Previous
+                </Button>
+                <span className="text-gray-700">
+                  Page {page} of {pagination.totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  onClick={() => setPage(page + 1)}
+                  disabled={page === pagination.totalPages}
+                >
+                  Next
+                  <ChevronRight className="w-5 h-5" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <EmptyState
+            icon={Package}
+            title="No orders yet"
+            description="Start shopping and your orders will appear here"
+            actionLabel="Start Shopping"
+            onAction={() => router.push('/shop')}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+

package/src/screens/ProductDetailScreen.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ShoppingCart, Heart, Minus, Plus, Star, Check, Truck, Shield } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { ProductCard } from '@/components/ProductCard';
+import { useProduct } from '@/hooks/useProducts';
+import { useCart } from '@/providers/CartProvider';
+import { formatPrice } from '@/lib/utils/format';
+import { productsApi } from '@/lib/api/products';
+import Image from 'next/image';
+import { toast } from 'sonner';
+
+interface ProductDetailScreenProps {
+  productId: string;
+}
+
+export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
+  const { product, isLoading } = useProduct(productId);
+  const { addToCart } = useCart();
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+  const [isFavorited, setIsFavorited] = useState(false);
+  const [relatedProducts, setRelatedProducts] = useState<any[]>([]);
+
+  React.useEffect(() => {
+    if (product) {
+      productsApi.getRelatedProducts(product.id).then((res) => {
+        if (res.success) {
+          setRelatedProducts(res.data);
+        }
+      });
+    }
+  }, [product]);
+
+  const handleAddToCart = async () => {
+    if (!product) return;
+    setIsAddingToCart(true);
+    try {
+      await addToCart(product.id, quantity);
+    } finally {
+      setIsAddingToCart(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="container mx-auto px-4 py-12">Loading...</div>;
+  }
+
+  if (!product) {
+    return <div className="container mx-auto px-4 py-12">Product not found</div>;
+  }
+
+  const discount = product.compareAtPrice
+    ? Math.round(((product.compareAtPrice - product.price) / product.compareAtPrice) * 100)
+    : 0;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="container mx-auto px-4">
+        {/* Breadcrumbs */}
+        <div className="flex items-center gap-2 text-sm text-gray-600 mb-8">
+          <a href="/" className="hover:text-primary-600">Home</a>
+          <span>/</span>
+          <a href="/shop" className="hover:text-primary-600">Shop</a>
+          <span>/</span>
+          <span className="text-gray-900">{product.name}</span>
+        </div>
+
+        {/* Product Content */}
+        <div className="grid lg:grid-cols-2 gap-12 mb-16">
+          {/* Images */}
+          <div>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="bg-white rounded-2xl overflow-hidden shadow-sm mb-4"
+            >
+              <div className="relative aspect-square">
+                <Image
+                  src={product.images[selectedImage] || '/placeholder-product.jpg'}
+                  alt={product.name}
+                  fill
+                  className="object-cover"
+                />
+                {discount > 0 && (
+                  <Badge variant="danger" className="absolute top-4 left-4">
+                    -{discount}%
+                  </Badge>
+                )}
+              </div>
+            </motion.div>
+
+            {/* Thumbnail Images */}
+            {product.images.length > 1 && (
+              <div className="grid grid-cols-4 gap-4">
+                {product.images.map((image, index) => (
+                  <button
+                    key={index}
+                    onClick={() => setSelectedImage(index)}
+                    className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all ${
+                      selectedImage === index
+                        ? 'border-primary-600 ring-2 ring-primary-600/20'
+                        : 'border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <Image src={image} alt="" fill className="object-cover" />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+            >
+              {/* Category */}
+              <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
+                {product.category}
+              </p>
+
+              {/* Title */}
+              <h1 className="text-4xl font-bold text-gray-900 mb-4">{product.name}</h1>
+
+              {/* Rating */}
+              <div className="flex items-center gap-2 mb-6">
+                <div className="flex items-center">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className="w-5 h-5 fill-yellow-400 text-yellow-400"
+                    />
+                  ))}
+                </div>
+                <span className="text-gray-600">(4.8) • 127 reviews</span>
+              </div>
+
+              {/* Price */}
+              <div className="flex items-baseline gap-3 mb-6">
+                <span className="text-4xl font-bold text-gray-900">
+                  {formatPrice(product.price)}
+                </span>
+                {product.compareAtPrice && (
+                  <span className="text-xl text-gray-500 line-through">
+                    {formatPrice(product.compareAtPrice)}
+                  </span>
+                )}
+              </div>
+
+              {/* Stock Status */}
+              <div className="mb-6">
+                {product.inStock ? (
+                  <div className="flex items-center gap-2 text-green-600">
+                    <Check className="w-5 h-5" />
+                    <span className="font-medium">In Stock</span>
+                    {product.stock && <span className="text-gray-500">({product.stock} available)</span>}
+                  </div>
+                ) : (
+                  <div className="text-red-600 font-medium">Out of Stock</div>
+                )}
+              </div>
+
+              {/* Description */}
+              <div className="mb-8">
+                <p className="text-gray-700 leading-relaxed">{product.description}</p>
+              </div>
+
+              {/* Quantity Selector */}
+              {product.inStock && (
+                <div className="mb-6">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Quantity
+                  </label>
+                  <div className="flex items-center border-2 border-gray-200 rounded-lg w-fit">
+                    <button
+                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                      className="p-3 hover:bg-gray-100 transition-colors"
+                    >
+                      <Minus className="w-5 h-5" />
+                    </button>
+                    <span className="px-6 font-medium min-w-[4rem] text-center">
+                      {quantity}
+                    </span>
+                    <button
+                      onClick={() => setQuantity(quantity + 1)}
+                      className="p-3 hover:bg-gray-100 transition-colors"
+                    >
+                      <Plus className="w-5 h-5" />
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Actions */}
+              <div className="flex gap-4 mb-8">
+                <Button
+                  size="lg"
+                  onClick={handleAddToCart}
+                  isLoading={isAddingToCart}
+                  disabled={!product.inStock}
+                  className="flex-1"
+                >
+                  <ShoppingCart className="w-5 h-5" />
+                  Add to Cart
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  onClick={() => setIsFavorited(!isFavorited)}
+                  className="px-6"
+                >
+                  <Heart
+                    className={`w-5 h-5 ${isFavorited ? 'fill-red-500 text-red-500' : ''}`}
+                  />
+                </Button>
+              </div>
+
+              {/* Features */}
+              <div className="space-y-4 border-t border-gray-200 pt-6">
+                <div className="flex items-center gap-3 text-gray-700">
+                  <Truck className="w-5 h-5 text-primary-600" />
+                  <span>Free shipping on orders over $50</span>
+                </div>
+                <div className="flex items-center gap-3 text-gray-700">
+                  <Shield className="w-5 h-5 text-primary-600" />
+                  <span>30-day money-back guarantee</span>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+
+        {/* Related Products */}
+        {relatedProducts.length > 0 && (
+          <div>
+            <h2 className="text-3xl font-bold text-gray-900 mb-8">You May Also Like</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {relatedProducts.map((relatedProduct) => (
+                <ProductCard key={relatedProduct.id} product={relatedProduct} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+