579 lines
19 KiB
TypeScript
579 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { StatsGrid } from '@/components/dashboard/StatsGrid';
|
|
import { QRCodeCard } from '@/components/dashboard/QRCodeCard';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
import { useCsrf } from '@/hooks/useCsrf';
|
|
import { showToast } from '@/components/ui/Toast';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/Dialog';
|
|
|
|
interface QRCodeData {
|
|
id: string;
|
|
title: string;
|
|
type: 'STATIC' | 'DYNAMIC';
|
|
contentType: string;
|
|
content?: any;
|
|
slug: string;
|
|
createdAt: string;
|
|
scans: number;
|
|
style?: any;
|
|
status?: 'ACTIVE' | 'INACTIVE';
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const { fetchWithCsrf } = useCsrf();
|
|
const [qrCodes, setQrCodes] = useState<QRCodeData[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [userPlan, setUserPlan] = useState<string>('FREE');
|
|
const [showUpgradeDialog, setShowUpgradeDialog] = useState(false);
|
|
const [upgradedPlan, setUpgradedPlan] = useState<string>('');
|
|
const [deletingAll, setDeletingAll] = useState(false);
|
|
const [stats, setStats] = useState({
|
|
totalScans: 0,
|
|
activeQRCodes: 0,
|
|
conversionRate: 0,
|
|
uniqueScans: 0,
|
|
});
|
|
const [analyticsData, setAnalyticsData] = useState<any>(null);
|
|
const [userSubdomain, setUserSubdomain] = useState<string | null>(null);
|
|
|
|
const mockQRCodes = [
|
|
{
|
|
id: '1',
|
|
title: 'Support Phone',
|
|
type: 'DYNAMIC' as const,
|
|
contentType: 'PHONE',
|
|
slug: 'support-phone-demo',
|
|
status: 'ACTIVE' as const,
|
|
createdAt: '2025-08-07T10:00:00Z',
|
|
scans: 0,
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Event Details',
|
|
type: 'DYNAMIC' as const,
|
|
contentType: 'URL',
|
|
slug: 'event-details-demo',
|
|
status: 'ACTIVE' as const,
|
|
createdAt: '2025-08-07T10:01:00Z',
|
|
scans: 0,
|
|
},
|
|
{
|
|
id: '3',
|
|
title: 'Product Demo',
|
|
type: 'DYNAMIC' as const,
|
|
contentType: 'URL',
|
|
slug: 'product-demo-qr',
|
|
status: 'ACTIVE' as const,
|
|
createdAt: '2025-08-07T10:02:00Z',
|
|
scans: 0,
|
|
},
|
|
{
|
|
id: '4',
|
|
title: 'Company Website',
|
|
type: 'DYNAMIC' as const,
|
|
contentType: 'URL',
|
|
slug: 'company-website-qr',
|
|
status: 'ACTIVE' as const,
|
|
createdAt: '2025-08-07T10:03:00Z',
|
|
scans: 0,
|
|
},
|
|
{
|
|
id: '5',
|
|
title: 'Contact Card',
|
|
type: 'DYNAMIC' as const,
|
|
contentType: 'VCARD',
|
|
slug: 'contact-card-qr',
|
|
status: 'ACTIVE' as const,
|
|
createdAt: '2025-08-07T10:04:00Z',
|
|
scans: 0,
|
|
},
|
|
{
|
|
id: '6',
|
|
title: 'Event Details',
|
|
type: 'DYNAMIC' as const,
|
|
contentType: 'URL',
|
|
slug: 'event-details-dup',
|
|
status: 'ACTIVE' as const,
|
|
createdAt: '2025-08-07T10:05:00Z',
|
|
scans: 0,
|
|
},
|
|
];
|
|
|
|
const blogPosts = [
|
|
// NEW POSTS
|
|
{
|
|
title: 'How to Create a QR Code for Restaurant Menu',
|
|
excerpt: 'Step-by-step guide to creating digital menu QR codes for your restaurant. Best practices for touchless menus.',
|
|
readTime: '12 Min',
|
|
slug: 'qr-code-restaurant-menu',
|
|
},
|
|
{
|
|
title: 'Free vCard QR Code Generator: Digital Business Cards',
|
|
excerpt: 'Create professional vCard QR codes for digital business cards. Share contact info instantly.',
|
|
readTime: '10 Min',
|
|
slug: 'vcard-qr-code-generator',
|
|
},
|
|
{
|
|
title: 'Best QR Code Generator for Small Business',
|
|
excerpt: 'Find the best QR code solution for your small business. Compare features, pricing, and use cases.',
|
|
readTime: '14 Min',
|
|
slug: 'qr-code-small-business',
|
|
},
|
|
{
|
|
title: 'QR Code Print Size Guide',
|
|
excerpt: 'Complete guide to QR code print sizes. Minimum dimensions for business cards, posters, and more.',
|
|
readTime: '8 Min',
|
|
slug: 'qr-code-print-size-guide',
|
|
},
|
|
// EXISTING POSTS
|
|
{
|
|
title: 'QR Code Tracking: Complete Guide 2025',
|
|
excerpt: 'Learn how to track QR code scans with real-time analytics. Compare free vs paid tracking tools.',
|
|
readTime: '12 Min',
|
|
slug: 'qr-code-tracking-guide-2025',
|
|
},
|
|
{
|
|
title: 'Dynamic vs Static QR Codes: Which Should You Use?',
|
|
excerpt: 'Understand the difference between static and dynamic QR codes. Pros, cons, and when to use each.',
|
|
readTime: '10 Min',
|
|
slug: 'dynamic-vs-static-qr-codes',
|
|
},
|
|
{
|
|
title: 'How to Generate Bulk QR Codes from Excel',
|
|
excerpt: 'Generate hundreds of QR codes from Excel or CSV files in minutes. Step-by-step guide.',
|
|
readTime: '13 Min',
|
|
slug: 'bulk-qr-code-generator-excel',
|
|
},
|
|
{
|
|
title: 'QR Code Analytics: Track, Measure & Optimize',
|
|
excerpt: 'Learn how to leverage scan analytics and dashboard insights to maximize QR code ROI.',
|
|
readTime: '15 Min',
|
|
slug: 'qr-code-analytics',
|
|
},
|
|
];
|
|
|
|
// Track Google OAuth login/signup
|
|
useEffect(() => {
|
|
const authMethod = searchParams.get('authMethod');
|
|
const isNewUser = searchParams.get('isNewUser') === 'true';
|
|
|
|
if (authMethod === 'google') {
|
|
const trackGoogleAuth = async () => {
|
|
try {
|
|
// Fetch user data from API (cookie-based auth)
|
|
const response = await fetch('/api/user');
|
|
if (!response.ok) return;
|
|
|
|
const user = await response.json();
|
|
|
|
// Store in localStorage for consistency
|
|
localStorage.setItem('user', JSON.stringify(user));
|
|
|
|
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
|
|
identifyUser(user.id, {
|
|
email: user.email,
|
|
name: user.name,
|
|
plan: user.plan || 'FREE',
|
|
provider: 'google',
|
|
});
|
|
|
|
trackEvent(isNewUser ? 'user_signup' : 'user_login', {
|
|
method: 'google',
|
|
email: user.email,
|
|
isNewUser,
|
|
});
|
|
|
|
// Clean up URL params
|
|
router.replace('/dashboard');
|
|
} catch (error) {
|
|
console.error('PostHog tracking error:', error);
|
|
}
|
|
};
|
|
|
|
trackGoogleAuth();
|
|
}
|
|
}, [searchParams, router]);
|
|
|
|
// Check for successful payment and verify session
|
|
useEffect(() => {
|
|
const success = searchParams.get('success');
|
|
if (success === 'true') {
|
|
const verifySession = async () => {
|
|
try {
|
|
const response = await fetch('/api/stripe/verify-session', {
|
|
method: 'POST',
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setUserPlan(data.plan);
|
|
setUpgradedPlan(data.plan);
|
|
setShowUpgradeDialog(true);
|
|
// Remove success parameter from URL
|
|
router.replace('/dashboard');
|
|
} else {
|
|
console.error('Failed to verify session:', await response.text());
|
|
}
|
|
} catch (error) {
|
|
console.error('Error verifying session:', error);
|
|
}
|
|
};
|
|
|
|
verifySession();
|
|
}
|
|
}, [searchParams, router]);
|
|
|
|
useEffect(() => {
|
|
// Load real QR codes and user plan from API
|
|
const fetchData = async () => {
|
|
try {
|
|
// Fetch QR codes
|
|
const qrResponse = await fetch('/api/qrs');
|
|
if (qrResponse.ok) {
|
|
const data = await qrResponse.json();
|
|
setQrCodes(data);
|
|
|
|
// Calculate real stats
|
|
const totalScans = data.reduce((sum: number, qr: QRCodeData) => sum + (qr.scans || 0), 0);
|
|
const activeQRCodes = data.filter((qr: QRCodeData) => qr.status === 'ACTIVE').length;
|
|
// Calculate unique scans (absolute count)
|
|
const uniqueScans = data.reduce((acc: number, qr: any) => acc + (qr.uniqueScans || 0), 0);
|
|
const conversionRate = totalScans > 0 ? Math.round((uniqueScans / totalScans) * 100) : 0;
|
|
|
|
setStats({
|
|
totalScans,
|
|
activeQRCodes,
|
|
conversionRate,
|
|
uniqueScans,
|
|
});
|
|
} else {
|
|
// If not logged in, show zeros
|
|
setQrCodes([]);
|
|
setStats({
|
|
totalScans: 0,
|
|
activeQRCodes: 0,
|
|
conversionRate: 0,
|
|
uniqueScans: 0,
|
|
});
|
|
}
|
|
|
|
// Fetch user plan (using cookie-based auth, no session needed)
|
|
const userResponse = await fetch('/api/user/plan');
|
|
if (userResponse.ok) {
|
|
const userData = await userResponse.json();
|
|
setUserPlan(userData.plan || 'FREE');
|
|
}
|
|
|
|
// Fetch analytics data for trends (last 30 days = month comparison)
|
|
const analyticsResponse = await fetch('/api/analytics/summary?range=30');
|
|
if (analyticsResponse.ok) {
|
|
const analytics = await analyticsResponse.json();
|
|
setAnalyticsData(analytics);
|
|
}
|
|
|
|
// Fetch user subdomain for white label display
|
|
const subdomainResponse = await fetch('/api/user/subdomain');
|
|
if (subdomainResponse.ok) {
|
|
const subdomainData = await subdomainResponse.json();
|
|
setUserSubdomain(subdomainData.subdomain || null);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
setQrCodes([]);
|
|
setStats({
|
|
totalScans: 0,
|
|
activeQRCodes: 0,
|
|
conversionRate: 0,
|
|
uniqueScans: 0,
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const handleEdit = (id: string) => {
|
|
// Redirect to edit page
|
|
router.push(`/qr/${id}/edit`);
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Are you sure you want to delete this QR code? This action cannot be undone.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetchWithCsrf(`/api/qrs/${id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Remove from local state
|
|
setQrCodes(qrCodes.filter(q => q.id !== id));
|
|
showToast('QR code deleted successfully!', 'success');
|
|
} else {
|
|
throw new Error('Failed to delete');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting QR:', error);
|
|
showToast('Failed to delete QR code', 'error');
|
|
}
|
|
};
|
|
|
|
const handleDeleteAll = async () => {
|
|
if (!confirm('Are you sure you want to delete ALL QR codes? This action cannot be undone.')) {
|
|
return;
|
|
}
|
|
|
|
// Double confirmation
|
|
if (!confirm('This will permanently delete ALL your QR codes. Are you absolutely sure?')) {
|
|
return;
|
|
}
|
|
|
|
setDeletingAll(true);
|
|
|
|
try {
|
|
const response = await fetchWithCsrf('/api/qrs/delete-all', {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setQrCodes([]);
|
|
setStats({
|
|
totalScans: 0,
|
|
activeQRCodes: 0,
|
|
conversionRate: 0,
|
|
uniqueScans: 0,
|
|
});
|
|
showToast(`Successfully deleted ${data.deletedCount} QR code${data.deletedCount !== 1 ? 's' : ''}`, 'success');
|
|
} else {
|
|
throw new Error('Failed to delete all QR codes');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting all QR codes:', error);
|
|
showToast('Failed to delete QR codes', 'error');
|
|
} finally {
|
|
setDeletingAll(false);
|
|
}
|
|
};
|
|
|
|
const getPlanBadgeColor = (plan: string) => {
|
|
switch (plan) {
|
|
case 'PRO':
|
|
return 'info';
|
|
case 'BUSINESS':
|
|
return 'warning';
|
|
default:
|
|
return 'default';
|
|
}
|
|
};
|
|
|
|
const getPlanEmoji = (plan: string) => {
|
|
// No emojis anymore
|
|
return '';
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Header with Plan Badge */}
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">{t('dashboard.title')}</h1>
|
|
<p className="text-gray-600 mt-2">{t('dashboard.subtitle')}</p>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<Badge variant={getPlanBadgeColor(userPlan)} className="text-lg px-4 py-2">
|
|
{userPlan} Plan
|
|
</Badge>
|
|
{userPlan === 'FREE' && (
|
|
<Link href="/pricing">
|
|
<Button variant="primary">Upgrade</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<StatsGrid
|
|
stats={stats}
|
|
trends={{
|
|
totalScans: analyticsData?.summary.scansTrend,
|
|
comparisonPeriod: analyticsData?.summary.comparisonPeriod || 'month'
|
|
}}
|
|
/>
|
|
|
|
{/* Recent QR Codes */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-semibold text-gray-900">{t('dashboard.recent_codes')}</h2>
|
|
<div className="flex gap-3">
|
|
{qrCodes.length > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleDeleteAll}
|
|
disabled={deletingAll}
|
|
className="border-red-600 text-red-600 hover:bg-red-50"
|
|
>
|
|
{deletingAll ? 'Deleting...' : 'Delete All'}
|
|
</Button>
|
|
)}
|
|
<Link href="/create">
|
|
<Button>Create New QR Code</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
|
<Card key={i}>
|
|
<CardContent className="p-4">
|
|
<div className="animate-pulse">
|
|
<div className="h-4 bg-gray-200 rounded w-3/4 mb-3"></div>
|
|
<div className="h-24 bg-gray-200 rounded mb-3"></div>
|
|
<div className="space-y-2">
|
|
<div className="h-3 bg-gray-200 rounded"></div>
|
|
<div className="h-3 bg-gray-200 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{qrCodes.map((qr) => (
|
|
<QRCodeCard
|
|
key={`${qr.id}-${userSubdomain || 'default'}`}
|
|
qr={qr}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
userSubdomain={userSubdomain}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Blog & Resources - Horizontal Scroll */}
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-6">{t('dashboard.blog_resources')}</h2>
|
|
<div className="overflow-x-auto pb-4 -mx-4 px-4">
|
|
<div className="flex gap-6" style={{ minWidth: 'max-content' }}>
|
|
{blogPosts.map((post) => (
|
|
<Card key={post.slug} hover className="flex-shrink-0" style={{ width: '300px' }}>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Badge variant="info">{post.readTime}</Badge>
|
|
</div>
|
|
<CardTitle className="text-lg line-clamp-2">{post.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-gray-600 text-sm line-clamp-2">{post.excerpt}</p>
|
|
<Link
|
|
href={`/blog/${post.slug}`}
|
|
className="text-primary-600 hover:text-primary-700 text-sm font-medium mt-3 inline-block"
|
|
>
|
|
Read more →
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upgrade Success Dialog */}
|
|
<Dialog open={showUpgradeDialog} onOpenChange={setShowUpgradeDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl text-center">
|
|
Upgrade Successful!
|
|
</DialogTitle>
|
|
<DialogDescription className="text-center text-base pt-4">
|
|
Welcome to the <strong>{upgradedPlan} Plan</strong>! Your account has been successfully upgraded.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="py-6 space-y-4">
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200">
|
|
<h3 className="font-semibold text-gray-900 mb-3">Your New Features:</h3>
|
|
<ul className="space-y-2 text-sm text-gray-700">
|
|
{upgradedPlan === 'PRO' && (
|
|
<>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>50 Dynamic QR Codes</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>Custom Branding (Colors & Logo)</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>Detailed Analytics (Devices, Locations, Time-Series)</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>CSV Export</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>SVG/PNG Download</span>
|
|
</li>
|
|
</>
|
|
)}
|
|
{upgradedPlan === 'BUSINESS' && (
|
|
<>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>500 Dynamic QR Codes</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>Everything from Pro</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>Bulk QR Generation (up to 1,000)</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-green-600 mr-2">✓</span>
|
|
<span>Priority Support</span>
|
|
</li>
|
|
</>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => {
|
|
setShowUpgradeDialog(false);
|
|
router.push('/create');
|
|
}}
|
|
className="w-full"
|
|
>
|
|
Create First QR Code
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
} |