update

app/stats/page.tsx

@@ -0,0 +1,89 @@
+"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>
+  );
+}