331 lines
15 KiB
TypeScript
331 lines
15 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect, useRef } from 'react';
|
||
import { XMarkIcon, PhotoIcon } from '@heroicons/react/24/outline';
|
||
import { addEmployee, updateEmployee } from '@/app/employees/actions';
|
||
|
||
interface EmployeeModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
companies: any[];
|
||
roles: any[];
|
||
departments: any[];
|
||
sections: any[];
|
||
employmentTypes: any[];
|
||
jobTitles: any[];
|
||
editingEmployee?: any;
|
||
}
|
||
|
||
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);
|
||
|
||
try {
|
||
let result;
|
||
if (editingEmployee) {
|
||
result = await updateEmployee(editingEmployee.id, formData);
|
||
} else {
|
||
result = await addEmployee(formData);
|
||
}
|
||
|
||
if (result.error) {
|
||
setError(result.error);
|
||
} else {
|
||
onClose();
|
||
}
|
||
} catch (err) {
|
||
setError('Bir hata oluştu, lütfen tekrar deneyin.');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
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-0 sm:p-4 bg-slate-900/60 backdrop-blur-md transition-all">
|
||
<div className="bg-white dark:bg-zinc-900 w-full sm:max-w-4xl h-full sm:h-auto sm:max-h-[90vh] rounded-none sm: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-6 sm:px-10 py-6 sm: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 sm:text-2xl font-black text-[#173363] dark:text-white tracking-tight">
|
||
{editingEmployee ? 'Personel Düzenle' : 'Yeni Personel Ekle'}
|
||
</h2>
|
||
<p className="text-[10px] sm:text-xs font-bold text-slate-400 mt-1">
|
||
Personel bilgilerini detaylı olarak yönetin.
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-2 sm:p-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-zinc-800 text-slate-300 hover:text-[#CE0515] transition-all"
|
||
>
|
||
<XMarkIcon className="w-5 h-5 sm:w-6 sm:h-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="px-6 sm:px-10 flex gap-4 sm:gap-8 border-b border-slate-50 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-x-auto no-scrollbar">
|
||
{[
|
||
{ id: 'personal', label: 'KİŞİSEL' },
|
||
{ id: 'employment', label: 'ÇALIŞMA' },
|
||
{ id: 'contact', label: 'İLETİŞİM' }
|
||
].map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`py-4 sm:py-6 text-[10px] sm:text-[11px] font-black tracking-[0.15em] sm:tracking-[0.2em] transition-all border-b-2 whitespace-nowrap ${
|
||
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="flex-1 overflow-y-auto p-6 sm:p-10 custom-scrollbar">
|
||
{error && (
|
||
<div className="mb-6 p-4 bg-rose-50 border border-rose-100 rounded-2xl text-rose-600 text-[10px] sm:text-xs font-black text-center uppercase tracking-widest leading-relaxed">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className={activeTab === 'personal' ? 'block' : 'hidden'}>
|
||
<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="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>
|
||
</div>
|
||
|
||
<div className={activeTab === 'employment' ? 'block' : 'hidden'}>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<label className={labelClass}>SİSTEM DURUMU</label>
|
||
<select name="status" defaultValue={editingEmployee?.status || 'active'} className={inputClass}>
|
||
<option value="active">Aktif</option>
|
||
<option value="inactive">Pasif</option>
|
||
<option value="terminated">İlişiği Kesildi</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={activeTab === 'contact' ? 'block' : 'hidden'}>
|
||
<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="mt-8 sm:mt-12 flex flex-col sm:flex-row gap-3 sm:gap-4 pb-4">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="px-8 py-4 sm:py-5 rounded-full font-black text-slate-300 hover:bg-slate-50 transition-all text-[10px] sm:text-[11px] uppercase tracking-[0.2em]"
|
||
>
|
||
Vazgeç
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="bg-[#173363] hover:bg-[#CE0515] text-white px-10 py-4 sm:py-5 rounded-full font-black shadow-xl shadow-blue-900/10 transition-all active:scale-95 disabled:opacity-50 text-[10px] sm:text-[11px] uppercase tracking-[0.2em]"
|
||
>
|
||
{loading ? 'YÜKLENİYOR...' : (editingEmployee ? 'BİLGİLERİ GÜNCELLE' : 'PERSONELİ KAYDET')}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|