112 lines
4.5 KiB
TypeScript
112 lines
4.5 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { XMarkIcon, KeyIcon } from '@heroicons/react/24/outline';
|
||
import { createUserForEmployee } from '@/app/employees/actions';
|
||
|
||
interface UserCreationModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
employeesWithoutUser: any[];
|
||
}
|
||
|
||
export default function UserCreationModal({ isOpen, onClose, employeesWithoutUser }: UserCreationModalProps) {
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
async function handleSubmit(formData: FormData) {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const result = await createUserForEmployee(formData);
|
||
|
||
if (result.error) {
|
||
setError(result.error);
|
||
} else {
|
||
onClose();
|
||
}
|
||
} catch (err) {
|
||
setError('Bir hata oluştu, lütfen tekrar deneyin.');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md transition-all">
|
||
<div className="bg-white dark:bg-zinc-900 w-full max-w-md rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-zinc-800 overflow-hidden animate-in fade-in zoom-in duration-300">
|
||
|
||
{/* Header */}
|
||
<div className="px-10 py-8 border-b border-slate-50 dark:border-zinc-800 flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-xl font-black text-[#173363] dark:text-white tracking-tight">Kullanıcı Tanımla</h2>
|
||
<p className="text-xs font-bold text-slate-400 mt-1">Personel için sistem girişi oluşturun.</p>
|
||
</div>
|
||
<button onClick={onClose} className="p-2 rounded-xl hover:bg-slate-50 text-slate-300 hover:text-[#CE0515] transition-all">
|
||
<XMarkIcon className="w-6 h-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<form action={handleSubmit} className="p-10 space-y-6">
|
||
{error && (
|
||
<div className="p-4 bg-rose-50 border border-rose-100 rounded-2xl text-rose-600 text-[10px] font-black text-center uppercase tracking-widest">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1.5 ml-1">PERSONEL SEÇİMİ</label>
|
||
<select
|
||
name="employee_id"
|
||
required
|
||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 bg-slate-50 ring-1 ring-inset ring-slate-200 focus:ring-2 focus:ring-[#173363] outline-none transition-all text-sm font-bold"
|
||
>
|
||
<option value="">Seçiniz</option>
|
||
{employeesWithoutUser.map(emp => (
|
||
<option key={emp.id} value={emp.id}>{emp.first_name} {emp.last_name} ({emp.email})</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1.5 ml-1">GİRİŞ ŞİFRESİ</label>
|
||
<div className="relative group">
|
||
<KeyIcon className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-[#173363] transition-colors" />
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
required
|
||
placeholder="••••••••"
|
||
className="w-full pl-12 pr-4 py-3.5 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-[#173363] transition-all outline-none"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-4 flex gap-4">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="flex-1 px-4 py-4 rounded-full font-black text-slate-300 hover:bg-slate-50 transition-all text-[10px] uppercase tracking-[0.2em]"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="flex-[2] bg-[#173363] hover:bg-[#CE0515] text-white px-8 py-4 rounded-full font-black shadow-lg shadow-blue-900/10 transition-all active:scale-95 disabled:opacity-50 text-[10px] uppercase tracking-[0.2em]"
|
||
>
|
||
{loading ? 'İŞLENİYOR...' : 'HESAP OLUŞTUR'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|