Merge analytics branch: Dashboard footer styling, hidden admin link, production-ready analytics
This commit is contained in:
Timo
commit
b2d83a0cd6
|
|
@ -13,9 +13,11 @@
|
|||
"@edge-runtime/cookies": "^6.0.0",
|
||||
"@prisma/client": "^5.7.0",
|
||||
"@stripe/stripe-js": "^8.0.0",
|
||||
"@types/d3-scale": "^4.0.9",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"chart.js": "^4.4.0",
|
||||
"clsx": "^2.0.0",
|
||||
"d3-scale": "^4.0.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
|
|
@ -35,6 +37,7 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-i18next": "^13.5.0",
|
||||
"react-simple-maps": "^3.0.0",
|
||||
"resend": "^6.4.2",
|
||||
"sharp": "^0.33.1",
|
||||
"stripe": "^19.1.0",
|
||||
|
|
@ -1931,6 +1934,21 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/file-saver": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
|
||||
|
|
@ -3652,6 +3670,205 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dispatch": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
|
||||
"integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-drag": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
|
||||
"integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 2",
|
||||
"d3-selection": "2"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
|
||||
"integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-geo": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
|
||||
"integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-array": "^2.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-geo/node_modules/d3-array": {
|
||||
"version": "2.12.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
|
||||
"integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"internmap": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-geo/node_modules/internmap": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
|
||||
"integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-selection": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
|
||||
"integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
|
||||
"integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-transition": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
|
||||
"integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 2",
|
||||
"d3-dispatch": "1 - 2",
|
||||
"d3-ease": "1 - 2",
|
||||
"d3-interpolate": "1 - 2",
|
||||
"d3-timer": "1 - 2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"d3-selection": "2"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-transition/node_modules/d3-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
|
||||
"integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-transition/node_modules/d3-interpolate": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
|
||||
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 2"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-zoom": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
|
||||
"integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 2",
|
||||
"d3-drag": "2",
|
||||
"d3-interpolate": "1 - 2",
|
||||
"d3-selection": "2",
|
||||
"d3-transition": "2"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-zoom/node_modules/d3-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
|
||||
"integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-zoom/node_modules/d3-interpolate": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
|
||||
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 2"
|
||||
}
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||
|
|
@ -5449,6 +5666,15 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/ioredis": {
|
||||
"version": "5.8.2",
|
||||
"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.8.2.tgz",
|
||||
|
|
@ -7504,6 +7730,23 @@
|
|||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-simple-maps": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-3.0.0.tgz",
|
||||
"integrity": "sha512-vKNFrvpPG8Vyfdjnz5Ne1N56rZlDfHXv5THNXOVZMqbX1rWZA48zQuYT03mx6PAKanqarJu/PDLgshIZAfHHqw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"d3-geo": "^2.0.2",
|
||||
"d3-selection": "^2.0.0",
|
||||
"d3-zoom": "^2.0.0",
|
||||
"topojson-client": "^3.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.0 || 17.x || 18.x",
|
||||
"react-dom": "^16.8.0 || 17.x || 18.x"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
@ -8701,6 +8944,26 @@
|
|||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/topojson-client": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
|
||||
"integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"commander": "2"
|
||||
},
|
||||
"bin": {
|
||||
"topo2geo": "bin/topo2geo",
|
||||
"topomerge": "bin/topomerge",
|
||||
"topoquantize": "bin/topoquantize"
|
||||
}
|
||||
},
|
||||
"node_modules/topojson-client/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/traverse": {
|
||||
"version": "0.3.9",
|
||||
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
|
||||
|
|
|
|||
|
|
@ -29,9 +29,11 @@
|
|||
"@edge-runtime/cookies": "^6.0.0",
|
||||
"@prisma/client": "^5.7.0",
|
||||
"@stripe/stripe-js": "^8.0.0",
|
||||
"@types/d3-scale": "^4.0.9",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"chart.js": "^4.4.0",
|
||||
"clsx": "^2.0.0",
|
||||
"d3-scale": "^4.0.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
|
|
@ -51,6 +53,7 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-i18next": "^13.5.0",
|
||||
"react-simple-maps": "^3.0.0",
|
||||
"resend": "^6.4.2",
|
||||
"sharp": "^0.33.1",
|
||||
"stripe": "^19.1.0",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { Table } from '@/components/ui/Table';
|
||||
import { useTranslation } from '@/hooks/useTranslation';
|
||||
import { Line, Bar, Doughnut } from 'react-chartjs-2';
|
||||
import { StatCard, Sparkline } from '@/components/analytics';
|
||||
import { Line, Doughnut } from 'react-chartjs-2';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
|
|
@ -20,6 +22,27 @@ import {
|
|||
Legend,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
import {
|
||||
BarChart3,
|
||||
Users,
|
||||
Smartphone,
|
||||
Globe,
|
||||
Calendar,
|
||||
Download,
|
||||
TrendingUp,
|
||||
QrCode,
|
||||
HelpCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
// Dynamically import GeoMap to avoid SSR issues with d3
|
||||
const GeoMap = dynamic(() => import('@/components/analytics/GeoMap'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-64 bg-gray-100 rounded-lg animate-pulse flex items-center justify-center">
|
||||
<span className="text-gray-400">Loading map...</span>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
|
|
@ -34,87 +57,102 @@ ChartJS.register(
|
|||
Filler
|
||||
);
|
||||
|
||||
interface QRPerformance {
|
||||
id: string;
|
||||
title: string;
|
||||
type: string;
|
||||
totalScans: number;
|
||||
uniqueScans: number;
|
||||
conversion: number;
|
||||
trend: 'up' | 'down' | 'flat';
|
||||
trendPercentage: number;
|
||||
sparkline: number[];
|
||||
lastScanned: string | null;
|
||||
isNew?: boolean;
|
||||
}
|
||||
|
||||
interface CountryStat {
|
||||
country: string;
|
||||
count: number;
|
||||
percentage: number;
|
||||
trend: 'up' | 'down' | 'flat';
|
||||
trendPercentage: number;
|
||||
isNew?: boolean;
|
||||
}
|
||||
|
||||
interface AnalyticsData {
|
||||
summary: {
|
||||
totalScans: number;
|
||||
uniqueScans: number;
|
||||
avgScansPerQR: number;
|
||||
mobilePercentage: number;
|
||||
topCountry: string;
|
||||
topCountryPercentage: number;
|
||||
scansTrend?: { trend: 'up' | 'down' | 'flat'; percentage: number; isNew?: boolean };
|
||||
avgScansTrend?: { trend: 'up' | 'down' | 'flat'; percentage: number; isNew?: boolean };
|
||||
comparisonPeriod?: string;
|
||||
};
|
||||
deviceStats: Record<string, number>;
|
||||
countryStats: CountryStat[];
|
||||
dailyScans: Record<string, number>;
|
||||
qrPerformance: QRPerformance[];
|
||||
}
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const { t } = useTranslation();
|
||||
const [timeRange, setTimeRange] = useState('7');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [analyticsData, setAnalyticsData] = useState<any>(null);
|
||||
const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAnalytics();
|
||||
}, [timeRange]);
|
||||
|
||||
const fetchAnalytics = async () => {
|
||||
const fetchAnalytics = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/analytics/summary');
|
||||
const response = await fetch(`/api/analytics/summary?range=${timeRange}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAnalyticsData(data);
|
||||
} else {
|
||||
// Set empty data if not authorized
|
||||
setAnalyticsData({
|
||||
summary: {
|
||||
totalScans: 0,
|
||||
uniqueScans: 0,
|
||||
avgScansPerQR: 0,
|
||||
mobilePercentage: 0,
|
||||
topCountry: 'N/A',
|
||||
topCountryPercentage: 0,
|
||||
},
|
||||
deviceStats: {},
|
||||
countryStats: [],
|
||||
dailyScans: {},
|
||||
qrPerformance: [],
|
||||
});
|
||||
setAnalyticsData(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching analytics:', error);
|
||||
setAnalyticsData({
|
||||
summary: {
|
||||
totalScans: 0,
|
||||
uniqueScans: 0,
|
||||
avgScansPerQR: 0,
|
||||
mobilePercentage: 0,
|
||||
topCountry: 'N/A',
|
||||
topCountryPercentage: 0,
|
||||
},
|
||||
deviceStats: {},
|
||||
countryStats: [],
|
||||
dailyScans: {},
|
||||
qrPerformance: [],
|
||||
});
|
||||
setAnalyticsData(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [timeRange]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAnalytics();
|
||||
}, [fetchAnalytics]);
|
||||
|
||||
const exportReport = () => {
|
||||
// Create CSV data
|
||||
if (!analyticsData) return;
|
||||
|
||||
const csvData = [
|
||||
['QR Master Analytics Report'],
|
||||
['Generated:', new Date().toLocaleString()],
|
||||
['Time Range:', `Last ${timeRange} days`],
|
||||
[''],
|
||||
['Summary'],
|
||||
['Total Scans', analyticsData?.summary.totalScans || 0],
|
||||
['Unique Scans', analyticsData?.summary.uniqueScans || 0],
|
||||
['Average Scans per QR', analyticsData?.summary.avgScansPerQR || 0],
|
||||
['Mobile Usage %', analyticsData?.summary.mobilePercentage || 0],
|
||||
['Total Scans', analyticsData.summary.totalScans],
|
||||
['Unique Scans', analyticsData.summary.uniqueScans],
|
||||
['Mobile Usage %', analyticsData.summary.mobilePercentage],
|
||||
['Top Country', analyticsData.summary.topCountry],
|
||||
[''],
|
||||
['Top QR Codes'],
|
||||
['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %'],
|
||||
...(analyticsData?.qrPerformance || []).map((qr: any) => [
|
||||
['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %', 'Last Scanned'],
|
||||
...analyticsData.qrPerformance.map((qr) => [
|
||||
qr.title,
|
||||
qr.type,
|
||||
qr.totalScans,
|
||||
qr.uniqueScans,
|
||||
qr.conversion,
|
||||
qr.lastScanned ? new Date(qr.lastScanned).toLocaleString() : 'Never',
|
||||
]),
|
||||
];
|
||||
|
||||
// Convert to CSV string
|
||||
const csv = csvData.map(row => row.join(',')).join('\n');
|
||||
|
||||
// Download
|
||||
const csv = csvData.map((row) => row.join(',')).join('\n');
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
|
|
@ -124,7 +162,7 @@ export default function AnalyticsPage() {
|
|||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// Prepare chart data based on selected time range
|
||||
// Prepare chart data
|
||||
const daysToShow = parseInt(timeRange);
|
||||
const dateRange = Array.from({ length: daysToShow }, (_, i) => {
|
||||
const date = new Date();
|
||||
|
|
@ -133,18 +171,32 @@ export default function AnalyticsPage() {
|
|||
});
|
||||
|
||||
const scanChartData = {
|
||||
labels: dateRange.map(date => {
|
||||
labels: dateRange.map((date) => {
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
|
||||
}),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Scans',
|
||||
data: dateRange.map(date => analyticsData?.dailyScans[date] || 0),
|
||||
borderColor: 'rgb(37, 99, 235)',
|
||||
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
||||
data: dateRange.map((date) => analyticsData?.dailyScans[date] || 0),
|
||||
borderColor: 'rgb(59, 130, 246)',
|
||||
backgroundColor: (context: any) => {
|
||||
const chart = context.chart;
|
||||
const { ctx, chartArea } = chart;
|
||||
if (!chartArea) return 'rgba(59, 130, 246, 0.1)';
|
||||
|
||||
const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
|
||||
gradient.addColorStop(0, 'rgba(59, 130, 246, 0.3)');
|
||||
gradient.addColorStop(1, 'rgba(59, 130, 246, 0.01)');
|
||||
return gradient;
|
||||
},
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointRadius: 4,
|
||||
pointBackgroundColor: 'rgb(59, 130, 246)',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -159,25 +211,34 @@ export default function AnalyticsPage() {
|
|||
analyticsData?.deviceStats.tablet || 0,
|
||||
],
|
||||
backgroundColor: [
|
||||
'rgba(37, 99, 235, 0.8)',
|
||||
'rgba(34, 197, 94, 0.8)',
|
||||
'rgba(249, 115, 22, 0.8)',
|
||||
'rgba(59, 130, 246, 0.85)',
|
||||
'rgba(34, 197, 94, 0.85)',
|
||||
'rgba(249, 115, 22, 0.85)',
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Find top performing QR code
|
||||
const topQR = analyticsData?.qrPerformance[0];
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-1/2 mb-8"></div>
|
||||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-4" />
|
||||
<div className="h-4 bg-gray-200 rounded w-1/2 mb-8" />
|
||||
<div className="grid md:grid-cols-4 gap-6 mb-8">
|
||||
{[1, 2, 3, 4].map(i => (
|
||||
<div key={i} className="h-32 bg-gray-200 rounded"></div>
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="h-32 bg-gray-200 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<div className="h-80 bg-gray-200 rounded-xl" />
|
||||
<div className="h-80 bg-gray-200 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -186,117 +247,136 @@ export default function AnalyticsPage() {
|
|||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{t('analytics.title')}</h1>
|
||||
<p className="text-gray-600 mt-2">{t('analytics.subtitle')}</p>
|
||||
</div>
|
||||
<Button onClick={exportReport}>Export Report</Button>
|
||||
<h1 className="text-3xl font-bold text-gray-900">QR Code Analytics</h1>
|
||||
<p className="text-gray-500 mt-1">Track and analyze your QR code performance</p>
|
||||
</div>
|
||||
|
||||
{/* Time Range Selector */}
|
||||
<div className="flex space-x-2">
|
||||
{['7', '30', '90'].map((days) => (
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Date Range Selector */}
|
||||
<div className="inline-flex items-center bg-gray-100 rounded-lg p-1">
|
||||
{[
|
||||
{ value: '7', label: '7 Days' },
|
||||
{ value: '30', label: '30 Days' },
|
||||
{ value: '90', label: '90 Days' },
|
||||
].map((range) => (
|
||||
<button
|
||||
key={days}
|
||||
onClick={() => setTimeRange(days)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
timeRange === days
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
key={range.value}
|
||||
onClick={() => setTimeRange(range.value)}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${timeRange === range.value
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{days} Days
|
||||
{range.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-gray-600 mb-1">Total Scans</p>
|
||||
<p className="text-2xl font-bold text-gray-900">
|
||||
{analyticsData?.summary.totalScans.toLocaleString() || '0'}
|
||||
</p>
|
||||
<p className={`text-sm mt-2 ${
|
||||
analyticsData?.summary.scansTrend?.trend === 'up' ? 'text-green-600' :
|
||||
analyticsData?.summary.scansTrend?.trend === 'down' ? 'text-red-600' :
|
||||
'text-gray-500'
|
||||
}`}>
|
||||
{analyticsData?.summary.scansTrend
|
||||
? `${analyticsData.summary.scansTrend.isNegative ? '-' : '+'}${analyticsData.summary.scansTrend.percentage}%${analyticsData.summary.scansTrend.isNew ? ' (new)' : ''} from last ${analyticsData.summary.comparisonPeriod || 'period'}`
|
||||
: 'No data'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-gray-600 mb-1">Avg Scans/QR</p>
|
||||
<p className="text-2xl font-bold text-gray-900">
|
||||
{analyticsData?.summary.avgScansPerQR || '0'}
|
||||
</p>
|
||||
<p className={`text-sm mt-2 ${
|
||||
analyticsData?.summary.avgScansTrend?.trend === 'up' ? 'text-green-600' :
|
||||
analyticsData?.summary.avgScansTrend?.trend === 'down' ? 'text-red-600' :
|
||||
'text-gray-500'
|
||||
}`}>
|
||||
{analyticsData?.summary.avgScansTrend
|
||||
? `${analyticsData.summary.avgScansTrend.isNegative ? '-' : '+'}${analyticsData.summary.avgScansTrend.percentage}%${analyticsData.summary.avgScansTrend.isNew ? ' (new)' : ''} from last ${analyticsData.summary.comparisonPeriod || 'period'}`
|
||||
: 'No data'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-gray-600 mb-1">Mobile Usage</p>
|
||||
<p className="text-2xl font-bold text-gray-900">
|
||||
{analyticsData?.summary.mobilePercentage || '0'}%
|
||||
</p>
|
||||
<p className="text-sm mt-2 text-gray-500">
|
||||
{analyticsData?.summary.mobilePercentage > 0 ? 'Of total scans' : 'No mobile scans'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-gray-600 mb-1">Top Country</p>
|
||||
<p className="text-2xl font-bold text-gray-900">
|
||||
{analyticsData?.summary.topCountry || 'N/A'}
|
||||
</p>
|
||||
<p className="text-sm mt-2 text-gray-500">
|
||||
{analyticsData?.summary.topCountryPercentage || '0'}% of total
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button onClick={exportReport} variant="primary" className="flex items-center gap-2">
|
||||
<Download className="w-4 h-4" />
|
||||
Export Report
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
{/* Scans Over Time */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Scans Over Time</CardTitle>
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<StatCard
|
||||
title="Total Scans"
|
||||
value={analyticsData?.summary.totalScans || 0}
|
||||
trend={
|
||||
analyticsData?.summary.scansTrend
|
||||
? {
|
||||
direction: analyticsData.summary.scansTrend.trend,
|
||||
percentage: analyticsData.summary.scansTrend.percentage,
|
||||
isNew: analyticsData.summary.scansTrend.isNew,
|
||||
period: analyticsData.summary.comparisonPeriod,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
icon={<BarChart3 className="w-5 h-5 text-primary-600" />}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Avg Scans/QR"
|
||||
value={analyticsData?.summary.avgScansPerQR || 0}
|
||||
trend={
|
||||
analyticsData?.summary.avgScansTrend
|
||||
? {
|
||||
direction: analyticsData.summary.avgScansTrend.trend,
|
||||
percentage: analyticsData.summary.avgScansTrend.percentage,
|
||||
isNew: analyticsData.summary.avgScansTrend.isNew,
|
||||
period: analyticsData.summary.comparisonPeriod,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
icon={<TrendingUp className="w-5 h-5 text-primary-600" />}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Mobile Usage"
|
||||
value={`${analyticsData?.summary.mobilePercentage || 0}%`}
|
||||
subtitle="Of total scans"
|
||||
icon={<Smartphone className="w-5 h-5 text-primary-600" />}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Top Country"
|
||||
value={analyticsData?.summary.topCountry || 'N/A'}
|
||||
subtitle={`${analyticsData?.summary.topCountryPercentage || 0}% of total`}
|
||||
icon={<Globe className="w-5 h-5 text-primary-600" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Chart Row */}
|
||||
<div className="grid lg:grid-cols-3 gap-6">
|
||||
{/* Scans Over Time - Takes 2 columns */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg font-semibold">Scan Trends Over Time</CardTitle>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>{timeRange} Days</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64">
|
||||
<div className="h-72">
|
||||
<Line
|
||||
data={scanChartData}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(17, 24, 39, 0.9)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
padding: 12,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderWidth: 1,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
title: (items) => items[0]?.label || '',
|
||||
label: (item) => `${item.formattedValue} scans`,
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { color: '#9CA3AF' },
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
},
|
||||
grid: { color: 'rgba(156, 163, 175, 0.1)' },
|
||||
ticks: { color: '#9CA3AF', precision: 0 },
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
|
@ -305,122 +385,207 @@ export default function AnalyticsPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Device Types */}
|
||||
{/* Device Types Donut */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Device Types</CardTitle>
|
||||
<CardTitle className="text-lg font-semibold">Device Types</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64 flex items-center justify-center">
|
||||
{analyticsData?.summary.totalScans > 0 ? (
|
||||
{(analyticsData?.summary.totalScans || 0) > 0 ? (
|
||||
<Doughnut
|
||||
data={deviceChartData}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '65%',
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
padding: 16,
|
||||
usePointStyle: true,
|
||||
pointStyle: 'circle',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-gray-500">No scan data available</p>
|
||||
<p className="text-gray-400">No scan data available</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Geographic & Country Stats Row */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Geographic Insights with Map */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold">Geographic Insights</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64">
|
||||
<GeoMap
|
||||
countryStats={analyticsData?.countryStats || []}
|
||||
totalScans={analyticsData?.summary.totalScans || 0}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Top Countries Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Top Countries</CardTitle>
|
||||
<CardTitle className="text-lg font-semibold">Top Countries</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{analyticsData?.countryStats.length > 0 ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Country</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Scans</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Percentage</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Trend</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{analyticsData.countryStats.map((country: any, index: number) => (
|
||||
<tr key={index} className="border-b transition-colors hover:bg-gray-50/50">
|
||||
<td className="px-4 py-4 align-middle">{country.country}</td>
|
||||
<td className="px-4 py-4 align-middle">{country.count.toLocaleString()}</td>
|
||||
<td className="px-4 py-4 align-middle">{country.percentage}%</td>
|
||||
<td className="px-4 py-4 align-middle">
|
||||
<Badge variant={
|
||||
country.trend === 'up' ? 'success' :
|
||||
country.trend === 'down' ? 'error' :
|
||||
'default'
|
||||
}>
|
||||
{country.trend === 'up' ? '↑' : country.trend === 'down' ? '↓' : '→'} {country.trendPercentage}%{country.isNew ? ' (new)' : ''}
|
||||
{(analyticsData?.countryStats?.length || 0) > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{analyticsData!.countryStats.slice(0, 5).map((country, index) => (
|
||||
<div
|
||||
key={country.country}
|
||||
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-lg font-semibold text-gray-400 w-6">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900">{country.country}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-gray-600">{country.count.toLocaleString()}</span>
|
||||
<span className="text-gray-400 text-sm w-12 text-right">
|
||||
{country.percentage}%
|
||||
</span>
|
||||
<Badge
|
||||
variant={
|
||||
country.trend === 'up'
|
||||
? 'success'
|
||||
: country.trend === 'down'
|
||||
? 'error'
|
||||
: 'default'
|
||||
}
|
||||
>
|
||||
{country.trend === 'up' ? '↑' : country.trend === 'down' ? '↓' : '→'}
|
||||
{country.trendPercentage}%{country.isNew ? ' (new)' : ''}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-center py-8">No country data available yet</p>
|
||||
<p className="text-gray-400 text-center py-8">No country data available yet</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* QR Code Performance Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>QR Code Performance</CardTitle>
|
||||
{/* Top Performing QR Codes with Sparklines */}
|
||||
<Card className="overflow-visible">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg font-semibold flex items-center gap-2">
|
||||
<QrCode className="w-5 h-5" />
|
||||
Top Performing QR Codes
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{analyticsData?.qrPerformance.length > 0 ? (
|
||||
{(analyticsData?.qrPerformance?.length || 0) > 0 ? (
|
||||
<div className="overflow-x-auto overflow-y-visible">
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">QR Code</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Type</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Total Scans</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Unique Scans</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Conversion</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Trend</th>
|
||||
<tr className="border-b border-gray-100">
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||||
QR Code
|
||||
</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||||
Type
|
||||
</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||||
Total Scans
|
||||
</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||||
Unique Scans
|
||||
</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>Conversions</span>
|
||||
<div className="group relative inline-block">
|
||||
<HelpCircle className="w-3.5 h-3.5 text-gray-400 cursor-help" />
|
||||
<div className="invisible group-hover:visible absolute top-full left-1/2 -translate-x-1/2 mt-2 w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-xl z-[9999] pointer-events-none">
|
||||
<div className="font-semibold mb-1">Conversion Rate</div>
|
||||
<div className="text-gray-300">
|
||||
Percentage of unique scans vs total scans. Formula: (Unique Scans / Total Scans) × 100%
|
||||
</div>
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-900"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||||
Trend
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{analyticsData.qrPerformance.map((qr: any) => (
|
||||
<tr key={qr.id} className="border-b transition-colors hover:bg-gray-50/50">
|
||||
<td className="px-4 py-4 align-middle font-medium">{qr.title}</td>
|
||||
{analyticsData!.qrPerformance.map((qr) => (
|
||||
<tr
|
||||
key={qr.id}
|
||||
className="border-b border-gray-50 transition-colors hover:bg-gray-50/50"
|
||||
>
|
||||
<td className="px-4 py-4 align-middle">
|
||||
<span className="font-medium text-gray-900">{qr.title}</span>
|
||||
</td>
|
||||
<td className="px-4 py-4 align-middle">
|
||||
<Badge variant={qr.type === 'DYNAMIC' ? 'info' : 'default'}>
|
||||
{qr.type}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-4 align-middle">{qr.totalScans.toLocaleString()}</td>
|
||||
<td className="px-4 py-4 align-middle font-medium">
|
||||
{qr.totalScans.toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-4 align-middle">{qr.uniqueScans.toLocaleString()}</td>
|
||||
<td className="px-4 py-4 align-middle">{qr.conversion}%</td>
|
||||
<td className="px-4 py-4 align-middle">
|
||||
<Badge variant={
|
||||
qr.trend === 'up' ? 'success' :
|
||||
qr.trend === 'down' ? 'error' :
|
||||
'default'
|
||||
}>
|
||||
{qr.trend === 'up' ? '↑' : qr.trend === 'down' ? '↓' : '→'} {qr.trendPercentage}%{qr.isNew ? ' (new)' : ''}
|
||||
<div className="flex items-center gap-3">
|
||||
<Sparkline
|
||||
data={qr.sparkline || [0, 0, 0, 0, 0, 0, 0]}
|
||||
color={
|
||||
qr.trend === 'up'
|
||||
? 'green'
|
||||
: qr.trend === 'down'
|
||||
? 'red'
|
||||
: 'blue'
|
||||
}
|
||||
/>
|
||||
<Badge
|
||||
variant={
|
||||
qr.trend === 'up'
|
||||
? 'success'
|
||||
: qr.trend === 'down'
|
||||
? 'error'
|
||||
: 'default'
|
||||
}
|
||||
>
|
||||
{qr.trend === 'up' ? '↑' : qr.trend === 'down' ? '↓' : '→'}
|
||||
{qr.trendPercentage}%{qr.isNew ? ' (new)' : ''}
|
||||
</Badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-center py-8">
|
||||
<div className="text-center py-12">
|
||||
<QrCode className="w-12 h-12 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-gray-500">
|
||||
No QR codes created yet. Create your first QR code to see analytics!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -161,8 +161,7 @@ export default function AppLayout({
|
|||
|
||||
{/* Sidebar */}
|
||||
<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 ${
|
||||
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||||
|
|
@ -187,8 +186,7 @@ export default function AppLayout({
|
|||
<Link
|
||||
key={item.name}
|
||||
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 ${isActive
|
||||
? 'bg-primary-50 text-primary-600'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
|
|
@ -249,7 +247,7 @@ export default function AppLayout({
|
|||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
<Footer variant="dashboard" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -150,12 +150,9 @@ export default function MarketingLayout({
|
|||
<div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
|
||||
<Link
|
||||
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" />
|
||||
</svg>
|
||||
Admin
|
||||
•
|
||||
</Link>
|
||||
<p>© 2025 QR Master. All rights reserved.</p>
|
||||
<div className="w-12"></div>
|
||||
|
|
|
|||
|
|
@ -190,6 +190,13 @@ export async function GET(request: NextRequest) {
|
|||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Generate last 7 days for sparkline
|
||||
const last7Days = Array.from({ length: 7 }, (_, i) => {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - (6 - i));
|
||||
return date.toISOString().split('T')[0];
|
||||
});
|
||||
|
||||
// QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
|
||||
const qrPerformance = qrCodes
|
||||
.filter(qr => qr.type === 'DYNAMIC')
|
||||
|
|
@ -204,6 +211,18 @@ export async function GET(request: NextRequest) {
|
|||
// Calculate trend
|
||||
const trendData = calculateTrend(currentTotal, previousTotal);
|
||||
|
||||
// Calculate sparkline data (scans per day for last 7 days)
|
||||
const sparklineData = last7Days.map(date => {
|
||||
return qr.scans.filter(s =>
|
||||
new Date(s.ts).toISOString().split('T')[0] === date
|
||||
).length;
|
||||
});
|
||||
|
||||
// Find last scanned date
|
||||
const lastScanned = qr.scans.length > 0
|
||||
? new Date(Math.max(...qr.scans.map(s => new Date(s.ts).getTime())))
|
||||
: null;
|
||||
|
||||
return {
|
||||
id: qr.id,
|
||||
title: qr.title,
|
||||
|
|
@ -215,6 +234,8 @@ export async function GET(request: NextRequest) {
|
|||
: 0,
|
||||
trend: trendData.trend,
|
||||
trendPercentage: trendData.percentage,
|
||||
sparkline: sparklineData,
|
||||
lastScanned: lastScanned?.toISOString() || null,
|
||||
...(trendData.isNew && { isNew: true }),
|
||||
};
|
||||
})
|
||||
|
|
|
|||
|
|
@ -74,10 +74,8 @@ export async function POST(request: NextRequest) {
|
|||
},
|
||||
});
|
||||
|
||||
// Set cookie for auto-login after signup
|
||||
cookies().set('userId', user.id, getAuthCookieOptions());
|
||||
|
||||
return NextResponse.json({
|
||||
// Create response
|
||||
const response = NextResponse.json({
|
||||
success: true,
|
||||
user: {
|
||||
id: user.id,
|
||||
|
|
@ -86,6 +84,11 @@ export async function POST(request: NextRequest) {
|
|||
plan: 'FREE',
|
||||
},
|
||||
});
|
||||
|
||||
// Set cookie for auto-login after signup
|
||||
response.cookies.set('userId', user.id, getAuthCookieOptions());
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
if (error instanceof z.ZodError) {
|
||||
return NextResponse.json(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
'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 alpha2ToAlpha3: Record<string, string> = {
|
||||
'US': 'USA',
|
||||
'DE': 'DEU',
|
||||
'GB': 'GBR',
|
||||
'FR': 'FRA',
|
||||
'CA': 'CAN',
|
||||
'AU': 'AUS',
|
||||
'JP': 'JPN',
|
||||
'CN': 'CHN',
|
||||
'IN': 'IND',
|
||||
'BR': 'BRA',
|
||||
'ES': 'ESP',
|
||||
'IT': 'ITA',
|
||||
'NL': 'NLD',
|
||||
'CH': 'CHE',
|
||||
'AT': 'AUT',
|
||||
'PL': 'POL',
|
||||
'SE': 'SWE',
|
||||
'NO': 'NOR',
|
||||
'DK': 'DNK',
|
||||
'FI': 'FIN',
|
||||
'BE': 'BEL',
|
||||
'PT': 'PRT',
|
||||
'IE': 'IRL',
|
||||
'MX': 'MEX',
|
||||
'AR': 'ARG',
|
||||
'KR': 'KOR',
|
||||
'SG': 'SGP',
|
||||
'NZ': 'NZL',
|
||||
'RU': 'RUS',
|
||||
'ZA': 'ZAF',
|
||||
};
|
||||
|
||||
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 alpha3 = alpha2ToAlpha3[alpha2];
|
||||
if (alpha3) {
|
||||
countryData[alpha3] = 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']);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<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) => {
|
||||
const isoCode = geo.properties.ISO_A3 || geo.id;
|
||||
const scanCount = countryData[isoCode] || 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' },
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Geographies>
|
||||
</ZoomableGroup>
|
||||
</ComposableMap>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(GeoMap);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as GeoMap } from './GeoMap';
|
||||
export { default as Sparkline } from './Sparkline';
|
||||
export { default as StatCard } from './StatCard';
|
||||
|
|
@ -1,59 +1,66 @@
|
|||
import Link from 'next/link';
|
||||
|
||||
export function Footer() {
|
||||
interface FooterProps {
|
||||
variant?: 'marketing' | 'dashboard';
|
||||
}
|
||||
|
||||
export function Footer({ variant = 'marketing' }: FooterProps) {
|
||||
const isDashboard = variant === 'dashboard';
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white py-12 mt-20">
|
||||
<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`}>
|
||||
<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>
|
||||
<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" />
|
||||
<span className="text-xl font-bold">QR Master</span>
|
||||
<span className={`text-xl font-bold ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
|
||||
</Link>
|
||||
<p className="text-gray-400">
|
||||
<p className={isDashboard ? 'text-gray-500' : 'text-gray-400'}>
|
||||
Create custom QR codes in seconds with advanced tracking and analytics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Product</h3>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<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="/#faq" className="hover:text-white">FAQ</Link></li>
|
||||
<li><Link href="/blog" className="hover:text-white">Blog</Link></li>
|
||||
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Product</h3>
|
||||
<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>
|
||||
<li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Pricing</Link></li>
|
||||
<li><Link href="/#faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>FAQ</Link></li>
|
||||
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Resources</h3>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<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="/blog" className="hover:text-white">Blog</Link></li>
|
||||
<li><Link href="/signup" className="hover:text-white">Get Started</Link></li>
|
||||
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Resources</h3>
|
||||
<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>
|
||||
<li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>All Questions</Link></li>
|
||||
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
|
||||
<li><Link href="/signup" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Get Started</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Legal</h3>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
|
||||
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Legal</h3>
|
||||
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
||||
<li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Privacy Policy</Link></li>
|
||||
</ul>
|
||||
</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 mt-8 pt-8 flex items-center justify-between ${isDashboard ? 'border-gray-200 text-gray-500' : 'border-gray-800 text-gray-400'}`}>
|
||||
{!isDashboard ? (
|
||||
<Link
|
||||
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.03] 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" />
|
||||
</svg>
|
||||
Admin
|
||||
•
|
||||
</Link>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
<p>© 2025 QR Master. All rights reserved.</p>
|
||||
<div className="w-12"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue