Compare commits
9 Commits
0774ff6f03
...
icons
| Author | SHA1 | Date | |
|---|---|---|---|
|
e7478a4af7 | ||
|
|
749cabf0bf | ||
|
|
036500f6d1 | ||
|
|
57d6e3a449 | ||
|
|
509e5a51a7 | ||
|
|
b2d83a0cd6 | ||
|
|
b217e50d9f | ||
|
|
9573a2eea9 | ||
|
2a51e432e8 |
19349
package-lock.json
generated
19349
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
169
package.json
169
package.json
@@ -1,83 +1,86 @@
|
|||||||
{
|
{
|
||||||
"name": "qr-master",
|
"name": "qr-master",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Create custom QR codes in seconds",
|
"description": "Create custom QR codes in seconds",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev -p 3050",
|
"dev": "next dev -p 3050",
|
||||||
"build": "prisma generate && next build",
|
"build": "prisma generate && next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"lint": "next lint",
|
||||||
"db:generate": "prisma generate",
|
"db:generate": "prisma generate",
|
||||||
"db:migrate": "prisma migrate dev",
|
"db:migrate": "prisma migrate dev",
|
||||||
"db:deploy": "prisma migrate deploy",
|
"db:deploy": "prisma migrate deploy",
|
||||||
"db:seed": "tsx prisma/seed.ts",
|
"db:seed": "tsx prisma/seed.ts",
|
||||||
"db:studio": "prisma studio",
|
"db:studio": "prisma studio",
|
||||||
"postinstall": "prisma generate",
|
"postinstall": "prisma generate",
|
||||||
"docker:dev": "docker compose -f docker-compose.dev.yml up -d",
|
"docker:dev": "docker compose -f docker-compose.dev.yml up -d",
|
||||||
"docker:dev:stop": "docker compose -f docker-compose.dev.yml down",
|
"docker:dev:stop": "docker compose -f docker-compose.dev.yml down",
|
||||||
"docker:dev:clean": "docker compose -f docker-compose.dev.yml down --remove-orphans && docker container prune -f",
|
"docker:dev:clean": "docker compose -f docker-compose.dev.yml down --remove-orphans && docker container prune -f",
|
||||||
"docker:prod": "docker compose up -d --build",
|
"docker:prod": "docker compose up -d --build",
|
||||||
"docker:stop": "docker compose down",
|
"docker:stop": "docker compose down",
|
||||||
"docker:logs": "docker compose logs -f",
|
"docker:logs": "docker compose logs -f",
|
||||||
"docker:db": "docker compose exec db psql -U postgres -d qrmaster",
|
"docker:db": "docker compose exec db psql -U postgres -d qrmaster",
|
||||||
"docker:redis": "docker compose exec redis redis-cli",
|
"docker:redis": "docker compose exec redis redis-cli",
|
||||||
"docker:backup": "docker compose exec db pg_dump -U postgres qrmaster > backup_$(date +%Y%m%d).sql"
|
"docker:backup": "docker compose exec db pg_dump -U postgres qrmaster > backup_$(date +%Y%m%d).sql"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@auth/prisma-adapter": "^2.11.1",
|
"@auth/prisma-adapter": "^2.11.1",
|
||||||
"@edge-runtime/cookies": "^6.0.0",
|
"@edge-runtime/cookies": "^6.0.0",
|
||||||
"@prisma/client": "^5.7.0",
|
"@prisma/client": "^5.7.0",
|
||||||
"@stripe/stripe-js": "^8.0.0",
|
"@stripe/stripe-js": "^8.0.0",
|
||||||
"bcryptjs": "^2.4.3",
|
"@types/d3-scale": "^4.0.9",
|
||||||
"chart.js": "^4.4.0",
|
"bcryptjs": "^2.4.3",
|
||||||
"clsx": "^2.0.0",
|
"chart.js": "^4.4.0",
|
||||||
"dayjs": "^1.11.10",
|
"clsx": "^2.0.0",
|
||||||
"exceljs": "^4.4.0",
|
"d3-scale": "^4.0.2",
|
||||||
"file-saver": "^2.0.5",
|
"dayjs": "^1.11.10",
|
||||||
"i18next": "^23.7.6",
|
"exceljs": "^4.4.0",
|
||||||
"ioredis": "^5.3.2",
|
"file-saver": "^2.0.5",
|
||||||
"jszip": "^3.10.1",
|
"i18next": "^23.7.6",
|
||||||
"lucide-react": "^0.562.0",
|
"ioredis": "^5.3.2",
|
||||||
"next": "^14.2.35",
|
"jszip": "^3.10.1",
|
||||||
"next-auth": "^4.24.5",
|
"lucide-react": "^0.562.0",
|
||||||
"papaparse": "^5.4.1",
|
"next": "^14.2.35",
|
||||||
"posthog-js": "^1.276.0",
|
"next-auth": "^4.24.5",
|
||||||
"qr-code-styling": "^1.9.2",
|
"papaparse": "^5.4.1",
|
||||||
"qrcode": "^1.5.3",
|
"posthog-js": "^1.276.0",
|
||||||
"qrcode.react": "^3.1.0",
|
"qr-code-styling": "^1.9.2",
|
||||||
"react": "^18.2.0",
|
"qrcode": "^1.5.3",
|
||||||
"react-chartjs-2": "^5.2.0",
|
"qrcode.react": "^3.1.0",
|
||||||
"react-dom": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
"react-chartjs-2": "^5.2.0",
|
||||||
"react-i18next": "^13.5.0",
|
"react-dom": "^18.2.0",
|
||||||
"resend": "^6.4.2",
|
"react-dropzone": "^14.2.3",
|
||||||
"sharp": "^0.33.1",
|
"react-i18next": "^13.5.0",
|
||||||
"stripe": "^19.1.0",
|
"react-simple-maps": "^3.0.0",
|
||||||
"tailwind-merge": "^2.2.0",
|
"resend": "^6.4.2",
|
||||||
"uuid": "^13.0.0",
|
"sharp": "^0.33.1",
|
||||||
"zod": "^3.25.76"
|
"stripe": "^19.1.0",
|
||||||
},
|
"tailwind-merge": "^2.2.0",
|
||||||
"devDependencies": {
|
"uuid": "^13.0.0",
|
||||||
"@types/bcryptjs": "^2.4.6",
|
"zod": "^3.25.76"
|
||||||
"@types/file-saver": "^2.0.7",
|
},
|
||||||
"@types/node": "^20.10.5",
|
"devDependencies": {
|
||||||
"@types/papaparse": "^5.3.14",
|
"@types/bcryptjs": "^2.4.6",
|
||||||
"@types/qrcode": "^1.5.5",
|
"@types/file-saver": "^2.0.7",
|
||||||
"@types/react": "^18.2.45",
|
"@types/node": "^20.10.5",
|
||||||
"@types/react-dom": "^18.2.18",
|
"@types/papaparse": "^5.3.14",
|
||||||
"autoprefixer": "^10.4.16",
|
"@types/qrcode": "^1.5.5",
|
||||||
"eslint": "^8.56.0",
|
"@types/react": "^18.2.45",
|
||||||
"eslint-config-next": "^16.1.1",
|
"@types/react-dom": "^18.2.18",
|
||||||
"next-sitemap": "^4.2.3",
|
"autoprefixer": "^10.4.16",
|
||||||
"postcss": "^8.4.32",
|
"eslint": "^8.56.0",
|
||||||
"prettier": "^3.1.1",
|
"eslint-config-next": "^16.1.1",
|
||||||
"prisma": "^5.7.0",
|
"next-sitemap": "^4.2.3",
|
||||||
"tailwindcss": "^3.3.6",
|
"postcss": "^8.4.32",
|
||||||
"tsx": "^4.7.0",
|
"prettier": "^3.1.1",
|
||||||
"typescript": "^5.3.3"
|
"prisma": "^5.7.0",
|
||||||
},
|
"tailwindcss": "^3.3.6",
|
||||||
"engines": {
|
"tsx": "^4.7.0",
|
||||||
"node": ">=18.0.0"
|
"typescript": "^5.3.3"
|
||||||
}
|
},
|
||||||
}
|
"engines": {
|
||||||
|
"node": ">=18.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,256 +1,254 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname, useRouter } from 'next/navigation';
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
|
import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
|
||||||
import { Footer } from '@/components/ui/Footer';
|
import { Footer } from '@/components/ui/Footer';
|
||||||
import { useTranslation } from '@/hooks/useTranslation';
|
import { useTranslation } from '@/hooks/useTranslation';
|
||||||
|
|
||||||
interface User {
|
interface User {
|
||||||
id: string;
|
id: string;
|
||||||
name: string | null;
|
name: string | null;
|
||||||
email: string;
|
email: string;
|
||||||
plan: string | null;
|
plan: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AppLayout({
|
export default function AppLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
const [user, setUser] = useState<User | null>(null);
|
const [user, setUser] = useState<User | null>(null);
|
||||||
|
|
||||||
// Fetch user data on mount
|
// Fetch user data on mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchUser = async () => {
|
const fetchUser = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/user');
|
const response = await fetch('/api/user');
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const userData = await response.json();
|
const userData = await response.json();
|
||||||
setUser(userData);
|
setUser(userData);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching user:', error);
|
console.error('Error fetching user:', error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fetchUser();
|
fetchUser();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSignOut = async () => {
|
const handleSignOut = async () => {
|
||||||
// Track logout event before clearing data
|
// Track logout event before clearing data
|
||||||
try {
|
try {
|
||||||
const { trackEvent, resetUser } = await import('@/components/PostHogProvider');
|
const { trackEvent, resetUser } = await import('@/components/PostHogProvider');
|
||||||
trackEvent('user_logout');
|
trackEvent('user_logout');
|
||||||
resetUser(); // Reset PostHog user session
|
resetUser(); // Reset PostHog user session
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('PostHog tracking error:', error);
|
console.error('PostHog tracking error:', error);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear all cookies
|
// Clear all cookies
|
||||||
document.cookie.split(";").forEach(c => {
|
document.cookie.split(";").forEach(c => {
|
||||||
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
|
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
|
||||||
});
|
});
|
||||||
// Clear localStorage
|
// Clear localStorage
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
// Redirect to home
|
// Redirect to home
|
||||||
router.push('/');
|
router.push('/');
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get user initials for avatar (e.g., "Timo Schmidt" -> "TS")
|
// Get user initials for avatar (e.g., "Timo Schmidt" -> "TS")
|
||||||
const getUserInitials = () => {
|
const getUserInitials = () => {
|
||||||
if (!user) return 'U';
|
if (!user) return 'U';
|
||||||
|
|
||||||
if (user.name) {
|
if (user.name) {
|
||||||
const names = user.name.trim().split(' ');
|
const names = user.name.trim().split(' ');
|
||||||
if (names.length >= 2) {
|
if (names.length >= 2) {
|
||||||
return (names[0][0] + names[names.length - 1][0]).toUpperCase();
|
return (names[0][0] + names[names.length - 1][0]).toUpperCase();
|
||||||
}
|
}
|
||||||
return user.name.substring(0, 2).toUpperCase();
|
return user.name.substring(0, 2).toUpperCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback to email
|
// Fallback to email
|
||||||
return user.email.substring(0, 1).toUpperCase();
|
return user.email.substring(0, 1).toUpperCase();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get display name (first name or full name)
|
// Get display name (first name or full name)
|
||||||
const getDisplayName = () => {
|
const getDisplayName = () => {
|
||||||
if (!user) return 'User';
|
if (!user) return 'User';
|
||||||
|
|
||||||
if (user.name) {
|
if (user.name) {
|
||||||
return user.name;
|
return user.name;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback to email without domain
|
// Fallback to email without domain
|
||||||
return user.email.split('@')[0];
|
return user.email.split('@')[0];
|
||||||
};
|
};
|
||||||
|
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{
|
{
|
||||||
name: t('nav.dashboard'),
|
name: t('nav.dashboard'),
|
||||||
href: '/dashboard',
|
href: '/dashboard',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('nav.create_qr'),
|
name: t('nav.create_qr'),
|
||||||
href: '/create',
|
href: '/create',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('nav.bulk_creation'),
|
name: t('nav.bulk_creation'),
|
||||||
href: '/bulk-creation',
|
href: '/bulk-creation',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('nav.analytics'),
|
name: t('nav.analytics'),
|
||||||
href: '/analytics',
|
href: '/analytics',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('nav.pricing'),
|
name: t('nav.pricing'),
|
||||||
href: '/pricing',
|
href: '/pricing',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('nav.settings'),
|
name: t('nav.settings'),
|
||||||
href: '/settings',
|
href: '/settings',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Mobile sidebar backdrop */}
|
{/* Mobile sidebar backdrop */}
|
||||||
{sidebarOpen && (
|
{sidebarOpen && (
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
|
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
|
||||||
onClick={() => setSidebarOpen(false)}
|
onClick={() => setSidebarOpen(false)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<aside
|
<aside
|
||||||
className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${
|
className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
||||||
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
}`}
|
||||||
}`}
|
>
|
||||||
>
|
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||||||
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
<Link href="/" className="flex items-center space-x-2">
|
||||||
<Link href="/" className="flex items-center space-x-2">
|
<img src="/logo.svg" alt="QR Master" className="w-8 h-8" />
|
||||||
<img src="/logo.svg" alt="QR Master" className="w-8 h-8" />
|
<span className="text-xl font-bold text-gray-900">QR Master</span>
|
||||||
<span className="text-xl font-bold text-gray-900">QR Master</span>
|
</Link>
|
||||||
</Link>
|
<button
|
||||||
<button
|
className="lg:hidden"
|
||||||
className="lg:hidden"
|
onClick={() => setSidebarOpen(false)}
|
||||||
onClick={() => setSidebarOpen(false)}
|
>
|
||||||
>
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
</svg>
|
||||||
</svg>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
|
||||||
|
<nav className="p-4 space-y-1">
|
||||||
<nav className="p-4 space-y-1">
|
{navigation.map((item) => {
|
||||||
{navigation.map((item) => {
|
const isActive = pathname === item.href;
|
||||||
const isActive = pathname === item.href;
|
return (
|
||||||
return (
|
<Link
|
||||||
<Link
|
key={item.name}
|
||||||
key={item.name}
|
href={item.href}
|
||||||
href={item.href}
|
className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${isActive
|
||||||
className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${
|
? 'bg-primary-50 text-primary-600'
|
||||||
isActive
|
: 'text-gray-700 hover:bg-gray-100'
|
||||||
? 'bg-primary-50 text-primary-600'
|
}`}
|
||||||
: 'text-gray-700 hover:bg-gray-100'
|
>
|
||||||
}`}
|
{item.icon}
|
||||||
>
|
<span className="font-medium">{item.name}</span>
|
||||||
{item.icon}
|
</Link>
|
||||||
<span className="font-medium">{item.name}</span>
|
);
|
||||||
</Link>
|
})}
|
||||||
);
|
</nav>
|
||||||
})}
|
</aside>
|
||||||
</nav>
|
|
||||||
</aside>
|
{/* Main content */}
|
||||||
|
<div className="lg:ml-64">
|
||||||
{/* Main content */}
|
{/* Top bar */}
|
||||||
<div className="lg:ml-64">
|
<header className="bg-white border-b border-gray-200">
|
||||||
{/* Top bar */}
|
<div className="flex items-center justify-between px-4 py-3">
|
||||||
<header className="bg-white border-b border-gray-200">
|
<button
|
||||||
<div className="flex items-center justify-between px-4 py-3">
|
className="lg:hidden"
|
||||||
<button
|
onClick={() => setSidebarOpen(true)}
|
||||||
className="lg:hidden"
|
>
|
||||||
onClick={() => setSidebarOpen(true)}
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
</svg>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
</button>
|
||||||
</svg>
|
|
||||||
</button>
|
<div className="flex items-center space-x-4 ml-auto">
|
||||||
|
{/* User Menu */}
|
||||||
<div className="flex items-center space-x-4 ml-auto">
|
<Dropdown
|
||||||
{/* User Menu */}
|
align="right"
|
||||||
<Dropdown
|
trigger={
|
||||||
align="right"
|
<button className="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
|
||||||
trigger={
|
<div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
|
||||||
<button className="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
|
<span className="text-sm font-medium text-primary-600">
|
||||||
<div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
|
{getUserInitials()}
|
||||||
<span className="text-sm font-medium text-primary-600">
|
</span>
|
||||||
{getUserInitials()}
|
</div>
|
||||||
</span>
|
<span className="hidden md:block font-medium">
|
||||||
</div>
|
{getDisplayName()}
|
||||||
<span className="hidden md:block font-medium">
|
</span>
|
||||||
{getDisplayName()}
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</span>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
</svg>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
</button>
|
||||||
</svg>
|
}
|
||||||
</button>
|
>
|
||||||
}
|
<DropdownItem onClick={handleSignOut}>
|
||||||
>
|
Sign Out
|
||||||
<DropdownItem onClick={handleSignOut}>
|
</DropdownItem>
|
||||||
Sign Out
|
</Dropdown>
|
||||||
</DropdownItem>
|
</div>
|
||||||
</Dropdown>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</div>
|
|
||||||
</header>
|
{/* Page content */}
|
||||||
|
<main className="p-6">
|
||||||
{/* Page content */}
|
{children}
|
||||||
<main className="p-6">
|
</main>
|
||||||
{children}
|
|
||||||
</main>
|
{/* Footer */}
|
||||||
|
<Footer variant="dashboard" />
|
||||||
{/* Footer */}
|
</div>
|
||||||
<Footer />
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
@@ -1,167 +1,164 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import en from '@/i18n/en.json';
|
import en from '@/i18n/en.json';
|
||||||
|
|
||||||
export default function MarketingLayout({
|
export default function MarketingLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
// Always use English for marketing pages
|
// Always use English for marketing pages
|
||||||
const t = en;
|
const t = en;
|
||||||
|
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{ name: t.nav.features, href: '/#features' },
|
{ name: t.nav.features, href: '/#features' },
|
||||||
{ name: t.nav.pricing, href: '/#pricing' },
|
{ name: t.nav.pricing, href: '/#pricing' },
|
||||||
{ name: t.nav.faq, href: '/#faq' },
|
{ name: t.nav.faq, href: '/#faq' },
|
||||||
{ name: t.nav.blog, href: '/blog' },
|
{ name: t.nav.blog, href: '/blog' },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<header className="sticky top-0 z-50 bg-white border-b border-gray-200">
|
<header className="sticky top-0 z-50 bg-white border-b border-gray-200">
|
||||||
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-4">
|
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link href="/" className="flex items-center space-x-2">
|
<Link href="/" className="flex items-center space-x-2">
|
||||||
<img src="/favicon.svg" alt="QR Master" className="w-8 h-8" />
|
<img src="/favicon.svg" alt="QR Master" className="w-8 h-8" />
|
||||||
<span className="text-xl font-bold text-gray-900">QR Master</span>
|
<span className="text-xl font-bold text-gray-900">QR Master</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Desktop Navigation */}
|
{/* Desktop Navigation */}
|
||||||
<div className="hidden md:flex items-center space-x-8">
|
<div className="hidden md:flex items-center space-x-8">
|
||||||
{navigation.map((item) => (
|
{navigation.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
key={item.name}
|
key={item.name}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
|
className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Actions */}
|
{/* Right Actions */}
|
||||||
<div className="hidden md:flex items-center space-x-4">
|
<div className="hidden md:flex items-center space-x-4">
|
||||||
<Link href="/login">
|
<Link href="/login">
|
||||||
<Button variant="outline">{t.nav.login}</Button>
|
<Button variant="outline">{t.nav.login}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Link href="/signup">
|
<Link href="/signup">
|
||||||
<Button>Get Started Free</Button>
|
<Button>Get Started Free</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Menu Button */}
|
{/* Mobile Menu Button */}
|
||||||
<button
|
<button
|
||||||
className="md:hidden text-gray-900"
|
className="md:hidden text-gray-900"
|
||||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||||
aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
|
aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
|
||||||
aria-expanded={mobileMenuOpen}
|
aria-expanded={mobileMenuOpen}
|
||||||
>
|
>
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
{mobileMenuOpen ? (
|
{mobileMenuOpen ? (
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
) : (
|
) : (
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||||
)}
|
)}
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Menu */}
|
{/* Mobile Menu */}
|
||||||
{mobileMenuOpen && (
|
{mobileMenuOpen && (
|
||||||
<div className="md:hidden mt-4 pb-4 border-t border-gray-200 pt-4">
|
<div className="md:hidden mt-4 pb-4 border-t border-gray-200 pt-4">
|
||||||
<div className="flex flex-col space-y-4">
|
<div className="flex flex-col space-y-4">
|
||||||
{navigation.map((item) => (
|
{navigation.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
key={item.name}
|
key={item.name}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
className="text-gray-600 hover:text-gray-900 font-medium"
|
className="text-gray-600 hover:text-gray-900 font-medium"
|
||||||
onClick={() => setMobileMenuOpen(false)}
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
<Link href="/login" onClick={() => setMobileMenuOpen(false)}>
|
<Link href="/login" onClick={() => setMobileMenuOpen(false)}>
|
||||||
<Button variant="outline" className="w-full">{t.nav.login}</Button>
|
<Button variant="outline" className="w-full">{t.nav.login}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/signup" onClick={() => setMobileMenuOpen(false)}>
|
<Link href="/signup" onClick={() => setMobileMenuOpen(false)}>
|
||||||
<Button className="w-full">Get Started Free</Button>
|
<Button className="w-full">Get Started Free</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main>{children}</main>
|
<main>{children}</main>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="bg-gray-900 text-white py-12 mt-20">
|
<footer className="bg-gray-900 text-white py-12 mt-20">
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||||
<div className="grid md:grid-cols-4 gap-8">
|
<div className="grid md:grid-cols-4 gap-8">
|
||||||
<div>
|
<div>
|
||||||
<Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
|
<Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
|
||||||
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
|
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
|
||||||
<span className="text-xl font-bold">QR Master</span>
|
<span className="text-xl font-bold">QR Master</span>
|
||||||
</Link>
|
</Link>
|
||||||
<p className="text-gray-400">
|
<p className="text-gray-400">
|
||||||
Create custom QR codes in seconds with advanced tracking and analytics.
|
Create custom QR codes in seconds with advanced tracking and analytics.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold mb-4">Product</h3>
|
<h3 className="font-semibold mb-4">Product</h3>
|
||||||
<ul className="space-y-2 text-gray-400">
|
<ul className="space-y-2 text-gray-400">
|
||||||
<li><Link href="/#features" className="hover:text-white">Features</Link></li>
|
<li><Link href="/#features" className="hover:text-white">Features</Link></li>
|
||||||
<li><Link href="/#pricing" className="hover:text-white">Pricing</Link></li>
|
<li><Link href="/#pricing" className="hover:text-white">Pricing</Link></li>
|
||||||
<li><Link href="/#faq" className="hover:text-white">FAQ</Link></li>
|
<li><Link href="/#faq" className="hover:text-white">FAQ</Link></li>
|
||||||
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold mb-4">Resources</h3>
|
<h3 className="font-semibold mb-4">Resources</h3>
|
||||||
<ul className="space-y-2 text-gray-400">
|
<ul className="space-y-2 text-gray-400">
|
||||||
<li><Link href="/#pricing" className="hover:text-white">Full Pricing</Link></li>
|
<li><Link href="/#pricing" className="hover:text-white">Full Pricing</Link></li>
|
||||||
<li><Link href="/faq" className="hover:text-white">All Questions</Link></li>
|
<li><Link href="/faq" className="hover:text-white">All Questions</Link></li>
|
||||||
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
||||||
<li><Link href="/signup" className="hover:text-white">Get Started</Link></li>
|
<li><Link href="/signup" className="hover:text-white">Get Started</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold mb-4">Legal</h3>
|
<h3 className="font-semibold mb-4">Legal</h3>
|
||||||
<ul className="space-y-2 text-gray-400">
|
<ul className="space-y-2 text-gray-400">
|
||||||
<li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
|
<li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
|
<div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
|
||||||
<Link
|
<Link
|
||||||
href="/newsletter"
|
href="/newsletter"
|
||||||
className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
|
className="text-[6px] text-gray-700 opacity-[0.25] hover:opacity-100 hover:text-white transition-opacity duration-300"
|
||||||
>
|
>
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
•
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
</Link>
|
||||||
</svg>
|
<p>© 2025 QR Master. All rights reserved.</p>
|
||||||
Admin
|
<div className="w-12"></div>
|
||||||
</Link>
|
</div>
|
||||||
<p>© 2025 QR Master. All rights reserved.</p>
|
</div>
|
||||||
<div className="w-12"></div>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,216 +1,218 @@
|
|||||||
import { NextRequest, NextResponse } from 'next/server';
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
import { cookies } from 'next/headers';
|
import { cookies } from 'next/headers';
|
||||||
import { db } from '@/lib/db';
|
import { db } from '@/lib/db';
|
||||||
|
|
||||||
export async function GET(request: NextRequest) {
|
export const dynamic = 'force-dynamic';
|
||||||
try {
|
|
||||||
// Check newsletter-admin cookie authentication
|
export async function GET(request: NextRequest) {
|
||||||
const cookieStore = cookies();
|
try {
|
||||||
const adminCookie = cookieStore.get('newsletter-admin');
|
// Check newsletter-admin cookie authentication
|
||||||
|
const cookieStore = cookies();
|
||||||
if (!adminCookie || adminCookie.value !== 'authenticated') {
|
const adminCookie = cookieStore.get('newsletter-admin');
|
||||||
return NextResponse.json(
|
|
||||||
{ error: 'Unauthorized - Admin login required' },
|
if (!adminCookie || adminCookie.value !== 'authenticated') {
|
||||||
{ status: 401 }
|
return NextResponse.json(
|
||||||
);
|
{ error: 'Unauthorized - Admin login required' },
|
||||||
}
|
{ status: 401 }
|
||||||
|
);
|
||||||
// Get 30 days ago date
|
}
|
||||||
const thirtyDaysAgo = new Date();
|
|
||||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
|
// Get 30 days ago date
|
||||||
|
const thirtyDaysAgo = new Date();
|
||||||
// Get 7 days ago date
|
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
|
||||||
const sevenDaysAgo = new Date();
|
|
||||||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
// Get 7 days ago date
|
||||||
|
const sevenDaysAgo = new Date();
|
||||||
// Get start of current month
|
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||||
const startOfMonth = new Date();
|
|
||||||
startOfMonth.setDate(1);
|
// Get start of current month
|
||||||
startOfMonth.setHours(0, 0, 0, 0);
|
const startOfMonth = new Date();
|
||||||
|
startOfMonth.setDate(1);
|
||||||
// Fetch all statistics in parallel
|
startOfMonth.setHours(0, 0, 0, 0);
|
||||||
const [
|
|
||||||
totalUsers,
|
// Fetch all statistics in parallel
|
||||||
premiumUsers,
|
const [
|
||||||
newUsersThisWeek,
|
totalUsers,
|
||||||
newUsersThisMonth,
|
premiumUsers,
|
||||||
totalQRCodes,
|
newUsersThisWeek,
|
||||||
dynamicQRCodes,
|
newUsersThisMonth,
|
||||||
staticQRCodes,
|
totalQRCodes,
|
||||||
totalScans,
|
dynamicQRCodes,
|
||||||
dynamicQRCodesWithScans,
|
staticQRCodes,
|
||||||
activeQRCodes,
|
totalScans,
|
||||||
newsletterSubscribers,
|
dynamicQRCodesWithScans,
|
||||||
] = await Promise.all([
|
activeQRCodes,
|
||||||
// Total users
|
newsletterSubscribers,
|
||||||
db.user.count(),
|
] = await Promise.all([
|
||||||
|
// Total users
|
||||||
// Premium users (PRO or BUSINESS)
|
db.user.count(),
|
||||||
db.user.count({
|
|
||||||
where: {
|
// Premium users (PRO or BUSINESS)
|
||||||
plan: {
|
db.user.count({
|
||||||
in: ['PRO', 'BUSINESS'],
|
where: {
|
||||||
},
|
plan: {
|
||||||
},
|
in: ['PRO', 'BUSINESS'],
|
||||||
}),
|
},
|
||||||
|
},
|
||||||
// New users this week
|
}),
|
||||||
db.user.count({
|
|
||||||
where: {
|
// New users this week
|
||||||
createdAt: {
|
db.user.count({
|
||||||
gte: sevenDaysAgo,
|
where: {
|
||||||
},
|
createdAt: {
|
||||||
},
|
gte: sevenDaysAgo,
|
||||||
}),
|
},
|
||||||
|
},
|
||||||
// New users this month
|
}),
|
||||||
db.user.count({
|
|
||||||
where: {
|
// New users this month
|
||||||
createdAt: {
|
db.user.count({
|
||||||
gte: startOfMonth,
|
where: {
|
||||||
},
|
createdAt: {
|
||||||
},
|
gte: startOfMonth,
|
||||||
}),
|
},
|
||||||
|
},
|
||||||
// Total QR codes
|
}),
|
||||||
db.qRCode.count(),
|
|
||||||
|
// Total QR codes
|
||||||
// Dynamic QR codes
|
db.qRCode.count(),
|
||||||
db.qRCode.count({
|
|
||||||
where: {
|
// Dynamic QR codes
|
||||||
type: 'DYNAMIC',
|
db.qRCode.count({
|
||||||
},
|
where: {
|
||||||
}),
|
type: 'DYNAMIC',
|
||||||
|
},
|
||||||
// Static QR codes
|
}),
|
||||||
db.qRCode.count({
|
|
||||||
where: {
|
// Static QR codes
|
||||||
type: 'STATIC',
|
db.qRCode.count({
|
||||||
},
|
where: {
|
||||||
}),
|
type: 'STATIC',
|
||||||
|
},
|
||||||
// Total scans
|
}),
|
||||||
db.qRScan.count(),
|
|
||||||
|
// Total scans
|
||||||
// Get all dynamic QR codes with their scan counts
|
db.qRScan.count(),
|
||||||
db.qRCode.findMany({
|
|
||||||
where: {
|
// Get all dynamic QR codes with their scan counts
|
||||||
type: 'DYNAMIC',
|
db.qRCode.findMany({
|
||||||
},
|
where: {
|
||||||
include: {
|
type: 'DYNAMIC',
|
||||||
_count: {
|
},
|
||||||
select: {
|
include: {
|
||||||
scans: true,
|
_count: {
|
||||||
},
|
select: {
|
||||||
},
|
scans: true,
|
||||||
},
|
},
|
||||||
}),
|
},
|
||||||
|
},
|
||||||
// Active QR codes (scanned in last 30 days)
|
}),
|
||||||
db.qRCode.findMany({
|
|
||||||
where: {
|
// Active QR codes (scanned in last 30 days)
|
||||||
scans: {
|
db.qRCode.findMany({
|
||||||
some: {
|
where: {
|
||||||
ts: {
|
scans: {
|
||||||
gte: thirtyDaysAgo,
|
some: {
|
||||||
},
|
ts: {
|
||||||
},
|
gte: thirtyDaysAgo,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
distinct: ['id'],
|
},
|
||||||
}),
|
},
|
||||||
|
distinct: ['id'],
|
||||||
// Newsletter subscribers
|
}),
|
||||||
db.newsletterSubscription.count({
|
|
||||||
where: {
|
// Newsletter subscribers
|
||||||
status: 'subscribed',
|
db.newsletterSubscription.count({
|
||||||
},
|
where: {
|
||||||
}),
|
status: 'subscribed',
|
||||||
]);
|
},
|
||||||
|
}),
|
||||||
// Calculate dynamic QR scans
|
]);
|
||||||
const dynamicQRScans = dynamicQRCodesWithScans.reduce(
|
|
||||||
(total, qr) => total + qr._count.scans,
|
// Calculate dynamic QR scans
|
||||||
0
|
const dynamicQRScans = dynamicQRCodesWithScans.reduce(
|
||||||
);
|
(total, qr) => total + qr._count.scans,
|
||||||
|
0
|
||||||
// Calculate average scans per dynamic QR
|
);
|
||||||
const avgScansPerDynamicQR =
|
|
||||||
dynamicQRCodes > 0 ? (dynamicQRScans / dynamicQRCodes).toFixed(1) : '0';
|
// Calculate average scans per dynamic QR
|
||||||
|
const avgScansPerDynamicQR =
|
||||||
// Get top 5 most scanned QR codes
|
dynamicQRCodes > 0 ? (dynamicQRScans / dynamicQRCodes).toFixed(1) : '0';
|
||||||
const topQRCodes = await db.qRCode.findMany({
|
|
||||||
take: 5,
|
// Get top 5 most scanned QR codes
|
||||||
include: {
|
const topQRCodes = await db.qRCode.findMany({
|
||||||
_count: {
|
take: 5,
|
||||||
select: {
|
include: {
|
||||||
scans: true,
|
_count: {
|
||||||
},
|
select: {
|
||||||
},
|
scans: true,
|
||||||
user: {
|
},
|
||||||
select: {
|
},
|
||||||
email: true,
|
user: {
|
||||||
name: true,
|
select: {
|
||||||
},
|
email: true,
|
||||||
},
|
name: true,
|
||||||
},
|
},
|
||||||
orderBy: {
|
},
|
||||||
scans: {
|
},
|
||||||
_count: 'desc',
|
orderBy: {
|
||||||
},
|
scans: {
|
||||||
},
|
_count: 'desc',
|
||||||
});
|
},
|
||||||
|
},
|
||||||
// Get recent users
|
});
|
||||||
const recentUsers = await db.user.findMany({
|
|
||||||
take: 5,
|
// Get recent users
|
||||||
orderBy: {
|
const recentUsers = await db.user.findMany({
|
||||||
createdAt: 'desc',
|
take: 5,
|
||||||
},
|
orderBy: {
|
||||||
select: {
|
createdAt: 'desc',
|
||||||
email: true,
|
},
|
||||||
name: true,
|
select: {
|
||||||
plan: true,
|
email: true,
|
||||||
createdAt: true,
|
name: true,
|
||||||
},
|
plan: true,
|
||||||
});
|
createdAt: true,
|
||||||
|
},
|
||||||
return NextResponse.json({
|
});
|
||||||
users: {
|
|
||||||
total: totalUsers,
|
return NextResponse.json({
|
||||||
premium: premiumUsers,
|
users: {
|
||||||
newThisWeek: newUsersThisWeek,
|
total: totalUsers,
|
||||||
newThisMonth: newUsersThisMonth,
|
premium: premiumUsers,
|
||||||
recent: recentUsers,
|
newThisWeek: newUsersThisWeek,
|
||||||
},
|
newThisMonth: newUsersThisMonth,
|
||||||
qrCodes: {
|
recent: recentUsers,
|
||||||
total: totalQRCodes,
|
},
|
||||||
dynamic: dynamicQRCodes,
|
qrCodes: {
|
||||||
static: staticQRCodes,
|
total: totalQRCodes,
|
||||||
active: activeQRCodes.length,
|
dynamic: dynamicQRCodes,
|
||||||
},
|
static: staticQRCodes,
|
||||||
scans: {
|
active: activeQRCodes.length,
|
||||||
total: totalScans,
|
},
|
||||||
dynamicOnly: dynamicQRScans,
|
scans: {
|
||||||
avgPerDynamicQR: avgScansPerDynamicQR,
|
total: totalScans,
|
||||||
},
|
dynamicOnly: dynamicQRScans,
|
||||||
newsletter: {
|
avgPerDynamicQR: avgScansPerDynamicQR,
|
||||||
subscribers: newsletterSubscribers,
|
},
|
||||||
},
|
newsletter: {
|
||||||
topQRCodes: topQRCodes.map((qr) => ({
|
subscribers: newsletterSubscribers,
|
||||||
id: qr.id,
|
},
|
||||||
title: qr.title,
|
topQRCodes: topQRCodes.map((qr) => ({
|
||||||
type: qr.type,
|
id: qr.id,
|
||||||
scans: qr._count.scans,
|
title: qr.title,
|
||||||
owner: qr.user.name || qr.user.email,
|
type: qr.type,
|
||||||
createdAt: qr.createdAt,
|
scans: qr._count.scans,
|
||||||
})),
|
owner: qr.user.name || qr.user.email,
|
||||||
});
|
createdAt: qr.createdAt,
|
||||||
} catch (error) {
|
})),
|
||||||
console.error('Error fetching admin stats:', error);
|
});
|
||||||
return NextResponse.json(
|
} catch (error) {
|
||||||
{ error: 'Failed to fetch statistics' },
|
console.error('Error fetching admin stats:', error);
|
||||||
{ status: 500 }
|
return NextResponse.json(
|
||||||
);
|
{ error: 'Failed to fetch statistics' },
|
||||||
}
|
{ status: 500 }
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,267 +1,288 @@
|
|||||||
import { NextRequest, NextResponse } from 'next/server';
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
import { cookies } from 'next/headers';
|
import { cookies } from 'next/headers';
|
||||||
import { db } from '@/lib/db';
|
import { db } from '@/lib/db';
|
||||||
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
|
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
|
||||||
import { TrendData } from '@/types/analytics';
|
import { TrendData } from '@/types/analytics';
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
// Helper function to calculate trend with proper edge case handling
|
// Helper function to calculate trend with proper edge case handling
|
||||||
function calculateTrend(current: number, previous: number): TrendData {
|
function calculateTrend(current: number, previous: number): TrendData {
|
||||||
// Handle edge case: no data in either period
|
// Handle edge case: no data in either period
|
||||||
if (previous === 0 && current === 0) {
|
if (previous === 0 && current === 0) {
|
||||||
return { trend: 'flat', percentage: 0 };
|
return { trend: 'flat', percentage: 0 };
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle new growth from zero - mark as "new" to distinguish from actual 100% growth
|
// Handle new growth from zero - mark as "new" to distinguish from actual 100% growth
|
||||||
if (previous === 0 && current > 0) {
|
if (previous === 0 && current > 0) {
|
||||||
return { trend: 'up', percentage: 100, isNew: true };
|
return { trend: 'up', percentage: 100, isNew: true };
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate actual percentage change
|
// Calculate actual percentage change
|
||||||
const change = ((current - previous) / previous) * 100;
|
const change = ((current - previous) / previous) * 100;
|
||||||
const roundedChange = Math.round(change);
|
const roundedChange = Math.round(change);
|
||||||
|
|
||||||
// Determine trend direction (use threshold of 5% to filter noise)
|
// Determine trend direction (use threshold of 5% to filter noise)
|
||||||
let trend: 'up' | 'down' | 'flat';
|
let trend: 'up' | 'down' | 'flat';
|
||||||
if (roundedChange > 5) {
|
if (roundedChange > 5) {
|
||||||
trend = 'up';
|
trend = 'up';
|
||||||
} else if (roundedChange < -5) {
|
} else if (roundedChange < -5) {
|
||||||
trend = 'down';
|
trend = 'down';
|
||||||
} else {
|
} else {
|
||||||
trend = 'flat';
|
trend = 'flat';
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
trend,
|
trend,
|
||||||
percentage: Math.abs(roundedChange),
|
percentage: Math.abs(roundedChange),
|
||||||
isNegative: roundedChange < 0
|
isNegative: roundedChange < 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function GET(request: NextRequest) {
|
export async function GET(request: NextRequest) {
|
||||||
try {
|
try {
|
||||||
const userId = cookies().get('userId')?.value;
|
const userId = cookies().get('userId')?.value;
|
||||||
|
|
||||||
// Rate Limiting (user-based)
|
// Rate Limiting (user-based)
|
||||||
const clientId = userId || getClientIdentifier(request);
|
const clientId = userId || getClientIdentifier(request);
|
||||||
const rateLimitResult = rateLimit(clientId, RateLimits.ANALYTICS);
|
const rateLimitResult = rateLimit(clientId, RateLimits.ANALYTICS);
|
||||||
|
|
||||||
if (!rateLimitResult.success) {
|
if (!rateLimitResult.success) {
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
{
|
{
|
||||||
error: 'Too many requests. Please try again later.',
|
error: 'Too many requests. Please try again later.',
|
||||||
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
|
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
status: 429,
|
status: 429,
|
||||||
headers: {
|
headers: {
|
||||||
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
|
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
|
||||||
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
|
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
|
||||||
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
|
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!userId) {
|
if (!userId) {
|
||||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get date range from query params (default: last 30 days)
|
// Get date range from query params (default: last 30 days)
|
||||||
const { searchParams } = request.nextUrl;
|
const { searchParams } = request.nextUrl;
|
||||||
const range = searchParams.get('range') || '30';
|
const range = searchParams.get('range') || '30';
|
||||||
const daysInRange = parseInt(range, 10);
|
const daysInRange = parseInt(range, 10);
|
||||||
|
|
||||||
// Standardize to week (7 days) or month (30 days) for clear comparison labels
|
// Standardize to week (7 days) or month (30 days) for clear comparison labels
|
||||||
const comparisonDays = daysInRange <= 7 ? 7 : 30;
|
const comparisonDays = daysInRange <= 7 ? 7 : 30;
|
||||||
const comparisonPeriod: 'week' | 'month' = comparisonDays === 7 ? 'week' : 'month';
|
const comparisonPeriod: 'week' | 'month' = comparisonDays === 7 ? 'week' : 'month';
|
||||||
|
|
||||||
// Calculate current and previous period dates
|
// Calculate current and previous period dates
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const currentPeriodStart = new Date();
|
const currentPeriodStart = new Date();
|
||||||
currentPeriodStart.setDate(now.getDate() - comparisonDays);
|
currentPeriodStart.setDate(now.getDate() - comparisonDays);
|
||||||
|
|
||||||
const previousPeriodEnd = new Date(currentPeriodStart);
|
const previousPeriodEnd = new Date(currentPeriodStart);
|
||||||
const previousPeriodStart = new Date(previousPeriodEnd);
|
const previousPeriodStart = new Date(previousPeriodEnd);
|
||||||
previousPeriodStart.setDate(previousPeriodEnd.getDate() - comparisonDays);
|
previousPeriodStart.setDate(previousPeriodEnd.getDate() - comparisonDays);
|
||||||
|
|
||||||
// Get user's QR codes with scans filtered by period
|
// Get user's QR codes with scans filtered by period
|
||||||
const qrCodes = await db.qRCode.findMany({
|
const qrCodes = await db.qRCode.findMany({
|
||||||
where: { userId },
|
where: { userId },
|
||||||
include: {
|
include: {
|
||||||
scans: {
|
scans: {
|
||||||
where: {
|
where: {
|
||||||
ts: {
|
ts: {
|
||||||
gte: currentPeriodStart,
|
gte: currentPeriodStart,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get previous period scans for comparison
|
// Get previous period scans for comparison
|
||||||
const qrCodesWithPreviousScans = await db.qRCode.findMany({
|
const qrCodesWithPreviousScans = await db.qRCode.findMany({
|
||||||
where: { userId },
|
where: { userId },
|
||||||
include: {
|
include: {
|
||||||
scans: {
|
scans: {
|
||||||
where: {
|
where: {
|
||||||
ts: {
|
ts: {
|
||||||
gte: previousPeriodStart,
|
gte: previousPeriodStart,
|
||||||
lt: previousPeriodEnd,
|
lt: previousPeriodEnd,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Calculate current period stats
|
// Calculate current period stats
|
||||||
const totalScans = qrCodes.reduce((sum, qr) => sum + qr.scans.length, 0);
|
const totalScans = qrCodes.reduce((sum, qr) => sum + qr.scans.length, 0);
|
||||||
const uniqueScans = qrCodes.reduce((sum, qr) =>
|
const uniqueScans = qrCodes.reduce((sum, qr) =>
|
||||||
sum + qr.scans.filter(s => s.isUnique).length, 0
|
sum + qr.scans.filter(s => s.isUnique).length, 0
|
||||||
);
|
);
|
||||||
|
|
||||||
// Calculate previous period stats for comparison
|
// Calculate previous period stats for comparison
|
||||||
const previousTotalScans = qrCodesWithPreviousScans.reduce((sum, qr) => sum + qr.scans.length, 0);
|
const previousTotalScans = qrCodesWithPreviousScans.reduce((sum, qr) => sum + qr.scans.length, 0);
|
||||||
const previousUniqueScans = qrCodesWithPreviousScans.reduce((sum, qr) =>
|
const previousUniqueScans = qrCodesWithPreviousScans.reduce((sum, qr) =>
|
||||||
sum + qr.scans.filter(s => s.isUnique).length, 0
|
sum + qr.scans.filter(s => s.isUnique).length, 0
|
||||||
);
|
);
|
||||||
|
|
||||||
// Calculate average scans per QR code (only count QR codes with scans)
|
// Calculate average scans per QR code (only count QR codes with scans)
|
||||||
const qrCodesWithScans = qrCodes.filter(qr => qr.scans.length > 0).length;
|
const qrCodesWithScans = qrCodes.filter(qr => qr.scans.length > 0).length;
|
||||||
const avgScansPerQR = qrCodesWithScans > 0
|
const avgScansPerQR = qrCodesWithScans > 0
|
||||||
? Math.round(totalScans / qrCodesWithScans)
|
? Math.round(totalScans / qrCodesWithScans)
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
// Calculate previous period average scans per QR
|
// Calculate previous period average scans per QR
|
||||||
const previousQrCodesWithScans = qrCodesWithPreviousScans.filter(qr => qr.scans.length > 0).length;
|
const previousQrCodesWithScans = qrCodesWithPreviousScans.filter(qr => qr.scans.length > 0).length;
|
||||||
const previousAvgScansPerQR = previousQrCodesWithScans > 0
|
const previousAvgScansPerQR = previousQrCodesWithScans > 0
|
||||||
? Math.round(previousTotalScans / previousQrCodesWithScans)
|
? Math.round(previousTotalScans / previousQrCodesWithScans)
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
// Calculate trends
|
// Calculate trends
|
||||||
const scansTrend = calculateTrend(totalScans, previousTotalScans);
|
const scansTrend = calculateTrend(totalScans, previousTotalScans);
|
||||||
|
|
||||||
// New Conversion Rate Logic: (Unique Scans / Total Scans) * 100
|
// New Conversion Rate Logic: (Unique Scans / Total Scans) * 100
|
||||||
// This represents "Engagement Efficiency" - how many scans are from fresh users
|
// This represents "Engagement Efficiency" - how many scans are from fresh users
|
||||||
const currentConversion = totalScans > 0 ? Math.round((uniqueScans / totalScans) * 100) : 0;
|
const currentConversion = totalScans > 0 ? Math.round((uniqueScans / totalScans) * 100) : 0;
|
||||||
|
|
||||||
const previousConversion = previousTotalScans > 0
|
const previousConversion = previousTotalScans > 0
|
||||||
? Math.round((previousUniqueScans / previousTotalScans) * 100)
|
? Math.round((previousUniqueScans / previousTotalScans) * 100)
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
const avgScansTrend = calculateTrend(currentConversion, previousConversion);
|
const avgScansTrend = calculateTrend(avgScansPerQR, previousAvgScansPerQR);
|
||||||
|
|
||||||
// Device stats
|
// Device stats
|
||||||
const deviceStats = qrCodes.flatMap(qr => qr.scans)
|
const deviceStats = qrCodes.flatMap(qr => qr.scans)
|
||||||
.reduce((acc, scan) => {
|
.reduce((acc, scan) => {
|
||||||
const device = scan.device || 'unknown';
|
const device = scan.device || 'unknown';
|
||||||
acc[device] = (acc[device] || 0) + 1;
|
acc[device] = (acc[device] || 0) + 1;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, number>);
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
const mobileScans = (deviceStats.mobile || 0) + (deviceStats.tablet || 0);
|
const mobileScans = (deviceStats.mobile || 0) + (deviceStats.tablet || 0);
|
||||||
const mobilePercentage = totalScans > 0
|
const mobilePercentage = totalScans > 0
|
||||||
? Math.round((mobileScans / totalScans) * 100)
|
? Math.round((mobileScans / totalScans) * 100)
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
// Country stats (current period)
|
// Country stats (current period)
|
||||||
const countryStats = qrCodes.flatMap(qr => qr.scans)
|
const countryStats = qrCodes.flatMap(qr => qr.scans)
|
||||||
.reduce((acc, scan) => {
|
.reduce((acc, scan) => {
|
||||||
const country = scan.country ?? 'Unknown Location';
|
const country = scan.country ?? 'Unknown Location';
|
||||||
acc[country] = (acc[country] || 0) + 1;
|
acc[country] = (acc[country] || 0) + 1;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, number>);
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
// Country stats (previous period)
|
// Country stats (previous period)
|
||||||
const previousCountryStats = qrCodesWithPreviousScans.flatMap(qr => qr.scans)
|
const previousCountryStats = qrCodesWithPreviousScans.flatMap(qr => qr.scans)
|
||||||
.reduce((acc, scan) => {
|
.reduce((acc, scan) => {
|
||||||
const country = scan.country ?? 'Unknown Location';
|
const country = scan.country ?? 'Unknown Location';
|
||||||
acc[country] = (acc[country] || 0) + 1;
|
acc[country] = (acc[country] || 0) + 1;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, number>);
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
const topCountry = Object.entries(countryStats)
|
const topCountry = Object.entries(countryStats)
|
||||||
.sort(([, a], [, b]) => b - a)[0];
|
.sort(([, a], [, b]) => b - a)[0];
|
||||||
|
|
||||||
// Daily scan counts for chart (current period)
|
// Daily scan counts for chart (current period)
|
||||||
const dailyScans = qrCodes.flatMap(qr => qr.scans).reduce((acc, scan) => {
|
const dailyScans = qrCodes.flatMap(qr => qr.scans).reduce((acc, scan) => {
|
||||||
const date = new Date(scan.ts).toISOString().split('T')[0];
|
const date = new Date(scan.ts).toISOString().split('T')[0];
|
||||||
acc[date] = (acc[date] || 0) + 1;
|
acc[date] = (acc[date] || 0) + 1;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, number>);
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
// QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
|
// Generate last 7 days for sparkline
|
||||||
const qrPerformance = qrCodes
|
const last7Days = Array.from({ length: 7 }, (_, i) => {
|
||||||
.filter(qr => qr.type === 'DYNAMIC')
|
const date = new Date();
|
||||||
.map(qr => {
|
date.setDate(date.getDate() - (6 - i));
|
||||||
const currentTotal = qr.scans.length;
|
return date.toISOString().split('T')[0];
|
||||||
const currentUnique = qr.scans.filter(s => s.isUnique).length;
|
});
|
||||||
|
|
||||||
// Find previous period data for this QR code
|
// QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
|
||||||
const previousQR = qrCodesWithPreviousScans.find(prev => prev.id === qr.id);
|
const qrPerformance = qrCodes
|
||||||
const previousTotal = previousQR ? previousQR.scans.length : 0;
|
.filter(qr => qr.type === 'DYNAMIC')
|
||||||
|
.map(qr => {
|
||||||
// Calculate trend
|
const currentTotal = qr.scans.length;
|
||||||
const trendData = calculateTrend(currentTotal, previousTotal);
|
const currentUnique = qr.scans.filter(s => s.isUnique).length;
|
||||||
|
|
||||||
return {
|
// Find previous period data for this QR code
|
||||||
id: qr.id,
|
const previousQR = qrCodesWithPreviousScans.find(prev => prev.id === qr.id);
|
||||||
title: qr.title,
|
const previousTotal = previousQR ? previousQR.scans.length : 0;
|
||||||
type: qr.type,
|
|
||||||
totalScans: currentTotal,
|
// Calculate trend
|
||||||
uniqueScans: currentUnique,
|
const trendData = calculateTrend(currentTotal, previousTotal);
|
||||||
conversion: currentTotal > 0
|
|
||||||
? Math.round((currentUnique / currentTotal) * 100)
|
// Calculate sparkline data (scans per day for last 7 days)
|
||||||
: 0,
|
const sparklineData = last7Days.map(date => {
|
||||||
trend: trendData.trend,
|
return qr.scans.filter(s =>
|
||||||
trendPercentage: trendData.percentage,
|
new Date(s.ts).toISOString().split('T')[0] === date
|
||||||
...(trendData.isNew && { isNew: true }),
|
).length;
|
||||||
};
|
});
|
||||||
})
|
|
||||||
.sort((a, b) => b.totalScans - a.totalScans);
|
// Find last scanned date
|
||||||
|
const lastScanned = qr.scans.length > 0
|
||||||
return NextResponse.json({
|
? new Date(Math.max(...qr.scans.map(s => new Date(s.ts).getTime())))
|
||||||
summary: {
|
: null;
|
||||||
totalScans,
|
|
||||||
uniqueScans,
|
return {
|
||||||
avgScansPerQR: currentConversion, // Now sending Unique Rate instead of Avg per QR
|
id: qr.id,
|
||||||
mobilePercentage,
|
title: qr.title,
|
||||||
topCountry: topCountry ? topCountry[0] : 'N/A',
|
type: qr.type,
|
||||||
topCountryPercentage: topCountry && totalScans > 0
|
totalScans: currentTotal,
|
||||||
? Math.round((topCountry[1] / totalScans) * 100)
|
uniqueScans: currentUnique,
|
||||||
: 0,
|
conversion: currentTotal > 0
|
||||||
scansTrend,
|
? Math.round((currentUnique / currentTotal) * 100)
|
||||||
avgScansTrend,
|
: 0,
|
||||||
comparisonPeriod,
|
trend: trendData.trend,
|
||||||
comparisonDays,
|
trendPercentage: trendData.percentage,
|
||||||
},
|
sparkline: sparklineData,
|
||||||
deviceStats,
|
lastScanned: lastScanned?.toISOString() || null,
|
||||||
countryStats: Object.entries(countryStats)
|
...(trendData.isNew && { isNew: true }),
|
||||||
.sort(([, a], [, b]) => b - a)
|
};
|
||||||
.slice(0, 10)
|
})
|
||||||
.map(([country, count]) => {
|
.sort((a, b) => b.totalScans - a.totalScans);
|
||||||
const previousCount = previousCountryStats[country] || 0;
|
|
||||||
const trendData = calculateTrend(count, previousCount);
|
return NextResponse.json({
|
||||||
|
summary: {
|
||||||
return {
|
totalScans,
|
||||||
country,
|
uniqueScans,
|
||||||
count,
|
avgScansPerQR,
|
||||||
percentage: totalScans > 0
|
mobilePercentage,
|
||||||
? Math.round((count / totalScans) * 100)
|
topCountry: topCountry ? topCountry[0] : 'N/A',
|
||||||
: 0,
|
topCountryPercentage: topCountry && totalScans > 0
|
||||||
trend: trendData.trend,
|
? Math.round((topCountry[1] / totalScans) * 100)
|
||||||
trendPercentage: trendData.percentage,
|
: 0,
|
||||||
...(trendData.isNew && { isNew: true }),
|
scansTrend,
|
||||||
};
|
avgScansTrend,
|
||||||
}),
|
comparisonPeriod,
|
||||||
dailyScans,
|
comparisonDays,
|
||||||
qrPerformance: qrPerformance.slice(0, 10),
|
},
|
||||||
});
|
deviceStats,
|
||||||
} catch (error) {
|
countryStats: Object.entries(countryStats)
|
||||||
console.error('Error fetching analytics:', error);
|
.sort(([, a], [, b]) => b - a)
|
||||||
return NextResponse.json(
|
.slice(0, 10)
|
||||||
{ error: 'Internal server error' },
|
.map(([country, count]) => {
|
||||||
{ status: 500 }
|
const previousCount = previousCountryStats[country] || 0;
|
||||||
);
|
const trendData = calculateTrend(count, previousCount);
|
||||||
}
|
|
||||||
|
return {
|
||||||
|
country,
|
||||||
|
count,
|
||||||
|
percentage: totalScans > 0
|
||||||
|
? Math.round((count / totalScans) * 100)
|
||||||
|
: 0,
|
||||||
|
trend: trendData.trend,
|
||||||
|
trendPercentage: trendData.percentage,
|
||||||
|
...(trendData.isNew && { isNew: true }),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
dailyScans,
|
||||||
|
qrPerformance: qrPerformance.slice(0, 10),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching analytics:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Internal server error' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,103 +1,106 @@
|
|||||||
import { NextRequest, NextResponse } from 'next/server';
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
import bcrypt from 'bcryptjs';
|
import bcrypt from 'bcryptjs';
|
||||||
import { cookies } from 'next/headers';
|
import { cookies } from 'next/headers';
|
||||||
import { db } from '@/lib/db';
|
import { db } from '@/lib/db';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
import { csrfProtection } from '@/lib/csrf';
|
import { csrfProtection } from '@/lib/csrf';
|
||||||
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
|
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
|
||||||
import { getAuthCookieOptions } from '@/lib/cookieConfig';
|
import { getAuthCookieOptions } from '@/lib/cookieConfig';
|
||||||
import { signupSchema, validateRequest } from '@/lib/validationSchemas';
|
import { signupSchema, validateRequest } from '@/lib/validationSchemas';
|
||||||
|
|
||||||
export async function POST(request: NextRequest) {
|
export async function POST(request: NextRequest) {
|
||||||
try {
|
try {
|
||||||
// CSRF Protection
|
// CSRF Protection
|
||||||
const csrfCheck = csrfProtection(request);
|
const csrfCheck = csrfProtection(request);
|
||||||
if (!csrfCheck.valid) {
|
if (!csrfCheck.valid) {
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
{ error: csrfCheck.error },
|
{ error: csrfCheck.error },
|
||||||
{ status: 403 }
|
{ status: 403 }
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rate Limiting
|
// Rate Limiting
|
||||||
const clientId = getClientIdentifier(request);
|
const clientId = getClientIdentifier(request);
|
||||||
const rateLimitResult = rateLimit(clientId, RateLimits.SIGNUP);
|
const rateLimitResult = rateLimit(clientId, RateLimits.SIGNUP);
|
||||||
|
|
||||||
if (!rateLimitResult.success) {
|
if (!rateLimitResult.success) {
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
{
|
{
|
||||||
error: 'Too many signup attempts. Please try again later.',
|
error: 'Too many signup attempts. Please try again later.',
|
||||||
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
|
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
status: 429,
|
status: 429,
|
||||||
headers: {
|
headers: {
|
||||||
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
|
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
|
||||||
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
|
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
|
||||||
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
|
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const body = await request.json();
|
const body = await request.json();
|
||||||
|
|
||||||
// Validate request body
|
// Validate request body
|
||||||
const validation = await validateRequest(signupSchema, body);
|
const validation = await validateRequest(signupSchema, body);
|
||||||
if (!validation.success) {
|
if (!validation.success) {
|
||||||
return NextResponse.json(validation.error, { status: 400 });
|
return NextResponse.json(validation.error, { status: 400 });
|
||||||
}
|
}
|
||||||
|
|
||||||
const { name, email, password } = validation.data;
|
const { name, email, password } = validation.data;
|
||||||
|
|
||||||
// Check if user already exists
|
// Check if user already exists
|
||||||
const existingUser = await db.user.findUnique({
|
const existingUser = await db.user.findUnique({
|
||||||
where: { email },
|
where: { email },
|
||||||
});
|
});
|
||||||
|
|
||||||
if (existingUser) {
|
if (existingUser) {
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
{ error: 'User already exists' },
|
{ error: 'User already exists' },
|
||||||
{ status: 400 }
|
{ status: 400 }
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hash password
|
// Hash password
|
||||||
const hashedPassword = await bcrypt.hash(password, 12);
|
const hashedPassword = await bcrypt.hash(password, 12);
|
||||||
|
|
||||||
// Create user
|
// Create user
|
||||||
const user = await db.user.create({
|
const user = await db.user.create({
|
||||||
data: {
|
data: {
|
||||||
name,
|
name,
|
||||||
email,
|
email,
|
||||||
password: hashedPassword,
|
password: hashedPassword,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set cookie for auto-login after signup
|
// Create response
|
||||||
cookies().set('userId', user.id, getAuthCookieOptions());
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
return NextResponse.json({
|
user: {
|
||||||
success: true,
|
id: user.id,
|
||||||
user: {
|
name: user.name,
|
||||||
id: user.id,
|
email: user.email,
|
||||||
name: user.name,
|
plan: 'FREE',
|
||||||
email: user.email,
|
},
|
||||||
plan: 'FREE',
|
});
|
||||||
},
|
|
||||||
});
|
// Set cookie for auto-login after signup
|
||||||
} catch (error) {
|
response.cookies.set('userId', user.id, getAuthCookieOptions());
|
||||||
if (error instanceof z.ZodError) {
|
|
||||||
return NextResponse.json(
|
return response;
|
||||||
{ error: 'Invalid input', details: error.errors },
|
} catch (error) {
|
||||||
{ status: 400 }
|
if (error instanceof z.ZodError) {
|
||||||
);
|
return NextResponse.json(
|
||||||
}
|
{ error: 'Invalid input', details: error.errors },
|
||||||
|
{ status: 400 }
|
||||||
console.error('Signup error:', error);
|
);
|
||||||
return NextResponse.json(
|
}
|
||||||
{ error: 'Internal server error' },
|
|
||||||
{ status: 500 }
|
console.error('Signup error:', error);
|
||||||
);
|
return NextResponse.json(
|
||||||
}
|
{ error: 'Internal server error' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
226
src/components/analytics/GeoMap.tsx
Normal file
226
src/components/analytics/GeoMap.tsx
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
import {
|
||||||
|
ComposableMap,
|
||||||
|
Geographies,
|
||||||
|
Geography,
|
||||||
|
ZoomableGroup,
|
||||||
|
} from 'react-simple-maps';
|
||||||
|
import { scaleLinear } from 'd3-scale';
|
||||||
|
|
||||||
|
// TopoJSON world map
|
||||||
|
const geoUrl = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json';
|
||||||
|
|
||||||
|
// ISO Alpha-2 to country name mapping for common countries
|
||||||
|
const countryNameToCode: Record<string, string> = {
|
||||||
|
'United States': 'US',
|
||||||
|
'USA': 'US',
|
||||||
|
'US': 'US',
|
||||||
|
'Germany': 'DE',
|
||||||
|
'DE': 'DE',
|
||||||
|
'United Kingdom': 'GB',
|
||||||
|
'UK': 'GB',
|
||||||
|
'GB': 'GB',
|
||||||
|
'France': 'FR',
|
||||||
|
'FR': 'FR',
|
||||||
|
'Canada': 'CA',
|
||||||
|
'CA': 'CA',
|
||||||
|
'Australia': 'AU',
|
||||||
|
'AU': 'AU',
|
||||||
|
'Japan': 'JP',
|
||||||
|
'JP': 'JP',
|
||||||
|
'China': 'CN',
|
||||||
|
'CN': 'CN',
|
||||||
|
'India': 'IN',
|
||||||
|
'IN': 'IN',
|
||||||
|
'Brazil': 'BR',
|
||||||
|
'BR': 'BR',
|
||||||
|
'Spain': 'ES',
|
||||||
|
'ES': 'ES',
|
||||||
|
'Italy': 'IT',
|
||||||
|
'IT': 'IT',
|
||||||
|
'Netherlands': 'NL',
|
||||||
|
'NL': 'NL',
|
||||||
|
'Switzerland': 'CH',
|
||||||
|
'CH': 'CH',
|
||||||
|
'Austria': 'AT',
|
||||||
|
'AT': 'AT',
|
||||||
|
'Poland': 'PL',
|
||||||
|
'PL': 'PL',
|
||||||
|
'Sweden': 'SE',
|
||||||
|
'SE': 'SE',
|
||||||
|
'Norway': 'NO',
|
||||||
|
'NO': 'NO',
|
||||||
|
'Denmark': 'DK',
|
||||||
|
'DK': 'DK',
|
||||||
|
'Finland': 'FI',
|
||||||
|
'FI': 'FI',
|
||||||
|
'Belgium': 'BE',
|
||||||
|
'BE': 'BE',
|
||||||
|
'Portugal': 'PT',
|
||||||
|
'PT': 'PT',
|
||||||
|
'Ireland': 'IE',
|
||||||
|
'IE': 'IE',
|
||||||
|
'Mexico': 'MX',
|
||||||
|
'MX': 'MX',
|
||||||
|
'Argentina': 'AR',
|
||||||
|
'AR': 'AR',
|
||||||
|
'South Korea': 'KR',
|
||||||
|
'KR': 'KR',
|
||||||
|
'Singapore': 'SG',
|
||||||
|
'SG': 'SG',
|
||||||
|
'New Zealand': 'NZ',
|
||||||
|
'NZ': 'NZ',
|
||||||
|
'Russia': 'RU',
|
||||||
|
'RU': 'RU',
|
||||||
|
'South Africa': 'ZA',
|
||||||
|
'ZA': 'ZA',
|
||||||
|
'Unknown Location': 'UNKNOWN',
|
||||||
|
'unknown': 'UNKNOWN',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ISO Alpha-2 to ISO Alpha-3 mapping (for matching with TopoJSON)
|
||||||
|
const alpha2ToNumeric: Record<string, string> = {
|
||||||
|
'US': '840',
|
||||||
|
'DE': '276',
|
||||||
|
'GB': '826',
|
||||||
|
'FR': '250',
|
||||||
|
'CA': '124',
|
||||||
|
'AU': '036',
|
||||||
|
'JP': '392',
|
||||||
|
'CN': '156',
|
||||||
|
'IN': '356',
|
||||||
|
'BR': '076',
|
||||||
|
'ES': '724',
|
||||||
|
'IT': '380',
|
||||||
|
'NL': '528',
|
||||||
|
'CH': '756',
|
||||||
|
'AT': '040',
|
||||||
|
'PL': '616',
|
||||||
|
'SE': '752',
|
||||||
|
'NO': '578',
|
||||||
|
'DK': '208',
|
||||||
|
'FI': '246',
|
||||||
|
'BE': '056',
|
||||||
|
'PT': '620',
|
||||||
|
'IE': '372',
|
||||||
|
'MX': '484',
|
||||||
|
'AR': '032',
|
||||||
|
'KR': '410',
|
||||||
|
'SG': '702',
|
||||||
|
'NZ': '554',
|
||||||
|
'RU': '643',
|
||||||
|
'ZA': '710',
|
||||||
|
};
|
||||||
|
|
||||||
|
interface CountryStat {
|
||||||
|
country: string;
|
||||||
|
count: number;
|
||||||
|
percentage: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GeoMapProps {
|
||||||
|
countryStats: CountryStat[];
|
||||||
|
totalScans: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GeoMap: React.FC<GeoMapProps> = ({ countryStats, totalScans }) => {
|
||||||
|
// Build a map of ISO Alpha-3 codes to scan counts
|
||||||
|
const countryData: Record<string, number> = {};
|
||||||
|
let maxCount = 0;
|
||||||
|
|
||||||
|
countryStats.forEach((stat) => {
|
||||||
|
const alpha2 = countryNameToCode[stat.country] || stat.country;
|
||||||
|
const numericCode = alpha2ToNumeric[alpha2];
|
||||||
|
if (numericCode) {
|
||||||
|
countryData[numericCode] = stat.count;
|
||||||
|
if (stat.count > maxCount) maxCount = stat.count;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Color scale: light blue to dark blue based on scan count
|
||||||
|
const colorScale = scaleLinear<string>()
|
||||||
|
.domain([0, maxCount || 1])
|
||||||
|
.range(['#E0F2FE', '#1E40AF']);
|
||||||
|
|
||||||
|
const [tooltipContent, setTooltipContent] = React.useState<{ name: string; count: number } | null>(null);
|
||||||
|
const [tooltipPos, setTooltipPos] = React.useState({ x: 0, y: 0 });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="w-full h-full relative group"
|
||||||
|
onMouseMove={(evt) => {
|
||||||
|
setTooltipPos({ x: evt.clientX, y: evt.clientY });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ComposableMap
|
||||||
|
projection="geoMercator"
|
||||||
|
projectionConfig={{
|
||||||
|
scale: 120,
|
||||||
|
center: [0, 30],
|
||||||
|
}}
|
||||||
|
style={{ width: '100%', height: '100%' }}
|
||||||
|
>
|
||||||
|
<ZoomableGroup center={[0, 30]} zoom={1}>
|
||||||
|
<Geographies geography={geoUrl}>
|
||||||
|
{({ geographies }) =>
|
||||||
|
geographies.map((geo) => {
|
||||||
|
// geo.id is the numeric ISO code as a string (e.g., "840" for US)
|
||||||
|
const geoId = geo.id;
|
||||||
|
const scanCount = countryData[geoId] || 0;
|
||||||
|
const fillColor = scanCount > 0 ? colorScale(scanCount) : '#F1F5F9';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Geography
|
||||||
|
key={geo.rsmKey}
|
||||||
|
geography={geo}
|
||||||
|
fill={fillColor}
|
||||||
|
stroke="#CBD5E1"
|
||||||
|
strokeWidth={0.5}
|
||||||
|
style={{
|
||||||
|
default: { outline: 'none' },
|
||||||
|
hover: {
|
||||||
|
fill: scanCount > 0 ? '#3B82F6' : '#E2E8F0',
|
||||||
|
outline: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
pressed: { outline: 'none' },
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
const { name } = geo.properties;
|
||||||
|
setTooltipContent({ name, count: scanCount });
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setTooltipContent(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Geographies>
|
||||||
|
</ZoomableGroup>
|
||||||
|
</ComposableMap>
|
||||||
|
|
||||||
|
{tooltipContent && (
|
||||||
|
<div
|
||||||
|
className="fixed z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-xl pointer-events-none transform -translate-x-1/2 -translate-y-full"
|
||||||
|
style={{
|
||||||
|
left: tooltipPos.x,
|
||||||
|
top: tooltipPos.y - 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>{tooltipContent.name}</span>
|
||||||
|
<span className="text-gray-400">|</span>
|
||||||
|
<span className="font-bold text-blue-400">{tooltipContent.count} scans</span>
|
||||||
|
</div>
|
||||||
|
{/* Arrow */}
|
||||||
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-900"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(GeoMap);
|
||||||
86
src/components/analytics/Sparkline.tsx
Normal file
86
src/components/analytics/Sparkline.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Line } from 'react-chartjs-2';
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
LineElement,
|
||||||
|
Filler,
|
||||||
|
} from 'chart.js';
|
||||||
|
|
||||||
|
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler);
|
||||||
|
|
||||||
|
interface SparklineProps {
|
||||||
|
data: number[];
|
||||||
|
color?: 'blue' | 'green' | 'red';
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const colorMap = {
|
||||||
|
blue: {
|
||||||
|
border: 'rgb(59, 130, 246)',
|
||||||
|
background: 'rgba(59, 130, 246, 0.1)',
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
border: 'rgb(34, 197, 94)',
|
||||||
|
background: 'rgba(34, 197, 94, 0.1)',
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
border: 'rgb(239, 68, 68)',
|
||||||
|
background: 'rgba(239, 68, 68, 0.1)',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const Sparkline: React.FC<SparklineProps> = ({
|
||||||
|
data,
|
||||||
|
color = 'blue',
|
||||||
|
width = 100,
|
||||||
|
height = 30,
|
||||||
|
}) => {
|
||||||
|
const colors = colorMap[color];
|
||||||
|
|
||||||
|
const chartData = {
|
||||||
|
labels: data.map((_, i) => i.toString()),
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data,
|
||||||
|
borderColor: colors.border,
|
||||||
|
backgroundColor: colors.background,
|
||||||
|
borderWidth: 1.5,
|
||||||
|
pointRadius: 0,
|
||||||
|
tension: 0.4,
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
responsive: false,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: { display: false },
|
||||||
|
tooltip: { enabled: false },
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: { display: false },
|
||||||
|
y: { display: false },
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
line: {
|
||||||
|
borderJoinStyle: 'round' as const,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width, height }}>
|
||||||
|
<Line data={chartData} options={options} width={width} height={height} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sparkline;
|
||||||
103
src/components/analytics/StatCard.tsx
Normal file
103
src/components/analytics/StatCard.tsx
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
|
||||||
|
|
||||||
|
interface StatCardProps {
|
||||||
|
title: string;
|
||||||
|
value: string | number;
|
||||||
|
subtitle?: string;
|
||||||
|
trend?: {
|
||||||
|
direction: 'up' | 'down' | 'flat';
|
||||||
|
percentage: number;
|
||||||
|
isNew?: boolean;
|
||||||
|
period?: string;
|
||||||
|
};
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
variant?: 'default' | 'highlight';
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatCard: React.FC<StatCardProps> = ({
|
||||||
|
title,
|
||||||
|
value,
|
||||||
|
subtitle,
|
||||||
|
trend,
|
||||||
|
icon,
|
||||||
|
variant = 'default',
|
||||||
|
}) => {
|
||||||
|
const getTrendColor = () => {
|
||||||
|
if (!trend) return 'text-gray-500';
|
||||||
|
if (trend.direction === 'up') return 'text-emerald-600';
|
||||||
|
if (trend.direction === 'down') return 'text-red-500';
|
||||||
|
return 'text-gray-500';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTrendIcon = () => {
|
||||||
|
if (!trend) return null;
|
||||||
|
if (trend.direction === 'up') return <TrendingUp className="w-4 h-4" />;
|
||||||
|
if (trend.direction === 'down') return <TrendingDown className="w-4 h-4" />;
|
||||||
|
return <Minus className="w-4 h-4" />;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-6 transition-all duration-200 ${variant === 'highlight'
|
||||||
|
? 'bg-gradient-to-br from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-500/25'
|
||||||
|
: 'bg-white border border-gray-200 hover:shadow-md'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<p
|
||||||
|
className={`text-sm font-medium ${variant === 'highlight' ? 'text-primary-100' : 'text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className={`text-3xl font-bold mt-2 ${variant === 'highlight' ? 'text-white' : 'text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{typeof value === 'number' ? value.toLocaleString() : value}
|
||||||
|
</p>
|
||||||
|
{trend && (
|
||||||
|
<div className={`flex items-center gap-1 mt-3 ${getTrendColor()}`}>
|
||||||
|
{getTrendIcon()}
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{trend.direction === 'up' ? '+' : trend.direction === 'down' ? '-' : ''}
|
||||||
|
{trend.percentage}%
|
||||||
|
{trend.isNew && ' (new)'}
|
||||||
|
</span>
|
||||||
|
{trend.period && (
|
||||||
|
<span
|
||||||
|
className={`text-sm ${variant === 'highlight' ? 'text-primary-200' : 'text-gray-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
vs last {trend.period}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{subtitle && !trend && (
|
||||||
|
<p
|
||||||
|
className={`text-sm mt-2 ${variant === 'highlight' ? 'text-primary-200' : 'text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{icon && (
|
||||||
|
<div
|
||||||
|
className={`p-3 rounded-lg ${variant === 'highlight' ? 'bg-white/20' : 'bg-gray-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StatCard;
|
||||||
3
src/components/analytics/index.ts
Normal file
3
src/components/analytics/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export { default as GeoMap } from './GeoMap';
|
||||||
|
export { default as Sparkline } from './Sparkline';
|
||||||
|
export { default as StatCard } from './StatCard';
|
||||||
@@ -31,10 +31,10 @@ export const QRCodeCard: React.FC<QRCodeCardProps> = ({
|
|||||||
// For dynamic QR codes, use the redirect URL for tracking
|
// For dynamic QR codes, use the redirect URL for tracking
|
||||||
// For static QR codes, use the direct URL from content
|
// For static QR codes, use the direct URL from content
|
||||||
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || (typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3050');
|
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || (typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3050');
|
||||||
|
|
||||||
// Get the QR URL based on type
|
// Get the QR URL based on type
|
||||||
let qrUrl = '';
|
let qrUrl = '';
|
||||||
|
|
||||||
// SIMPLE FIX: For STATIC QR codes, ALWAYS use the direct content
|
// SIMPLE FIX: For STATIC QR codes, ALWAYS use the direct content
|
||||||
if (qr.type === 'STATIC') {
|
if (qr.type === 'STATIC') {
|
||||||
// Extract the actual URL/content based on contentType
|
// Extract the actual URL/content based on contentType
|
||||||
@@ -171,7 +171,7 @@ END:VCARD`;
|
|||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Dropdown
|
<Dropdown
|
||||||
align="right"
|
align="right"
|
||||||
trigger={
|
trigger={
|
||||||
@@ -200,7 +200,13 @@ END:VCARD`;
|
|||||||
size={96}
|
size={96}
|
||||||
fgColor={qr.style?.foregroundColor || '#000000'}
|
fgColor={qr.style?.foregroundColor || '#000000'}
|
||||||
bgColor={qr.style?.backgroundColor || '#FFFFFF'}
|
bgColor={qr.style?.backgroundColor || '#FFFFFF'}
|
||||||
level="M"
|
level="H"
|
||||||
|
imageSettings={qr.style?.imageSettings ? {
|
||||||
|
src: qr.style.imageSettings.src,
|
||||||
|
height: qr.style.imageSettings.height * (96 / 200), // Scale logo for smaller QR
|
||||||
|
width: qr.style.imageSettings.width * (96 / 200),
|
||||||
|
excavate: qr.style.imageSettings.excavate,
|
||||||
|
} : undefined}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,63 +1,70 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
export function Footer() {
|
interface FooterProps {
|
||||||
return (
|
variant?: 'marketing' | 'dashboard';
|
||||||
<footer className="bg-gray-900 text-white py-12 mt-20">
|
}
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
||||||
<div className="grid md:grid-cols-4 gap-8">
|
export function Footer({ variant = 'marketing' }: FooterProps) {
|
||||||
<div>
|
const isDashboard = variant === 'dashboard';
|
||||||
<Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
|
|
||||||
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
|
return (
|
||||||
<span className="text-xl font-bold">QR Master</span>
|
<footer className={`${isDashboard ? 'bg-gray-50 text-gray-600 border-t border-gray-200 mt-12' : 'bg-gray-900 text-white mt-20'} py-12`}>
|
||||||
</Link>
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||||
<p className="text-gray-400">
|
<div className="grid md:grid-cols-4 gap-8">
|
||||||
Create custom QR codes in seconds with advanced tracking and analytics.
|
<div>
|
||||||
</p>
|
<Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
|
||||||
</div>
|
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
|
||||||
|
<span className={`text-xl font-bold ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
|
||||||
<div>
|
</Link>
|
||||||
<h3 className="font-semibold mb-4">Product</h3>
|
<p className={isDashboard ? 'text-gray-500' : 'text-gray-400'}>
|
||||||
<ul className="space-y-2 text-gray-400">
|
Create custom QR codes in seconds with advanced tracking and analytics.
|
||||||
<li><Link href="/#features" className="hover:text-white">Features</Link></li>
|
</p>
|
||||||
<li><Link href="/#pricing" className="hover:text-white">Pricing</Link></li>
|
</div>
|
||||||
<li><Link href="/#faq" className="hover:text-white">FAQ</Link></li>
|
|
||||||
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
<div>
|
||||||
</ul>
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Product</h3>
|
||||||
</div>
|
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
||||||
|
<li><Link href="/#features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Features</Link></li>
|
||||||
<div>
|
<li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Pricing</Link></li>
|
||||||
<h3 className="font-semibold mb-4">Resources</h3>
|
<li><Link href="/#faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>FAQ</Link></li>
|
||||||
<ul className="space-y-2 text-gray-400">
|
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
|
||||||
<li><Link href="/pricing" className="hover:text-white">Full Pricing</Link></li>
|
</ul>
|
||||||
<li><Link href="/faq" className="hover:text-white">All Questions</Link></li>
|
</div>
|
||||||
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
|
||||||
<li><Link href="/signup" className="hover:text-white">Get Started</Link></li>
|
<div>
|
||||||
</ul>
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Resources</h3>
|
||||||
</div>
|
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
||||||
|
<li><Link href="/pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Full Pricing</Link></li>
|
||||||
<div>
|
<li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>All Questions</Link></li>
|
||||||
<h3 className="font-semibold mb-4">Legal</h3>
|
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
|
||||||
<ul className="space-y-2 text-gray-400">
|
<li><Link href="/signup" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Get Started</Link></li>
|
||||||
<li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div>
|
||||||
</div>
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Legal</h3>
|
||||||
|
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
||||||
<div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
|
<li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Privacy Policy</Link></li>
|
||||||
<Link
|
</ul>
|
||||||
href="/newsletter"
|
</div>
|
||||||
className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
|
|
||||||
>
|
</div>
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
<div className={`border-t mt-8 pt-8 flex items-center justify-between ${isDashboard ? 'border-gray-200 text-gray-500' : 'border-gray-800 text-gray-400'}`}>
|
||||||
</svg>
|
{!isDashboard ? (
|
||||||
Admin
|
<Link
|
||||||
</Link>
|
href="/newsletter"
|
||||||
<p>© 2025 QR Master. All rights reserved.</p>
|
className="text-[6px] text-gray-700 opacity-[0.03] hover:opacity-100 hover:text-white transition-opacity duration-300"
|
||||||
<div className="w-12"></div>
|
>
|
||||||
</div>
|
•
|
||||||
</div>
|
</Link>
|
||||||
</footer>
|
) : (
|
||||||
);
|
<div></div>
|
||||||
}
|
)}
|
||||||
|
<p>© 2025 QR Master. All rights reserved.</p>
|
||||||
|
<div className="w-12"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
58
src/types/react-simple-maps.d.ts
vendored
Normal file
58
src/types/react-simple-maps.d.ts
vendored
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
declare module 'react-simple-maps' {
|
||||||
|
import { ComponentType, ReactNode, CSSProperties } from 'react';
|
||||||
|
|
||||||
|
export interface ComposableMapProps {
|
||||||
|
projection?: string;
|
||||||
|
projectionConfig?: {
|
||||||
|
scale?: number;
|
||||||
|
center?: [number, number];
|
||||||
|
rotate?: [number, number, number];
|
||||||
|
};
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
style?: CSSProperties;
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GeographiesProps {
|
||||||
|
geography: string | object;
|
||||||
|
children: (data: { geographies: any[] }) => ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GeographyProps {
|
||||||
|
geography: any;
|
||||||
|
style?: {
|
||||||
|
default?: CSSProperties;
|
||||||
|
hover?: CSSProperties;
|
||||||
|
pressed?: CSSProperties;
|
||||||
|
};
|
||||||
|
fill?: string;
|
||||||
|
stroke?: string;
|
||||||
|
strokeWidth?: number;
|
||||||
|
onClick?: (event: React.MouseEvent) => void;
|
||||||
|
onMouseEnter?: (event: React.MouseEvent) => void;
|
||||||
|
onMouseLeave?: (event: React.MouseEvent) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ZoomableGroupProps {
|
||||||
|
center?: [number, number];
|
||||||
|
zoom?: number;
|
||||||
|
minZoom?: number;
|
||||||
|
maxZoom?: number;
|
||||||
|
translateExtent?: [[number, number], [number, number]];
|
||||||
|
onMoveStart?: (event: any) => void;
|
||||||
|
onMove?: (event: any) => void;
|
||||||
|
onMoveEnd?: (event: any) => void;
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ComposableMap: ComponentType<ComposableMapProps>;
|
||||||
|
export const Geographies: ComponentType<GeographiesProps>;
|
||||||
|
export const Geography: ComponentType<GeographyProps>;
|
||||||
|
export const ZoomableGroup: ComponentType<ZoomableGroupProps>;
|
||||||
|
export const Marker: ComponentType<any>;
|
||||||
|
export const Line: ComponentType<any>;
|
||||||
|
export const Annotation: ComponentType<any>;
|
||||||
|
export const Graticule: ComponentType<any>;
|
||||||
|
export const Sphere: ComponentType<any>;
|
||||||
|
}
|
||||||
BIN
tsc_errors.txt
Normal file
BIN
tsc_errors.txt
Normal file
Binary file not shown.
Reference in New Issue
Block a user