620 lines
22 KiB
TypeScript
620 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import Swal from "sweetalert2";
|
||
|
||
interface User {
|
||
id: string;
|
||
name: string | null;
|
||
email: string;
|
||
role: string;
|
||
emailVerified: boolean;
|
||
createdAt: string;
|
||
}
|
||
|
||
interface AdminApiKeyRow {
|
||
id: string;
|
||
name: string;
|
||
keyPreview: string;
|
||
expiresAt: string | null;
|
||
daysRemaining: number | null;
|
||
remainingLabel: string;
|
||
lastUsedAt: string | null;
|
||
isActive: boolean;
|
||
createdAt: string;
|
||
}
|
||
|
||
interface Session {
|
||
user: {
|
||
id: string;
|
||
email: string;
|
||
name?: string;
|
||
role?: string;
|
||
};
|
||
}
|
||
|
||
export default function AdminPanel() {
|
||
const router = useRouter();
|
||
const [users, setUsers] = useState<User[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [currentUserRole, setCurrentUserRole] = useState<string>("");
|
||
const [keysModalUser, setKeysModalUser] = useState<User | null>(null);
|
||
const [userKeys, setUserKeys] = useState<AdminApiKeyRow[]>([]);
|
||
const [keysLoading, setKeysLoading] = useState(false);
|
||
const [keysPatching, setKeysPatching] = useState<string | null>(null);
|
||
const [expiryDraft, setExpiryDraft] = useState<Record<string, string>>({});
|
||
|
||
useEffect(() => {
|
||
checkAuth();
|
||
}, []);
|
||
|
||
const checkAuth = async () => {
|
||
try {
|
||
const res = await fetch("/api/auth/get-session", {
|
||
credentials: "include",
|
||
});
|
||
|
||
if (!res.ok) {
|
||
router.push("/login");
|
||
return;
|
||
}
|
||
|
||
const session: Session = await res.json();
|
||
|
||
if (!session.user || session.user.role !== "admin") {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Erişim Engellendi",
|
||
text: "Bu sayfaya erişim yetkiniz yok. Sadece adminler görebilir.",
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
router.push("/");
|
||
return;
|
||
}
|
||
|
||
setCurrentUserRole(session.user.role || "user");
|
||
await fetchUsers();
|
||
} catch (err) {
|
||
router.push("/login");
|
||
}
|
||
};
|
||
|
||
const fetchUsers = async () => {
|
||
setLoading(true);
|
||
|
||
try {
|
||
const res = await fetch("/api/admin/users", {
|
||
credentials: "include",
|
||
});
|
||
|
||
if (!res.ok) {
|
||
if (res.status === 401) {
|
||
router.push("/login");
|
||
return;
|
||
}
|
||
if (res.status === 403) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Yetki Hatası",
|
||
text: "Bu sayfaya erişim yetkiniz yok.",
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
return;
|
||
}
|
||
throw new Error("Kullanıcılar yüklenemedi");
|
||
}
|
||
|
||
const data = await res.json();
|
||
setUsers(data.data.users);
|
||
} catch (err: any) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Hata",
|
||
text: err.message,
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const changeRole = async (userId: string, newRole: string, currentRole: string) => {
|
||
const result = await Swal.fire({
|
||
title: "Rol Değiştir",
|
||
text: `Bu kullanıcının rolünü "${currentRole}" → "${newRole}" olarak değiştirmek istediğinizden emin misiniz?`,
|
||
icon: "question",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#3b82f6",
|
||
cancelButtonColor: "#6b7280",
|
||
confirmButtonText: "Evet, değiştir",
|
||
cancelButtonText: "İptal",
|
||
});
|
||
|
||
if (!result.isConfirmed) {
|
||
await fetchUsers();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(`/api/admin/users/${userId}/role`, {
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ role: newRole }),
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json();
|
||
throw new Error(data.error || "Rol güncellenemedi");
|
||
}
|
||
|
||
await Swal.fire({
|
||
icon: "success",
|
||
title: "Başarılı!",
|
||
text: "Kullanıcı rolü güncellendi",
|
||
timer: 2000,
|
||
showConfirmButton: false,
|
||
});
|
||
|
||
await fetchUsers();
|
||
} catch (err: any) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Hata",
|
||
text: err.message,
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
await fetchUsers();
|
||
}
|
||
};
|
||
|
||
const toggleEmailVerification = async (userId: string, currentStatus: boolean, email: string) => {
|
||
const newStatus = !currentStatus;
|
||
const result = await Swal.fire({
|
||
title: "Email Doğrulama",
|
||
text: `${email} için email doğrulamasını ${newStatus ? "aktif" : "pasif"} yapmak istiyor musunuz?`,
|
||
icon: "question",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#3b82f6",
|
||
cancelButtonColor: "#6b7280",
|
||
confirmButtonText: "Evet, değiştir",
|
||
cancelButtonText: "İptal",
|
||
});
|
||
|
||
if (!result.isConfirmed) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(`/api/admin/users/${userId}/verification`, {
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ emailVerified: newStatus }),
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json();
|
||
throw new Error(data.error || "Doğrulama güncellenemedi");
|
||
}
|
||
|
||
await Swal.fire({
|
||
icon: "success",
|
||
title: "Başarılı!",
|
||
text: `Email doğrulama ${newStatus ? "aktif edildi" : "pasif edildi"}`,
|
||
timer: 2000,
|
||
showConfirmButton: false,
|
||
});
|
||
|
||
await fetchUsers();
|
||
} catch (err: any) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Hata",
|
||
text: err.message,
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
}
|
||
};
|
||
|
||
const fetchUserKeysList = async (userId: string) => {
|
||
setKeysLoading(true);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/users/${userId}/api-keys`, {
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json();
|
||
if (!res.ok) {
|
||
throw new Error(data.error || "Anahtarlar yüklenemedi");
|
||
}
|
||
setUserKeys(data.data?.keys || []);
|
||
} finally {
|
||
setKeysLoading(false);
|
||
}
|
||
};
|
||
|
||
const openApiKeysModal = async (u: User) => {
|
||
setKeysModalUser(u);
|
||
setUserKeys([]);
|
||
setExpiryDraft({});
|
||
try {
|
||
await fetchUserKeysList(u.id);
|
||
} catch (err: any) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Hata",
|
||
text: err.message,
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
setKeysModalUser(null);
|
||
}
|
||
};
|
||
|
||
const patchKeyExpiry = async (userId: string, keyId: string, draft: string) => {
|
||
let expiresInDays: number | null;
|
||
const t = draft.trim();
|
||
if (t === "") {
|
||
expiresInDays = null;
|
||
} else {
|
||
const n = parseInt(t, 10);
|
||
if (!Number.isFinite(n) || n < 0) {
|
||
await Swal.fire({
|
||
icon: "warning",
|
||
title: "Geçersiz",
|
||
text: "Gün sayısı boş (süresiz) veya 0 veya pozitif tam sayı olmalı.",
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
return;
|
||
}
|
||
expiresInDays = n === 0 ? null : n;
|
||
}
|
||
setKeysPatching(keyId);
|
||
try {
|
||
const res = await fetch(
|
||
`/api/v1/admin/users/${userId}/api-keys/${keyId}`,
|
||
{
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ expiresInDays }),
|
||
}
|
||
);
|
||
const data = await res.json();
|
||
if (!res.ok) {
|
||
throw new Error(data.error || "Güncellenemedi");
|
||
}
|
||
await Swal.fire({
|
||
icon: "success",
|
||
title: "Güncellendi",
|
||
text: "API anahtarı süresi kaydedildi.",
|
||
timer: 1800,
|
||
showConfirmButton: false,
|
||
});
|
||
setExpiryDraft((prev) => {
|
||
const next = { ...prev };
|
||
delete next[keyId];
|
||
return next;
|
||
});
|
||
await fetchUserKeysList(userId);
|
||
} catch (err: any) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Hata",
|
||
text: err.message,
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
} finally {
|
||
setKeysPatching(null);
|
||
}
|
||
};
|
||
|
||
const deleteUser = async (userId: string, email: string) => {
|
||
const result = await Swal.fire({
|
||
title: "Kullanıcıyı Sil",
|
||
html: `<b>${email}</b> kullanıcısını silmek istediğinizden emin misiniz?<br><br>
|
||
<span style="color: #ef4444; font-weight: 600;">⚠️ Bu işlem geri alınamaz!</span><br>
|
||
<small>Kullanıcının tüm resimleri ve verileri silinecek.</small>`,
|
||
icon: "warning",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#ef4444",
|
||
cancelButtonColor: "#6b7280",
|
||
confirmButtonText: "Evet, sil!",
|
||
cancelButtonText: "İptal",
|
||
});
|
||
|
||
if (!result.isConfirmed) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(`/api/admin/users/${userId}`, {
|
||
method: "DELETE",
|
||
credentials: "include",
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json();
|
||
throw new Error(data.error || "Kullanıcı silinemedi");
|
||
}
|
||
|
||
await Swal.fire({
|
||
icon: "success",
|
||
title: "Silindi!",
|
||
text: "Kullanıcı başarıyla silindi",
|
||
timer: 2000,
|
||
showConfirmButton: false,
|
||
});
|
||
|
||
await fetchUsers();
|
||
} catch (err: any) {
|
||
await Swal.fire({
|
||
icon: "error",
|
||
title: "Hata",
|
||
text: err.message,
|
||
confirmButtonColor: "#3b82f6",
|
||
});
|
||
}
|
||
};
|
||
|
||
const getRoleBadgeColor = (role: string) => {
|
||
switch (role) {
|
||
case "admin":
|
||
return "bg-red-100 text-red-800 border-red-200";
|
||
case "moderator":
|
||
return "bg-blue-100 text-blue-800 border-blue-200";
|
||
default:
|
||
return "bg-gray-100 text-gray-800 border-gray-200";
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
||
<p className="mt-4 text-gray-600">Yükleniyor...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-8">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="mb-8">
|
||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Admin Panel</h1>
|
||
<p className="text-gray-600">Kullanıcı yönetimi ve rol atama</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
|
||
<tr>
|
||
<th className="px-6 py-4 text-left text-sm font-semibold">Kullanıcı</th>
|
||
<th className="px-6 py-4 text-left text-sm font-semibold">Email</th>
|
||
<th className="px-6 py-4 text-left text-sm font-semibold">Rol</th>
|
||
<th className="px-6 py-4 text-left text-sm font-semibold">Doğrulama</th>
|
||
<th className="px-6 py-4 text-left text-sm font-semibold">Kayıt Tarihi</th>
|
||
<th className="px-6 py-4 text-left text-sm font-semibold">İşlemler</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-200">
|
||
{users.map((user) => (
|
||
<tr key={user.id} className="hover:bg-gray-50 transition-colors">
|
||
<td className="px-6 py-4">
|
||
<div className="font-medium text-gray-900">
|
||
{user.name || "İsimsiz"}
|
||
</div>
|
||
<div className="text-xs text-gray-500">{user.id.substring(0, 8)}</div>
|
||
</td>
|
||
<td className="px-6 py-4 text-gray-700">{user.email}</td>
|
||
<td className="px-6 py-4">
|
||
<select
|
||
value={user.role}
|
||
onChange={(e) => changeRole(user.id, e.target.value, user.role)}
|
||
className={`px-3 py-1 rounded-full text-sm font-medium border ${getRoleBadgeColor(
|
||
user.role
|
||
)} focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer transition-all hover:shadow-md`}
|
||
>
|
||
<option value="user">User</option>
|
||
<option value="moderator">Moderator</option>
|
||
<option value="admin">Admin</option>
|
||
</select>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<button
|
||
onClick={() => toggleEmailVerification(user.id, user.emailVerified, user.email)}
|
||
className={`inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium transition-all cursor-pointer hover:shadow-md ${
|
||
user.emailVerified
|
||
? "bg-green-100 text-green-700 hover:bg-green-200"
|
||
: "bg-yellow-100 text-yellow-700 hover:bg-yellow-200"
|
||
}`}
|
||
>
|
||
{user.emailVerified ? (
|
||
<>
|
||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||
<path
|
||
fillRule="evenodd"
|
||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
clipRule="evenodd"
|
||
/>
|
||
</svg>
|
||
Doğrulandı
|
||
</>
|
||
) : (
|
||
<>
|
||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||
<path
|
||
fillRule="evenodd"
|
||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||
clipRule="evenodd"
|
||
/>
|
||
</svg>
|
||
Beklemede
|
||
</>
|
||
)}
|
||
</button>
|
||
</td>
|
||
<td className="px-6 py-4 text-sm text-gray-600">
|
||
{new Date(user.createdAt).toLocaleDateString("tr-TR")}
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => openApiKeysModal(user)}
|
||
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors"
|
||
>
|
||
API Keys
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => deleteUser(user.id, user.email)}
|
||
className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
|
||
>
|
||
Sil
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{keysModalUser && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||
<div className="max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-white p-6 shadow-2xl">
|
||
<div className="mb-4 flex items-start justify-between gap-4">
|
||
<div>
|
||
<h2 className="text-xl font-bold text-gray-900">API anahtarları</h2>
|
||
<p className="text-sm text-gray-600">
|
||
{keysModalUser.email} — süre: bugünden itibaren gün sayısı (boş veya 0 =
|
||
süresiz)
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => setKeysModalUser(null)}
|
||
className="rounded-lg px-3 py-1 text-sm text-gray-600 hover:bg-gray-100"
|
||
>
|
||
Kapat
|
||
</button>
|
||
</div>
|
||
{keysLoading ? (
|
||
<p className="text-gray-600">Yükleniyor…</p>
|
||
) : userKeys.length === 0 ? (
|
||
<p className="text-gray-600">Bu kullanıcının henüz API anahtarı yok.</p>
|
||
) : (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-left text-sm">
|
||
<thead>
|
||
<tr className="border-b border-gray-200">
|
||
<th className="py-2 pr-3">İsim</th>
|
||
<th className="py-2 pr-3">Önizleme</th>
|
||
<th className="py-2 pr-3">Mevcut bitiş</th>
|
||
<th className="py-2 pr-3">Kalan süre</th>
|
||
<th className="py-2 pr-3">Yeni süre (gün)</th>
|
||
<th className="py-2" />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{userKeys.map((k) => (
|
||
<tr key={k.id} className="border-b border-gray-100">
|
||
<td className="py-2 pr-3 font-medium">{k.name}</td>
|
||
<td className="py-2 pr-3 font-mono text-xs">{k.keyPreview}</td>
|
||
<td className="py-2 pr-3 text-xs">
|
||
{k.expiresAt
|
||
? new Date(k.expiresAt).toLocaleString("tr-TR")
|
||
: "—"}
|
||
</td>
|
||
<td className="py-2 pr-3">
|
||
<span
|
||
className={
|
||
k.remainingLabel === "Süresi doldu"
|
||
? "font-medium text-red-600"
|
||
: k.remainingLabel === "Süresiz"
|
||
? "text-gray-600"
|
||
: "font-medium text-emerald-700"
|
||
}
|
||
>
|
||
{k.remainingLabel}
|
||
</span>
|
||
</td>
|
||
<td className="py-2 pr-3">
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
placeholder="0=süresiz"
|
||
value={expiryDraft[k.id] ?? ""}
|
||
onChange={(e) =>
|
||
setExpiryDraft((prev) => ({
|
||
...prev,
|
||
[k.id]: e.target.value,
|
||
}))
|
||
}
|
||
className="w-28 rounded border border-gray-300 px-2 py-1 text-sm"
|
||
/>
|
||
</td>
|
||
<td className="py-2">
|
||
<button
|
||
type="button"
|
||
disabled={keysPatching === k.id}
|
||
onClick={() =>
|
||
patchKeyExpiry(
|
||
keysModalUser.id,
|
||
k.id,
|
||
expiryDraft[k.id] ?? ""
|
||
)
|
||
}
|
||
className="rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||
>
|
||
{keysPatching === k.id ? "…" : "Kaydet"}
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||
<h3 className="text-sm font-medium text-gray-600 mb-2">Toplam Kullanıcı</h3>
|
||
<p className="text-3xl font-bold text-gray-900">{users.length}</p>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||
<h3 className="text-sm font-medium text-gray-600 mb-2">Admin Sayısı</h3>
|
||
<p className="text-3xl font-bold text-red-600">
|
||
{users.filter((u) => u.role === "admin").length}
|
||
</p>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||
<h3 className="text-sm font-medium text-gray-600 mb-2">Moderatör Sayısı</h3>
|
||
<p className="text-3xl font-bold text-blue-600">
|
||
{users.filter((u) => u.role === "moderator").length}
|
||
</p>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||
<h3 className="text-sm font-medium text-gray-600 mb-2">Doğrulananlar</h3>
|
||
<p className="text-3xl font-bold text-green-600">
|
||
{users.filter((u) => u.emailVerified).length}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|