SEO: Fix structured data validation errors, delete static sitemap, and update indexing scripts

src/app/(main)/(app)/qr/[id]/edit/page.tsx

@@ -0,0 +1,459 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { showToast } from '@/components/ui/Toast';
+import { useCsrf } from '@/hooks/useCsrf';
+import { Upload, FileText, HelpCircle } from 'lucide-react';
+
+// Tooltip component for form field help
+const Tooltip = ({ text }: { text: string }) => (
+  <div className="group relative inline-block ml-1">
+    <HelpCircle className="w-4 h-4 text-gray-400 cursor-help" />
+    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 w-48 text-center">
+      {text}
+      <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
+    </div>
+  </div>
+);
+
+export default function EditQRPage() {
+  const router = useRouter();
+  const params = useParams();
+  const qrId = params.id as string;
+  const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [qrCode, setQrCode] = useState<any>(null);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState<any>({});
+
+  useEffect(() => {
+    const fetchQRCode = async () => {
+      try {
+        const response = await fetch(`/api/qrs/${qrId}`);
+        if (response.ok) {
+          const data = await response.json();
+          setQrCode(data);
+          setTitle(data.title);
+          setContent(data.content || {});
+        } else {
+          showToast('Failed to load QR code', 'error');
+          router.push('/dashboard');
+        }
+      } catch (error) {
+        console.error('Error fetching QR code:', error);
+        showToast('Failed to load QR code', 'error');
+        router.push('/dashboard');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchQRCode();
+  }, [qrId, router]);
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // 10MB limit
+    if (file.size > 10 * 1024 * 1024) {
+      showToast('File size too large (max 10MB)', 'error');
+      return;
+    }
+
+    setUploading(true);
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      const data = await response.json();
+
+      if (response.ok) {
+        setContent({ ...content, fileUrl: data.url, fileName: data.filename });
+        showToast('File uploaded successfully!', 'success');
+      } else {
+        showToast(data.error || 'Upload failed', 'error');
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      showToast('Error uploading file', 'error');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+
+    try {
+      const response = await fetchWithCsrf(`/api/qrs/${qrId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          title,
+          content,
+        }),
+      });
+
+      if (response.ok) {
+        showToast('QR code updated successfully!', 'success');
+        router.push('/dashboard');
+      } else {
+        const error = await response.json();
+        showToast(error.error || 'Failed to update QR code', 'error');
+      }
+    } catch (error) {
+      console.error('Error updating QR code:', error);
+      showToast('Failed to update QR code', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading QR code...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!qrCode) {
+    return null;
+  }
+
+  // Static QR codes cannot be edited
+  if (qrCode.type === 'STATIC') {
+    return (
+      <div className="max-w-2xl mx-auto mt-12">
+        <Card>
+          <CardContent className="p-12 text-center">
+            <div className="w-20 h-20 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-6">
+              <svg className="w-10 h-10 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">Static QR Code</h2>
+            <p className="text-gray-600 mb-8">
+              Static QR codes cannot be edited because their content is embedded directly in the QR code image.
+            </p>
+            <Button onClick={() => router.push('/dashboard')}>
+              Back to Dashboard
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">Edit QR Code</h1>
+        <p className="text-gray-600 mt-2">Update your dynamic QR code content</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>QR Code Details</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Input
+            label="Title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Enter QR code title"
+            required
+          />
+
+          {qrCode.contentType === 'URL' && (
+            <Input
+              label="URL"
+              type="url"
+              value={content.url || ''}
+              onChange={(e) => setContent({ ...content, url: e.target.value })}
+              placeholder="https://example.com"
+              required
+            />
+          )}
+
+          {qrCode.contentType === 'PHONE' && (
+            <Input
+              label="Phone Number"
+              type="tel"
+              value={content.phone || ''}
+              onChange={(e) => setContent({ ...content, phone: e.target.value })}
+              placeholder="+1234567890"
+              required
+            />
+          )}
+
+          {qrCode.contentType === 'VCARD' && (
+            <>
+              <Input
+                label="First Name"
+                value={content.firstName || ''}
+                onChange={(e) => setContent({ ...content, firstName: e.target.value })}
+                placeholder="John"
+                required
+              />
+              <Input
+                label="Last Name"
+                value={content.lastName || ''}
+                onChange={(e) => setContent({ ...content, lastName: e.target.value })}
+                placeholder="Doe"
+                required
+              />
+              <Input
+                label="Email"
+                type="email"
+                value={content.email || ''}
+                onChange={(e) => setContent({ ...content, email: e.target.value })}
+                placeholder="john@example.com"
+              />
+              <Input
+                label="Phone"
+                value={content.phone || ''}
+                onChange={(e) => setContent({ ...content, phone: e.target.value })}
+                placeholder="+1234567890"
+              />
+              <Input
+                label="Organization"
+                value={content.organization || ''}
+                onChange={(e) => setContent({ ...content, organization: e.target.value })}
+                placeholder="Company Name"
+              />
+              <Input
+                label="Job Title"
+                value={content.title || ''}
+                onChange={(e) => setContent({ ...content, title: e.target.value })}
+                placeholder="CEO"
+              />
+            </>
+          )}
+
+          {qrCode.contentType === 'GEO' && (
+            <>
+              <Input
+                label="Latitude"
+                type="number"
+                step="any"
+                value={content.latitude || ''}
+                onChange={(e) => setContent({ ...content, latitude: parseFloat(e.target.value) || 0 })}
+                placeholder="37.7749"
+                required
+              />
+              <Input
+                label="Longitude"
+                type="number"
+                step="any"
+                value={content.longitude || ''}
+                onChange={(e) => setContent({ ...content, longitude: parseFloat(e.target.value) || 0 })}
+                placeholder="-122.4194"
+                required
+              />
+              <Input
+                label="Location Label (Optional)"
+                value={content.label || ''}
+                onChange={(e) => setContent({ ...content, label: e.target.value })}
+                placeholder="Golden Gate Bridge"
+              />
+            </>
+          )}
+
+          {qrCode.contentType === 'TEXT' && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Text Content
+              </label>
+              <textarea
+                value={content.text || ''}
+                onChange={(e) => setContent({ ...content, text: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                rows={4}
+                placeholder="Enter your text content"
+                required
+              />
+            </div>
+          )}
+
+          {qrCode.contentType === 'PDF' && (
+            <>
+              <div>
+                <div className="flex items-center mb-1">
+                  <label className="block text-sm font-medium text-gray-700">Upload Menu / PDF</label>
+                  <Tooltip text="Upload your menu PDF (Max 10MB). Hosted securely." />
+                </div>
+
+                <div className="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:bg-gray-50 transition-colors relative">
+                  <div className="space-y-1 text-center">
+                    {uploading ? (
+                      <div className="flex flex-col items-center">
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mb-2"></div>
+                        <p className="text-sm text-gray-500">Uploading...</p>
+                      </div>
+                    ) : content.fileUrl ? (
+                      <div className="flex flex-col items-center">
+                        <div className="mx-auto h-12 w-12 text-primary-500 bg-primary-50 rounded-full flex items-center justify-center mb-2">
+                          <FileText className="h-6 w-6" />
+                        </div>
+                        <p className="text-sm text-green-600 font-medium mb-1">Upload Complete!</p>
+                        <a href={content.fileUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-primary-500 hover:underline break-all max-w-xs mb-3 block">
+                          {content.fileName || 'View File'}
+                        </a>
+                        <label htmlFor="file-upload" className="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                          <span>Replace File</span>
+                          <input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
+                        </label>
+                      </div>
+                    ) : (
+                      <>
+                        <Upload className="mx-auto h-12 w-12 text-gray-400" />
+                        <div className="flex text-sm text-gray-600 justify-center">
+                          <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
+                            <span>Upload a file</span>
+                            <input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
+                          </label>
+                          <p className="pl-1">or drag and drop</p>
+                        </div>
+                        <p className="text-xs text-gray-500">PDF, PNG, JPG up to 10MB</p>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {content.fileUrl && (
+                <Input
+                  label="File Name / Menu Title"
+                  value={content.fileName || ''}
+                  onChange={(e) => setContent({ ...content, fileName: e.target.value })}
+                  placeholder="Product Catalog 2026"
+                />
+              )}
+            </>
+          )}
+
+          {qrCode.contentType === 'APP' && (
+            <>
+              <Input
+                label="iOS App Store URL"
+                value={content.iosUrl || ''}
+                onChange={(e) => setContent({ ...content, iosUrl: e.target.value })}
+                placeholder="https://apps.apple.com/app/..."
+              />
+              <Input
+                label="Android Play Store URL"
+                value={content.androidUrl || ''}
+                onChange={(e) => setContent({ ...content, androidUrl: e.target.value })}
+                placeholder="https://play.google.com/store/apps/..."
+              />
+              <Input
+                label="Fallback URL (Desktop)"
+                value={content.fallbackUrl || ''}
+                onChange={(e) => setContent({ ...content, fallbackUrl: e.target.value })}
+                placeholder="https://yourapp.com"
+              />
+            </>
+          )}
+
+          {qrCode.contentType === 'COUPON' && (
+            <>
+              <Input
+                label="Coupon Code"
+                value={content.code || ''}
+                onChange={(e) => setContent({ ...content, code: e.target.value })}
+                placeholder="SUMMER20"
+                required
+              />
+              <Input
+                label="Discount"
+                value={content.discount || ''}
+                onChange={(e) => setContent({ ...content, discount: e.target.value })}
+                placeholder="20% OFF"
+                required
+              />
+              <Input
+                label="Title"
+                value={content.title || ''}
+                onChange={(e) => setContent({ ...content, title: e.target.value })}
+                placeholder="Summer Sale 2026"
+              />
+              <Input
+                label="Description (optional)"
+                value={content.description || ''}
+                onChange={(e) => setContent({ ...content, description: e.target.value })}
+                placeholder="Valid on all products"
+              />
+              <Input
+                label="Expiry Date (optional)"
+                type="date"
+                value={content.expiryDate || ''}
+                onChange={(e) => setContent({ ...content, expiryDate: e.target.value })}
+              />
+              <Input
+                label="Redeem URL (optional)"
+                value={content.redeemUrl || ''}
+                onChange={(e) => setContent({ ...content, redeemUrl: e.target.value })}
+                placeholder="https://shop.example.com"
+              />
+            </>
+          )}
+
+          {qrCode.contentType === 'FEEDBACK' && (
+            <>
+              <Input
+                label="Business Name"
+                value={content.businessName || ''}
+                onChange={(e) => setContent({ ...content, businessName: e.target.value })}
+                placeholder="Your Restaurant Name"
+                required
+              />
+              <Input
+                label="Google Review URL (optional)"
+                value={content.googleReviewUrl || ''}
+                onChange={(e) => setContent({ ...content, googleReviewUrl: e.target.value })}
+                placeholder="https://search.google.com/local/writereview?placeid=..."
+              />
+              <Input
+                label="Thank You Message"
+                value={content.thankYouMessage || ''}
+                onChange={(e) => setContent({ ...content, thankYouMessage: e.target.value })}
+                placeholder="Thanks for your feedback!"
+              />
+            </>
+          )}
+
+          <div className="flex justify-end space-x-4 pt-4">
+            <Button
+              variant="outline"
+              onClick={() => router.push('/dashboard')}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              loading={saving}
+              disabled={csrfLoading || saving}
+            >
+              {csrfLoading ? 'Loading...' : 'Save Changes'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/(main)/(app)/qr/[id]/feedback/page.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Star, ArrowLeft, ChevronLeft, ChevronRight, MessageSquare } from 'lucide-react';
+
+interface Feedback {
+    id: string;
+    rating: number;
+    comment: string;
+    date: string;
+}
+
+interface FeedbackStats {
+    total: number;
+    avgRating: number;
+    distribution: { [key: number]: number };
+}
+
+interface Pagination {
+    page: number;
+    totalPages: number;
+    hasMore: boolean;
+}
+
+export default function FeedbackListPage() {
+    const params = useParams();
+    const router = useRouter();
+    const qrId = params.id as string;
+
+    const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+    const [stats, setStats] = useState<FeedbackStats | null>(null);
+    const [pagination, setPagination] = useState<Pagination>({ page: 1, totalPages: 1, hasMore: false });
+    const [loading, setLoading] = useState(true);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    useEffect(() => {
+        fetchFeedback(currentPage);
+    }, [qrId, currentPage]);
+
+    const fetchFeedback = async (page: number) => {
+        setLoading(true);
+        try {
+            const res = await fetch(`/api/qrs/${qrId}/feedback?page=${page}&limit=20`);
+            if (res.ok) {
+                const data = await res.json();
+                setFeedbacks(data.feedbacks);
+                setStats(data.stats);
+                setPagination(data.pagination);
+            }
+        } catch (error) {
+            console.error('Error fetching feedback:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const renderStars = (rating: number) => (
+        <div className="flex gap-0.5">
+            {[1, 2, 3, 4, 5].map((star) => (
+                <Star
+                    key={star}
+                    className={`w-4 h-4 ${star <= rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200'}`}
+                />
+            ))}
+        </div>
+    );
+
+    if (loading && !stats) {
+        return (
+            <div className="flex items-center justify-center min-h-[400px]">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="max-w-4xl mx-auto">
+            {/* Header */}
+            <div className="mb-8">
+                <Link href={`/qr/${qrId}`} className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-4">
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    Back to QR Code
+                </Link>
+                <h1 className="text-3xl font-bold text-gray-900">Customer Feedback</h1>
+                <p className="text-gray-600 mt-1">{stats?.total || 0} total responses</p>
+            </div>
+
+            {/* Stats Overview */}
+            {stats && (
+                <Card className="mb-8">
+                    <CardContent className="p-6">
+                        <div className="flex flex-col md:flex-row md:items-center gap-8">
+                            {/* Average Rating */}
+                            <div className="text-center md:text-left">
+                                <div className="text-5xl font-bold text-gray-900 mb-1">{stats.avgRating}</div>
+                                <div className="flex justify-center md:justify-start mb-1">
+                                    {renderStars(Math.round(stats.avgRating))}
+                                </div>
+                                <p className="text-sm text-gray-500">{stats.total} reviews</p>
+                            </div>
+
+                            {/* Distribution */}
+                            <div className="flex-1 space-y-2">
+                                {[5, 4, 3, 2, 1].map((rating) => {
+                                    const count = stats.distribution[rating] || 0;
+                                    const percentage = stats.total > 0 ? (count / stats.total) * 100 : 0;
+                                    return (
+                                        <div key={rating} className="flex items-center gap-3">
+                                            <span className="text-sm text-gray-600 w-12">{rating} stars</span>
+                                            <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
+                                                <div
+                                                    className="h-full bg-amber-400 rounded-full transition-all"
+                                                    style={{ width: `${percentage}%` }}
+                                                />
+                                            </div>
+                                            <span className="text-sm text-gray-500 w-12 text-right">{count}</span>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            )}
+
+            {/* Feedback List */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <MessageSquare className="w-5 h-5" />
+                        All Reviews
+                    </CardTitle>
+                </CardHeader>
+                <CardContent>
+                    {feedbacks.length === 0 ? (
+                        <div className="text-center py-12 text-gray-500">
+                            <Star className="w-12 h-12 mx-auto mb-4 text-gray-300" />
+                            <p>No feedback received yet</p>
+                        </div>
+                    ) : (
+                        <div className="divide-y divide-gray-100">
+                            {feedbacks.map((feedback) => (
+                                <div key={feedback.id} className="py-4">
+                                    <div className="flex items-center justify-between mb-2">
+                                        {renderStars(feedback.rating)}
+                                        <span className="text-sm text-gray-400">
+                                            {new Date(feedback.date).toLocaleDateString('en-US', {
+                                                month: 'short',
+                                                day: 'numeric',
+                                                year: 'numeric',
+                                            })}
+                                        </span>
+                                    </div>
+                                    {feedback.comment && (
+                                        <p className="text-gray-700">{feedback.comment}</p>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Pagination */}
+                    {pagination.totalPages > 1 && (
+                        <div className="flex items-center justify-between mt-6 pt-6 border-t">
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                                disabled={currentPage === 1}
+                            >
+                                <ChevronLeft className="w-4 h-4 mr-1" />
+                                Previous
+                            </Button>
+                            <span className="text-sm text-gray-500">
+                                Page {currentPage} of {pagination.totalPages}
+                            </span>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setCurrentPage((p) => p + 1)}
+                                disabled={!pagination.hasMore}
+                            >
+                                Next
+                                <ChevronRight className="w-4 h-4 ml-1" />
+                            </Button>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/app/(main)/(app)/qr/[id]/page.tsx

@@ -0,0 +1,287 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { QRCodeSVG } from 'qrcode.react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import {
+    ArrowLeft, Edit, ExternalLink, Star, MessageSquare,
+    BarChart3, Copy, Check, Pause, Play
+} from 'lucide-react';
+import { showToast } from '@/components/ui/Toast';
+import { useCsrf } from '@/hooks/useCsrf';
+
+interface QRCode {
+    id: string;
+    title: string;
+    type: 'STATIC' | 'DYNAMIC';
+    contentType: string;
+    content: any;
+    slug: string;
+    status: 'ACTIVE' | 'PAUSED';
+    style: any;
+    createdAt: string;
+    _count?: { scans: number };
+}
+
+interface FeedbackStats {
+    total: number;
+    avgRating: number;
+    distribution: { [key: number]: number };
+}
+
+export default function QRDetailPage() {
+    const params = useParams();
+    const router = useRouter();
+    const qrId = params.id as string;
+    const { fetchWithCsrf } = useCsrf();
+
+    const [qrCode, setQrCode] = useState<QRCode | null>(null);
+    const [feedbackStats, setFeedbackStats] = useState<FeedbackStats | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [copied, setCopied] = useState(false);
+
+    useEffect(() => {
+        fetchQRCode();
+    }, [qrId]);
+
+    const fetchQRCode = async () => {
+        try {
+            const res = await fetch(`/api/qrs/${qrId}`);
+            if (res.ok) {
+                const data = await res.json();
+                setQrCode(data);
+
+                // Fetch feedback stats if it's a feedback QR
+                if (data.contentType === 'FEEDBACK') {
+                    const feedbackRes = await fetch(`/api/qrs/${qrId}/feedback?limit=1`);
+                    if (feedbackRes.ok) {
+                        const feedbackData = await feedbackRes.json();
+                        setFeedbackStats(feedbackData.stats);
+                    }
+                }
+            } else {
+                showToast('QR code not found', 'error');
+                router.push('/dashboard');
+            }
+        } catch (error) {
+            console.error('Error fetching QR code:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const copyLink = async () => {
+        const url = `${window.location.origin}/r/${qrCode?.slug}`;
+        await navigator.clipboard.writeText(url);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+        showToast('Link copied!', 'success');
+    };
+
+    const toggleStatus = async () => {
+        if (!qrCode) return;
+        const newStatus = qrCode.status === 'ACTIVE' ? 'PAUSED' : 'ACTIVE';
+
+        try {
+            const res = await fetchWithCsrf(`/api/qrs/${qrId}`, {
+                method: 'PATCH',
+                body: JSON.stringify({ status: newStatus }),
+            });
+
+            if (res.ok) {
+                setQrCode({ ...qrCode, status: newStatus });
+                showToast(`QR code ${newStatus === 'ACTIVE' ? 'activated' : 'paused'}`, 'success');
+            }
+        } catch (error) {
+            showToast('Failed to update status', 'error');
+        }
+    };
+
+    const renderStars = (rating: number) => (
+        <div className="flex gap-0.5">
+            {[1, 2, 3, 4, 5].map((star) => (
+                <Star
+                    key={star}
+                    className={`w-4 h-4 ${star <= rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200'}`}
+                />
+            ))}
+        </div>
+    );
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center min-h-[400px]">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+            </div>
+        );
+    }
+
+    if (!qrCode) return null;
+
+    const qrUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/r/${qrCode.slug}`;
+
+    return (
+        <div className="max-w-6xl mx-auto">
+            {/* Header */}
+            <div className="mb-8">
+                <Link href="/dashboard" className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-4">
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    Back to Dashboard
+                </Link>
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div>
+                        <h1 className="text-3xl font-bold text-gray-900">{qrCode.title}</h1>
+                        <div className="flex items-center gap-2 mt-2">
+                            <Badge variant={qrCode.type === 'DYNAMIC' ? 'info' : 'default'}>
+                                {qrCode.type}
+                            </Badge>
+                            <Badge variant={qrCode.status === 'ACTIVE' ? 'success' : 'warning'}>
+                                {qrCode.status}
+                            </Badge>
+                            <Badge>{qrCode.contentType}</Badge>
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        {qrCode.type === 'DYNAMIC' && (
+                            <>
+                                <Button variant="outline" size="sm" onClick={toggleStatus}>
+                                    {qrCode.status === 'ACTIVE' ? <Pause className="w-4 h-4 mr-1" /> : <Play className="w-4 h-4 mr-1" />}
+                                    {qrCode.status === 'ACTIVE' ? 'Pause' : 'Activate'}
+                                </Button>
+                                <Link href={`/qr/${qrId}/edit`}>
+                                    <Button variant="outline" size="sm">
+                                        <Edit className="w-4 h-4 mr-1" /> Edit
+                                    </Button>
+                                </Link>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="grid lg:grid-cols-3 gap-8">
+                {/* Left: QR Code */}
+                <div>
+                    <Card>
+                        <CardContent className="p-6 flex flex-col items-center">
+                            <div className="bg-white p-4 rounded-xl shadow-sm mb-4">
+                                <QRCodeSVG
+                                    value={qrUrl}
+                                    size={200}
+                                    fgColor={qrCode.style?.foregroundColor || '#000000'}
+                                    bgColor={qrCode.style?.backgroundColor || '#FFFFFF'}
+                                />
+                            </div>
+
+                            <div className="w-full space-y-2">
+                                <Button variant="outline" className="w-full" onClick={copyLink}>
+                                    {copied ? <Check className="w-4 h-4 mr-2" /> : <Copy className="w-4 h-4 mr-2" />}
+                                    {copied ? 'Copied!' : 'Copy Link'}
+                                </Button>
+                                <a href={qrUrl} target="_blank" rel="noopener noreferrer" className="block">
+                                    <Button variant="outline" className="w-full">
+                                        <ExternalLink className="w-4 h-4 mr-2" /> Open Link
+                                    </Button>
+                                </a>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Right: Stats & Info */}
+                <div className="lg:col-span-2 space-y-6">
+                    {/* Quick Stats */}
+                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                        <Card>
+                            <CardContent className="p-4 text-center">
+                                <BarChart3 className="w-6 h-6 mx-auto mb-2 text-indigo-500" />
+                                <p className="text-2xl font-bold text-gray-900">{qrCode._count?.scans || 0}</p>
+                                <p className="text-sm text-gray-500">Total Scans</p>
+                            </CardContent>
+                        </Card>
+                        <Card>
+                            <CardContent className="p-4 text-center">
+                                <p className="text-2xl font-bold text-gray-900">{qrCode.type}</p>
+                                <p className="text-sm text-gray-500">QR Type</p>
+                            </CardContent>
+                        </Card>
+                        <Card>
+                            <CardContent className="p-4 text-center">
+                                <p className="text-2xl font-bold text-gray-900">
+                                    {new Date(qrCode.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                                </p>
+                                <p className="text-sm text-gray-500">Created</p>
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Feedback Summary (only for FEEDBACK type) */}
+                    {qrCode.contentType === 'FEEDBACK' && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Star className="w-5 h-5 text-amber-400" />
+                                    Customer Feedback
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {feedbackStats && feedbackStats.total > 0 ? (
+                                    <div className="flex flex-col sm:flex-row sm:items-center gap-6 mb-4">
+                                        {/* Average */}
+                                        <div className="text-center sm:text-left">
+                                            <div className="text-4xl font-bold text-gray-900">{feedbackStats.avgRating}</div>
+                                            {renderStars(Math.round(feedbackStats.avgRating))}
+                                            <p className="text-sm text-gray-500 mt-1">{feedbackStats.total} reviews</p>
+                                        </div>
+
+                                        {/* Distribution */}
+                                        <div className="flex-1 space-y-1">
+                                            {[5, 4, 3, 2, 1].map((rating) => {
+                                                const count = feedbackStats.distribution[rating] || 0;
+                                                const pct = feedbackStats.total > 0 ? (count / feedbackStats.total) * 100 : 0;
+                                                return (
+                                                    <div key={rating} className="flex items-center gap-2 text-sm">
+                                                        <span className="w-8 text-gray-500">{rating}★</span>
+                                                        <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
+                                                            <div className="h-full bg-amber-400 rounded-full" style={{ width: `${pct}%` }} />
+                                                        </div>
+                                                        <span className="w-8 text-gray-400 text-right">{count}</span>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <p className="text-gray-500 mb-4">No feedback received yet. Share your QR code to collect reviews!</p>
+                                )}
+
+                                <Link href={`/qr/${qrId}/feedback`} className="block">
+                                    <Button variant="outline" className="w-full">
+                                        <MessageSquare className="w-4 h-4 mr-2" />
+                                        View All Feedback
+                                    </Button>
+                                </Link>
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {/* Content Info */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Content Details</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <pre className="bg-gray-50 p-4 rounded-lg text-sm overflow-auto">
+                                {JSON.stringify(qrCode.content, null, 2)}
+                            </pre>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}