feat: add multi-user admin panel and featured partners toggle on home page
This commit is contained in:
AyrisAI
119
app/admin/(dashboard)/users/AddAdminModal.tsx
Normal file
119
app/admin/(dashboard)/users/AddAdminModal.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, X, Save, AlertCircle } from "lucide-react";
|
||||
import { createAdminAdmin } from "../../actions";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AddAdminModal() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setErrorMsg("");
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("username", username);
|
||||
formData.append("password", password);
|
||||
|
||||
const res = await createAdminAdmin(formData);
|
||||
setIsLoading(false);
|
||||
|
||||
if (res.error) {
|
||||
setErrorMsg(res.error);
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
router.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="bg-primary text-white px-6 py-2 rounded-xl font-bold hover:bg-primary/80 transition-colors flex items-center gap-2 cursor-pointer text-sm"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Yönetici Ekle
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-fadeIn">
|
||||
<div className="relative w-full max-w-md bg-zinc-950 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center pb-4 border-b border-white/10">
|
||||
<h2 className="text-xl font-black uppercase tracking-widest text-white">Yeni Yönetici Ekle</h2>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="text-white/40 hover:text-white transition-colors p-1"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Kullanıcı Adı</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Örn: ayrisdev"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Geçici Şifre</label>
|
||||
<input
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMsg && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-xs font-bold bg-red-500/10 p-4 rounded-xl">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{errorMsg}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex-1 border border-white/10 text-white font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="flex-1 bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary/80 transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{isLoading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
117
app/admin/(dashboard)/users/ChangePasswordModal.tsx
Normal file
117
app/admin/(dashboard)/users/ChangePasswordModal.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { X, Save, AlertCircle, KeyRound, CheckCircle } from "lucide-react";
|
||||
import { updateAdminPassword } from "../../actions";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ChangePasswordModal({ admin }: { admin: { id: number; username: string } }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const [successMsg, setSuccessMsg] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setErrorMsg("");
|
||||
setSuccessMsg("");
|
||||
|
||||
const res = await updateAdminPassword(admin.id, password);
|
||||
setIsLoading(false);
|
||||
|
||||
if (res.error) {
|
||||
setErrorMsg(res.error);
|
||||
} else {
|
||||
setSuccessMsg("Şifre başarıyla güncellendi!");
|
||||
setPassword("");
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
setSuccessMsg("");
|
||||
router.refresh();
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="p-2 bg-white/5 text-white/40 rounded-lg hover:bg-primary hover:text-white transition-all cursor-pointer"
|
||||
title="Şifre Değiştir"
|
||||
>
|
||||
<KeyRound className="w-4.5 h-4.5" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-fadeIn">
|
||||
<div className="relative w-full max-w-md bg-zinc-950 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center pb-4 border-b border-white/10">
|
||||
<div>
|
||||
<h2 className="text-xl font-black uppercase tracking-widest text-white">Şifre Değiştir</h2>
|
||||
<p className="text-xs text-white/40 mt-1">"{admin.username}" kullanıcısının şifresini güncelleyin.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="text-white/40 hover:text-white transition-colors p-1"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Yeni Şifre</label>
|
||||
<input
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMsg && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-xs font-bold bg-red-500/10 p-4 rounded-xl">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{errorMsg}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{successMsg && (
|
||||
<div className="flex items-center gap-2 text-green-500 text-xs font-bold bg-green-500/10 p-4 rounded-xl">
|
||||
<CheckCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{successMsg}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex-1 border border-white/10 text-white font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="flex-1 bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary/80 transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{isLoading ? "Güncelleniyor..." : "Güncelle"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
104
app/admin/(dashboard)/users/page.tsx
Normal file
104
app/admin/(dashboard)/users/page.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { getAdminsAdmin, deleteAdminAdmin, getCurrentAdmin } from '../../actions';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { Shield, KeyRound, Trash2 } from 'lucide-react';
|
||||
import AddAdminModal from './AddAdminModal';
|
||||
import ChangePasswordModal from './ChangePasswordModal';
|
||||
|
||||
export default async function AdminsAdminPage() {
|
||||
const admins = await getAdminsAdmin();
|
||||
const currentAdmin = await getCurrentAdmin();
|
||||
|
||||
async function handleDelete(formData: FormData) {
|
||||
'use server';
|
||||
const id = Number(formData.get('id'));
|
||||
const res = await deleteAdminAdmin(id);
|
||||
if (res.error) {
|
||||
// Usually we want to return feedback, but a simple redirect/refresh works
|
||||
console.error(res.error);
|
||||
}
|
||||
revalidatePath('/admin/users');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-3xl font-black uppercase tracking-widest text-white mb-2">Yöneticiler</h1>
|
||||
<p className="text-white/40">Sistem yöneticileri ve erişim kontrolü.</p>
|
||||
</div>
|
||||
<AddAdminModal />
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-950 border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-white/10 bg-white/[0.02]">
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">ID</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Kullanıcı Adı</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Oluşturulma Tarihi</th>
|
||||
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-widest text-white/40">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{admins.map((admin: any) => {
|
||||
const isSelf = admin.username === currentAdmin;
|
||||
return (
|
||||
<tr key={admin.id} className="hover:bg-white/[0.01] transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-white/40 font-mono">#{admin.id}</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-1.5 rounded-lg ${isSelf ? 'bg-primary/20 text-primary' : 'bg-white/5 text-white/60'}`}>
|
||||
<Shield className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="font-bold text-white tracking-wide">
|
||||
{admin.username}
|
||||
{isSelf && (
|
||||
<span className="ml-2 bg-primary/20 text-primary text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded-md">
|
||||
Siz
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-white/60">
|
||||
{new Date(admin.created_at).toLocaleDateString('tr-TR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex justify-end items-center gap-3">
|
||||
{/* Change Password */}
|
||||
<ChangePasswordModal admin={admin} />
|
||||
|
||||
{/* Delete Admin */}
|
||||
{!isSelf && (
|
||||
<form action={handleDelete} onSubmit={(e) => {
|
||||
if (!confirm(`${admin.username} yöneticisini silmek istediğinize emin misiniz?`)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}} className="inline">
|
||||
<input type="hidden" name="id" value={admin.id} />
|
||||
<button
|
||||
type="submit"
|
||||
className="p-2 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500 hover:text-white transition-all cursor-pointer"
|
||||
title="Yöneticiyi Sil"
|
||||
>
|
||||
<Trash2 className="w-4.5 h-4.5" />
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user