create-ecom-app 1.0.0

package/templates/ecommerce/app/products/page.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { motion, AnimatePresence } from 'framer-motion';
+import { SlidersHorizontal, X } from 'lucide-react';
+import ProductCard from '@/components/ProductCard';
+import SearchBar from '@/components/SearchBar';
+import Filters from '@/components/Filters';
+import productsData from '@/data/products.json';
+import type { Product } from '@/types';
+
+const products = productsData as Product[];
+const MIN_PRICE = 0;
+const MAX_PRICE = 20000;
+
+const containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.05 } },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+};
+
+type ActiveChip = { key: string; label: string };
+
+export default function ProductsPage() {
+  const searchParams = useSearchParams();
+  const initialCat = searchParams.get('category') || 'All';
+
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState(initialCat);
+  const [priceRange, setPriceRange] = useState<[number, number]>([MIN_PRICE, MAX_PRICE]);
+  const [minRating, setMinRating] = useState(0);
+  const [sortBy, setSortBy] = useState('default');
+  const [showFilters, setShowFilters] = useState(false);
+
+  const activeChips: ActiveChip[] = useMemo(() => {
+    const chips: ActiveChip[] = [];
+    if (search) chips.push({ key: 'search', label: `"${search}"` });
+    if (category !== 'All') chips.push({ key: 'category', label: category });
+    if (priceRange[0] > MIN_PRICE || priceRange[1] < MAX_PRICE)
+      chips.push({ key: 'price', label: `₹${priceRange[0].toLocaleString('en-IN')}–₹${priceRange[1].toLocaleString('en-IN')}` });
+    if (minRating > 0) chips.push({ key: 'rating', label: `${minRating}+ stars` });
+    return chips;
+  }, [search, category, priceRange, minRating]);
+
+  const removeChip = (key: string) => {
+    if (key === 'search') setSearch('');
+    if (key === 'category') setCategory('All');
+    if (key === 'price') setPriceRange([MIN_PRICE, MAX_PRICE]);
+    if (key === 'rating') setMinRating(0);
+  };
+
+  const filtered = useMemo(() => {
+    let result = products.filter((p) => {
+      const matchSearch =
+        p.name.toLowerCase().includes(search.toLowerCase()) ||
+        p.description.toLowerCase().includes(search.toLowerCase()) ||
+        p.category.toLowerCase().includes(search.toLowerCase());
+      const matchCat = category === 'All' || p.category === category;
+      const matchPrice = p.price >= priceRange[0] && p.price <= priceRange[1];
+      const matchRating = p.rating >= minRating;
+      return matchSearch && matchCat && matchPrice && matchRating;
+    });
+
+    if (sortBy === 'price-asc') result = [...result].sort((a, b) => a.price - b.price);
+    if (sortBy === 'price-desc') result = [...result].sort((a, b) => b.price - a.price);
+    if (sortBy === 'rating') result = [...result].sort((a, b) => b.rating - a.rating);
+    if (sortBy === 'popular') result = [...result].sort((a, b) => b.reviewCount - a.reviewCount);
+
+    return result;
+  }, [search, category, priceRange, minRating, sortBy]);
+
+  const handleReset = () => {
+    setSearch('');
+    setCategory('All');
+    setPriceRange([MIN_PRICE, MAX_PRICE]);
+    setMinRating(0);
+    setSortBy('default');
+  };
+
+  return (
+    <motion.div
+      className="container-main py-10"
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+    >
+      <div className="mb-6">
+        <h1 className="page-title">All Products</h1>
+        <p className="text-gray-500">{filtered.length} products found</p>
+      </div>
+
+      {/* Search + Sort */}
+      <div className="flex flex-col sm:flex-row gap-3 mb-4">
+        <div className="flex-1">
+          <SearchBar value={search} onChange={setSearch} />
+        </div>
+        <select
+          value={sortBy}
+          onChange={(e) => setSortBy(e.target.value)}
+          className="input w-full sm:w-48"
+          id="sort-select"
+          aria-label="Sort products"
+        >
+          <option value="default">Sort: Default</option>
+          <option value="price-asc">Price: Low → High</option>
+          <option value="price-desc">Price: High → Low</option>
+          <option value="rating">Top Rated</option>
+          <option value="popular">Most Popular</option>
+        </select>
+        <button
+          className="sm:hidden btn-secondary flex items-center justify-center gap-2"
+          onClick={() => setShowFilters(true)}
+          id="toggle-filters"
+        >
+          <SlidersHorizontal className="w-4 h-4" />
+          Filters
+        </button>
+      </div>
+
+      {/* Active Filter Chips */}
+      <AnimatePresence>
+        {activeChips.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="flex flex-wrap gap-2 mb-5"
+          >
+            {activeChips.map((chip) => (
+              <motion.button
+                key={chip.key}
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.8, opacity: 0 }}
+                onClick={() => removeChip(chip.key)}
+                className="flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-3 py-1.5 rounded-full hover:bg-gray-700 transition-colors"
+              >
+                {chip.label}
+                <X className="w-3 h-3" />
+              </motion.button>
+            ))}
+            <button
+              onClick={handleReset}
+              className="text-xs font-medium text-gray-400 hover:text-gray-700 px-2 transition-colors"
+            >
+              Clear all
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="flex gap-8">
+        {/* Sidebar Filters — Desktop */}
+        <aside className="hidden sm:block w-64 flex-shrink-0">
+          <Filters
+            selectedCategory={category}
+            onCategoryChange={setCategory}
+            minPrice={MIN_PRICE}
+            maxPrice={MAX_PRICE}
+            priceRange={priceRange}
+            onPriceChange={setPriceRange}
+            minRating={minRating}
+            onRatingChange={setMinRating}
+            onReset={handleReset}
+          />
+        </aside>
+
+        {/* Mobile Filter Drawer */}
+        <AnimatePresence>
+          {showFilters && (
+            <>
+              <motion.div
+                key="overlay"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 z-50 bg-black/40 sm:hidden"
+                onClick={() => setShowFilters(false)}
+              />
+              <motion.div
+                key="drawer"
+                initial={{ x: '100%' }}
+                animate={{ x: 0 }}
+                exit={{ x: '100%' }}
+                transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+                className="fixed right-0 top-0 h-full w-72 bg-white z-50 shadow-2xl overflow-y-auto sm:hidden"
+              >
+                <div className="flex items-center justify-between p-5 border-b border-gray-100">
+                  <h3 className="font-bold">Filters</h3>
+                  <button onClick={() => setShowFilters(false)} className="text-gray-400 hover:text-gray-700 p-1">
+                    <X className="w-5 h-5" />
+                  </button>
+                </div>
+                <div className="p-5">
+                  <Filters
+                    selectedCategory={category}
+                    onCategoryChange={(c) => { setCategory(c); setShowFilters(false); }}
+                    minPrice={MIN_PRICE}
+                    maxPrice={MAX_PRICE}
+                    priceRange={priceRange}
+                    onPriceChange={setPriceRange}
+                    minRating={minRating}
+                    onRatingChange={setMinRating}
+                    onReset={() => { handleReset(); setShowFilters(false); }}
+                  />
+                </div>
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
+
+        {/* Products Grid */}
+        <div className="flex-1">
+          {filtered.length === 0 ? (
+            <div className="text-center py-24 text-gray-400">
+              <div className="text-6xl mb-4">🔍</div>
+              <p className="text-lg font-semibold text-gray-700">No products found</p>
+              <p className="text-sm mt-1 mb-4">Try adjusting your filters or search terms</p>
+              <button onClick={handleReset} className="btn-primary">Reset Filters</button>
+            </div>
+          ) : (
+            <motion.div
+              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
+              variants={containerVariants}
+              initial="hidden"
+              animate="visible"
+            >
+              {filtered.map((product) => (
+                <motion.div key={product.id} variants={itemVariants}>
+                  <ProductCard product={product} />
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/templates/ecommerce/app/profile/page.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { motion, AnimatePresence } from 'framer-motion';
+import { User, Package, Star, Save, CheckCircle } from 'lucide-react';
+import { useAuthStore } from '@/store/useAuthStore';
+import { useOrderStore } from '@/store/useOrderStore';
+import { useReviewStore } from '@/store/useReviewStore';
+import { formatPrice } from '@/lib/utils';
+import type { OrderStatus } from '@/types';
+
+const STATUS_COLORS: Record<OrderStatus, string> = {
+  confirmed: 'bg-blue-100 text-blue-700',
+  processing: 'bg-amber-100 text-amber-700',
+  shipped: 'bg-violet-100 text-violet-700',
+  delivered: 'bg-green-100 text-green-700',
+};
+
+type Tab = 'profile' | 'orders' | 'reviews';
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const initialTab = (searchParams.get('tab') as Tab) || 'profile';
+  const [activeTab, setActiveTab] = useState<Tab>(initialTab);
+  const { user, isAuthenticated, logout } = useAuthStore();
+  const { getUserOrders } = useOrderStore();
+  const { getUserReviews } = useReviewStore();
+  const [name, setName] = useState('');
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (!isAuthenticated) router.replace('/login');
+    if (user) setName(user.name);
+  }, [isAuthenticated, user, router]);
+
+  if (!user) return null;
+
+  const orders = getUserOrders(user.email);
+  const reviews = getUserReviews(user.id);
+
+  const handleSaveProfile = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const TABS = [
+    { key: 'profile' as Tab, label: 'Profile', icon: User },
+    { key: 'orders' as Tab, label: `Orders (${orders.length})`, icon: Package },
+    { key: 'reviews' as Tab, label: `Reviews (${reviews.length})`, icon: Star },
+  ];
+
+  return (
+    <motion.div
+      className="container-main py-10"
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+    >
+      <div className="mb-8">
+        <h1 className="page-title">My Account</h1>
+        <p className="text-gray-500">Manage your profile, orders, and reviews</p>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-8">
+        {/* Sidebar */}
+        <aside className="w-full lg:w-64 flex-shrink-0">
+          <div className="bg-white rounded-2xl shadow-sm p-5">
+            {/* Avatar */}
+            <div className="flex items-center gap-4 mb-6 pb-5 border-b border-gray-100">
+              <div className="w-14 h-14 bg-gray-900 rounded-2xl flex items-center justify-center flex-shrink-0">
+                <span className="text-white text-xl font-bold">{user.name.charAt(0).toUpperCase()}</span>
+              </div>
+              <div className="min-w-0">
+                <p className="font-bold text-gray-900 truncate">{user.name}</p>
+                <p className="text-sm text-gray-400 truncate">{user.email}</p>
+              </div>
+            </div>
+
+            <nav className="flex flex-col gap-1">
+              {TABS.map(({ key, label, icon: Icon }) => (
+                <button
+                  key={key}
+                  onClick={() => setActiveTab(key)}
+                  className={`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all text-left
+                    ${activeTab === key ? 'bg-gray-900 text-white' : 'text-gray-600 hover:bg-gray-50'}`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {label}
+                </button>
+              ))}
+            </nav>
+
+            <div className="border-t border-gray-100 mt-5 pt-4">
+              <button
+                onClick={() => { logout(); router.push('/'); }}
+                className="w-full text-left px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 rounded-xl transition-colors font-medium"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        </aside>
+
+        {/* Main Content */}
+        <div className="flex-1 min-w-0">
+          <AnimatePresence mode="wait">
+            {/* ── Profile Tab ── */}
+            {activeTab === 'profile' && (
+              <motion.div
+                key="profile"
+                initial={{ opacity: 0, x: 10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <div className="bg-white rounded-2xl shadow-sm p-6">
+                  <h2 className="font-bold text-gray-900 mb-5 text-lg">Edit Profile</h2>
+                  <form onSubmit={handleSaveProfile} className="space-y-4 max-w-md">
+                    <div>
+                      <label htmlFor="profile-name" className="block text-sm font-medium text-gray-700 mb-1.5">
+                        Full Name
+                      </label>
+                      <input
+                        id="profile-name"
+                        type="text"
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        className="input"
+                        placeholder="Your name"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="profile-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+                        Email
+                      </label>
+                      <input
+                        id="profile-email"
+                        type="email"
+                        value={user.email}
+                        className="input bg-gray-50 cursor-not-allowed"
+                        disabled
+                      />
+                      <p className="text-xs text-gray-400 mt-1">Email cannot be changed.</p>
+                    </div>
+                    <button
+                      type="submit"
+                      className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all
+                        ${saved ? 'bg-green-500 text-white' : 'bg-gray-900 text-white hover:bg-gray-700'}`}
+                      id="save-profile-btn"
+                    >
+                      {saved ? <><CheckCircle className="w-4 h-4" /> Saved!</> : <><Save className="w-4 h-4" /> Save Changes</>}
+                    </button>
+                  </form>
+                </div>
+              </motion.div>
+            )}
+
+            {/* ── Orders Tab ── */}
+            {activeTab === 'orders' && (
+              <motion.div
+                key="orders"
+                initial={{ opacity: 0, x: 10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <div className="space-y-4">
+                  {orders.length === 0 ? (
+                    <div className="bg-white rounded-2xl shadow-sm p-12 text-center">
+                      <Package className="w-16 h-16 text-gray-200 mx-auto mb-4" />
+                      <h3 className="font-bold text-gray-900 mb-2">No orders yet</h3>
+                      <p className="text-gray-500 text-sm mb-5">Start shopping to see your orders here.</p>
+                      <Link href="/products" className="btn-primary inline-block">Browse Products</Link>
+                    </div>
+                  ) : (
+                    orders.map((order) => (
+                      <div key={order.id} className="bg-white rounded-2xl shadow-sm p-5">
+                        <div className="flex items-center justify-between mb-4">
+                          <div>
+                            <p className="text-xs text-gray-400">Order</p>
+                            <p className="font-mono font-semibold text-gray-900 text-sm">{order.id}</p>
+                          </div>
+                          <span className={`text-xs font-semibold px-3 py-1.5 rounded-full capitalize ${STATUS_COLORS[order.status]}`}>
+                            {order.status}
+                          </span>
+                        </div>
+
+                        {/* Items preview */}
+                        <div className="space-y-2 mb-4">
+                          {order.items.slice(0, 2).map((item) => (
+                            <div key={item.product.id} className="flex justify-between text-sm">
+                              <span className="text-gray-600 truncate mr-2">{item.product.name} × {item.quantity}</span>
+                              <span className="font-medium text-gray-900 flex-shrink-0">{formatPrice(item.product.price * item.quantity)}</span>
+                            </div>
+                          ))}
+                          {order.items.length > 2 && (
+                            <p className="text-xs text-gray-400">+{order.items.length - 2} more items</p>
+                          )}
+                        </div>
+
+                        <div className="flex items-center justify-between border-t border-gray-100 pt-3">
+                          <div>
+                            <span className="text-xs text-gray-400">{new Date(order.createdAt).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}</span>
+                          </div>
+                          <div className="flex items-center gap-4">
+                            <span className="font-bold text-gray-900">{formatPrice(order.total)}</span>
+                            <Link href={`/orders/${order.id}`} className="text-sm font-semibold text-gray-700 hover:text-gray-900 underline">
+                              View Details →
+                            </Link>
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </motion.div>
+            )}
+
+            {/* ── Reviews Tab ── */}
+            {activeTab === 'reviews' && (
+              <motion.div
+                key="reviews"
+                initial={{ opacity: 0, x: 10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <div className="space-y-4">
+                  {reviews.length === 0 ? (
+                    <div className="bg-white rounded-2xl shadow-sm p-12 text-center">
+                      <Star className="w-16 h-16 text-gray-200 mx-auto mb-4" />
+                      <h3 className="font-bold text-gray-900 mb-2">No reviews yet</h3>
+                      <p className="text-gray-500 text-sm mb-5">Buy products and share your experience!</p>
+                      <Link href="/products" className="btn-primary inline-block">Shop Now</Link>
+                    </div>
+                  ) : (
+                    reviews.map((review) => (
+                      <div key={review.id} className="bg-white rounded-2xl shadow-sm p-5">
+                        <div className="flex items-start justify-between">
+                          <div>
+                            <p className="font-semibold text-gray-900">{review.title}</p>
+                            <div className="flex gap-0.5 mt-1 mb-2">
+                              {[1,2,3,4,5].map((s) => (
+                                <Star key={s} className={`w-3.5 h-3.5 ${s <= review.rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200 fill-gray-200'}`} />
+                              ))}
+                            </div>
+                            <p className="text-sm text-gray-600">{review.body}</p>
+                          </div>
+                          <span className="text-xs text-gray-400 ml-4 flex-shrink-0">
+                            {new Date(review.date).toLocaleDateString('en-IN', { day: 'numeric', month: 'short' })}
+                          </span>
+                        </div>
+                        <div className="mt-3">
+                          <Link href={`/product/${review.productId}`} className="text-xs text-gray-400 hover:text-gray-700 underline transition-colors">
+                            View Product →
+                          </Link>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </motion.div>
+  );
+}