Add Admin System
- Admin login at /admin/login - Admin dashboard at /admin - Username: admin, Password: admin123 - Separate from family email login Family Login: /login (email-based) Admin Login: /admin/login (username/password) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
09dee5d987
commit
d5b07078ae
3 changed files with 257 additions and 0 deletions
88
src/app/admin/login/page.tsx
Normal file
88
src/app/admin/login/page.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
export default function AdminLogin() {
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleLogin = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/admin/auth", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ username, password }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
// Store admin session
|
||||||
|
localStorage.setItem("admin_token", data.token);
|
||||||
|
localStorage.setItem("admin_user", JSON.stringify(data.admin));
|
||||||
|
router.push("/admin");
|
||||||
|
} else {
|
||||||
|
setError(data.error || "Login failed");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError("Login failed");
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-900">
|
||||||
|
<div className="w-full max-w-md p-8 bg-gray-800 rounded-2xl">
|
||||||
|
<h1 className="text-2xl font-bold text-white text-center mb-2">Tia Admin</h1>
|
||||||
|
<p className="text-gray-400 text-center mb-8">Platform Management</p>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 p-3 bg-red-500/20 text-red-400 rounded-lg text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleLogin} className="space-y-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Username"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
className="w-full p-4 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="w-full p-4 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full p-4 bg-rose-500 text-white rounded-xl font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? "Logging in..." : "Login"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<a href="/login" className="text-gray-400 text-sm hover:text-white">
|
||||||
|
← Back to Family Login
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
125
src/app/admin/page.tsx
Normal file
125
src/app/admin/page.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
interface Stats {
|
||||||
|
totalFamilies: number;
|
||||||
|
totalUsers: number;
|
||||||
|
totalChildren: number;
|
||||||
|
freeFamilies: number;
|
||||||
|
proFamilies: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminDashboard() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [stats, setStats] = useState<Stats>({
|
||||||
|
totalFamilies: 0,
|
||||||
|
totalUsers: 0,
|
||||||
|
totalChildren: 0,
|
||||||
|
freeFamilies: 0,
|
||||||
|
proFamilies: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check auth
|
||||||
|
const token = localStorage.getItem("admin_token");
|
||||||
|
if (!token) {
|
||||||
|
router.push("/admin/login");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchStats();
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
|
const fetchStats = async () => {
|
||||||
|
try {
|
||||||
|
// Get stats from database
|
||||||
|
const familiesRes = await fetch("/api/admin/stats?family=all", {
|
||||||
|
headers: { Authorization: `Bearer ${localStorage.getItem("admin_token")}` },
|
||||||
|
});
|
||||||
|
// For now, show mock data
|
||||||
|
setStats({
|
||||||
|
totalFamilies: 1,
|
||||||
|
totalUsers: 2,
|
||||||
|
totalChildren: 1,
|
||||||
|
freeFamilies: 1,
|
||||||
|
proFamilies: 0,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch stats:", err);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem("admin_token");
|
||||||
|
localStorage.removeItem("admin_user");
|
||||||
|
router.push("/admin/login");
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-900">
|
||||||
|
<div className="text-white">Loading...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900 text-white">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 flex justify-between items-center bg-gray-800">
|
||||||
|
<h1 className="text-xl font-bold">Tia Admin Panel</h1>
|
||||||
|
<button onClick={handleLogout} className="text-gray-400 hover:text-white">
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="p-6">
|
||||||
|
<h2 className="text-lg font-semibold mb-4">Platform Overview</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="bg-gray-800 p-6 rounded-xl">
|
||||||
|
<div className="text-3xl font-bold text-rose-400">{stats.totalFamilies}</div>
|
||||||
|
<div className="text-gray-400 text-sm">Total Families</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800 p-6 rounded-xl">
|
||||||
|
<div className="text-3xl font-bold text-rose-400">{stats.totalUsers}</div>
|
||||||
|
<div className="text-gray-400 text-sm">Total Users</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800 p-6 rounded-xl">
|
||||||
|
<div className="text-3xl font-bold text-rose-400">{stats.totalChildren}</div>
|
||||||
|
<div className="text-gray-400 text-sm">Total Children</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800 p-6 rounded-xl">
|
||||||
|
<div className="text-3xl font-bold text-rose-400">{stats.proFamilies}</div>
|
||||||
|
<div className="text-gray-400 text-sm">Pro Families</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<h2 className="text-lg font-semibold mt-8 mb-4">Quick Actions</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<a href="/admin/families" className="bg-gray-800 p-4 rounded-xl hover:bg-gray-700">
|
||||||
|
<div className="text-xl mb-2">👨👩👧</div>
|
||||||
|
<div>Manage Families</div>
|
||||||
|
</a>
|
||||||
|
<a href="/admin/users" className="bg-gray-800 p-4 rounded-xl hover:bg-gray-700">
|
||||||
|
<div className="text-xl mb-2">👥</div>
|
||||||
|
<div>Manage Users</div>
|
||||||
|
</a>
|
||||||
|
<a href="/admin/support" className="bg-gray-800 p-4 rounded-xl hover:bg-gray-700">
|
||||||
|
<div className="text-xl mb-2">🎫</div>
|
||||||
|
<div>Support Tickets</div>
|
||||||
|
</a>
|
||||||
|
<a href="/admin/settings" className="bg-gray-800 p-4 rounded-xl hover:bg-gray-700">
|
||||||
|
<div className="text-xl mb-2">⚙️</div>
|
||||||
|
<div>Settings</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
src/app/api/admin/auth/route.ts
Normal file
44
src/app/api/admin/auth/route.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { sql } from "@/db";
|
||||||
|
|
||||||
|
// Simple admin auth - in production use proper JWT
|
||||||
|
const ADMIN_USER = "admin";
|
||||||
|
const ADMIN_PASS = "admin123";
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
try {
|
||||||
|
const body = await request.json();
|
||||||
|
const { username, password } = body;
|
||||||
|
|
||||||
|
// Simple check (in production use bcrypt)
|
||||||
|
if (username === ADMIN_USER && password === ADMIN_PASS) {
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
admin: { username, role: "super_admin" },
|
||||||
|
token: "admin-session-token"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json({ error: "Invalid credentials" }, { status: 401 });
|
||||||
|
} catch (error) {
|
||||||
|
return NextResponse.json({ error: String(error) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// GET admin info (protected)
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const authHeader = request.headers.get("authorization");
|
||||||
|
|
||||||
|
if (!authHeader || !authHeader.startsWith("Bearer ")) {
|
||||||
|
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check token
|
||||||
|
if (authHeader !== "Bearer admin-session-token") {
|
||||||
|
return NextResponse.json({ error: "Invalid token" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
admin: { username: "admin", role: "super_admin" }
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue