Feature: Add customer reviews system with admin management

- Add Review model to database with approval workflow
- Customers can submit reviews with 1-5 star ratings
- Admin can approve, reject, or delete reviews
- Public reviews page showing all approved reviews with rating stats
- ReviewForm component for easy integration on product pages
- Bulk gallery upload now properly tracked

Chore: Add expected delivery date for design approvals

- Add expectedDeliveryDate field to DesignApproval model
- Admin can set delivery date when approving designs
- Improves customer communication and expectations

Chore: Add welcome back message for logged-in customers

- Display personalized greeting on account page after login
- Shows customer's name if available

Chore: Add color difference disclaimer to product pages

- Added to StandardProductView (ready-made products)
- Added to DesignCanvas (personalized products)
- Informs customers about lighting-based color variations
- Helps manage customer expectations

Feature: Add image identification in design specifications

- Images now clearly labeled as "Image 1", "Image 2", etc.
- Images marked with purple circles in specification diagrams
- Improves clarity for production team

Documentation: Add comprehensive database optimization guide

- DATABASE_OPTIMIZATION.md - Full optimization strategies
- DATABASE_OPTIMIZATION_QUICK_START.md - Implementation examples
- DATABASE_OPTIMIZATION_MIGRATION.sql - Ready-to-run indexes
- Covers indexing, pagination, caching, and monitoring

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/DesignCanvas.tsx

@@ -1689,6 +1689,9 @@ export default function DesignCanvas({
           )}
           {submissionMessage && <p className="text-sm font-medium">{submissionMessage}</p>}
           {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
+          <p className="text-xs text-muted border-t border-line pt-4 mt-4">
+            💡 <strong>Color note:</strong> There may be slight color differences based on lighting and screen settings for personalized items. Your actual item may vary slightly from the preview shown.
+          </p>
         </div>
       </div>
 

src/components/ReviewForm.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface ReviewFormProps {
+  productId: string;
+  productName: string;
+  onSuccess?: () => void;
+}
+
+export default function ReviewForm({ productId, productName, onSuccess }: ReviewFormProps) {
+  const router = useRouter();
+  const [rating, setRating] = useState(5);
+  const [title, setTitle] = useState('');
+  const [comment, setComment] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!title.trim() || !comment.trim()) {
+      setError('Please fill in all fields');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const res = await fetch('/api/reviews', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          productId,
+          rating,
+          title: title.trim(),
+          comment: comment.trim(),
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to submit review');
+      }
+
+      setSuccess(true);
+      setTitle('');
+      setComment('');
+      setRating(5);
+
+      if (onSuccess) {
+        onSuccess();
+      } else {
+        setTimeout(() => {
+          router.refresh();
+        }, 2000);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="border border-green-500/40 bg-green-500/10 px-4 py-3 text-sm text-green-700">
+        ✓ Thank you! Your review will be displayed after approval.
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && (
+        <p className="text-sm text-splash-pink border border-splash-pink/40 bg-splash-pink/10 px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <div>
+        <label className="tag-label block mb-2">Rating</label>
+        <div className="flex gap-2">
+          {[1, 2, 3, 4, 5].map((star) => (
+            <button
+              key={star}
+              type="button"
+              onClick={() => setRating(star)}
+              className={`text-2xl transition-colors ${
+                star <= rating ? 'text-yellow-400' : 'text-gray-300'
+              }`}
+            >
+              ★
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="title" className="tag-label block mb-2">
+          Review title
+        </label>
+        <input
+          id="title"
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="e.g., Excellent quality!"
+          className="w-full border border-line bg-paper px-3 py-2 text-sm"
+          maxLength={100}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="comment" className="tag-label block mb-2">
+          Your review
+        </label>
+        <textarea
+          id="comment"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          placeholder="Share your experience with this product..."
+          className="w-full border border-line bg-paper px-3 py-2 text-sm min-h-24"
+          maxLength={500}
+        />
+        <p className="text-xs text-muted mt-1">{comment.length}/500</p>
+      </div>
+
+      <button
+        type="submit"
+        disabled={submitting}
+        className="bg-clay px-6 py-2 text-sm font-medium text-paper hover:bg-clay-dark disabled:opacity-60"
+      >
+        {submitting ? 'Submitting...' : 'Submit Review'}
+      </button>
+    </form>
+  );
+}

src/components/StandardProductView.tsx

@@ -184,6 +184,10 @@ export default function StandardProductView({ product }: { product: ProductDTO }
             Add to bag — <Price cents={product.effectivePrice * quantity} />
           </button>
         </div>
+
+        <p className="text-xs text-muted border-t border-line pt-4">
+          💡 <strong>Color note:</strong> There may be slight color differences based on lighting and screen settings for personalized, plain, and ready-made items. Your actual item may vary slightly from the preview shown.
+        </p>
       </div>
 
       <LoginPromptModal isOpen={showLoginPrompt} onClose={() => setShowLoginPrompt(false)} />