k.karaer/personel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobil uyumu

Browse Source
This commit is contained in:
Kenan KARAER
2026-03-18 15:42:02 +03:00
parent 0bbfa2f636
commit a50fd188df
9 changed files with 178 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/employees/EmployeeModal.tsx
+18 -18
View File
@@ -85,38 +85,38 @@ export default function EmployeeModal({
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/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">
<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-10 py-8 border-b border-slate-50 dark:border-zinc-800 flex items-center justify-between bg-white dark:bg-zinc-900">
<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-2xl font-black text-[#173363] dark:text-white tracking-tight">
<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-xs font-bold text-slate-400 mt-1">
Sistem üzerindeki personel bilgilerini detaylı olarak yönetin.
<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-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-zinc-800 text-slate-300 hover:text-[#CE0515] transition-all"
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-6 h-6" />
<XMarkIcon className="w-5 h-5 sm:w-6 sm: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">
<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 BİLGİLER' },
{ id: 'employment', label: 'ÇALIŞMA BİLGİLERİ' },
{ id: 'contact', label: 'İLETİŞİM / DİĞER' }
{ 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-6 text-[11px] font-black tracking-[0.2em] transition-all border-b-2 ${
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'
@@ -128,9 +128,9 @@ export default function EmployeeModal({
</div>
{/* Body */}
<form action={handleSubmit} className="flex-1 overflow-y-auto p-10 custom-scrollbar">
<form action={handleSubmit} className="flex-1 overflow-y-auto p-6 sm:p-10 custom-scrollbar">
{error && (
<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">
<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>
)}
@@ -307,18 +307,18 @@ export default function EmployeeModal({
</div>
</div>
<div className="mt-12 flex gap-4">
<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="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]"
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="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"
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>