hey-pharmacist-ecommerce 1.0.0

package/src/screens/ProfileScreen.tsx

@@ -0,0 +1,211 @@
+'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 { User, Mail, Phone, LogOut, Package, Heart } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useAuth } from '@/providers/AuthProvider';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { getInitials } from '@/lib/utils/format';
+import Link from 'next/link';
+
+const profileSchema = z.object({
+  firstName: z.string().min(2, 'First name is required'),
+  lastName: z.string().min(2, 'Last name is required'),
+  email: z.string().email('Invalid email address'),
+  phone: z.string().optional(),
+});
+
+type ProfileFormData = z.infer<typeof profileSchema>;
+
+export function ProfileScreen() {
+  const router = useRouter();
+  const { user, updateUser, logout } = useAuth();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ProfileFormData>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      firstName: user?.firstName || '',
+      lastName: user?.lastName || '',
+      email: user?.email || '',
+      phone: user?.phone || '',
+    },
+  });
+
+  const onSubmit = async (data: ProfileFormData) => {
+    setIsSubmitting(true);
+    try {
+      await updateUser(data);
+      toast.success('Profile updated successfully!');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Failed to update profile');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    await logout();
+    toast.success('Logged out successfully');
+    router.push('/');
+  };
+
+  if (!user) {
+    router.push('/login');
+    return null;
+  }
+
+  const menuItems = [
+    {
+      icon: Package,
+      label: 'My Orders',
+      href: '/orders',
+      description: 'View and track your orders',
+    },
+    {
+      icon: Heart,
+      label: 'Wishlist',
+      href: '/wishlist',
+      description: 'Your saved products',
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="container mx-auto px-4 max-w-4xl">
+        {/* 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">My Account</h1>
+          <p className="text-gray-600">Manage your profile and preferences</p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {/* Sidebar */}
+          <div className="md:col-span-1">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="bg-white rounded-2xl p-6 shadow-sm"
+            >
+              {/* Avatar */}
+              <div className="flex flex-col items-center mb-6">
+                <div className="w-24 h-24 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full flex items-center justify-center text-white text-3xl font-bold mb-4">
+                  {getInitials(user.firstName, user.lastName)}
+                </div>
+                <h3 className="text-xl font-bold text-gray-900">
+                  {user.firstName} {user.lastName}
+                </h3>
+                <p className="text-gray-600">{user.email}</p>
+              </div>
+
+              {/* Menu Items */}
+              <nav className="space-y-2">
+                {menuItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors group"
+                  >
+                    <item.icon className="w-5 h-5 text-gray-500 group-hover:text-primary-600 mt-0.5" />
+                    <div>
+                      <p className="font-medium text-gray-900 group-hover:text-primary-600">
+                        {item.label}
+                      </p>
+                      <p className="text-sm text-gray-500">{item.description}</p>
+                    </div>
+                  </Link>
+                ))}
+              </nav>
+
+              {/* Logout Button */}
+              <button
+                onClick={handleLogout}
+                className="w-full mt-6 flex items-center justify-center gap-2 p-3 text-red-600 hover:bg-red-50 rounded-lg transition-colors font-medium"
+              >
+                <LogOut className="w-5 h-5" />
+                Logout
+              </button>
+            </motion.div>
+          </div>
+
+          {/* Main Content */}
+          <div className="md:col-span-2">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="bg-white rounded-2xl p-8 shadow-sm"
+            >
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                Personal Information
+              </h2>
+
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label="First Name"
+                    {...register('firstName')}
+                    error={errors.firstName?.message}
+                  />
+                  <Input
+                    label="Last Name"
+                    {...register('lastName')}
+                    error={errors.lastName?.message}
+                  />
+                </div>
+
+                <Input
+                  type="email"
+                  label="Email Address"
+                  {...register('email')}
+                  error={errors.email?.message}
+                />
+
+                <Input
+                  type="tel"
+                  label="Phone Number"
+                  {...register('phone')}
+                  error={errors.phone?.message}
+                />
+
+                <div className="flex gap-4">
+                  <Button
+                    type="submit"
+                    size="lg"
+                    isLoading={isSubmitting}
+                  >
+                    Save Changes
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="lg"
+                    onClick={() => router.push('/account/change-password')}
+                  >
+                    Change Password
+                  </Button>
+                </div>
+              </form>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/screens/RegisterScreen.tsx

@@ -0,0 +1,200 @@
+'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 { UserPlus, Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useAuth } from '@/providers/AuthProvider';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import Link from 'next/link';
+
+const registerSchema = z.object({
+  firstName: z.string().min(2, 'First name is required'),
+  lastName: z.string().min(2, 'Last name is required'),
+  email: z.string().email('Invalid email address'),
+  phone: z.string().optional(),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ['confirmPassword'],
+});
+
+type RegisterFormData = z.infer<typeof registerSchema>;
+
+export function RegisterScreen() {
+  const router = useRouter();
+  const { register: registerUser } = useAuth();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<RegisterFormData>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  const onSubmit = async (data: RegisterFormData) => {
+    setIsSubmitting(true);
+    try {
+      const { confirmPassword, ...registerData } = data;
+      await registerUser(registerData);
+      toast.success('Account created successfully!');
+      router.push('/');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Failed to create account');
+    } 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">
+              <UserPlus className="w-8 h-8 text-primary-600" />
+            </div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">Create Account</h1>
+            <p className="text-gray-600">Join us and start shopping</p>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label="First Name"
+                placeholder="John"
+                {...register('firstName')}
+                error={errors.firstName?.message}
+              />
+              <Input
+                label="Last Name"
+                placeholder="Doe"
+                {...register('lastName')}
+                error={errors.lastName?.message}
+              />
+            </div>
+
+            <Input
+              type="email"
+              label="Email Address"
+              placeholder="you@example.com"
+              {...register('email')}
+              error={errors.email?.message}
+            />
+
+            <Input
+              type="tel"
+              label="Phone Number (Optional)"
+              placeholder="+1 (555) 000-0000"
+              {...register('phone')}
+              error={errors.phone?.message}
+            />
+
+            <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="relative">
+              <Input
+                type={showConfirmPassword ? 'text' : 'password'}
+                label="Confirm Password"
+                placeholder="••••••••"
+                {...register('confirmPassword')}
+                error={errors.confirmPassword?.message}
+              />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute right-3 top-[42px] text-gray-500 hover:text-gray-700"
+              >
+                {showConfirmPassword ? (
+                  <EyeOff className="w-5 h-5" />
+                ) : (
+                  <Eye className="w-5 h-5" />
+                )}
+              </button>
+            </div>
+
+            <div className="flex items-start gap-2">
+              <input
+                type="checkbox"
+                required
+                className="w-4 h-4 text-primary-600 rounded mt-1"
+              />
+              <label className="text-sm text-gray-700">
+                I agree to the{' '}
+                <Link href="/terms" className="text-primary-600 hover:text-primary-700">
+                  Terms of Service
+                </Link>{' '}
+                and{' '}
+                <Link href="/privacy" className="text-primary-600 hover:text-primary-700">
+                  Privacy Policy
+                </Link>
+              </label>
+            </div>
+
+            <Button
+              type="submit"
+              size="lg"
+              isLoading={isSubmitting}
+              className="w-full"
+            >
+              Create Account
+            </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">Already have an account?</span>
+            </div>
+          </div>
+
+          {/* Login Link */}
+          <Link href="/login">
+            <Button variant="outline" size="lg" className="w-full">
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+

package/src/screens/ShopScreen.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Search, SlidersHorizontal, X } from 'lucide-react';
+import { ProductCard } from '@/components/ProductCard';
+import { ProductCardSkeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/EmptyState';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useProducts, useCategories } from '@/hooks/useProducts';
+import { ProductFilters } from '@/lib/types';
+import { Package } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export function ShopScreen() {
+  const router = useRouter();
+  const [filters, setFilters] = useState<ProductFilters>({});
+  const [page, setPage] = useState(1);
+  const [showFilters, setShowFilters] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const { products, isLoading, pagination } = useProducts(filters, page, 20);
+  const { categories } = useCategories();
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setFilters({ ...filters, search: searchQuery });
+    setPage(1);
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setFilters({ ...filters, category: category === filters.category ? undefined : category });
+    setPage(1);
+  };
+
+  const handleClearFilters = () => {
+    setFilters({});
+    setSearchQuery('');
+    setPage(1);
+  };
+
+  const hasActiveFilters = Object.keys(filters).length > 0;
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Hero Section */}
+      <section className="bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-600 text-white py-20">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="max-w-3xl mx-auto text-center"
+          >
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              Discover Amazing Products
+            </h1>
+            <p className="text-xl text-primary-100 mb-8">
+              Browse our curated collection of quality products at great prices
+            </p>
+
+            {/* Search Bar */}
+            <form onSubmit={handleSearch} className="max-w-2xl mx-auto">
+              <div className="relative">
+                <Input
+                  type="search"
+                  placeholder="Search for products..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pr-12 text-lg"
+                />
+                <button
+                  type="submit"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+                >
+                  <Search className="w-5 h-5" />
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <div className="container mx-auto px-4 py-12">
+        <div className="flex gap-8">
+          {/* Sidebar Filters - Desktop */}
+          <aside className="hidden lg:block w-64 flex-shrink-0">
+            <div className="bg-white rounded-2xl p-6 shadow-sm sticky top-24">
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-lg font-bold text-gray-900">Filters</h3>
+                {hasActiveFilters && (
+                  <button
+                    onClick={handleClearFilters}
+                    className="text-sm text-primary-600 hover:text-primary-700 font-medium"
+                  >
+                    Clear All
+                  </button>
+                )}
+              </div>
+
+              {/* Categories */}
+              <div className="space-y-4">
+                <h4 className="font-semibold text-gray-900">Categories</h4>
+                <div className="space-y-2">
+                  {categories.map((category) => (
+                    <label
+                      key={category.id}
+                      className="flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={filters.category === category.slug}
+                        onChange={() => handleCategoryChange(category.slug)}
+                        className="w-5 h-5 text-primary-600 rounded"
+                      />
+                      <span className="text-gray-700">{category.name}</span>
+                      <span className="ml-auto text-sm text-gray-500">
+                        ({category.productCount})
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Stock Status */}
+              <div className="space-y-4 mt-8">
+                <h4 className="font-semibold text-gray-900">Availability</h4>
+                <label className="flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                  <input
+                    type="checkbox"
+                    checked={filters.inStock === true}
+                    onChange={(e) =>
+                      setFilters({ ...filters, inStock: e.target.checked ? true : undefined })
+                    }
+                    className="w-5 h-5 text-primary-600 rounded"
+                  />
+                  <span className="text-gray-700">In Stock Only</span>
+                </label>
+              </div>
+            </div>
+          </aside>
+
+          {/* Products Grid */}
+          <div className="flex-1">
+            {/* Mobile Filter Button */}
+            <div className="lg:hidden mb-6">
+              <Button
+                variant="outline"
+                onClick={() => setShowFilters(!showFilters)}
+                className="w-full"
+              >
+                <SlidersHorizontal className="w-5 h-5" />
+                Filters
+                {hasActiveFilters && (
+                  <span className="ml-2 px-2 py-0.5 bg-primary-600 text-white text-xs rounded-full">
+                    Active
+                  </span>
+                )}
+              </Button>
+            </div>
+
+            {/* Results Header */}
+            <div className="flex items-center justify-between mb-6">
+              <p className="text-gray-600">
+                {isLoading ? (
+                  'Loading...'
+                ) : (
+                  <>
+                    Showing {products.length} of {pagination.total} products
+                  </>
+                )}
+              </p>
+            </div>
+
+            {/* Products Grid */}
+            {isLoading ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <ProductCardSkeleton key={i} />
+                ))}
+              </div>
+            ) : products.length > 0 ? (
+              <>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {products.map((product) => (
+                    <ProductCard
+                      key={product.id}
+                      product={product}
+                      onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                    />
+                  ))}
+                </div>
+
+                {/* Pagination */}
+                {pagination.totalPages > 1 && (
+                  <div className="flex justify-center items-center gap-2 mt-12">
+                    <Button
+                      variant="outline"
+                      onClick={() => setPage(page - 1)}
+                      disabled={page === 1}
+                    >
+                      Previous
+                    </Button>
+                    <span className="px-4 text-gray-700">
+                      Page {page} of {pagination.totalPages}
+                    </span>
+                    <Button
+                      variant="outline"
+                      onClick={() => setPage(page + 1)}
+                      disabled={page === pagination.totalPages}
+                    >
+                      Next
+                    </Button>
+                  </div>
+                )}
+              </>
+            ) : (
+              <EmptyState
+                icon={Package}
+                title="No products found"
+                description="Try adjusting your filters or search query"
+                actionLabel={hasActiveFilters ? 'Clear Filters' : undefined}
+                onAction={hasActiveFilters ? handleClearFilters : undefined}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/styles/globals.css

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-gray-200;
+  }
+  
+  body {
+    @apply bg-gray-50 text-gray-900 antialiased;
+  }
+}
+
+@layer utilities {
+  .animate-gradient {
+    animation: gradient 3s ease infinite;
+    background-size: 200% 200%;
+  }
+  
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-gray-100;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-400;
+}
+