new özellik
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { XMarkIcon, PhotoIcon } from '@heroicons/react/24/outline';
|
||||
import { addEmployee, updateEmployee } from '@/app/employees/actions';
|
||||
|
||||
interface EmployeeModalProps {
|
||||
@@ -9,15 +9,54 @@ interface EmployeeModalProps {
|
||||
onClose: () => void;
|
||||
companies: any[];
|
||||
roles: any[];
|
||||
departments: any[];
|
||||
sections: any[];
|
||||
employmentTypes: any[];
|
||||
jobTitles: any[];
|
||||
editingEmployee?: any;
|
||||
}
|
||||
|
||||
export default function EmployeeModal({ isOpen, onClose, companies, roles, editingEmployee }: EmployeeModalProps) {
|
||||
export default function EmployeeModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
companies,
|
||||
roles,
|
||||
departments,
|
||||
sections,
|
||||
employmentTypes,
|
||||
jobTitles,
|
||||
editingEmployee
|
||||
}: EmployeeModalProps) {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('personal');
|
||||
const [selectedDept, setSelectedDept] = useState(editingEmployee?.department_id || '');
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(editingEmployee?.photo_url || null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (editingEmployee) {
|
||||
setSelectedDept(editingEmployee.department_id || '');
|
||||
setPreviewUrl(editingEmployee.photo_url || null);
|
||||
} else {
|
||||
setSelectedDept('');
|
||||
setPreviewUrl(null);
|
||||
}
|
||||
setActiveTab('personal');
|
||||
}, [editingEmployee, isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const filteredSections = sections.filter(s => s.department_id === selectedDept);
|
||||
|
||||
const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
const url = URL.createObjectURL(file);
|
||||
setPreviewUrl(url);
|
||||
}
|
||||
};
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
@@ -42,130 +81,238 @@ export default function EmployeeModal({ isOpen, onClose, companies, roles, editi
|
||||
}
|
||||
}
|
||||
|
||||
const inputClass = "w-full rounded-2xl border-0 py-3 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-[#173363] outline-none transition-all placeholder:text-slate-400 text-sm";
|
||||
const labelClass = "block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1.5 ml-1";
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm transition-all">
|
||||
<div className="bg-white dark:bg-zinc-900 w-full max-w-lg rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-zinc-800 overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
<div className="fixed inset-0 z-50 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-4xl max-h-[90vh] rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-zinc-800 overflow-hidden flex flex-col animate-in fade-in zoom-in duration-300">
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-8 py-6 border-b border-slate-50 dark:border-zinc-800 flex items-center justify-between bg-slate-50/50 dark:bg-zinc-800/30">
|
||||
<div className="px-10 py-8 border-b border-slate-50 dark:border-zinc-800 flex items-center justify-between bg-white dark:bg-zinc-900">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">
|
||||
<h2 className="text-2xl font-black text-[#173363] dark:text-white tracking-tight">
|
||||
{editingEmployee ? 'Personel Düzenle' : 'Yeni Personel Ekle'}
|
||||
</h2>
|
||||
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 mt-1">
|
||||
Personel bilgilerini eksiksiz doldurunuz.
|
||||
<p className="text-xs font-bold text-slate-400 mt-1">
|
||||
Sistem üzerindeki personel bilgilerini detaylı olarak yönetin.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-zinc-800 text-slate-400 dark:text-zinc-500 transition-colors"
|
||||
className="p-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-zinc-800 text-slate-300 hover:text-[#CE0515] transition-all"
|
||||
>
|
||||
<XMarkIcon className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="px-10 flex gap-8 border-b border-slate-50 dark:border-zinc-800 bg-white dark:bg-zinc-900">
|
||||
{[
|
||||
{ id: 'personal', label: 'KİŞİSEL BİLGİLER' },
|
||||
{ id: 'employment', label: 'ÇALIŞMA BİLGİLERİ' },
|
||||
{ id: 'contact', label: 'İLETİŞİM / DİĞER' }
|
||||
].map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`py-6 text-[11px] font-black tracking-[0.2em] transition-all border-b-2 ${
|
||||
activeTab === tab.id
|
||||
? 'border-[#CE0515] text-[#CE0515]'
|
||||
: 'border-transparent text-slate-400 hover:text-slate-600'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<form action={handleSubmit} className="p-8 space-y-6">
|
||||
<form action={handleSubmit} className="flex-1 overflow-y-auto p-10 custom-scrollbar">
|
||||
{error && (
|
||||
<div className="p-4 bg-rose-50 dark:bg-rose-900/20 border border-rose-100 dark:border-rose-900/30 rounded-2xl text-rose-600 dark:text-rose-400 text-sm font-bold text-center">
|
||||
<div className="mb-8 p-4 bg-rose-50 border border-rose-100 rounded-2xl text-rose-600 text-xs font-black text-center uppercase tracking-widest">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{!editingEmployee && (
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-slate-700 dark:text-slate-300 ml-1">E-posta Adresi</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="ornek@abisena.com"
|
||||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-indigo-600 outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'personal' && (
|
||||
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="flex flex-col md:flex-row gap-10">
|
||||
{/* Photo Upload */}
|
||||
<div className="flex-shrink-0 flex flex-col items-center gap-4">
|
||||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-40 h-40 rounded-[2.5rem] bg-slate-50 border-2 border-dashed border-slate-200 flex flex-col items-center justify-center cursor-pointer hover:border-[#173363] hover:bg-slate-100 transition-all overflow-hidden group"
|
||||
>
|
||||
{previewUrl ? (
|
||||
<img src={previewUrl} alt="Preview" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<>
|
||||
<PhotoIcon className="w-10 h-10 text-slate-300 group-hover:text-[#173363] transition-colors" />
|
||||
<span className="text-[10px] font-black text-slate-400 mt-2 px-4 text-center">FOTOĞRAF YÜKLE</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
ref={fileInputRef}
|
||||
onChange={handlePhotoChange}
|
||||
className="hidden"
|
||||
accept="image/*"
|
||||
/>
|
||||
<input type="hidden" name="existing_photo_url" value={editingEmployee?.photo_url || ''} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-slate-700 dark:text-slate-300 ml-1">Şirket</label>
|
||||
<select
|
||||
name="company_id"
|
||||
required
|
||||
defaultValue={editingEmployee?.company_id || ''}
|
||||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-indigo-600 outline-none transition-all"
|
||||
>
|
||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className={labelClass}>AD</label>
|
||||
<input type="text" name="first_name" defaultValue={editingEmployee?.first_name} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>SOYAD</label>
|
||||
<input type="text" name="last_name" defaultValue={editingEmployee?.last_name} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>T.C. KİMLİK NO</label>
|
||||
<input type="text" name="tc_no" defaultValue={editingEmployee?.tc_no} className={inputClass} maxLength={11} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>CİNSİYET</label>
|
||||
<select name="gender" defaultValue={editingEmployee?.gender} className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="Erkek">Erkek</option>
|
||||
<option value="Kadın">Kadın</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>DOĞUM TARİHİ</label>
|
||||
<input type="date" name="birth_date" defaultValue={editingEmployee?.birth_date} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>DOĞUM YERİ</label>
|
||||
<input type="text" name="birth_place" defaultValue={editingEmployee?.birth_place} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'employment' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div>
|
||||
<label className={labelClass}>ŞİRKET</label>
|
||||
<select name="company_id" defaultValue={editingEmployee?.company_id} required className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
{companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-slate-700 dark:text-slate-300 ml-1">Rol</label>
|
||||
<select
|
||||
name="role_id"
|
||||
required
|
||||
defaultValue={editingEmployee?.role_id || ''}
|
||||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-indigo-600 outline-none transition-all"
|
||||
>
|
||||
<div>
|
||||
<label className={labelClass}>SİSTEM ROLÜ</label>
|
||||
<select name="role_id" defaultValue={editingEmployee?.role_id} required className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
{roles.map(r => <option key={r.id} value={r.id}>{r.description}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-slate-700 dark:text-slate-300 ml-1">Departman</label>
|
||||
<input
|
||||
type="text"
|
||||
name="department"
|
||||
defaultValue={editingEmployee?.department || ''}
|
||||
placeholder="Örn: Yazılım"
|
||||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-indigo-600 outline-none transition-all"
|
||||
/>
|
||||
<div>
|
||||
<label className={labelClass}>DEPARTMAN</label>
|
||||
<select
|
||||
name="department_id"
|
||||
value={selectedDept}
|
||||
onChange={(e) => setSelectedDept(e.target.value)}
|
||||
className={inputClass}
|
||||
>
|
||||
<option value="">Seçiniz</option>
|
||||
{departments.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-slate-700 dark:text-slate-300 ml-1">Ünvan</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
defaultValue={editingEmployee?.title || ''}
|
||||
placeholder="Örn: Kıdemli Uzman"
|
||||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-indigo-600 outline-none transition-all"
|
||||
/>
|
||||
<div>
|
||||
<label className={labelClass}>BÖLÜM</label>
|
||||
<select name="section_id" defaultValue={editingEmployee?.section_id} className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
{filteredSections.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>GÖREV / ÜNVAN</label>
|
||||
<select name="job_title_id" defaultValue={editingEmployee?.job_title_id} className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
{jobTitles.map(jt => <option key={jt.id} value={jt.id}>{jt.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>ÇALIŞMA ŞEKLİ</label>
|
||||
<select name="employment_type_id" defaultValue={editingEmployee?.employment_type_id} className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
{employmentTypes.map(et => <option key={et.id} value={et.id}>{et.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>İŞE BAŞLAMA TARİHİ</label>
|
||||
<input type="date" name="start_date" defaultValue={editingEmployee?.start_date} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>İŞTEN AYRILIŞ TARİHİ</label>
|
||||
<input type="date" name="leave_date" defaultValue={editingEmployee?.leave_date} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-slate-700 dark:text-slate-300 ml-1">Durum</label>
|
||||
<select
|
||||
name="status"
|
||||
defaultValue={editingEmployee?.status || 'active'}
|
||||
className="w-full rounded-2xl border-0 py-3.5 px-4 text-slate-900 dark:text-white bg-slate-50 dark:bg-zinc-800 ring-1 ring-inset ring-slate-200 dark:ring-zinc-700 focus:ring-2 focus:ring-indigo-600 outline-none transition-all"
|
||||
>
|
||||
<option value="active">Aktif</option>
|
||||
<option value="inactive">Pasif</option>
|
||||
<option value="terminated">İlişiği Kesildi</option>
|
||||
</select>
|
||||
{activeTab === 'contact' && (
|
||||
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<label className={labelClass}>E-POSTA</label>
|
||||
<input type="email" name="email" defaultValue={editingEmployee?.email} className={inputClass} placeholder="ornek@abisena.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>TELEFON 1</label>
|
||||
<input type="tel" name="phone1" defaultValue={editingEmployee?.phone1} className={inputClass} placeholder="05XX XXX XX XX" />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>TELEFON 2</label>
|
||||
<input type="tel" name="phone2" defaultValue={editingEmployee?.phone2} className={inputClass} placeholder="05XX XXX XX XX" />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>ASKERLİK DURUMU</label>
|
||||
<select name="military_status" defaultValue={editingEmployee?.military_status} className={inputClass}>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="Yapıldı">Yapıldı</option>
|
||||
<option value="Muaf">Muaf</option>
|
||||
<option value="Tecilli">Tecilli</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>ADRES</label>
|
||||
<textarea name="address" defaultValue={editingEmployee?.address} rows={3} className={inputClass + " resize-none"} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4 bg-slate-50 p-6 rounded-2xl border border-slate-200">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="has_driving_license"
|
||||
defaultChecked={editingEmployee?.has_driving_license}
|
||||
className="w-5 h-5 rounded-lg border-slate-300 text-[#173363] focus:ring-[#173363]"
|
||||
/>
|
||||
<label className="text-sm font-bold text-[#173363]">SÜRÜCÜ EHLİYETİ VAR</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4 pt-6">
|
||||
<div className="mt-12 flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-4 rounded-full font-black text-slate-400 hover:bg-slate-50 transition-all text-xs uppercase tracking-widest"
|
||||
className="flex-1 px-8 py-5 rounded-full font-black text-slate-300 hover:bg-slate-50 transition-all text-[11px] uppercase tracking-[0.2em]"
|
||||
>
|
||||
İptal
|
||||
Vazgeç
|
||||
</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-xs uppercase tracking-[0.2em]"
|
||||
className="flex-[2] bg-[#173363] hover:bg-[#CE0515] text-white px-10 py-5 rounded-full font-black shadow-xl shadow-blue-900/10 transition-all active:scale-95 disabled:opacity-50 text-[11px] uppercase tracking-[0.2em] transform"
|
||||
>
|
||||
{loading ? 'İşleniyor...' : (editingEmployee ? 'GÜNCELLE' : 'PERSONEL OLUŞTUR')}
|
||||
{loading ? 'YÜKLENİYOR...' : (editingEmployee ? 'BİLGİLERİ GÜNCELLE' : 'PERSONELİ KAYDET')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user