Compare commits
1 Commits
analytics
...
0774ff6f03
| Author | SHA1 | Date | |
|---|---|---|---|
|
0774ff6f03 |
263
package-lock.json
generated
263
package-lock.json
generated
@@ -13,11 +13,9 @@
|
|||||||
"@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",
|
||||||
"@types/d3-scale": "^4.0.9",
|
|
||||||
"bcryptjs": "^2.4.3",
|
"bcryptjs": "^2.4.3",
|
||||||
"chart.js": "^4.4.0",
|
"chart.js": "^4.4.0",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
"d3-scale": "^4.0.2",
|
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"exceljs": "^4.4.0",
|
"exceljs": "^4.4.0",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
@@ -37,7 +35,6 @@
|
|||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
"react-dropzone": "^14.2.3",
|
||||||
"react-i18next": "^13.5.0",
|
"react-i18next": "^13.5.0",
|
||||||
"react-simple-maps": "^3.0.0",
|
|
||||||
"resend": "^6.4.2",
|
"resend": "^6.4.2",
|
||||||
"sharp": "^0.33.1",
|
"sharp": "^0.33.1",
|
||||||
"stripe": "^19.1.0",
|
"stripe": "^19.1.0",
|
||||||
@@ -1934,21 +1931,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@types/file-saver": {
|
||||||
"version": "2.0.7",
|
"version": "2.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
|
||||||
@@ -3670,205 +3652,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/damerau-levenshtein": {
|
||||||
"version": "1.0.8",
|
"version": "1.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||||
@@ -5666,15 +5449,6 @@
|
|||||||
"node": ">= 0.4"
|
"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": {
|
"node_modules/ioredis": {
|
||||||
"version": "5.8.2",
|
"version": "5.8.2",
|
||||||
"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.8.2.tgz",
|
||||||
@@ -7730,23 +7504,6 @@
|
|||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
@@ -8944,26 +8701,6 @@
|
|||||||
"node": ">=8.0"
|
"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": {
|
"node_modules/traverse": {
|
||||||
"version": "0.3.9",
|
"version": "0.3.9",
|
||||||
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
|
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
|
||||||
|
|||||||
@@ -29,11 +29,9 @@
|
|||||||
"@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",
|
||||||
"@types/d3-scale": "^4.0.9",
|
|
||||||
"bcryptjs": "^2.4.3",
|
"bcryptjs": "^2.4.3",
|
||||||
"chart.js": "^4.4.0",
|
"chart.js": "^4.4.0",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
"d3-scale": "^4.0.2",
|
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"exceljs": "^4.4.0",
|
"exceljs": "^4.4.0",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
@@ -53,7 +51,6 @@
|
|||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
"react-dropzone": "^14.2.3",
|
||||||
"react-i18next": "^13.5.0",
|
"react-i18next": "^13.5.0",
|
||||||
"react-simple-maps": "^3.0.0",
|
|
||||||
"resend": "^6.4.2",
|
"resend": "^6.4.2",
|
||||||
"sharp": "^0.33.1",
|
"sharp": "^0.33.1",
|
||||||
"stripe": "^19.1.0",
|
"stripe": "^19.1.0",
|
||||||
@@ -83,4 +80,4 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0"
|
"node": ">=18.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,9 +32,6 @@ model User {
|
|||||||
resetPasswordToken String? @unique
|
resetPasswordToken String? @unique
|
||||||
resetPasswordExpires DateTime?
|
resetPasswordExpires DateTime?
|
||||||
|
|
||||||
// White-label subdomain
|
|
||||||
subdomain String? @unique
|
|
||||||
|
|
||||||
qrCodes QRCode[]
|
qrCodes QRCode[]
|
||||||
integrations Integration[]
|
integrations Integration[]
|
||||||
accounts Account[]
|
accounts Account[]
|
||||||
|
|||||||
@@ -1,14 +1,12 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { Badge } from '@/components/ui/Badge';
|
import { Badge } from '@/components/ui/Badge';
|
||||||
import { Table } from '@/components/ui/Table';
|
import { Table } from '@/components/ui/Table';
|
||||||
import { useTranslation } from '@/hooks/useTranslation';
|
import { useTranslation } from '@/hooks/useTranslation';
|
||||||
import { StatCard, Sparkline } from '@/components/analytics';
|
import { Line, Bar, Doughnut } from 'react-chartjs-2';
|
||||||
import { Line, Doughnut } from 'react-chartjs-2';
|
|
||||||
import {
|
import {
|
||||||
Chart as ChartJS,
|
Chart as ChartJS,
|
||||||
CategoryScale,
|
CategoryScale,
|
||||||
@@ -22,27 +20,6 @@ import {
|
|||||||
Legend,
|
Legend,
|
||||||
Filler,
|
Filler,
|
||||||
} from 'chart.js';
|
} 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(
|
ChartJS.register(
|
||||||
CategoryScale,
|
CategoryScale,
|
||||||
@@ -57,102 +34,87 @@ ChartJS.register(
|
|||||||
Filler
|
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() {
|
export default function AnalyticsPage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [timeRange, setTimeRange] = useState('7');
|
const [timeRange, setTimeRange] = useState('7');
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
|
const [analyticsData, setAnalyticsData] = useState<any>(null);
|
||||||
|
|
||||||
const fetchAnalytics = useCallback(async () => {
|
useEffect(() => {
|
||||||
setLoading(true);
|
fetchAnalytics();
|
||||||
|
}, [timeRange]);
|
||||||
|
|
||||||
|
const fetchAnalytics = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`/api/analytics/summary?range=${timeRange}`);
|
const response = await fetch('/api/analytics/summary');
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
setAnalyticsData(data);
|
setAnalyticsData(data);
|
||||||
} else {
|
} else {
|
||||||
setAnalyticsData(null);
|
// 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: [],
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching analytics:', error);
|
console.error('Error fetching analytics:', error);
|
||||||
setAnalyticsData(null);
|
setAnalyticsData({
|
||||||
|
summary: {
|
||||||
|
totalScans: 0,
|
||||||
|
uniqueScans: 0,
|
||||||
|
avgScansPerQR: 0,
|
||||||
|
mobilePercentage: 0,
|
||||||
|
topCountry: 'N/A',
|
||||||
|
topCountryPercentage: 0,
|
||||||
|
},
|
||||||
|
deviceStats: {},
|
||||||
|
countryStats: [],
|
||||||
|
dailyScans: {},
|
||||||
|
qrPerformance: [],
|
||||||
|
});
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, [timeRange]);
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchAnalytics();
|
|
||||||
}, [fetchAnalytics]);
|
|
||||||
|
|
||||||
const exportReport = () => {
|
const exportReport = () => {
|
||||||
if (!analyticsData) return;
|
// Create CSV data
|
||||||
|
|
||||||
const csvData = [
|
const csvData = [
|
||||||
['QR Master Analytics Report'],
|
['QR Master Analytics Report'],
|
||||||
['Generated:', new Date().toLocaleString()],
|
['Generated:', new Date().toLocaleString()],
|
||||||
['Time Range:', `Last ${timeRange} days`],
|
|
||||||
[''],
|
[''],
|
||||||
['Summary'],
|
['Summary'],
|
||||||
['Total Scans', analyticsData.summary.totalScans],
|
['Total Scans', analyticsData?.summary.totalScans || 0],
|
||||||
['Unique Scans', analyticsData.summary.uniqueScans],
|
['Unique Scans', analyticsData?.summary.uniqueScans || 0],
|
||||||
['Mobile Usage %', analyticsData.summary.mobilePercentage],
|
['Average Scans per QR', analyticsData?.summary.avgScansPerQR || 0],
|
||||||
['Top Country', analyticsData.summary.topCountry],
|
['Mobile Usage %', analyticsData?.summary.mobilePercentage || 0],
|
||||||
[''],
|
[''],
|
||||||
['Top QR Codes'],
|
['Top QR Codes'],
|
||||||
['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %', 'Last Scanned'],
|
['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %'],
|
||||||
...analyticsData.qrPerformance.map((qr) => [
|
...(analyticsData?.qrPerformance || []).map((qr: any) => [
|
||||||
qr.title,
|
qr.title,
|
||||||
qr.type,
|
qr.type,
|
||||||
qr.totalScans,
|
qr.totalScans,
|
||||||
qr.uniqueScans,
|
qr.uniqueScans,
|
||||||
qr.conversion,
|
qr.conversion,
|
||||||
qr.lastScanned ? new Date(qr.lastScanned).toLocaleString() : 'Never',
|
|
||||||
]),
|
]),
|
||||||
];
|
];
|
||||||
|
|
||||||
const csv = csvData.map((row) => row.join(',')).join('\n');
|
// Convert to CSV string
|
||||||
|
const csv = csvData.map(row => row.join(',')).join('\n');
|
||||||
|
|
||||||
|
// Download
|
||||||
const blob = new Blob([csv], { type: 'text/csv' });
|
const blob = new Blob([csv], { type: 'text/csv' });
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
@@ -162,7 +124,7 @@ export default function AnalyticsPage() {
|
|||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Prepare chart data
|
// Prepare chart data based on selected time range
|
||||||
const daysToShow = parseInt(timeRange);
|
const daysToShow = parseInt(timeRange);
|
||||||
const dateRange = Array.from({ length: daysToShow }, (_, i) => {
|
const dateRange = Array.from({ length: daysToShow }, (_, i) => {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
@@ -171,32 +133,18 @@ export default function AnalyticsPage() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const scanChartData = {
|
const scanChartData = {
|
||||||
labels: dateRange.map((date) => {
|
labels: dateRange.map(date => {
|
||||||
const d = new Date(date);
|
const d = new Date(date);
|
||||||
return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
|
return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
|
||||||
}),
|
}),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: 'Scans',
|
label: 'Scans',
|
||||||
data: dateRange.map((date) => analyticsData?.dailyScans[date] || 0),
|
data: dateRange.map(date => analyticsData?.dailyScans[date] || 0),
|
||||||
borderColor: 'rgb(59, 130, 246)',
|
borderColor: 'rgb(37, 99, 235)',
|
||||||
backgroundColor: (context: any) => {
|
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
||||||
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,
|
tension: 0.4,
|
||||||
fill: true,
|
fill: true,
|
||||||
pointRadius: 4,
|
|
||||||
pointBackgroundColor: 'rgb(59, 130, 246)',
|
|
||||||
pointBorderColor: '#fff',
|
|
||||||
pointBorderWidth: 2,
|
|
||||||
pointHoverRadius: 6,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@@ -211,34 +159,25 @@ export default function AnalyticsPage() {
|
|||||||
analyticsData?.deviceStats.tablet || 0,
|
analyticsData?.deviceStats.tablet || 0,
|
||||||
],
|
],
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
'rgba(59, 130, 246, 0.85)',
|
'rgba(37, 99, 235, 0.8)',
|
||||||
'rgba(34, 197, 94, 0.85)',
|
'rgba(34, 197, 94, 0.8)',
|
||||||
'rgba(249, 115, 22, 0.85)',
|
'rgba(249, 115, 22, 0.8)',
|
||||||
],
|
],
|
||||||
borderWidth: 0,
|
|
||||||
hoverOffset: 4,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
// Find top performing QR code
|
|
||||||
const topQR = analyticsData?.qrPerformance[0];
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
<div className="animate-pulse">
|
<div className="animate-pulse">
|
||||||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-4" />
|
<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 className="h-4 bg-gray-200 rounded w-1/2 mb-8"></div>
|
||||||
<div className="grid md:grid-cols-4 gap-6 mb-8">
|
<div className="grid md:grid-cols-4 gap-6 mb-8">
|
||||||
{[1, 2, 3, 4].map((i) => (
|
{[1, 2, 3, 4].map(i => (
|
||||||
<div key={i} className="h-32 bg-gray-200 rounded-xl" />
|
<div key={i} className="h-32 bg-gray-200 rounded"></div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -247,136 +186,117 @@ export default function AnalyticsPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold text-gray-900">QR Code Analytics</h1>
|
<h1 className="text-3xl font-bold text-gray-900">{t('analytics.title')}</h1>
|
||||||
<p className="text-gray-500 mt-1">Track and analyze your QR code performance</p>
|
<p className="text-gray-600 mt-2">{t('analytics.subtitle')}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<Button onClick={exportReport}>Export Report</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
{/* Time Range Selector */}
|
||||||
{/* Date Range Selector */}
|
<div className="flex space-x-2">
|
||||||
<div className="inline-flex items-center bg-gray-100 rounded-lg p-1">
|
{['7', '30', '90'].map((days) => (
|
||||||
{[
|
<button
|
||||||
{ value: '7', label: '7 Days' },
|
key={days}
|
||||||
{ value: '30', label: '30 Days' },
|
onClick={() => setTimeRange(days)}
|
||||||
{ value: '90', label: '90 Days' },
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||||
].map((range) => (
|
timeRange === days
|
||||||
<button
|
? 'bg-primary-600 text-white'
|
||||||
key={range.value}
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
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'
|
{days} Days
|
||||||
: 'text-gray-600 hover:text-gray-900'
|
</button>
|
||||||
}`}
|
))}
|
||||||
>
|
|
||||||
{range.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button onClick={exportReport} variant="primary" className="flex items-center gap-2">
|
|
||||||
<Download className="w-4 h-4" />
|
|
||||||
Export Report
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* KPI Cards */}
|
{/* KPI Cards */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid md:grid-cols-4 gap-6">
|
||||||
<StatCard
|
<Card>
|
||||||
title="Total Scans"
|
<CardContent className="p-6">
|
||||||
value={analyticsData?.summary.totalScans || 0}
|
<p className="text-sm text-gray-600 mb-1">Total Scans</p>
|
||||||
trend={
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
analyticsData?.summary.scansTrend
|
{analyticsData?.summary.totalScans.toLocaleString() || '0'}
|
||||||
? {
|
</p>
|
||||||
direction: analyticsData.summary.scansTrend.trend,
|
<p className={`text-sm mt-2 ${
|
||||||
percentage: analyticsData.summary.scansTrend.percentage,
|
analyticsData?.summary.scansTrend?.trend === 'up' ? 'text-green-600' :
|
||||||
isNew: analyticsData.summary.scansTrend.isNew,
|
analyticsData?.summary.scansTrend?.trend === 'down' ? 'text-red-600' :
|
||||||
period: analyticsData.summary.comparisonPeriod,
|
'text-gray-500'
|
||||||
}
|
}`}>
|
||||||
: undefined
|
{analyticsData?.summary.scansTrend
|
||||||
}
|
? `${analyticsData.summary.scansTrend.isNegative ? '-' : '+'}${analyticsData.summary.scansTrend.percentage}%${analyticsData.summary.scansTrend.isNew ? ' (new)' : ''} from last ${analyticsData.summary.comparisonPeriod || 'period'}`
|
||||||
icon={<BarChart3 className="w-5 h-5 text-primary-600" />}
|
: 'No data'}
|
||||||
/>
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<StatCard
|
<Card>
|
||||||
title="Avg Scans/QR"
|
<CardContent className="p-6">
|
||||||
value={analyticsData?.summary.avgScansPerQR || 0}
|
<p className="text-sm text-gray-600 mb-1">Avg Scans/QR</p>
|
||||||
trend={
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
analyticsData?.summary.avgScansTrend
|
{analyticsData?.summary.avgScansPerQR || '0'}
|
||||||
? {
|
</p>
|
||||||
direction: analyticsData.summary.avgScansTrend.trend,
|
<p className={`text-sm mt-2 ${
|
||||||
percentage: analyticsData.summary.avgScansTrend.percentage,
|
analyticsData?.summary.avgScansTrend?.trend === 'up' ? 'text-green-600' :
|
||||||
isNew: analyticsData.summary.avgScansTrend.isNew,
|
analyticsData?.summary.avgScansTrend?.trend === 'down' ? 'text-red-600' :
|
||||||
period: analyticsData.summary.comparisonPeriod,
|
'text-gray-500'
|
||||||
}
|
}`}>
|
||||||
: undefined
|
{analyticsData?.summary.avgScansTrend
|
||||||
}
|
? `${analyticsData.summary.avgScansTrend.isNegative ? '-' : '+'}${analyticsData.summary.avgScansTrend.percentage}%${analyticsData.summary.avgScansTrend.isNew ? ' (new)' : ''} from last ${analyticsData.summary.comparisonPeriod || 'period'}`
|
||||||
icon={<TrendingUp className="w-5 h-5 text-primary-600" />}
|
: 'No data'}
|
||||||
/>
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<StatCard
|
<Card>
|
||||||
title="Mobile Usage"
|
<CardContent className="p-6">
|
||||||
value={`${analyticsData?.summary.mobilePercentage || 0}%`}
|
<p className="text-sm text-gray-600 mb-1">Mobile Usage</p>
|
||||||
subtitle="Of total scans"
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
icon={<Smartphone className="w-5 h-5 text-primary-600" />}
|
{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>
|
||||||
|
|
||||||
<StatCard
|
<Card>
|
||||||
title="Top Country"
|
<CardContent className="p-6">
|
||||||
value={analyticsData?.summary.topCountry || 'N/A'}
|
<p className="text-sm text-gray-600 mb-1">Top Country</p>
|
||||||
subtitle={`${analyticsData?.summary.topCountryPercentage || 0}% of total`}
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
icon={<Globe className="w-5 h-5 text-primary-600" />}
|
{analyticsData?.summary.topCountry || 'N/A'}
|
||||||
/>
|
</p>
|
||||||
|
<p className="text-sm mt-2 text-gray-500">
|
||||||
|
{analyticsData?.summary.topCountryPercentage || '0'}% of total
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main Chart Row */}
|
{/* Charts */}
|
||||||
<div className="grid lg:grid-cols-3 gap-6">
|
<div className="grid lg:grid-cols-2 gap-8">
|
||||||
{/* Scans Over Time - Takes 2 columns */}
|
{/* Scans Over Time */}
|
||||||
<Card className="lg:col-span-2">
|
<Card>
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
<CardHeader>
|
||||||
<CardTitle className="text-lg font-semibold">Scan Trends Over Time</CardTitle>
|
<CardTitle>Scans 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>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="h-72">
|
<div className="h-64">
|
||||||
<Line
|
<Line
|
||||||
data={scanChartData}
|
data={scanChartData}
|
||||||
options={{
|
options={{
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
interaction: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false,
|
|
||||||
},
|
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: { display: false },
|
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: {
|
scales: {
|
||||||
x: {
|
|
||||||
grid: { display: false },
|
|
||||||
ticks: { color: '#9CA3AF' },
|
|
||||||
},
|
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
grid: { color: 'rgba(156, 163, 175, 0.1)' },
|
ticks: {
|
||||||
ticks: { color: '#9CA3AF', precision: 0 },
|
precision: 0,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
@@ -385,207 +305,122 @@ export default function AnalyticsPage() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Device Types Donut */}
|
{/* Device Types */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg font-semibold">Device Types</CardTitle>
|
<CardTitle>Device Types</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="h-64 flex items-center justify-center">
|
<div className="h-64 flex items-center justify-center">
|
||||||
{(analyticsData?.summary.totalScans || 0) > 0 ? (
|
{analyticsData?.summary.totalScans > 0 ? (
|
||||||
<Doughnut
|
<Doughnut
|
||||||
data={deviceChartData}
|
data={deviceChartData}
|
||||||
options={{
|
options={{
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
cutout: '65%',
|
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
position: 'bottom',
|
position: 'bottom',
|
||||||
labels: {
|
|
||||||
padding: 16,
|
|
||||||
usePointStyle: true,
|
|
||||||
pointStyle: 'circle',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-gray-400">No scan data available</p>
|
<p className="text-gray-500">No scan data available</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Geographic & Country Stats Row */}
|
{/* Top Countries Table */}
|
||||||
<div className="grid lg:grid-cols-2 gap-6">
|
<Card>
|
||||||
{/* Geographic Insights with Map */}
|
<CardHeader>
|
||||||
<Card>
|
<CardTitle>Top Countries</CardTitle>
|
||||||
<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 className="text-lg font-semibold">Top Countries</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{(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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-gray-400 text-center py-8">No country data available yet</p>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 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>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
{(analyticsData?.qrPerformance?.length || 0) > 0 ? (
|
{analyticsData?.countryStats.length > 0 ? (
|
||||||
<div className="overflow-x-auto overflow-y-visible">
|
<Table>
|
||||||
<Table>
|
<thead>
|
||||||
<thead>
|
<tr>
|
||||||
<tr className="border-b border-gray-100">
|
<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">
|
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Scans</th>
|
||||||
QR Code
|
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Percentage</th>
|
||||||
</th>
|
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Trend</th>
|
||||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
</tr>
|
||||||
Type
|
</thead>
|
||||||
</th>
|
<tbody>
|
||||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
{analyticsData.countryStats.map((country: any, index: number) => (
|
||||||
Total Scans
|
<tr key={index} className="border-b transition-colors hover:bg-gray-50/50">
|
||||||
</th>
|
<td className="px-4 py-4 align-middle">{country.country}</td>
|
||||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
<td className="px-4 py-4 align-middle">{country.count.toLocaleString()}</td>
|
||||||
Unique Scans
|
<td className="px-4 py-4 align-middle">{country.percentage}%</td>
|
||||||
</th>
|
<td className="px-4 py-4 align-middle">
|
||||||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
<Badge variant={
|
||||||
<div className="flex items-center gap-1.5">
|
country.trend === 'up' ? 'success' :
|
||||||
<span>Conversions</span>
|
country.trend === 'down' ? 'error' :
|
||||||
<div className="group relative inline-block">
|
'default'
|
||||||
<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">
|
{country.trend === 'up' ? '↑' : country.trend === 'down' ? '↓' : '→'} {country.trendPercentage}%{country.isNew ? ' (new)' : ''}
|
||||||
<div className="font-semibold mb-1">Conversion Rate</div>
|
</Badge>
|
||||||
<div className="text-gray-300">
|
</td>
|
||||||
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>
|
</tr>
|
||||||
</thead>
|
))}
|
||||||
<tbody>
|
</tbody>
|
||||||
{analyticsData!.qrPerformance.map((qr) => (
|
</Table>
|
||||||
<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 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">
|
|
||||||
<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>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center py-12">
|
<p className="text-gray-500 text-center py-8">No country data available yet</p>
|
||||||
<QrCode className="w-12 h-12 text-gray-300 mx-auto mb-4" />
|
)}
|
||||||
<p className="text-gray-500">
|
</CardContent>
|
||||||
No QR codes created yet. Create your first QR code to see analytics!
|
</Card>
|
||||||
</p>
|
|
||||||
</div>
|
{/* QR Code Performance Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>QR Code Performance</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{analyticsData?.qrPerformance.length > 0 ? (
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<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">{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)' : ''}
|
||||||
|
</Badge>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 text-center py-8">
|
||||||
|
No QR codes created yet. Create your first QR code to see analytics!
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -33,11 +33,6 @@ export default function CreatePage() {
|
|||||||
const [cornerStyle, setCornerStyle] = useState('square');
|
const [cornerStyle, setCornerStyle] = useState('square');
|
||||||
const [size, setSize] = useState(200);
|
const [size, setSize] = useState(200);
|
||||||
|
|
||||||
// Logo state (PRO feature)
|
|
||||||
const [logo, setLogo] = useState<string>('');
|
|
||||||
const [logoSize, setLogoSize] = useState(40);
|
|
||||||
const [excavate, setExcavate] = useState(true);
|
|
||||||
|
|
||||||
// QR preview
|
// QR preview
|
||||||
const [qrDataUrl, setQrDataUrl] = useState('');
|
const [qrDataUrl, setQrDataUrl] = useState('');
|
||||||
|
|
||||||
@@ -172,15 +167,6 @@ export default function CreatePage() {
|
|||||||
backgroundColor: canCustomizeColors ? backgroundColor : '#FFFFFF',
|
backgroundColor: canCustomizeColors ? backgroundColor : '#FFFFFF',
|
||||||
cornerStyle,
|
cornerStyle,
|
||||||
size,
|
size,
|
||||||
// Logo embedding (PRO only)
|
|
||||||
...(logo && canCustomizeColors ? {
|
|
||||||
imageSettings: {
|
|
||||||
src: logo,
|
|
||||||
height: logoSize,
|
|
||||||
width: logoSize,
|
|
||||||
excavate: excavate,
|
|
||||||
}
|
|
||||||
} : {}),
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -502,95 +488,6 @@ export default function CreatePage() {
|
|||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Logo/Icon Section (PRO Feature) */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<CardTitle>Logo / Icon</CardTitle>
|
|
||||||
<Badge variant="info">PRO</Badge>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{!canCustomizeColors ? (
|
|
||||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
||||||
<p className="text-sm text-blue-900">
|
|
||||||
<strong>Upgrade to PRO</strong> to add your logo or icon to QR codes.
|
|
||||||
</p>
|
|
||||||
<Link href="/pricing">
|
|
||||||
<Button variant="primary" size="sm" className="mt-2">
|
|
||||||
Upgrade Now
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Upload Logo (PNG, JPG)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
accept="image/png,image/jpeg,image/jpg"
|
|
||||||
onChange={(e) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onloadend = () => {
|
|
||||||
setLogo(reader.result as string);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{logo && (
|
|
||||||
<>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<img src={logo} alt="Logo preview" className="w-12 h-12 object-contain rounded border" />
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setLogo('')}
|
|
||||||
>
|
|
||||||
Remove
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Logo Size: {logoSize}px
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="24"
|
|
||||||
max="80"
|
|
||||||
value={logoSize}
|
|
||||||
onChange={(e) => setLogoSize(Number(e.target.value))}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="excavate"
|
|
||||||
checked={excavate}
|
|
||||||
onChange={(e) => setExcavate(e.target.checked)}
|
|
||||||
className="w-4 h-4 rounded border-gray-300"
|
|
||||||
/>
|
|
||||||
<label htmlFor="excavate" className="text-sm text-gray-700">
|
|
||||||
Clear background behind logo (recommended)
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: Preview */}
|
{/* Right: Preview */}
|
||||||
@@ -608,13 +505,7 @@ export default function CreatePage() {
|
|||||||
size={200}
|
size={200}
|
||||||
fgColor={foregroundColor}
|
fgColor={foregroundColor}
|
||||||
bgColor={backgroundColor}
|
bgColor={backgroundColor}
|
||||||
level={logo && canCustomizeColors ? 'H' : 'M'}
|
level="M"
|
||||||
imageSettings={logo && canCustomizeColors ? {
|
|
||||||
src: logo,
|
|
||||||
height: logoSize,
|
|
||||||
width: logoSize,
|
|
||||||
excavate: excavate,
|
|
||||||
} : undefined}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -44,7 +44,6 @@ export default function DashboardPage() {
|
|||||||
uniqueScans: 0,
|
uniqueScans: 0,
|
||||||
});
|
});
|
||||||
const [analyticsData, setAnalyticsData] = useState<any>(null);
|
const [analyticsData, setAnalyticsData] = useState<any>(null);
|
||||||
const [userSubdomain, setUserSubdomain] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const mockQRCodes = [
|
const mockQRCodes = [
|
||||||
{
|
{
|
||||||
@@ -280,13 +279,6 @@ export default function DashboardPage() {
|
|||||||
const analytics = await analyticsResponse.json();
|
const analytics = await analyticsResponse.json();
|
||||||
setAnalyticsData(analytics);
|
setAnalyticsData(analytics);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fetch user subdomain for white label display
|
|
||||||
const subdomainResponse = await fetch('/api/user/subdomain');
|
|
||||||
if (subdomainResponse.ok) {
|
|
||||||
const subdomainData = await subdomainResponse.json();
|
|
||||||
setUserSubdomain(subdomainData.subdomain || null);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching data:', error);
|
console.error('Error fetching data:', error);
|
||||||
setQrCodes([]);
|
setQrCodes([]);
|
||||||
@@ -457,11 +449,10 @@ export default function DashboardPage() {
|
|||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{qrCodes.map((qr) => (
|
{qrCodes.map((qr) => (
|
||||||
<QRCodeCard
|
<QRCodeCard
|
||||||
key={`${qr.id}-${userSubdomain || 'default'}`}
|
key={qr.id}
|
||||||
qr={qr}
|
qr={qr}
|
||||||
onEdit={handleEdit}
|
onEdit={handleEdit}
|
||||||
onDelete={handleDelete}
|
onDelete={handleDelete}
|
||||||
userSubdomain={userSubdomain}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -161,8 +161,9 @@ export default function AppLayout({
|
|||||||
|
|
||||||
{/* 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 ${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">
|
<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">
|
||||||
@@ -186,10 +187,11 @@ export default function AppLayout({
|
|||||||
<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}
|
{item.icon}
|
||||||
<span className="font-medium">{item.name}</span>
|
<span className="font-medium">{item.name}</span>
|
||||||
@@ -247,7 +249,7 @@ export default function AppLayout({
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<Footer variant="dashboard" />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -4,12 +4,11 @@ import React, { useState, useEffect } from 'react';
|
|||||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { Badge } from '@/components/ui/Badge';
|
import { Badge } from '@/components/ui/Badge';
|
||||||
import { Input } from '@/components/ui/Input';
|
|
||||||
import { useCsrf } from '@/hooks/useCsrf';
|
import { useCsrf } from '@/hooks/useCsrf';
|
||||||
import { showToast } from '@/components/ui/Toast';
|
import { showToast } from '@/components/ui/Toast';
|
||||||
import ChangePasswordModal from '@/components/settings/ChangePasswordModal';
|
import ChangePasswordModal from '@/components/settings/ChangePasswordModal';
|
||||||
|
|
||||||
type TabType = 'profile' | 'subscription' | 'whitelabel';
|
type TabType = 'profile' | 'subscription';
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const { fetchWithCsrf } = useCsrf();
|
const { fetchWithCsrf } = useCsrf();
|
||||||
@@ -29,11 +28,6 @@ export default function SettingsPage() {
|
|||||||
staticUsed: 0,
|
staticUsed: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
// White Label Subdomain states
|
|
||||||
const [subdomain, setSubdomain] = useState('');
|
|
||||||
const [savedSubdomain, setSavedSubdomain] = useState<string | null>(null);
|
|
||||||
const [subdomainLoading, setSubdomainLoading] = useState(false);
|
|
||||||
|
|
||||||
// Load user data
|
// Load user data
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchUserData = async () => {
|
const fetchUserData = async () => {
|
||||||
@@ -59,14 +53,6 @@ export default function SettingsPage() {
|
|||||||
const data = await statsResponse.json();
|
const data = await statsResponse.json();
|
||||||
setUsageStats(data);
|
setUsageStats(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fetch subdomain
|
|
||||||
const subdomainResponse = await fetch('/api/user/subdomain');
|
|
||||||
if (subdomainResponse.ok) {
|
|
||||||
const data = await subdomainResponse.json();
|
|
||||||
setSavedSubdomain(data.subdomain);
|
|
||||||
setSubdomain(data.subdomain || '');
|
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Failed to load user data:', e);
|
console.error('Failed to load user data:', e);
|
||||||
}
|
}
|
||||||
@@ -199,31 +185,24 @@ export default function SettingsPage() {
|
|||||||
<nav className="-mb-px flex space-x-8">
|
<nav className="-mb-px flex space-x-8">
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('profile')}
|
onClick={() => setActiveTab('profile')}
|
||||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'profile'
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
? 'border-primary-500 text-primary-600'
|
activeTab === 'profile'
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
? 'border-primary-500 text-primary-600'
|
||||||
}`}
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
Profile
|
Profile
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('subscription')}
|
onClick={() => setActiveTab('subscription')}
|
||||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'subscription'
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
? 'border-primary-500 text-primary-600'
|
activeTab === 'subscription'
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
? 'border-primary-500 text-primary-600'
|
||||||
}`}
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
Subscription
|
Subscription
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('whitelabel')}
|
|
||||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'whitelabel'
|
|
||||||
? 'border-primary-500 text-primary-600'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
White Label
|
|
||||||
</button>
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -394,143 +373,6 @@ export default function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'whitelabel' && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* White Label Subdomain */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<CardTitle>White Label Subdomain</CardTitle>
|
|
||||||
<Badge variant="success">FREE</Badge>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<p className="text-gray-600 text-sm">
|
|
||||||
Create your own branded QR code URL. Your QR codes will be accessible via your custom subdomain.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Input
|
|
||||||
value={subdomain}
|
|
||||||
onChange={(e) => setSubdomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
|
|
||||||
placeholder="your-brand"
|
|
||||||
className="flex-1 max-w-xs"
|
|
||||||
/>
|
|
||||||
<span className="text-gray-600 font-medium">.qrmaster.net</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
<ul className="list-disc list-inside space-y-1">
|
|
||||||
<li>3-30 characters</li>
|
|
||||||
<li>Only lowercase letters, numbers, and hyphens</li>
|
|
||||||
<li>Cannot start or end with a hyphen</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{savedSubdomain && (
|
|
||||||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
|
||||||
<p className="text-green-800 font-medium">
|
|
||||||
✅ Your white label URL is active:
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={`https://${savedSubdomain}.qrmaster.net`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-green-700 underline"
|
|
||||||
>
|
|
||||||
https://{savedSubdomain}.qrmaster.net
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button
|
|
||||||
onClick={async () => {
|
|
||||||
if (!subdomain.trim()) {
|
|
||||||
showToast('Please enter a subdomain', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setSubdomainLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await fetchWithCsrf('/api/user/subdomain', {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({ subdomain: subdomain.trim().toLowerCase() }),
|
|
||||||
});
|
|
||||||
const data = await response.json();
|
|
||||||
if (response.ok) {
|
|
||||||
setSavedSubdomain(subdomain.trim().toLowerCase());
|
|
||||||
showToast('Subdomain saved successfully!', 'success');
|
|
||||||
} else {
|
|
||||||
showToast(data.error || 'Error saving subdomain', 'error');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showToast('Error saving subdomain', 'error');
|
|
||||||
} finally {
|
|
||||||
setSubdomainLoading(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
loading={subdomainLoading}
|
|
||||||
disabled={!subdomain.trim() || subdomain === savedSubdomain}
|
|
||||||
>
|
|
||||||
{savedSubdomain ? 'Update Subdomain' : 'Save Subdomain'}
|
|
||||||
</Button>
|
|
||||||
{savedSubdomain && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={async () => {
|
|
||||||
setSubdomainLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await fetchWithCsrf('/api/user/subdomain', {
|
|
||||||
method: 'DELETE',
|
|
||||||
});
|
|
||||||
if (response.ok) {
|
|
||||||
setSavedSubdomain(null);
|
|
||||||
setSubdomain('');
|
|
||||||
showToast('Subdomain removed', 'success');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showToast('Error removing subdomain', 'error');
|
|
||||||
} finally {
|
|
||||||
setSubdomainLoading(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={subdomainLoading}
|
|
||||||
>
|
|
||||||
Remove
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* How it works */}
|
|
||||||
{savedSubdomain && (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>How it works</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4 text-sm">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="p-3 bg-gray-100 rounded-lg">
|
|
||||||
<p className="text-gray-500 mb-1">Before (default)</p>
|
|
||||||
<code className="text-gray-800">qrmaster.net/r/your-qr</code>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-primary-50 rounded-lg border border-primary-200">
|
|
||||||
<p className="text-primary-600 mb-1">After (your brand)</p>
|
|
||||||
<code className="text-primary-800">{savedSubdomain}.qrmaster.net/r/your-qr</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
All your QR codes will work with both URLs. Share the branded version with your clients!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Change Password Modal */}
|
{/* Change Password Modal */}
|
||||||
<ChangePasswordModal
|
<ChangePasswordModal
|
||||||
isOpen={showPasswordModal}
|
isOpen={showPasswordModal}
|
||||||
|
|||||||
@@ -150,9 +150,12 @@ export default function MarketingLayout({
|
|||||||
<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-[6px] text-gray-700 opacity-[0.25] hover:opacity-100 hover:text-white transition-opacity duration-300"
|
className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
|
||||||
>
|
>
|
||||||
•
|
<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>
|
</Link>
|
||||||
<p>© 2025 QR Master. All rights reserved.</p>
|
<p>© 2025 QR Master. All rights reserved.</p>
|
||||||
<div className="w-12"></div>
|
<div className="w-12"></div>
|
||||||
|
|||||||
@@ -5,19 +5,60 @@ import { useRouter } from 'next/navigation';
|
|||||||
import { Card } from '@/components/ui/Card';
|
import { Card } from '@/components/ui/Card';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { Badge } from '@/components/ui/Badge';
|
import { Badge } from '@/components/ui/Badge';
|
||||||
import { Mail, Users, Send, CheckCircle, AlertCircle, Loader2, Lock, LogOut } from 'lucide-react';
|
import {
|
||||||
|
Mail,
|
||||||
|
Users,
|
||||||
|
QrCode,
|
||||||
|
BarChart3,
|
||||||
|
TrendingUp,
|
||||||
|
Crown,
|
||||||
|
Activity,
|
||||||
|
Loader2,
|
||||||
|
Lock,
|
||||||
|
LogOut,
|
||||||
|
Zap,
|
||||||
|
Send,
|
||||||
|
CheckCircle2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
interface Subscriber {
|
interface AdminStats {
|
||||||
email: string;
|
users: {
|
||||||
createdAt: string;
|
total: number;
|
||||||
|
premium: number;
|
||||||
|
newThisWeek: number;
|
||||||
|
newThisMonth: number;
|
||||||
|
recent: Array<{
|
||||||
|
email: string;
|
||||||
|
name: string | null;
|
||||||
|
plan: string;
|
||||||
|
createdAt: string;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
qrCodes: {
|
||||||
|
total: number;
|
||||||
|
dynamic: number;
|
||||||
|
static: number;
|
||||||
|
active: number;
|
||||||
|
};
|
||||||
|
scans: {
|
||||||
|
total: number;
|
||||||
|
dynamicOnly: number;
|
||||||
|
avgPerDynamicQR: string;
|
||||||
|
};
|
||||||
|
newsletter: {
|
||||||
|
subscribers: number;
|
||||||
|
};
|
||||||
|
topQRCodes: Array<{
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
type: string;
|
||||||
|
scans: number;
|
||||||
|
owner: string;
|
||||||
|
createdAt: string;
|
||||||
|
}>;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface BroadcastInfo {
|
export default function AdminDashboard() {
|
||||||
total: number;
|
|
||||||
recent: Subscriber[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function NewsletterPage() {
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||||
const [isAuthenticating, setIsAuthenticating] = useState(true);
|
const [isAuthenticating, setIsAuthenticating] = useState(true);
|
||||||
@@ -25,14 +66,18 @@ export default function NewsletterPage() {
|
|||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
|
|
||||||
const [info, setInfo] = useState<BroadcastInfo | null>(null);
|
const [stats, setStats] = useState<AdminStats | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [broadcasting, setBroadcasting] = useState(false);
|
|
||||||
const [result, setResult] = useState<{
|
// Newsletter management state
|
||||||
|
const [newsletterData, setNewsletterData] = useState<{
|
||||||
|
total: number;
|
||||||
|
recent: Array<{ email: string; createdAt: string }>;
|
||||||
|
} | null>(null);
|
||||||
|
const [sendingBroadcast, setSendingBroadcast] = useState(false);
|
||||||
|
const [broadcastResult, setBroadcastResult] = useState<{
|
||||||
success: boolean;
|
success: boolean;
|
||||||
message: string;
|
message: string;
|
||||||
sent?: number;
|
|
||||||
failed?: number;
|
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -41,12 +86,14 @@ export default function NewsletterPage() {
|
|||||||
|
|
||||||
const checkAuth = async () => {
|
const checkAuth = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/newsletter/broadcast');
|
const response = await fetch('/api/admin/stats');
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
setIsAuthenticated(true);
|
setIsAuthenticated(true);
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
setInfo(data);
|
setStats(data);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
// Also fetch newsletter data
|
||||||
|
fetchNewsletterData();
|
||||||
} else {
|
} else {
|
||||||
setIsAuthenticated(false);
|
setIsAuthenticated(false);
|
||||||
}
|
}
|
||||||
@@ -57,6 +104,54 @@ export default function NewsletterPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const fetchNewsletterData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/newsletter/broadcast');
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setNewsletterData(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch newsletter data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendBroadcast = async () => {
|
||||||
|
if (!confirm(`Are you sure you want to send the AI Feature Launch email to all ${newsletterData?.total || 0} subscribers?`)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSendingBroadcast(true);
|
||||||
|
setBroadcastResult(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/newsletter/broadcast', {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setBroadcastResult({
|
||||||
|
success: true,
|
||||||
|
message: data.message || `Successfully sent to ${data.sent} subscribers!`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setBroadcastResult({
|
||||||
|
success: false,
|
||||||
|
message: data.error || 'Failed to send broadcast',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setBroadcastResult({
|
||||||
|
success: false,
|
||||||
|
message: 'Network error. Please try again.',
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setSendingBroadcast(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleLogin = async (e: React.FormEvent) => {
|
const handleLogin = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setLoginError('');
|
setLoginError('');
|
||||||
@@ -90,53 +185,6 @@ export default function NewsletterPage() {
|
|||||||
router.push('/');
|
router.push('/');
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchSubscriberInfo = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/newsletter/broadcast');
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
setInfo(data);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch subscriber info:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBroadcast = async () => {
|
|
||||||
if (!confirm(`Are you sure you want to send the AI feature launch email to ${info?.total} subscribers?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setBroadcasting(true);
|
|
||||||
setResult(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/newsletter/broadcast', {
|
|
||||||
method: 'POST',
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
setResult({
|
|
||||||
success: response.ok,
|
|
||||||
message: data.message || data.error,
|
|
||||||
sent: data.sent,
|
|
||||||
failed: data.failed,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
await fetchSubscriberInfo();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
setResult({
|
|
||||||
success: false,
|
|
||||||
message: 'Failed to send broadcast. Please try again.',
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setBroadcasting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Login Screen
|
// Login Screen
|
||||||
if (!isAuthenticated) {
|
if (!isAuthenticated) {
|
||||||
return (
|
return (
|
||||||
@@ -146,9 +194,9 @@ export default function NewsletterPage() {
|
|||||||
<div className="w-16 h-16 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
|
<div className="w-16 h-16 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
<Lock className="w-8 h-8 text-purple-600 dark:text-purple-400" />
|
<Lock className="w-8 h-8 text-purple-600 dark:text-purple-400" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold mb-2">Newsletter Admin</h1>
|
<h1 className="text-2xl font-bold mb-2">Admin Dashboard</h1>
|
||||||
<p className="text-muted-foreground text-sm">
|
<p className="text-muted-foreground text-sm">
|
||||||
Sign in to manage subscribers
|
Sign in to access admin panel
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -159,7 +207,7 @@ export default function NewsletterPage() {
|
|||||||
type="email"
|
type="email"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
placeholder="Email"
|
placeholder="admin@example.com"
|
||||||
required
|
required
|
||||||
className="w-full px-4 py-3 rounded-xl bg-background border border-border focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 outline-none transition-all"
|
className="w-full px-4 py-3 rounded-xl bg-background border border-border focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 outline-none transition-all"
|
||||||
/>
|
/>
|
||||||
@@ -171,7 +219,7 @@ export default function NewsletterPage() {
|
|||||||
type="password"
|
type="password"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
placeholder="Password"
|
placeholder="••••••••"
|
||||||
required
|
required
|
||||||
className="w-full px-4 py-3 rounded-xl bg-background border border-border focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 outline-none transition-all"
|
className="w-full px-4 py-3 rounded-xl bg-background border border-border focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 outline-none transition-all"
|
||||||
/>
|
/>
|
||||||
@@ -219,12 +267,13 @@ export default function NewsletterPage() {
|
|||||||
// Admin Dashboard
|
// Admin Dashboard
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-purple-50/30 to-pink-50/30 dark:from-purple-950/10 dark:to-pink-950/10">
|
<div className="min-h-screen bg-gradient-to-br from-purple-50/30 to-pink-50/30 dark:from-purple-950/10 dark:to-pink-950/10">
|
||||||
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||||
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between mb-8">
|
<div className="flex items-center justify-between mb-8">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold mb-2">Newsletter Management</h1>
|
<h1 className="text-3xl font-bold mb-2">Admin Dashboard</h1>
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Manage AI feature launch notifications
|
Platform overview and statistics
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
@@ -237,130 +286,357 @@ export default function NewsletterPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Card */}
|
{/* Main Stats Grid */}
|
||||||
<Card className="p-6 mb-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
<div className="flex items-center justify-between mb-6">
|
{/* All Time Users */}
|
||||||
<div className="flex items-center gap-3">
|
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
|
<div className="flex items-start justify-between mb-4">
|
||||||
<Users className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
|
||||||
|
<Users className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
|
||||||
<h2 className="text-2xl font-bold">{info?.total || 0}</h2>
|
All Time
|
||||||
<p className="text-sm text-muted-foreground">Total Subscribers</p>
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold mb-1">{stats?.users.total || 0}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Total Users</p>
|
||||||
|
<div className="mt-3 pt-3 border-t space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs text-muted-foreground">This Month</span>
|
||||||
|
<span className="text-sm font-semibold text-green-600 dark:text-green-400">
|
||||||
|
+{stats?.users.newThisMonth || 0}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="flex items-center justify-between">
|
||||||
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
|
<span className="text-xs text-muted-foreground">This Week</span>
|
||||||
Active
|
<span className="text-sm font-semibold text-green-600 dark:text-green-400">
|
||||||
</Badge>
|
+{stats?.users.newThisWeek || 0}
|
||||||
</div>
|
</span>
|
||||||
|
|
||||||
{/* Broadcast Button */}
|
|
||||||
<div className="border-t pt-6">
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="font-semibold mb-2 flex items-center gap-2">
|
|
||||||
<Send className="w-4 h-4" />
|
|
||||||
Broadcast AI Feature Launch
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-muted-foreground mb-4">
|
|
||||||
Send the AI feature launch announcement to all {info?.total} subscribers.
|
|
||||||
This will inform them that the features are now available.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={handleBroadcast}
|
|
||||||
disabled={broadcasting || !info?.total}
|
|
||||||
className="w-full sm:w-auto bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
|
|
||||||
>
|
|
||||||
{broadcasting ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
||||||
Sending Emails...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Mail className="w-4 h-4 mr-2" />
|
|
||||||
Send Launch Notification to All
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Result Message */}
|
|
||||||
{result && (
|
|
||||||
<Card
|
|
||||||
className={`p-4 mb-6 ${
|
|
||||||
result.success
|
|
||||||
? 'bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-900'
|
|
||||||
: 'bg-red-50 dark:bg-red-950/20 border-red-200 dark:border-red-900'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
{result.success ? (
|
|
||||||
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
|
||||||
) : (
|
|
||||||
<AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
||||||
)}
|
|
||||||
<div className="flex-1">
|
|
||||||
<p
|
|
||||||
className={`font-medium ${
|
|
||||||
result.success
|
|
||||||
? 'text-green-900 dark:text-green-100'
|
|
||||||
: 'text-red-900 dark:text-red-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{result.message}
|
|
||||||
</p>
|
|
||||||
{result.sent !== undefined && (
|
|
||||||
<p className="text-sm text-muted-foreground mt-1">
|
|
||||||
Sent: {result.sent} | Failed: {result.failed}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Recent Subscribers */}
|
{/* Dynamic QR Codes */}
|
||||||
<Card className="p-6">
|
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||||
<h3 className="font-semibold mb-4">Recent Subscribers</h3>
|
<div className="flex items-start justify-between mb-4">
|
||||||
{info?.recent && info.recent.length > 0 ? (
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
|
||||||
<div className="space-y-3">
|
<QrCode className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
||||||
{info.recent.map((subscriber, index) => (
|
</div>
|
||||||
<div
|
<Badge className="bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
|
||||||
key={index}
|
Dynamic
|
||||||
className="flex items-center justify-between py-2 border-b border-border last:border-0"
|
</Badge>
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Mail className="w-4 h-4 text-muted-foreground" />
|
|
||||||
<span className="text-sm">{subscriber.email}</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{new Date(subscriber.createdAt).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<h3 className="text-3xl font-bold mb-1">{stats?.qrCodes.dynamic || 0}</h3>
|
||||||
<p className="text-sm text-muted-foreground">No subscribers yet</p>
|
<p className="text-sm text-muted-foreground">Dynamic QR Codes</p>
|
||||||
)}
|
<div className="mt-3 pt-3 border-t flex items-center justify-between">
|
||||||
|
<span className="text-xs text-muted-foreground">Static</span>
|
||||||
|
<span className="text-sm font-semibold">{stats?.qrCodes.static || 0}</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<div className="mt-4 pt-4 border-t">
|
{/* Total Scans */}
|
||||||
<p className="text-xs text-muted-foreground">
|
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||||
💡 Tip: View all subscribers in{' '}
|
<div className="flex items-start justify-between mb-4">
|
||||||
<a
|
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
|
||||||
href="http://localhost:5555"
|
<BarChart3 className="w-6 h-6 text-green-600 dark:text-green-400" />
|
||||||
target="_blank"
|
</div>
|
||||||
rel="noopener noreferrer"
|
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
|
||||||
className="text-primary hover:underline"
|
All Time
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold mb-1">
|
||||||
|
{stats?.scans.dynamicOnly.toLocaleString() || 0}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Dynamic QR Scans</p>
|
||||||
|
<div className="mt-3 pt-3 border-t flex items-center justify-between">
|
||||||
|
<span className="text-xs text-muted-foreground">Avg per QR</span>
|
||||||
|
<span className="text-sm font-semibold">{stats?.scans.avgPerDynamicQR || 0}</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Total QR Codes */}
|
||||||
|
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/20 rounded-lg flex items-center justify-center">
|
||||||
|
<QrCode className="w-6 h-6 text-amber-600 dark:text-amber-400" />
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||||
|
All Time
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold mb-1">{stats?.qrCodes.total || 0}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Total QR Codes</p>
|
||||||
|
<div className="mt-3 pt-3 border-t space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs text-muted-foreground">Dynamic</span>
|
||||||
|
<span className="text-sm font-semibold">{stats?.qrCodes.dynamic || 0}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs text-muted-foreground">Static</span>
|
||||||
|
<span className="text-sm font-semibold">{stats?.qrCodes.static || 0}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secondary Stats Row */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||||
|
{/* Total All Scans */}
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-lg flex items-center justify-center">
|
||||||
|
<Zap className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold">
|
||||||
|
{stats?.scans.total.toLocaleString() || 0}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Total All Scans</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Total QR Codes */}
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-pink-100 dark:bg-pink-900/20 rounded-lg flex items-center justify-center">
|
||||||
|
<QrCode className="w-6 h-6 text-pink-600 dark:text-pink-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold">{stats?.qrCodes.total || 0}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Total QR Codes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Premium Users */}
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/20 rounded-lg flex items-center justify-center">
|
||||||
|
<Crown className="w-6 h-6 text-amber-600 dark:text-amber-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold">{stats?.users.premium || 0}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Premium Users</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Grid */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* Top QR Codes */}
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-10 h-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-lg flex items-center justify-center">
|
||||||
|
<TrendingUp className="w-5 h-5 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">Top QR Codes</h3>
|
||||||
|
<p className="text-xs text-muted-foreground">Most scanned</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{stats?.topQRCodes && stats.topQRCodes.length > 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{stats.topQRCodes.map((qr, index) => (
|
||||||
|
<div
|
||||||
|
key={qr.id}
|
||||||
|
className="flex items-center justify-between py-3 border-b border-border last:border-0"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
|
<span className="text-white text-sm font-bold">
|
||||||
|
#{index + 1}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-sm font-medium truncate">{qr.title}</p>
|
||||||
|
<p className="text-xs text-muted-foreground truncate">
|
||||||
|
{qr.owner}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right flex-shrink-0 ml-4">
|
||||||
|
<p className="text-lg font-bold">{qr.scans.toLocaleString()}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">scans</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">No QR codes yet</p>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Recent Users */}
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
|
||||||
|
<Users className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">Recent Users</h3>
|
||||||
|
<p className="text-xs text-muted-foreground">Latest signups</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{stats?.users.recent && stats.users.recent.length > 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{stats.users.recent.map((user, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex items-center justify-between py-3 border-b border-border last:border-0"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<span className="text-white text-xs font-bold">
|
||||||
|
{(user.name || user.email).charAt(0).toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-sm font-medium truncate">
|
||||||
|
{user.name || user.email}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground truncate">
|
||||||
|
{new Date(user.createdAt).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
className={
|
||||||
|
user.plan === 'FREE'
|
||||||
|
? 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300'
|
||||||
|
: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{user.plan === 'PRO' && <Crown className="w-3 h-3 mr-1" />}
|
||||||
|
{user.plan}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">No users yet</p>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Newsletter Management Section */}
|
||||||
|
<div className="mt-8">
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-10 h-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-lg flex items-center justify-center">
|
||||||
|
<Users className="w-5 h-5 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="font-semibold text-lg">Newsletter Management</h3>
|
||||||
|
<p className="text-xs text-muted-foreground">Manage AI feature launch notifications</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span className="text-2xl font-bold">{newsletterData?.total || 0}</span>
|
||||||
|
<p className="text-xs text-muted-foreground">Total Subscribers</p>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
|
||||||
|
Active
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Broadcast Section */}
|
||||||
|
<div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl mb-6">
|
||||||
|
<div className="flex items-start gap-3 mb-3">
|
||||||
|
<Send className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium">Broadcast AI Feature Launch</h4>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Send the AI feature launch announcement to all {newsletterData?.total || 0} subscribers.
|
||||||
|
This will inform them that the features are now available.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Resend Free Tier Warning */}
|
||||||
|
{(newsletterData?.total || 0) > 100 && (
|
||||||
|
<div className="p-3 rounded-lg mb-3 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 flex items-start gap-2">
|
||||||
|
<Activity className="w-5 h-5 flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<strong>Warning: Resend Free Limit</strong>
|
||||||
|
<p>You have more than 100 subscribers. The Resend Free Tier only allows 100 emails per day. Sending this broadcast might fail for some users or block your account.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{broadcastResult && (
|
||||||
|
<div className={`p-3 rounded-lg mb-3 flex items-center gap-2 ${broadcastResult.success
|
||||||
|
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||||
|
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
|
||||||
|
}`}>
|
||||||
|
{broadcastResult.success && <CheckCircle2 className="w-4 h-4" />}
|
||||||
|
<span className="text-sm">{broadcastResult.message}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleSendBroadcast}
|
||||||
|
disabled={sendingBroadcast || (newsletterData?.total || 0) === 0 || (newsletterData?.total || 0) > 100}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
|
||||||
>
|
>
|
||||||
Prisma Studio
|
{sendingBroadcast ? (
|
||||||
</a>
|
<>
|
||||||
{' '}(NewsletterSubscription table)
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
</p>
|
Sending...
|
||||||
</div>
|
</>
|
||||||
</Card>
|
) : (
|
||||||
|
<>
|
||||||
|
<Mail className="w-4 h-4 mr-2" />
|
||||||
|
Send Launch Notification to All
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Subscribers */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium mb-3">Recent Subscribers</h4>
|
||||||
|
{newsletterData?.recent && newsletterData.recent.length > 0 ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{newsletterData.recent.map((subscriber, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex items-center justify-between py-2 border-b border-border last:border-0"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<span className="text-sm">{subscriber.email}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{new Date(subscriber.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">No subscribers yet</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tip */}
|
||||||
|
<div className="mt-4 pt-4 border-t">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
💡 Tip: View all subscribers in{' '}
|
||||||
|
<a
|
||||||
|
href="http://localhost:5555"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-purple-600 dark:text-purple-400 hover:underline"
|
||||||
|
>
|
||||||
|
Prisma Studio
|
||||||
|
</a>
|
||||||
|
{' '}(NewsletterSubscription table)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
216
src/app/api/admin/stats/route.ts
Normal file
216
src/app/api/admin/stats/route.ts
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { cookies } from 'next/headers';
|
||||||
|
import { db } from '@/lib/db';
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
// Check newsletter-admin cookie authentication
|
||||||
|
const cookieStore = cookies();
|
||||||
|
const adminCookie = cookieStore.get('newsletter-admin');
|
||||||
|
|
||||||
|
if (!adminCookie || adminCookie.value !== 'authenticated') {
|
||||||
|
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 7 days ago date
|
||||||
|
const sevenDaysAgo = new Date();
|
||||||
|
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||||
|
|
||||||
|
// Get start of current month
|
||||||
|
const startOfMonth = new Date();
|
||||||
|
startOfMonth.setDate(1);
|
||||||
|
startOfMonth.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// Fetch all statistics in parallel
|
||||||
|
const [
|
||||||
|
totalUsers,
|
||||||
|
premiumUsers,
|
||||||
|
newUsersThisWeek,
|
||||||
|
newUsersThisMonth,
|
||||||
|
totalQRCodes,
|
||||||
|
dynamicQRCodes,
|
||||||
|
staticQRCodes,
|
||||||
|
totalScans,
|
||||||
|
dynamicQRCodesWithScans,
|
||||||
|
activeQRCodes,
|
||||||
|
newsletterSubscribers,
|
||||||
|
] = await Promise.all([
|
||||||
|
// Total users
|
||||||
|
db.user.count(),
|
||||||
|
|
||||||
|
// Premium users (PRO or BUSINESS)
|
||||||
|
db.user.count({
|
||||||
|
where: {
|
||||||
|
plan: {
|
||||||
|
in: ['PRO', 'BUSINESS'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
// New users this week
|
||||||
|
db.user.count({
|
||||||
|
where: {
|
||||||
|
createdAt: {
|
||||||
|
gte: sevenDaysAgo,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
// New users this month
|
||||||
|
db.user.count({
|
||||||
|
where: {
|
||||||
|
createdAt: {
|
||||||
|
gte: startOfMonth,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Total QR codes
|
||||||
|
db.qRCode.count(),
|
||||||
|
|
||||||
|
// Dynamic QR codes
|
||||||
|
db.qRCode.count({
|
||||||
|
where: {
|
||||||
|
type: 'DYNAMIC',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Static QR codes
|
||||||
|
db.qRCode.count({
|
||||||
|
where: {
|
||||||
|
type: 'STATIC',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Total scans
|
||||||
|
db.qRScan.count(),
|
||||||
|
|
||||||
|
// Get all dynamic QR codes with their scan counts
|
||||||
|
db.qRCode.findMany({
|
||||||
|
where: {
|
||||||
|
type: 'DYNAMIC',
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
_count: {
|
||||||
|
select: {
|
||||||
|
scans: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Active QR codes (scanned in last 30 days)
|
||||||
|
db.qRCode.findMany({
|
||||||
|
where: {
|
||||||
|
scans: {
|
||||||
|
some: {
|
||||||
|
ts: {
|
||||||
|
gte: thirtyDaysAgo,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
distinct: ['id'],
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Newsletter subscribers
|
||||||
|
db.newsletterSubscription.count({
|
||||||
|
where: {
|
||||||
|
status: 'subscribed',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Calculate dynamic QR scans
|
||||||
|
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';
|
||||||
|
|
||||||
|
// Get top 5 most scanned QR codes
|
||||||
|
const topQRCodes = await db.qRCode.findMany({
|
||||||
|
take: 5,
|
||||||
|
include: {
|
||||||
|
_count: {
|
||||||
|
select: {
|
||||||
|
scans: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
email: true,
|
||||||
|
name: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
orderBy: {
|
||||||
|
scans: {
|
||||||
|
_count: 'desc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get recent users
|
||||||
|
const recentUsers = await db.user.findMany({
|
||||||
|
take: 5,
|
||||||
|
orderBy: {
|
||||||
|
createdAt: 'desc',
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
email: true,
|
||||||
|
name: true,
|
||||||
|
plan: true,
|
||||||
|
createdAt: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
users: {
|
||||||
|
total: totalUsers,
|
||||||
|
premium: premiumUsers,
|
||||||
|
newThisWeek: newUsersThisWeek,
|
||||||
|
newThisMonth: newUsersThisMonth,
|
||||||
|
recent: recentUsers,
|
||||||
|
},
|
||||||
|
qrCodes: {
|
||||||
|
total: totalQRCodes,
|
||||||
|
dynamic: dynamicQRCodes,
|
||||||
|
static: staticQRCodes,
|
||||||
|
active: activeQRCodes.length,
|
||||||
|
},
|
||||||
|
scans: {
|
||||||
|
total: totalScans,
|
||||||
|
dynamicOnly: dynamicQRScans,
|
||||||
|
avgPerDynamicQR: avgScansPerDynamicQR,
|
||||||
|
},
|
||||||
|
newsletter: {
|
||||||
|
subscribers: newsletterSubscribers,
|
||||||
|
},
|
||||||
|
topQRCodes: topQRCodes.map((qr) => ({
|
||||||
|
id: qr.id,
|
||||||
|
title: qr.title,
|
||||||
|
type: qr.type,
|
||||||
|
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(
|
||||||
|
{ error: 'Failed to fetch statistics' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -190,13 +190,6 @@ export async function GET(request: NextRequest) {
|
|||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, number>);
|
}, {} 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)
|
// QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
|
||||||
const qrPerformance = qrCodes
|
const qrPerformance = qrCodes
|
||||||
.filter(qr => qr.type === 'DYNAMIC')
|
.filter(qr => qr.type === 'DYNAMIC')
|
||||||
@@ -211,18 +204,6 @@ export async function GET(request: NextRequest) {
|
|||||||
// Calculate trend
|
// Calculate trend
|
||||||
const trendData = calculateTrend(currentTotal, previousTotal);
|
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 {
|
return {
|
||||||
id: qr.id,
|
id: qr.id,
|
||||||
title: qr.title,
|
title: qr.title,
|
||||||
@@ -234,8 +215,6 @@ export async function GET(request: NextRequest) {
|
|||||||
: 0,
|
: 0,
|
||||||
trend: trendData.trend,
|
trend: trendData.trend,
|
||||||
trendPercentage: trendData.percentage,
|
trendPercentage: trendData.percentage,
|
||||||
sparkline: sparklineData,
|
|
||||||
lastScanned: lastScanned?.toISOString() || null,
|
|
||||||
...(trendData.isNew && { isNew: true }),
|
...(trendData.isNew && { isNew: true }),
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -74,8 +74,10 @@ export async function POST(request: NextRequest) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Create response
|
// Set cookie for auto-login after signup
|
||||||
const response = NextResponse.json({
|
cookies().set('userId', user.id, getAuthCookieOptions());
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
success: true,
|
success: true,
|
||||||
user: {
|
user: {
|
||||||
id: user.id,
|
id: user.id,
|
||||||
@@ -84,11 +86,6 @@ export async function POST(request: NextRequest) {
|
|||||||
plan: 'FREE',
|
plan: 'FREE',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set cookie for auto-login after signup
|
|
||||||
response.cookies.set('userId', user.id, getAuthCookieOptions());
|
|
||||||
|
|
||||||
return response;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error instanceof z.ZodError) {
|
if (error instanceof z.ZodError) {
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
|
|||||||
@@ -1,144 +0,0 @@
|
|||||||
import { NextRequest, NextResponse } from 'next/server';
|
|
||||||
import { cookies } from 'next/headers';
|
|
||||||
import { db } from '@/lib/db';
|
|
||||||
|
|
||||||
// Reserved subdomains that cannot be used
|
|
||||||
const RESERVED_SUBDOMAINS = [
|
|
||||||
'www', 'app', 'api', 'admin', 'mail', 'email',
|
|
||||||
'ftp', 'smtp', 'pop', 'imap', 'dns', 'ns1', 'ns2',
|
|
||||||
'blog', 'shop', 'store', 'help', 'support', 'dashboard',
|
|
||||||
'login', 'signup', 'auth', 'cdn', 'static', 'assets',
|
|
||||||
'dev', 'staging', 'test', 'demo', 'beta', 'alpha'
|
|
||||||
];
|
|
||||||
|
|
||||||
// Validate subdomain format
|
|
||||||
function isValidSubdomain(subdomain: string): { valid: boolean; error?: string } {
|
|
||||||
if (!subdomain) {
|
|
||||||
return { valid: false, error: 'Subdomain is required' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Must be lowercase
|
|
||||||
if (subdomain !== subdomain.toLowerCase()) {
|
|
||||||
return { valid: false, error: 'Subdomain must be lowercase' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Length check
|
|
||||||
if (subdomain.length < 3 || subdomain.length > 30) {
|
|
||||||
return { valid: false, error: 'Subdomain must be 3-30 characters' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Alphanumeric and hyphens only, no leading/trailing hyphens
|
|
||||||
if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(subdomain)) {
|
|
||||||
return { valid: false, error: 'Only lowercase letters, numbers, and hyphens allowed' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// No consecutive hyphens
|
|
||||||
if (/--/.test(subdomain)) {
|
|
||||||
return { valid: false, error: 'No consecutive hyphens allowed' };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check reserved
|
|
||||||
if (RESERVED_SUBDOMAINS.includes(subdomain)) {
|
|
||||||
return { valid: false, error: 'This subdomain is reserved' };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { valid: true };
|
|
||||||
}
|
|
||||||
|
|
||||||
// GET /api/user/subdomain - Get current subdomain
|
|
||||||
export async function GET() {
|
|
||||||
try {
|
|
||||||
const userId = cookies().get('userId')?.value;
|
|
||||||
if (!userId) {
|
|
||||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await db.user.findUnique({
|
|
||||||
where: { id: userId },
|
|
||||||
select: { subdomain: true },
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return NextResponse.json({ error: 'User not found' }, { status: 404 });
|
|
||||||
}
|
|
||||||
|
|
||||||
return NextResponse.json({ subdomain: user.subdomain });
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching subdomain:', error);
|
|
||||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/user/subdomain - Set subdomain
|
|
||||||
export async function POST(request: NextRequest) {
|
|
||||||
try {
|
|
||||||
const userId = cookies().get('userId')?.value;
|
|
||||||
if (!userId) {
|
|
||||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const body = await request.json();
|
|
||||||
const subdomain = body.subdomain?.trim().toLowerCase();
|
|
||||||
|
|
||||||
// Validate
|
|
||||||
const validation = isValidSubdomain(subdomain);
|
|
||||||
if (!validation.valid) {
|
|
||||||
return NextResponse.json({ error: validation.error }, { status: 400 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if already taken by another user
|
|
||||||
const existing = await db.user.findFirst({
|
|
||||||
where: {
|
|
||||||
subdomain,
|
|
||||||
NOT: { id: userId },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (existing) {
|
|
||||||
return NextResponse.json({ error: 'This subdomain is already taken' }, { status: 409 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update user
|
|
||||||
try {
|
|
||||||
const updatedUser = await db.user.update({
|
|
||||||
where: { id: userId },
|
|
||||||
data: { subdomain },
|
|
||||||
select: { subdomain: true } // Only select needed fields
|
|
||||||
});
|
|
||||||
|
|
||||||
return NextResponse.json({
|
|
||||||
success: true,
|
|
||||||
subdomain: updatedUser.subdomain,
|
|
||||||
url: `https://${updatedUser.subdomain}.qrmaster.net`
|
|
||||||
});
|
|
||||||
} catch (error: any) {
|
|
||||||
if (error.code === 'P2025') {
|
|
||||||
return NextResponse.json({ error: 'User not found' }, { status: 404 });
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error setting subdomain:', error);
|
|
||||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// DELETE /api/user/subdomain - Remove subdomain
|
|
||||||
export async function DELETE() {
|
|
||||||
try {
|
|
||||||
const userId = cookies().get('userId')?.value;
|
|
||||||
if (!userId) {
|
|
||||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
|
||||||
}
|
|
||||||
|
|
||||||
await db.user.update({
|
|
||||||
where: { id: userId },
|
|
||||||
data: { subdomain: null },
|
|
||||||
});
|
|
||||||
|
|
||||||
return NextResponse.json({ success: true });
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error removing subdomain:', error);
|
|
||||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -14,15 +14,8 @@ export async function GET(
|
|||||||
where: { slug },
|
where: { slug },
|
||||||
select: {
|
select: {
|
||||||
id: true,
|
id: true,
|
||||||
title: true,
|
|
||||||
content: true,
|
content: true,
|
||||||
contentType: true,
|
contentType: true,
|
||||||
user: {
|
|
||||||
select: {
|
|
||||||
name: true,
|
|
||||||
subdomain: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -88,94 +81,8 @@ export async function GET(
|
|||||||
destination = `${destination}${separator}${preservedParams.toString()}`;
|
destination = `${destination}${separator}${preservedParams.toString()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Construct metadata
|
// Return 307 redirect (temporary redirect that preserves method)
|
||||||
const siteName = qrCode.user?.subdomain
|
return NextResponse.redirect(destination, { status: 307 });
|
||||||
? `${qrCode.user.subdomain.charAt(0).toUpperCase() + qrCode.user.subdomain.slice(1)}`
|
|
||||||
: 'QR Master';
|
|
||||||
|
|
||||||
const title = qrCode.title || siteName;
|
|
||||||
const description = `Redirecting to content...`;
|
|
||||||
|
|
||||||
// Determine if we should show a preview (bots) or redirect immediately
|
|
||||||
const userAgent = request.headers.get('user-agent') || '';
|
|
||||||
const isBot = /facebookexternalhit|twitterbot|whatsapp|discordbot|telegrambot|slackbot|linkedinbot/i.test(userAgent);
|
|
||||||
|
|
||||||
// HTML response with metadata and redirect
|
|
||||||
const html = `<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>${title}</title>
|
|
||||||
|
|
||||||
<!-- Open Graph Metadata -->
|
|
||||||
<meta property="og:title" content="${title}" />
|
|
||||||
<meta property="og:site_name" content="${siteName}" />
|
|
||||||
<meta property="og:description" content="${description}" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:url" content="${destination}" />
|
|
||||||
|
|
||||||
<!-- Twitter Card -->
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:title" content="${title}" />
|
|
||||||
<meta name="twitter:description" content="${description}" />
|
|
||||||
|
|
||||||
<!-- No-cache headers to ensure fresh Redirects -->
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
|
|
||||||
<!-- Fallback Redirect -->
|
|
||||||
<meta http-equiv="refresh" content="0;url=${JSON.stringify(destination).slice(1, -1)}" />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
background-color: #f9fafb;
|
|
||||||
color: #4b5563;
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.spinner {
|
|
||||||
border: 3px solid #f3f3f3;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top: 3px solid #3b82f6;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
-webkit-animation: spin 1s linear infinite; /* Safari */
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
margin: 0 auto 1rem;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="loader">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p>Redirecting to ${siteName}...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Immediate redirect
|
|
||||||
window.location.replace("${destination}");
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>`;
|
|
||||||
|
|
||||||
return new NextResponse(html, {
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'text/html',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('QR redirect error:', error);
|
console.error('QR redirect error:', error);
|
||||||
return new NextResponse('Internal server error', { status: 500 });
|
return new NextResponse('Internal server error', { status: 500 });
|
||||||
|
|||||||
@@ -1,192 +0,0 @@
|
|||||||
'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);
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
'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;
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
'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;
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export { default as GeoMap } from './GeoMap';
|
|
||||||
export { default as Sparkline } from './Sparkline';
|
|
||||||
export { default as StatCard } from './StatCard';
|
|
||||||
@@ -21,28 +21,20 @@ interface QRCodeCardProps {
|
|||||||
};
|
};
|
||||||
onEdit: (id: string) => void;
|
onEdit: (id: string) => void;
|
||||||
onDelete: (id: string) => void;
|
onDelete: (id: string) => void;
|
||||||
userSubdomain?: string | null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const QRCodeCard: React.FC<QRCodeCardProps> = ({
|
export const QRCodeCard: React.FC<QRCodeCardProps> = ({
|
||||||
qr,
|
qr,
|
||||||
onEdit,
|
onEdit,
|
||||||
onDelete,
|
onDelete,
|
||||||
userSubdomain,
|
|
||||||
}) => {
|
}) => {
|
||||||
// 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');
|
||||||
|
|
||||||
// White label: use subdomain URL if available
|
|
||||||
const mainDomain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || 'qrmaster.net';
|
|
||||||
const brandedBaseUrl = userSubdomain
|
|
||||||
? `https://${userSubdomain}.${mainDomain}`
|
|
||||||
: baseUrl;
|
|
||||||
|
|
||||||
// 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
|
||||||
@@ -73,17 +65,15 @@ END:VCARD`;
|
|||||||
qrUrl = qr.content.qrContent;
|
qrUrl = qr.content.qrContent;
|
||||||
} else {
|
} else {
|
||||||
// Last resort fallback
|
// Last resort fallback
|
||||||
qrUrl = `${brandedBaseUrl}/r/${qr.slug}`;
|
qrUrl = `${baseUrl}/r/${qr.slug}`;
|
||||||
}
|
}
|
||||||
console.log(`STATIC QR [${qr.title}]: ${qrUrl}`);
|
console.log(`STATIC QR [${qr.title}]: ${qrUrl}`);
|
||||||
} else {
|
} else {
|
||||||
// DYNAMIC QR codes use branded URL for white label
|
// DYNAMIC QR codes always use redirect for tracking
|
||||||
qrUrl = `${brandedBaseUrl}/r/${qr.slug}`;
|
qrUrl = `${baseUrl}/r/${qr.slug}`;
|
||||||
|
console.log(`DYNAMIC QR [${qr.title}]: ${qrUrl}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display URL (same as qrUrl for consistency)
|
|
||||||
const displayUrl = qrUrl;
|
|
||||||
|
|
||||||
const downloadQR = (format: 'png' | 'svg') => {
|
const downloadQR = (format: 'png' | 'svg') => {
|
||||||
const svg = document.querySelector(`#qr-${qr.id} svg`);
|
const svg = document.querySelector(`#qr-${qr.id} svg`);
|
||||||
if (!svg) return;
|
if (!svg) return;
|
||||||
@@ -181,7 +171,7 @@ END:VCARD`;
|
|||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Dropdown
|
<Dropdown
|
||||||
align="right"
|
align="right"
|
||||||
trigger={
|
trigger={
|
||||||
@@ -206,13 +196,11 @@ END:VCARD`;
|
|||||||
<div id={`qr-${qr.id}`} className="flex items-center justify-center bg-gray-50 rounded-lg p-4 mb-3">
|
<div id={`qr-${qr.id}`} className="flex items-center justify-center bg-gray-50 rounded-lg p-4 mb-3">
|
||||||
<div className={qr.style?.cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
|
<div className={qr.style?.cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
|
||||||
<QRCodeSVG
|
<QRCodeSVG
|
||||||
key={qrUrl}
|
|
||||||
value={qrUrl}
|
value={qrUrl}
|
||||||
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={qr.style?.imageSettings ? 'H' : 'M'}
|
level="M"
|
||||||
imageSettings={qr.style?.imageSettings}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -228,11 +216,6 @@ END:VCARD`;
|
|||||||
<span className="text-gray-900">{qr.scans || 0}</span>
|
<span className="text-gray-900">{qr.scans || 0}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{qr.type === 'DYNAMIC' && (
|
|
||||||
<div className="text-xs text-gray-400 break-all bg-gray-50 p-1 rounded border border-gray-100 mt-2">
|
|
||||||
{qrUrl}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-gray-500">Created:</span>
|
<span className="text-gray-500">Created:</span>
|
||||||
<span className="text-gray-900">{formatDate(qr.createdAt)}</span>
|
<span className="text-gray-900">{formatDate(qr.createdAt)}</span>
|
||||||
@@ -240,7 +223,7 @@ END:VCARD`;
|
|||||||
{qr.type === 'DYNAMIC' && (
|
{qr.type === 'DYNAMIC' && (
|
||||||
<div className="pt-2 border-t">
|
<div className="pt-2 border-t">
|
||||||
<p className="text-xs text-gray-500">
|
<p className="text-xs text-gray-500">
|
||||||
📊 Dynamic QR: Tracks scans via {displayUrl}
|
📊 Dynamic QR: Tracks scans via {baseUrl}/r/{qr.slug}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,66 +1,59 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
interface FooterProps {
|
export function Footer() {
|
||||||
variant?: 'marketing' | 'dashboard';
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Footer({ variant = 'marketing' }: FooterProps) {
|
|
||||||
const isDashboard = variant === 'dashboard';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<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`}>
|
<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 ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
|
<span className="text-xl font-bold">QR Master</span>
|
||||||
</Link>
|
</Link>
|
||||||
<p className={isDashboard ? 'text-gray-500' : '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 ${isDashboard ? 'text-gray-900' : ''}`}>Product</h3>
|
<h3 className="font-semibold mb-4">Product</h3>
|
||||||
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
<ul className="space-y-2 text-gray-400">
|
||||||
<li><Link href="/#features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Features</Link></li>
|
<li><Link href="/#features" className="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="/#pricing" className="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="/#faq" className="hover:text-white">FAQ</Link></li>
|
||||||
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : '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 ${isDashboard ? 'text-gray-900' : ''}`}>Resources</h3>
|
<h3 className="font-semibold mb-4">Resources</h3>
|
||||||
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
<ul className="space-y-2 text-gray-400">
|
||||||
<li><Link href="/pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Full Pricing</Link></li>
|
<li><Link href="/pricing" className="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="/faq" className="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="/blog" className="hover:text-white">Blog</Link></li>
|
||||||
<li><Link href="/signup" className={isDashboard ? 'hover:text-primary-600' : '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 ${isDashboard ? 'text-gray-900' : ''}`}>Legal</h3>
|
<h3 className="font-semibold mb-4">Legal</h3>
|
||||||
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
<ul className="space-y-2 text-gray-400">
|
||||||
<li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : '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 mt-8 pt-8 flex items-center justify-between ${isDashboard ? 'border-gray-200 text-gray-500' : 'border-gray-800 text-gray-400'}`}>
|
<div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
|
||||||
{!isDashboard ? (
|
<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.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" />
|
||||||
</Link>
|
</svg>
|
||||||
) : (
|
Admin
|
||||||
<div></div>
|
</Link>
|
||||||
)}
|
|
||||||
<p>© 2025 QR Master. All rights reserved.</p>
|
<p>© 2025 QR Master. All rights reserved.</p>
|
||||||
<div className="w-12"></div>
|
<div className="w-12"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,28 +24,6 @@ export function middleware(req: NextRequest) {
|
|||||||
return NextResponse.next();
|
return NextResponse.next();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle White Label Subdomains
|
|
||||||
// Check if this is a subdomain request (e.g., kunde.qrmaster.de)
|
|
||||||
const host = req.headers.get('host') || '';
|
|
||||||
const isLocalhost = host.includes('localhost') || host.includes('127.0.0.1');
|
|
||||||
const mainDomain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || 'qrmaster.net';
|
|
||||||
|
|
||||||
// Extract subdomain if present (e.g., "kunde" from "kunde.qrmaster.de")
|
|
||||||
let subdomain: string | null = null;
|
|
||||||
if (!isLocalhost && host.endsWith(mainDomain) && host !== mainDomain && host !== `www.${mainDomain}`) {
|
|
||||||
const parts = host.replace(`.${mainDomain}`, '').split('.');
|
|
||||||
if (parts.length === 1 && parts[0]) {
|
|
||||||
subdomain = parts[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// For subdomain requests to /r/*, pass subdomain info via header
|
|
||||||
if (subdomain && path.startsWith('/r/')) {
|
|
||||||
const response = NextResponse.next();
|
|
||||||
response.headers.set('x-subdomain', subdomain);
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow redirect routes (QR code redirects)
|
// Allow redirect routes (QR code redirects)
|
||||||
if (path.startsWith('/r/')) {
|
if (path.startsWith('/r/')) {
|
||||||
return NextResponse.next();
|
return NextResponse.next();
|
||||||
|
|||||||
58
src/types/react-simple-maps.d.ts
vendored
58
src/types/react-simple-maps.d.ts
vendored
@@ -1,58 +0,0 @@
|
|||||||
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
BIN
tsc_errors.txt
Binary file not shown.
Reference in New Issue
Block a user