90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function StatsDashboard() {
|
|
const [authenticated, setAuthenticated] = useState(false);
|
|
const [password, setPassword] = useState("");
|
|
const [stats, setStats] = useState<{
|
|
views: number;
|
|
projectsViewed: Record<string, number>;
|
|
} | null>(null);
|
|
const [error, setError] = useState("");
|
|
|
|
const handleLogin = () => {
|
|
// Simple password check. Replace with secure authentication.
|
|
if (password === "admin123") {
|
|
setAuthenticated(true);
|
|
fetchStats();
|
|
} else {
|
|
setError("Incorrect password.");
|
|
}
|
|
};
|
|
|
|
const fetchStats = async () => {
|
|
try {
|
|
const res = await fetch("/api/stats");
|
|
const data = await res.json();
|
|
setStats(data);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError("Failed to fetch stats.");
|
|
}
|
|
};
|
|
|
|
if (!authenticated) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
|
|
<div className="p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
|
<h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">
|
|
Admin Login
|
|
</h2>
|
|
{error && <p className="text-red-500">{error}</p>}
|
|
<input
|
|
type="password"
|
|
placeholder="Enter Password"
|
|
className="w-full p-2 border rounded mb-4 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
<button
|
|
onClick={handleLogin}
|
|
className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-10 bg-gray-100 dark:bg-gray-800 min-h-screen">
|
|
<h1 className="text-3xl font-bold text-gray-800 dark:text-white">
|
|
Statistics Dashboard
|
|
</h1>
|
|
{stats ? (
|
|
<div className="mt-6">
|
|
<p className="text-lg text-gray-700 dark:text-gray-300">
|
|
Total Views: {stats.views}
|
|
</p>
|
|
<h2 className="text-2xl font-semibold mt-4 text-gray-800 dark:text-white">
|
|
Project Views:
|
|
</h2>
|
|
<ul className="list-disc pl-5 mt-2 text-gray-700 dark:text-gray-300">
|
|
{Object.entries(stats.projectsViewed).map(([projectId, count]) => (
|
|
<li key={projectId}>
|
|
Project ID {projectId}: {count} view{count !== 1 ? "s" : ""}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
) : (
|
|
<p className="mt-4 text-gray-700 dark:text-gray-300">
|
|
Loading statistics...
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|