feat: admin panel CRUD, Cloudinary upload, logo, user management

2026-06-05 17:38:01 +03:00
parent 53eeeee474
commit 5e4e2f0db9
43 changed files with 3917 additions and 281 deletions
@@ -0,0 +1,74 @@
+'use client'
+
+import { useActionState } from 'react'
+import { createUser } from './actions'
+import { UserPlus } from 'lucide-react'
+
+export default function CreateUserForm() {
+  const [state, formAction, isPending] = useActionState(createUser, undefined)
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+      <div className="flex items-center gap-2 mb-4">
+        <UserPlus size={20} className="text-blue-600" />
+        <h2 className="text-lg font-semibold text-gray-800">Yeni Kullanıcı Ekle</h2>
+      </div>
+
+      {state?.success && (
+        <div className="bg-green-50 text-green-700 p-3 rounded-lg text-sm mb-4">
+          Kullanıcı başarıyla oluşturuldu.
+        </div>
+      )}
+      {state?.error && (
+        <div className="bg-red-50 text-red-700 p-3 rounded-lg text-sm mb-4">
+          {state.error}
+        </div>
+      )}
+
+      <form action={formAction} className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Kullanıcı Adı *</label>
+          <input
+            type="text"
+            name="username"
+            required
+            autoComplete="off"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Şifre * <span className="text-gray-400 font-normal">(min. 6 karakter)</span></label>
+          <input
+            type="password"
+            name="password"
+            required
+            autoComplete="new-password"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Rol</label>
+          <select
+            name="role"
+            defaultValue="admin"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
+          >
+            <option value="admin">Admin</option>
+            <option value="editor">Editor</option>
+          </select>
+        </div>
+
+        <div className="sm:col-span-3 flex justify-end">
+          <button
+            type="submit"
+            disabled={isPending}
+            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-5 rounded-lg text-sm transition-colors disabled:opacity-70 flex items-center gap-2"
+          >
+            <UserPlus size={16} />
+            {isPending ? 'Oluşturuluyor...' : 'Kullanıcı Oluştur'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
@@ -0,0 +1,135 @@
+'use client'
+
+import { useActionState, useState } from 'react'
+import { changePassword, deleteUser } from './actions'
+import { KeyRound, Trash2, ChevronDown, ChevronUp, Shield } from 'lucide-react'
+
+type User = {
+  id: number
+  username: string
+  role: string
+  created_at: Date
+}
+
+function ChangePasswordForm({ userId }: { userId: number }) {
+  const action = changePassword.bind(null, userId)
+  const [state, formAction, isPending] = useActionState(action, undefined)
+
+  return (
+    <form action={formAction} className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-3">
+      {state?.success && (
+        <p className="text-xs text-green-700 bg-green-50 px-3 py-2 rounded-lg">{state.message}</p>
+      )}
+      {state?.error && (
+        <p className="text-xs text-red-700 bg-red-50 px-3 py-2 rounded-lg">{state.error}</p>
+      )}
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Yeni Şifre</label>
+          <input
+            type="password"
+            name="new_password"
+            required
+            autoComplete="new-password"
+            placeholder="Min. 6 karakter"
+            className="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Şifre Tekrar</label>
+          <input
+            type="password"
+            name="confirm_password"
+            required
+            autoComplete="new-password"
+            placeholder="Tekrar giriniz"
+            className="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+          />
+        </div>
+      </div>
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          disabled={isPending}
+          className="bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium py-1.5 px-4 rounded-lg transition-colors disabled:opacity-70 flex items-center gap-1.5"
+        >
+          <KeyRound size={14} />
+          {isPending ? 'Güncelleniyor...' : 'Şifreyi Güncelle'}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+function UserRow({ user }: { user: User }) {
+  const [expanded, setExpanded] = useState(false)
+
+  async function handleDelete() {
+    if (!confirm(`"${user.username}" kullanıcısını silmek istediğinize emin misiniz?`)) return
+    const res = await deleteUser(user.id)
+    if (res?.error) alert(res.error)
+  }
+
+  return (
+    <div className="border border-gray-100 rounded-xl overflow-hidden">
+      <div className="flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-semibold text-sm uppercase">
+            {user.username[0]}
+          </div>
+          <div>
+            <p className="font-medium text-gray-900 text-sm">{user.username}</p>
+            <p className="text-xs text-gray-400">
+              {new Date(user.created_at).toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' })}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${
+            user.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-600'
+          }`}>
+            <Shield size={10} />
+            {user.role}
+          </span>
+
+          <button
+            onClick={() => setExpanded(v => !v)}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-amber-600 bg-amber-50 hover:bg-amber-100 rounded-lg transition-colors font-medium"
+          >
+            <KeyRound size={13} />
+            Şifre
+            {expanded ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+          </button>
+
+          <button
+            onClick={handleDelete}
+            className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+            title="Kullanıcıyı Sil"
+          >
+            <Trash2 size={16} />
+          </button>
+        </div>
+      </div>
+
+      {expanded && <ChangePasswordForm userId={user.id} />}
+    </div>
+  )
+}
+
+export default function UserList({ users }: { users: User[] }) {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+      <h2 className="text-lg font-semibold text-gray-800 mb-4">Mevcut Kullanıcılar ({users.length})</h2>
+      {users.length === 0 ? (
+        <p className="text-sm text-gray-500 text-center py-6">Henüz kullanıcı yok.</p>
+      ) : (
+        <div className="space-y-3">
+          {users.map(user => (
+            <UserRow key={user.id} user={user} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,71 @@
+'use server'
+
+import prisma from '@/lib/prisma'
+import bcrypt from 'bcryptjs'
+import { revalidatePath } from 'next/cache'
+
+export async function createUser(_prevState: unknown, formData: FormData) {
+  const username = (formData.get('username') as string)?.trim()
+  const password = formData.get('password') as string
+  const role = (formData.get('role') as string) || 'admin'
+
+  if (!username || !password) {
+    return { error: 'Kullanıcı adı ve şifre zorunludur.' }
+  }
+  if (password.length < 6) {
+    return { error: 'Şifre en az 6 karakter olmalıdır.' }
+  }
+
+  try {
+    const existing = await prisma.users.findUnique({ where: { username } })
+    if (existing) {
+      return { error: 'Bu kullanıcı adı zaten kullanılıyor.' }
+    }
+
+    const password_hash = await bcrypt.hash(password, 12)
+    await prisma.users.create({ data: { username, password_hash, role } })
+    revalidatePath('/admin/users')
+    return { success: true }
+  } catch (error) {
+    console.error('Create user error:', error)
+    return { error: 'Kullanıcı oluşturulurken hata oluştu.' }
+  }
+}
+
+export async function changePassword(userId: number, _prevState: unknown, formData: FormData) {
+  const newPassword = formData.get('new_password') as string
+  const confirmPassword = formData.get('confirm_password') as string
+
+  if (!newPassword || newPassword.length < 6) {
+    return { error: 'Şifre en az 6 karakter olmalıdır.' }
+  }
+  if (newPassword !== confirmPassword) {
+    return { error: 'Şifreler eşleşmiyor.' }
+  }
+
+  try {
+    const password_hash = await bcrypt.hash(newPassword, 12)
+    await prisma.users.update({ where: { id: userId }, data: { password_hash } })
+    revalidatePath('/admin/users')
+    return { success: true, message: 'Şifre güncellendi.' }
+  } catch (error) {
+    console.error('Change password error:', error)
+    return { error: 'Şifre güncellenirken hata oluştu.' }
+  }
+}
+
+export async function deleteUser(userId: number) {
+  try {
+    // Count total users — don't allow deleting the last admin
+    const count = await prisma.users.count()
+    if (count <= 1) {
+      return { error: 'Son yönetici kullanıcı silinemez.' }
+    }
+    await prisma.users.delete({ where: { id: userId } })
+    revalidatePath('/admin/users')
+    return { success: true }
+  } catch (error) {
+    console.error('Delete user error:', error)
+    return { error: 'Kullanıcı silinirken hata oluştu.' }
+  }
+}
@@ -0,0 +1,27 @@
+import prisma from '@/lib/prisma'
+import CreateUserForm from './CreateUserForm'
+import UserList from './UserList'
+
+export const metadata = {
+  title: 'Kullanıcı Yönetimi - Admin',
+}
+
+export default async function UsersPage() {
+  const users = await prisma.users.findMany({
+    orderBy: { created_at: 'asc' },
+    select: {
+      id: true,
+      username: true,
+      role: true,
+      created_at: true,
+    }
+  })
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold text-gray-900">Kullanıcı Yönetimi</h1>
+      <CreateUserForm />
+      <UserList users={users} />
+    </div>
+  )
+}