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
src/components/layout/Sidebar.tsx
+34 -26
View File
@@ -2,6 +2,7 @@
import { useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import {
HomeIcon,
@@ -16,7 +17,7 @@ import {
const navigation = [
{ name: 'Dashboard', href: '/', icon: HomeIcon },
{ name: 'Çalışanlar', href: '/employees', icon: UsersIcon },
{ name: 'Personeller', href: '/employees', icon: UsersIcon },
{ name: 'İzinler', href: '/leave-requests', icon: CalendarDaysIcon },
{ name: 'Şirketler', href: '/companies', icon: BuildingOfficeIcon },
{ name: 'Ayarlar', href: '/settings', icon: Cog6ToothIcon },
@@ -29,16 +30,18 @@ export function Sidebar() {
return (
<>
{/* Mobile sidebar trigger */}
<div className="lg:hidden fixed top-0 left-0 w-full h-16 bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 flex items-center px-4 z-40">
<div className="lg:hidden fixed top-0 left-0 w-full h-16 bg-white dark:bg-zinc-900 border-b border-slate-200 dark:border-zinc-800 flex items-center px-4 z-40">
<button
className="p-2 text-gray-500 hover:text-gray-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 rounded-md"
className="p-2 text-slate-500 hover:text-slate-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded-lg"
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Menüyü Aç</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
<div className="ml-4 font-bold text-xl dark:text-white text-gray-900 tracking-tight">
HRMS
<div className="ml-4 flex items-center gap-3 group">
<Image src="/logo.png" alt="Abisena Logo" width={120} height={40} className="h-8 w-auto object-contain" />
<div className="h-4 w-px bg-gray-300 dark:bg-zinc-700 mx-1" />
<span className="text-[10px] font-bold text-gray-500 dark:text-zinc-400 uppercase tracking-tighter leading-tight">Personel<br/>Sistemi</span>
</div>
</div>
@@ -59,11 +62,11 @@ export function Sidebar() {
</button>
</div>
{/* Mobile Sidebar Content */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white dark:bg-zinc-950 px-6 pb-4">
<div className="flex h-16 shrink-0 items-center">
<div className="font-bold text-2xl dark:text-white text-gray-900 tracking-tight flex items-center gap-2">
<BuildingOfficeIcon className="w-8 h-8 text-blue-600" />
HRMS
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-[#173363] px-6 pb-4 shadow-xl">
<div className="flex h-20 shrink-0 items-center border-b border-gray-100 dark:border-zinc-900">
<div className="flex flex-col gap-1">
<Image src="/logo.png" alt="Abisena Logo" width={140} height={45} className="h-10 w-auto object-contain" />
<span className="text-[10px] font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-[0.2em] ml-1">TAKİP SİSTEMİ</span>
</div>
</div>
<nav className="flex flex-1 flex-col">
@@ -78,13 +81,13 @@ export function Sidebar() {
className={`
group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold
${pathname === item.href
? 'bg-gray-50 dark:bg-zinc-900 text-blue-600 dark:text-blue-400'
: 'text-gray-700 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-zinc-900/50'
? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400'
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-50 dark:hover:bg-zinc-800/50'
}
`}
>
<item.icon
className={`h-6 w-6 shrink-0 ${pathname === item.href ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400'}`}
className={`h-6 w-6 shrink-0 ${pathname === item.href ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400'}`}
aria-hidden="true"
/>
{item.name}
@@ -103,19 +106,24 @@ export function Sidebar() {
{/* Desktop Sidebar */}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200/50 dark:border-zinc-800/50 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl px-6 pb-4">
<div className="flex h-16 shrink-0 items-center mt-4">
<div className="font-bold text-2xl dark:text-white text-gray-900 tracking-tight flex items-center gap-2 group cursor-pointer">
<div className="p-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-lg shadow-blue-500/20 group-hover:scale-110 transition-transform duration-300">
<BuildingOfficeIcon className="w-6 h-6 text-white" />
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-[#173363] px-6 pb-4 shadow-xl">
<div className="flex h-24 shrink-0 items-center mt-6 mb-2 border-b border-gray-100/50 dark:border-zinc-900/50">
<div className="flex flex-col items-start gap-2 group cursor-pointer w-full">
<div className="p-2 transition-all duration-300 group-hover:brightness-110">
<Image src="/logo.png" alt="Abisena Logo" width={180} height={60} className="h-12 w-auto object-contain" priority />
</div>
<div className="px-2 w-full">
<div className="h-px w-full bg-gradient-to-r from-gray-200 via-gray-100 to-transparent dark:from-zinc-800 dark:via-zinc-900 dark:to-transparent mb-2" />
<span className="text-[10px] font-black text-gray-400 dark:text-zinc-500 tracking-[0.3em] uppercase ml-1 block">Personel Takip Sistemi</span>
</div>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900 dark:from-white dark:via-gray-300 dark:to-white">HRMS</span>
</div>
</div>
<nav className="flex flex-1 flex-col">
<ul role="list" className="flex flex-1 flex-col gap-y-7">
<li>
<div className="text-[10px] font-bold tracking-widest leading-6 text-gray-400 dark:text-zinc-500 mb-4 uppercase">YÖNETİM PANELİ</div>
<div className="text-[10px] font-bold tracking-widest leading-6 text-slate-400 mb-4 uppercase">YÖNETİM PANELİ</div>
<ul role="list" className="-mx-2 space-y-2">
{navigation.map((item) => (
<li key={item.name}>
@@ -124,18 +132,18 @@ export function Sidebar() {
className={`
group flex items-center gap-x-3 rounded-xl p-3 text-sm leading-6 font-semibold transition-all duration-300 relative overflow-hidden
${pathname === item.href
? 'bg-blue-600 shadow-md shadow-blue-600/20 text-white translate-x-1'
: 'text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/5'
? 'bg-[#CE0515] text-white shadow-lg shadow-red-900/20'
: 'text-slate-300 hover:text-white hover:bg-white/5'
}
`}
>
<item.icon
className={`h-5 w-5 shrink-0 transition-colors duration-300 ${pathname === item.href ? 'text-white' : 'text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400'}`}
className={`h-5 w-5 shrink-0 transition-colors duration-200 ${pathname === item.href ? 'text-white' : 'text-slate-400 group-hover:text-white'}`}
aria-hidden="true"
/>
{item.name}
{pathname === item.href && (
<div className="absolute left-0 w-1 h-6 bg-white rounded-full opacity-50" />
<div className="ml-auto w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
)}
</Link>
</li>
@@ -146,10 +154,10 @@ export function Sidebar() {
<form action="/auth/signout" method="post" className="-mx-2 pb-4">
<button
type="submit"
className="group flex w-full items-center gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 text-gray-500 hover:text-red-600 dark:text-zinc-400 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/5 transition-all duration-300"
className="group flex w-full items-center gap-x-3 rounded-2xl p-3 text-sm font-bold leading-6 text-slate-500 hover:text-rose-600 dark:text-zinc-400 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/5 transition-all duration-300 active:scale-95"
>
<ArrowRightOnRectangleIcon
className="h-5 w-5 shrink-0 text-gray-400 group-hover:text-red-500 transition-colors duration-300"
className="h-5 w-5 shrink-0 text-slate-400 group-hover:text-rose-500 transition-colors duration-300"
aria-hidden="true"
/>
Güvenli Çıkış