add home page
This commit is contained in:
Ryahn
parent
575c5cb472
commit
4d26d024d9
35
app.js
35
app.js
@ -8,6 +8,8 @@ const swaggerJsdoc = require('swagger-jsdoc');
|
|||||||
const swaggerUi = require('swagger-ui-express');
|
const swaggerUi = require('swagger-ui-express');
|
||||||
const config = require('./src/config/main');
|
const config = require('./src/config/main');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const cors = require('cors');
|
||||||
|
|
||||||
|
|
||||||
const swaggerOptions = {
|
const swaggerOptions = {
|
||||||
definition: {
|
definition: {
|
||||||
@ -41,6 +43,7 @@ Model.knex(knex);
|
|||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
app.use(express.json());
|
app.use(express.json());
|
||||||
|
app.use(cors());
|
||||||
|
|
||||||
// Routes
|
// Routes
|
||||||
app.use('/auth', require('./src/routes/auth'));
|
app.use('/auth', require('./src/routes/auth'));
|
||||||
@ -48,8 +51,9 @@ app.use('/admin', require('./src/routes/admin'));
|
|||||||
app.use('/messages', require('./src/routes/messages'));
|
app.use('/messages', require('./src/routes/messages'));
|
||||||
app.use('/email', require('./src/routes/email'));
|
app.use('/email', require('./src/routes/email'));
|
||||||
app.use('/test', require('./src/routes/test'));
|
app.use('/test', require('./src/routes/test'));
|
||||||
app.use('/', require('./src/routes/index'));
|
// app.use('/', require('./src/routes/index'));
|
||||||
app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
|
app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
|
||||||
|
app.use('/stats', require('./src/routes/stats'));
|
||||||
|
|
||||||
app.get('/favicon.svg', (req, res) => {
|
app.get('/favicon.svg', (req, res) => {
|
||||||
res.sendFile(path.join(__dirname, './images/favicon.svg'));
|
res.sendFile(path.join(__dirname, './images/favicon.svg'));
|
||||||
@ -73,6 +77,35 @@ cron.schedule('0 0 * * *', async () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
app.get('/api/stats/total', (req, res) => {
|
||||||
|
// Replace this with your actual database query
|
||||||
|
res.json({
|
||||||
|
emailsCreated: 152847,
|
||||||
|
messagesReceived: 892365
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get('/api/stats/timeseries', (req, res) => {
|
||||||
|
// Replace this with your actual database query
|
||||||
|
res.json([
|
||||||
|
{ name: 'Mon', emails: 1240, messages: 5430 },
|
||||||
|
{ name: 'Tue', emails: 1580, messages: 6210 },
|
||||||
|
{ name: 'Wed', emails: 1890, messages: 7840 },
|
||||||
|
{ name: 'Thu', emails: 2090, messages: 8120 },
|
||||||
|
{ name: 'Fri', emails: 1870, messages: 6980 },
|
||||||
|
{ name: 'Sat', emails: 1450, messages: 5640 },
|
||||||
|
{ name: 'Sun', emails: 1320, messages: 4980 }
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.use(express.static(path.join(__dirname, 'client/build')));
|
||||||
|
|
||||||
|
|
||||||
|
app.get('*', (req, res) => {
|
||||||
|
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
|
||||||
|
});
|
||||||
|
|
||||||
app.listen(config.site.port, () => {
|
app.listen(config.site.port, () => {
|
||||||
console.log(`API server running on port ${config.site.port}`);
|
console.log(`API server running on port ${config.site.port}`);
|
||||||
});
|
});
|
||||||
13
client/build/asset-manifest.json
Normal file
13
client/build/asset-manifest.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"files": {
|
||||||
|
"main.css": "/static/css/main.f6ab033f.css",
|
||||||
|
"main.js": "/static/js/main.4a7c450d.js",
|
||||||
|
"index.html": "/index.html",
|
||||||
|
"main.f6ab033f.css.map": "/static/css/main.f6ab033f.css.map",
|
||||||
|
"main.4a7c450d.js.map": "/static/js/main.4a7c450d.js.map"
|
||||||
|
},
|
||||||
|
"entrypoints": [
|
||||||
|
"static/css/main.f6ab033f.css",
|
||||||
|
"static/js/main.4a7c450d.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
1
client/build/index.html
Normal file
1
client/build/index.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="2 Week Mail - Temporary Email Service"/><title>2 Week Mail</title><script defer="defer" src="/static/js/main.4a7c450d.js"></script><link href="/static/css/main.f6ab033f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||||
3
client/build/robots.txt
Normal file
3
client/build/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
4
client/build/static/css/main.f6ab033f.css
Normal file
4
client/build/static/css/main.f6ab033f.css
Normal file
File diff suppressed because one or more lines are too long
1
client/build/static/css/main.f6ab033f.css.map
Normal file
1
client/build/static/css/main.f6ab033f.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"file":"static/css/main.f6ab033f.css","mappings":"AAAA,wCAAc,CAAd,uBAAc,CAAd,kBAAc,CAAd,kBAAc,CAAd,aAAc,CAAd,aAAc,CAAd,aAAc,CAAd,cAAc,CAAd,cAAc,CAAd,YAAc,CAAd,YAAc,CAAd,iBAAc,CAAd,qCAAc,CAAd,6BAAc,CAAd,4BAAc,CAAd,2BAAc,CAAd,cAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,iBAAc,CAAd,0BAAc,CAAd,2BAAc,CAAd,yBAAc,CAAd,iCAAc,CAAd,0BAAc,CAAd,qBAAc,CAAd,6BAAc,CAAd,WAAc,CAAd,iBAAc,CAAd,eAAc,CAAd,gBAAc,CAAd,iBAAc,CAAd,aAAc,CAAd,eAAc,CAAd,YAAc,CAAd,kBAAc,CAAd,oBAAc,CAAd,0BAAc,CAAd,wBAAc,CAAd,yBAAc,CAAd,0BAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,wBAAc,CAAd,qBAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,oBAAc,CAAd,oBAAc,CAAd,kCAAc,CAAd,uBAAc,CAAd,kBAAc,CAAd,kBAAc,CAAd,aAAc,CAAd,aAAc,CAAd,aAAc,CAAd,cAAc,CAAd,cAAc,CAAd,YAAc,CAAd,YAAc,CAAd,iBAAc,CAAd,qCAAc,CAAd,6BAAc,CAAd,4BAAc,CAAd,2BAAc,CAAd,cAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,iBAAc,CAAd,0BAAc,CAAd,2BAAc,CAAd,yBAAc,CAAd,iCAAc,CAAd,0BAAc,CAAd,qBAAc,CAAd,6BAAc,CAAd,WAAc,CAAd,iBAAc,CAAd,eAAc,CAAd,gBAAc,CAAd,iBAAc,CAAd,aAAc,CAAd,eAAc,CAAd,YAAc,CAAd,kBAAc,CAAd,oBAAc,CAAd,0BAAc,CAAd,wBAAc,CAAd,yBAAc,CAAd,0BAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,wBAAc,CAAd,qBAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,oBAAc,CAAd,oBAAc,CAAd;;CAAc,CAAd,uCAAc,CAAd,qBAAc,CAAd,8BAAc,CAAd,wCAAc,CAAd,4BAAc,CAAd,uCAAc,CAAd,gHAAc,CAAd,8BAAc,CAAd,eAAc,CAAd,UAAc,CAAd,wBAAc,CAAd,QAAc,CAAd,uBAAc,CAAd,aAAc,CAAd,QAAc,CAAd,4DAAc,CAAd,gCAAc,CAAd,mCAAc,CAAd,mBAAc,CAAd,eAAc,CAAd,uBAAc,CAAd,2BAAc,CAAd,8CAAc,CAAd,mGAAc,CAAd,aAAc,CAAd,8BAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,aAAc,CAAd,iBAAc,CAAd,sBAAc,CAAd,iBAAc,CAAd,aAAc,CAAd,8BAAc,CAAd,oBAAc,CAAd,aAAc,CAAd,mEAAc,CAAd,aAAc,CAAd,mBAAc,CAAd,cAAc,CAAd,+BAAc,CAAd,mBAAc,CAAd,sBAAc,CAAd,mBAAc,CAAd,QAAc,CAAd,SAAc,CAAd,iCAAc,CAAd,gHAAc,CAAd,wBAAc,CAAd,qBAAc,CAAd,4BAAc,CAAd,gCAAc,CAAd,+BAAc,CAAd,mEAAc,CAAd,0CAAc,CAAd,mBAAc,CAAd,mDAAc,CAAd,sDAAc,CAAd,YAAc,CAAd,yBAAc,CAAd,2DAAc,CAAd,iBAAc,CAAd,yBAAc,CAAd,0BAAc,CAAd,QAAc,CAAd,SAAc,CAAd,gBAAc,CAAd,wBAAc,CAAd,sDAAc,CAAd,SAAc,CAAd,mCAAc,CAAd,wBAAc,CAAd,4DAAc,CAAd,qBAAc,CAAd,qBAAc,CAAd,cAAc,CAAd,uDAAc,CAEd,yBAAmB,CAAnB,iBAAmB,CAAnB,wBAAmB,CAAnB,wBAAmB,CAAnB,kBAAmB,CAAnB,kBAAmB,CAAnB,gBAAmB,CAAnB,kBAAmB,CAAnB,kBAAmB,CAAnB,gBAAmB,CAAnB,8BAAmB,CAAnB,eAAmB,CAAnB,iBAAmB,CAAnB,eAAmB,CAAnB,0BAAmB,CAAnB,0CAAmB,EAAnB,+CAAmB,CAAnB,8BAAmB,CAAnB,0DAAmB,CAAnB,mCAAmB,CAAnB,gCAAmB,CAAnB,sCAAmB,CAAnB,8CAAmB,CAAnB,iBAAmB,CAAnB,+DAAmB,CAAnB,0GAAmB,CAAnB,+DAAmB,CAAnB,wGAAmB,CAAnB,+BAAmB,CAAnB,iCAAmB,CAAnB,8BAAmB,CAAnB,wBAAmB,CAAnB,wDAAmB,CAAnB,6BAAmB,CAAnB,wBAAmB,CAAnB,wDAAmB,CAAnB,8BAAmB,CAAnB,wBAAmB,CAAnB,sDAAmB,CAAnB,8BAAmB,CAAnB,wBAAmB,CAAnB,wDAAmB,CAAnB,6BAAmB,CAAnB,wBAAmB,CAAnB,wDAAmB,CAAnB,4BAAmB,CAAnB,wBAAmB,CAAnB,wDAAmB,CAAnB,wCAAmB,CAAnB,2BAAmB,CAAnB,qBAAmB,CAAnB,wDAAmB,CAAnB,mBAAmB,CAAnB,iBAAmB,CAAnB,mBAAmB,CAAnB,iBAAmB,CAAnB,uBAAmB,CAAnB,kBAAmB,CAAnB,4CAAmB,CAAnB,mBAAmB,CAAnB,wBAAmB,CAAnB,0BAAmB,CAAnB,gBAAmB,CAAnB,4BAAmB,CAAnB,mBAAmB,CAAnB,2BAAmB,CAAnB,kBAAmB,CAAnB,2BAAmB,CAAnB,mBAAmB,CAAnB,0BAAmB,CAAnB,mBAAmB,CAAnB,0BAAmB,CAAnB,8BAAmB,CAAnB,kCAAmB,CAAnB,aAAmB,CAAnB,6CAAmB,CAAnB,kCAAmB,CAAnB,aAAmB,CAAnB,6CAAmB,CAAnB,kCAAmB,CAAnB,aAAmB,CAAnB,4CAAmB,CAAnB,kCAAmB,CAAnB,aAAmB,CAAnB,4CAAmB,CAAnB,kCAAmB,CAAnB,aAAmB,CAAnB,4CAAmB,CAAnB,mCAAmB,CAAnB,aAAmB,CAAnB,6CAAmB,CAAnB,iCAAmB,CAAnB,aAAmB,CAAnB,6CAAmB,CAAnB,+BAAmB,CAAnB,UAAmB,CAAnB,+CAAmB,CAAnB,4CAAmB,CAAnB,sDAAmB,CAAnB,+CAAmB,CAAnB,kGAAmB,CAAnB,6IAAmB,CAAnB,yFAAmB,CAAnB,uHAAmB,CAAnB,kDAAmB,CAAnB,0EAAmB,CAAnB,kDAAmB,CAFnB,2CAGA,CAHA,wBAGA,CAHA,sDAGA,CAHA,2CAGA,CAHA,wBAGA,CAHA,wDAGA,CAHA,+CAGA,CAHA,aAGA,CAHA,4CAGA,CAHA,uFAGA,CAHA,iGAGA,CAHA,+CAGA,CAHA,kGAGA,CAHA,uFAGA","sources":["index.css"],"sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"],"names":[],"sourceRoot":""}
|
||||||
3
client/build/static/js/main.4a7c450d.js
Normal file
3
client/build/static/js/main.4a7c450d.js
Normal file
File diff suppressed because one or more lines are too long
57
client/build/static/js/main.4a7c450d.js.LICENSE.txt
Normal file
57
client/build/static/js/main.4a7c450d.js.LICENSE.txt
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
/*! decimal.js-light v2.5.1 https://github.com/MikeMcl/decimal.js-light/LICENCE */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @license React
|
||||||
|
* react-dom.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @license React
|
||||||
|
* react-jsx-runtime.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @license React
|
||||||
|
* react.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @license React
|
||||||
|
* scheduler.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @license lucide-react v0.298.0 - ISC
|
||||||
|
*
|
||||||
|
* This source code is licensed under the ISC license.
|
||||||
|
* See the LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** @license React v16.13.1
|
||||||
|
* react-is.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
1
client/build/static/js/main.4a7c450d.js.map
Normal file
1
client/build/static/js/main.4a7c450d.js.map
Normal file
File diff suppressed because one or more lines are too long
18378
client/package-lock.json
generated
Normal file
18378
client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
client/package.json
Normal file
51
client/package.json
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"proxy": "http://localhost:5000",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/node": "^16.18.70",
|
||||||
|
"@types/react": "^18.2.48",
|
||||||
|
"@types/react-dom": "^18.2.18",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"lucide-react": "^0.298.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"recharts": "^2.10.3",
|
||||||
|
"tailwind-merge": "^2.1.0",
|
||||||
|
"typescript": "^4.9.5",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss7-compat": "^2.2.17",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"postcss": "^8.4.32",
|
||||||
|
"tailwindcss": "^3.4.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
6
client/postcss.config.js
Normal file
6
client/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'@tailwindcss/postcss7-compat': {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
17
client/public/index.html
Normal file
17
client/public/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="2 Week Mail - Temporary Email Service"
|
||||||
|
/>
|
||||||
|
<title>2 Week Mail</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3
client/public/robots.txt
Normal file
3
client/public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
284
client/src/App.tsx
Normal file
284
client/src/App.tsx
Normal file
@ -0,0 +1,284 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from './components/Card';
|
||||||
|
import { Button } from './components/Button';
|
||||||
|
import { Alert, AlertDescription } from './components/Alert';
|
||||||
|
import {
|
||||||
|
LineChart,
|
||||||
|
Line,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer
|
||||||
|
} from 'recharts';
|
||||||
|
import { Mail, BarChart2, ArrowRight, Loader2 } from 'lucide-react';
|
||||||
|
|
||||||
|
// API endpoints - replace with your actual endpoints
|
||||||
|
const API_ENDPOINTS = {
|
||||||
|
totalStats: '/stats/total',
|
||||||
|
timeSeriesStats: '/stats/timeseries'
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ErrorMessageProps {
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StatsData {
|
||||||
|
total: {
|
||||||
|
emailsCreated: number;
|
||||||
|
messagesReceived: number;
|
||||||
|
};
|
||||||
|
timeSeriesData: Array<{
|
||||||
|
name: string;
|
||||||
|
emails: number;
|
||||||
|
messages: number;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface APIResponse {
|
||||||
|
emailsCreated: number;
|
||||||
|
messagesReceived: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TimeSeriesDataPoint {
|
||||||
|
name: string;
|
||||||
|
emails: number;
|
||||||
|
messages: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState('home');
|
||||||
|
const [stats, setStats] = useState({
|
||||||
|
total: { emailsCreated: 0, messagesReceived: 0 },
|
||||||
|
timeSeriesData: []
|
||||||
|
});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchStats = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
// Fetch total stats
|
||||||
|
const totalResponse = await fetch(API_ENDPOINTS.totalStats);
|
||||||
|
if (!totalResponse.ok) throw new Error('Failed to fetch total stats');
|
||||||
|
const totalData = await totalResponse.json();
|
||||||
|
|
||||||
|
// Fetch time series stats
|
||||||
|
const timeSeriesResponse = await fetch(API_ENDPOINTS.timeSeriesStats);
|
||||||
|
if (!timeSeriesResponse.ok) throw new Error('Failed to fetch time series stats');
|
||||||
|
const timeSeriesData = await timeSeriesResponse.json();
|
||||||
|
|
||||||
|
setStats({
|
||||||
|
total: totalData,
|
||||||
|
timeSeriesData: timeSeriesData
|
||||||
|
});
|
||||||
|
} catch (err: unknown) {
|
||||||
|
if (err instanceof Error) {
|
||||||
|
setError(err.message);
|
||||||
|
} else {
|
||||||
|
setError('An unknown error occurred');
|
||||||
|
}
|
||||||
|
console.error('Error fetching stats:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fetch stats on component mount and every 5 minutes
|
||||||
|
useEffect(() => {
|
||||||
|
fetchStats();
|
||||||
|
const interval = setInterval(fetchStats, 5 * 60 * 1000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const LoadingSpinner = () => (
|
||||||
|
<div className="flex items-center justify-center p-8">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-blue-600" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ErrorAlert: React.FC<ErrorMessageProps> = ({ message }) => (
|
||||||
|
<Alert variant="destructive" className="mb-4">
|
||||||
|
<AlertDescription>
|
||||||
|
{message}. Please try refreshing the page.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
|
||||||
|
const HomePage = () => (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-8">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900">2 Week Mail</h1>
|
||||||
|
<div className="space-x-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => setCurrentPage('home')}
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => setCurrentPage('stats')}
|
||||||
|
>
|
||||||
|
Stats
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="mb-8">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<div className="bg-blue-100 p-3 rounded-lg">
|
||||||
|
<Mail className="h-6 w-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">Temporary Email Service</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Access our robust temporary email service through our API. Perfect for testing, automation,
|
||||||
|
and temporary use cases. All emails automatically expire after 2 weeks.
|
||||||
|
</p>
|
||||||
|
<div className="bg-gray-100 p-4 rounded-lg mb-4">
|
||||||
|
<p className="text-gray-700">
|
||||||
|
⚠️ Registration is currently closed. New accounts can be created upon request.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<Card className="hover:shadow-lg transition-shadow cursor-pointer"
|
||||||
|
onClick={() => window.location.href = '/docs'}>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center space-x-2">
|
||||||
|
<span>API Documentation</span>
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Comprehensive API documentation with examples and integration guides.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card
|
||||||
|
className="hover:shadow-lg transition-shadow cursor-pointer"
|
||||||
|
onClick={() => setCurrentPage('stats')}
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center space-x-2">
|
||||||
|
<span>Usage Statistics</span>
|
||||||
|
<BarChart2 className="h-4 w-4" />
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
View real-time statistics about email creation and message reception.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const StatsPage = () => (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-8">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900">Statistics</h1>
|
||||||
|
<div className="space-x-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => setCurrentPage('home')}
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => setCurrentPage('stats')}
|
||||||
|
>
|
||||||
|
Stats
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <ErrorAlert message={error} />}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<LoadingSpinner />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Total Emails Created</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-3xl font-bold text-blue-600">
|
||||||
|
{stats.total.emailsCreated.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Total Messages Received</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-3xl font-bold text-green-600">
|
||||||
|
{stats.total.messagesReceived.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="mb-8">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Weekly Activity</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="h-64">
|
||||||
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
|
<LineChart data={stats.timeSeriesData} width={500} height={300}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" />
|
||||||
|
<XAxis dataKey="name" />
|
||||||
|
<YAxis />
|
||||||
|
<Tooltip />
|
||||||
|
<Line
|
||||||
|
type="monotone"
|
||||||
|
dataKey="emails"
|
||||||
|
stroke="#2563eb"
|
||||||
|
name="Emails Created"
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
type="monotone"
|
||||||
|
dataKey="messages"
|
||||||
|
stroke="#16a34a"
|
||||||
|
name="Messages Received"
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return currentPage === 'home' ? <HomePage /> : <StatsPage />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
35
client/src/components/Alert.tsx
Normal file
35
client/src/components/Alert.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
// src/components/Alert.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface AlertProps {
|
||||||
|
variant?: 'default' | 'destructive';
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Alert: React.FC<AlertProps> = ({
|
||||||
|
variant = 'default',
|
||||||
|
className = '',
|
||||||
|
children
|
||||||
|
}) => {
|
||||||
|
const variantStyles = {
|
||||||
|
default: 'bg-blue-50 text-blue-800',
|
||||||
|
destructive: 'bg-red-50 text-red-800'
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`p-4 rounded-lg ${variantStyles[variant]} ${className}`}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AlertDescription: React.FC<React.HTMLProps<HTMLParagraphElement>> = ({
|
||||||
|
className = '',
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}) => (
|
||||||
|
<p className={`text-sm ${className}`} {...props}>
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
28
client/src/components/Button.tsx
Normal file
28
client/src/components/Button.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// src/components/Button.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
variant?: 'default' | 'ghost';
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Button: React.FC<ButtonProps> = ({
|
||||||
|
variant = 'default',
|
||||||
|
className = '',
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const baseStyles = 'px-4 py-2 rounded-md transition-colors';
|
||||||
|
const variantStyles = {
|
||||||
|
default: 'bg-blue-600 text-white hover:bg-blue-700',
|
||||||
|
ghost: 'bg-transparent hover:bg-gray-100'
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={`${baseStyles} ${variantStyles[variant]} ${className}`}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
26
client/src/components/Card.tsx
Normal file
26
client/src/components/Card.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// src/components/Card.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const Card: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className = '', children, ...props }) => (
|
||||||
|
<div className={`bg-white rounded-lg shadow-sm ${className}`} {...props}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const CardHeader: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className = '', children, ...props }) => (
|
||||||
|
<div className={`p-6 ${className}`} {...props}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const CardTitle: React.FC<React.HTMLProps<HTMLHeadingElement>> = ({ className = '', children, ...props }) => (
|
||||||
|
<h3 className={`text-lg font-semibold ${className}`} {...props}>
|
||||||
|
{children}
|
||||||
|
</h3>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const CardContent: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className = '', children, ...props }) => (
|
||||||
|
<div className={`p-6 pt-0 ${className}`} {...props}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
13
client/src/components/ErrorAlert.tsx
Normal file
13
client/src/components/ErrorAlert.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// src/components/ErrorAlert.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ErrorAlertProps {
|
||||||
|
message: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ErrorAlert: React.FC<ErrorAlertProps> = ({ message }) => (
|
||||||
|
<div className="bg-red-50 text-red-800 p-4 rounded-lg mb-4">
|
||||||
|
<p className="text-sm">{message}. Please try refreshing the page.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
3
client/src/index.css
Normal file
3
client/src/index.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
13
client/src/index.tsx
Normal file
13
client/src/index.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(
|
||||||
|
document.getElementById('root') as HTMLElement
|
||||||
|
);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
10
client/tailwind.config.js
Normal file
10
client/tailwind.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,jsx,ts,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
26
client/tsconfig.json
Normal file
26
client/tsconfig.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
||||||
14
package-lock.json
generated
14
package-lock.json
generated
@ -10,6 +10,7 @@
|
|||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bcrypt": "^5.1.1",
|
"bcrypt": "^5.1.1",
|
||||||
|
"cors": "^2.8.5",
|
||||||
"express": "^4.21.2",
|
"express": "^4.21.2",
|
||||||
"favicon": "^0.0.2",
|
"favicon": "^0.0.2",
|
||||||
"haraka": "^0.0.33",
|
"haraka": "^0.0.33",
|
||||||
@ -531,6 +532,19 @@
|
|||||||
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
|
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cors": {
|
||||||
|
"version": "2.8.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
|
||||||
|
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"object-assign": "^4",
|
||||||
|
"vary": "^1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dashdash": {
|
"node_modules/dashdash": {
|
||||||
"version": "1.14.1",
|
"version": "1.14.1",
|
||||||
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
|
||||||
|
|||||||
@ -13,6 +13,7 @@
|
|||||||
"description": "",
|
"description": "",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bcrypt": "^5.1.1",
|
"bcrypt": "^5.1.1",
|
||||||
|
"cors": "^2.8.5",
|
||||||
"express": "^4.21.2",
|
"express": "^4.21.2",
|
||||||
"favicon": "^0.0.2",
|
"favicon": "^0.0.2",
|
||||||
"haraka": "^0.0.33",
|
"haraka": "^0.0.33",
|
||||||
|
|||||||
@ -154,6 +154,7 @@ router.post('/generate', async (req, res) => {
|
|||||||
const emailName = req.body.name || generateUniqueName();
|
const emailName = req.body.name || generateUniqueName();
|
||||||
const randomDomainName = `${emailName}@${randomDomain.domain.name}`;
|
const randomDomainName = `${emailName}@${randomDomain.domain.name}`;
|
||||||
|
|
||||||
|
try {
|
||||||
const tempEmail = await TempEmail.query().insert({
|
const tempEmail = await TempEmail.query().insert({
|
||||||
email: randomDomainName,
|
email: randomDomainName,
|
||||||
user_id: req.user.id,
|
user_id: req.user.id,
|
||||||
@ -162,8 +163,16 @@ router.post('/generate', async (req, res) => {
|
|||||||
|
|
||||||
await DailyStats.incrementEmailCount();
|
await DailyStats.incrementEmailCount();
|
||||||
|
|
||||||
|
|
||||||
res.json({ status: 'success', email: { id: tempEmail.id, address: randomDomainName } });
|
res.json({ status: 'success', email: { id: tempEmail.id, address: randomDomainName } });
|
||||||
|
} catch (dbError) {
|
||||||
|
if (dbError.code === 'ER_DUP_ENTRY') {
|
||||||
|
return res.status(409).json({
|
||||||
|
status: 'error',
|
||||||
|
message: 'This email address is already in use'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return res.status(500).json({ status: 'error', message: dbError.message });
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error creating temp email:', error);
|
console.error('Error creating temp email:', error);
|
||||||
res.status(500).json({ status: 'error', message: error.message });
|
res.status(500).json({ status: 'error', message: error.message });
|
||||||
|
|||||||
15
src/routes/stats.js
Normal file
15
src/routes/stats.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const router = express.Router();
|
||||||
|
const DailyStats = require('../db/models/DailyStats');
|
||||||
|
|
||||||
|
router.get('/total', async (req, res) => {
|
||||||
|
const totalStats = await DailyStats.getTotalStats();
|
||||||
|
res.json(totalStats);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.get('/timeseries', async (req, res) => {
|
||||||
|
const weeklyStats = await DailyStats.getWeeklyStats();
|
||||||
|
res.json(weeklyStats);
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
Loading…
x
Reference in New Issue
Block a user