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

Personel Sayfası ve Uygulama renk değişiklikleri

Browse Source
This commit is contained in:
Kenan KARAER
2026-03-18 00:08:39 +03:00
parent eb7dee7705
commit b354412cb8
19 changed files with 836 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/app/employees/page.tsx
View File

@@ -1,6 +1,5 @@
import { createClient } from '@/utils/supabase/server'
import { addEmployee, deleteEmployee } from './actions'
import { UsersIcon, TrashIcon } from '@heroicons/react/24/outline'
import EmployeeTable from '@/components/employees/EmployeeTable'
export default async function EmployeesPage() {
const supabase = await createClient()
@@ -10,180 +9,39 @@ export default async function EmployeesPage() {
.from('employees')
.select(`
id,
user_id,
company_id,
role_id,
department,
title,
status,
created_at,
companies ( name ),
users ( first_name, last_name, email ),
roles ( name, description )
companies ( id, name ),
users ( id, first_name, last_name, email ),
roles ( id, name, description )
`)
.order('created_at', { ascending: false })
// Fetch companies for the dropdown
// Fetch companies for the modal
const { data: companies } = await supabase
.from('companies')
.select('id, name')
.order('name')
// Fetch roles for the modal
const { data: roles } = await supabase
.from('roles')
.select('id, name, description')
.order('name')
return (
<div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto">
<div className="sm:flex sm:items-center">
<div className="sm:flex-auto">
<h1 className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white flex items-center gap-2">
<UsersIcon className="w-6 h-6 text-blue-500" />
Çalışan Yönetimi
</h1>
<p className="mt-2 text-sm text-gray-700 dark:text-gray-400">
Sisteme kayıtlı çalışanları görüntüleyin ve yeni çalışanları şirketlere atayın.
</p>
</div>
</div>
<div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Add Employee Form */}
<div className="md:col-span-1 border border-gray-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm overflow-hidden h-fit">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Yeni Çalışan Ata
</h3>
<div className="mt-2 text-sm text-gray-500 dark:text-gray-400">
<p>Sisteme daha önce kayıt olmuş (şifre oluşturmuş) kullanıcıları şirketlere atayın.</p>
</div>
<form action={addEmployee} className="mt-5 space-y-4">
<div>
<label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">Kullanıcı E-posta</label>
<input
type="email"
name="email"
id="email"
required
placeholder="ornek@sirket.com"
className="mt-2 block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-zinc-700 dark:bg-zinc-800 dark:text-white placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
</div>
<div>
<label htmlFor="company_id" className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">Şirket</label>
<select
id="company_id"
name="company_id"
required
className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-white dark:ring-zinc-700"
>
<option value="">Şirket Seçiniz</option>
{companies?.map(company => (
<option key={company.id} value={company.id}>{company.name}</option>
))}
</select>
</div>
<div>
<label htmlFor="department" className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">Departman</label>
<input
type="text"
name="department"
id="department"
placeholder="Örn: IT, İnsan Kaynakları"
className="mt-2 block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-zinc-700 dark:bg-zinc-800 dark:text-white placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
</div>
<div>
<label htmlFor="title" className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">Ünvan</label>
<input
type="text"
name="title"
id="title"
placeholder="Örn: Yazılım Uzmanı"
className="mt-2 block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-zinc-700 dark:bg-zinc-800 dark:text-white placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
</div>
<button
type="submit"
className="inline-flex w-full items-center justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 mt-6"
>
Çalışan Ekle
</button>
</form>
</div>
</div>
{/* Employee List */}
<div className="md:col-span-3">
<div className="bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-gray-200 dark:ring-zinc-800 sm:rounded-xl overflow-hidden overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 dark:divide-zinc-800">
<thead className="bg-gray-50 dark:bg-zinc-950/50">
<tr>
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">
Kişi
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">
Şirket
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">
Departman / Ünvan
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">
Durum
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span className="sr-only">İşlemler</span>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-zinc-800 bg-white dark:bg-zinc-900">
{employees?.map((emp) => (
<tr key={emp.id}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
<div className="font-medium text-gray-900 dark:text-white">
{emp.users?.first_name} {emp.users?.last_name}
</div>
<div className="text-gray-500 dark:text-gray-400">{emp.users?.email}</div>
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
<div className="text-gray-900 dark:text-white">{emp.companies?.name}</div>
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
<div className="text-gray-900 dark:text-white">{emp.department || '-'}</div>
<div className="text-gray-500 dark:text-gray-400">{emp.title || '-'}</div>
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
<span className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
emp.status === 'active' ? 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20' :
'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:ring-red-500/20'
}`}>
{emp.status === 'active' ? 'Aktif' : 'Pasif'}
</span>
</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<form action={async () => {
'use server';
await deleteEmployee(emp.id)
}}>
<button type="submit" className="text-red-600 hover:text-red-900 dark:text-red-500 dark:hover:text-red-400" title="Kişiyi Şirketten Çıkar">
<TrashIcon className="h-5 w-5" />
</button>
</form>
</td>
</tr>
))}
{(!employees || employees.length === 0) && (
<tr>
<td colSpan={5} className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
Sisteme kayıtlı çalışan bulunmamaktadır.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
<EmployeeTable
initialEmployees={employees || []}
companies={companies || []}
roles={roles || []}
/>
</div>
)
}