1116 lines
59 KiB
TypeScript
1116 lines
59 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { newsData, categories } from '@/data/news';
|
||
import type { NewsItem } from '@/data/news';
|
||
import { mediaData } from '@/data/media';
|
||
import type { MediaItem } from '@/data/media';
|
||
import { documentsData, documentCategories, getFileIcon } from '@/data/documents';
|
||
import type { Document } from '@/data/documents';
|
||
import { metroStations, getStatusColor, getStatusText } from '@/data/metroStations';
|
||
import type { MetroStation } from '@/data/metroStations';
|
||
|
||
export default function Dashboard() {
|
||
const router = useRouter();
|
||
const [activeSection, setActiveSection] = useState('overview');
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const token = localStorage.getItem('admin_token');
|
||
if (!token) {
|
||
router.push('/yonetim-paneli-a2m-secure');
|
||
}
|
||
}, [router]);
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('admin_token');
|
||
router.push('/yonetim-paneli-a2m-secure');
|
||
};
|
||
|
||
const stats = [
|
||
{ title: 'Aktif Slider', value: '4', icon: '🎬', color: 'from-[#004B87] to-[#00B4D8]', change: '+1' },
|
||
{ title: 'Toplam Haberler', value: newsData.length.toString(), icon: '📰', color: 'from-[#00B4D8] to-[#0096C7]', change: '+2' },
|
||
{ title: 'Medya İçeriği', value: mediaData.length.toString(), icon: '<27>', color: 'from-[#0096C7] to-[#48CAE4]', change: '+3' },
|
||
{ title: 'Metro İstasyonları', value: metroStations.length.toString(), icon: '<27>', color: 'from-[#48CAE4] to-[#90E0EF]', change: '+2' },
|
||
];
|
||
|
||
const menuItems = [
|
||
{ id: 'overview', label: 'Genel Bakış', icon: '📊' },
|
||
{ id: 'slider', label: 'Slider Yönetimi', icon: '🎬' },
|
||
{ id: 'news', label: 'Haberler', icon: '📰' },
|
||
{ id: 'media', label: 'Medya', icon: '📸' },
|
||
{ id: 'documents', label: 'Belgeler', icon: '📄' },
|
||
{ id: 'metro-line', label: 'Metro Hattı', icon: '🚇' },
|
||
{ id: 'settings', label: 'Ayarlar', icon: '⚙️' },
|
||
];
|
||
|
||
// Slider data
|
||
const [sliderItems, setSliderItems] = useState([
|
||
{
|
||
id: 1,
|
||
title: 'Ankara Metro Altyapı Projelerinde Öncü Çözümler',
|
||
description: 'Ankara Büyükşehir Belediyesi ile birlikte, modern teknoloji ve mühendislik uzmanlığımızla başkentin ulaşım ağını inşa ediyor, geleceğin metro sistemlerini bugünden hayata geçiriyoruz.',
|
||
buttonText: 'Detayları Gör',
|
||
buttonLink: '#proje-detay',
|
||
active: true
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'A2 Metro Hattı İnşaatında Son Aşamaya Gelindi',
|
||
description: '15 istasyonlu A2 Metro Hattı projemiz %75 tamamlandı. 2026 yılında hizmete açılacak modern metro hattımız, günlük 300 bin yolcuya hizmet verecek.',
|
||
buttonText: 'İlerlemeyi İzle',
|
||
buttonLink: '#metro-hatti',
|
||
active: true
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'Çevre Dostu Metro Teknolojileri',
|
||
description: 'Yenilenebilir enerji kaynakları ve sürdürülebilir inşaat teknikleri ile çevre dostu metro projelerine imza atıyoruz. Karbon emisyonunu %40 azaltan yenilikçi çözümlerimiz.',
|
||
buttonText: 'Yeşil Projeler',
|
||
buttonLink: '#cevre',
|
||
active: true
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Güvenli İnşaat, Güvenli Gelecek',
|
||
description: 'ISO 45001 sertifikalı iş güvenliği sistemlerimiz ile 2000+ çalışanımızın güvenliğini en üst düzeyde tutuyoruz. Sıfır iş kazası hedefiyle çalışıyoruz.',
|
||
buttonText: 'Güvenlik Önlemleri',
|
||
buttonLink: '#guvenlik',
|
||
active: true
|
||
}
|
||
]);
|
||
|
||
// News management state
|
||
const [newsList, setNewsList] = useState<NewsItem[]>(newsData);
|
||
const [selectedNewsCategory, setSelectedNewsCategory] = useState('all');
|
||
const [editingNews, setEditingNews] = useState<NewsItem | null>(null);
|
||
const [showNewsForm, setShowNewsForm] = useState(false);
|
||
|
||
const filteredNewsList = selectedNewsCategory === 'all'
|
||
? newsList
|
||
: newsList.filter(news => news.category === selectedNewsCategory);
|
||
|
||
// Media management state
|
||
const [mediaList, setMediaList] = useState<MediaItem[]>(mediaData);
|
||
const [selectedMediaType, setSelectedMediaType] = useState<'all' | 'video' | 'photo'>('all');
|
||
|
||
const filteredMediaList = selectedMediaType === 'all'
|
||
? mediaList
|
||
: mediaList.filter(media => media.type === selectedMediaType);
|
||
|
||
// Documents management state
|
||
const [documentsList, setDocumentsList] = useState<Document[]>(documentsData);
|
||
const [selectedDocCategory, setSelectedDocCategory] = useState('all');
|
||
|
||
const filteredDocsList = selectedDocCategory === 'all'
|
||
? documentsList
|
||
: documentsList.filter(doc => doc.category === selectedDocCategory);
|
||
|
||
// Metro stations management state
|
||
const [stationsList, setStationsList] = useState<MetroStation[]>(metroStations);
|
||
const [selectedStationStatus, setSelectedStationStatus] = useState<'all' | 'completed' | 'in-progress' | 'planned'>('all');
|
||
|
||
const filteredStationsList = selectedStationStatus === 'all'
|
||
? stationsList
|
||
: stationsList.filter(station => station.status === selectedStationStatus);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* Sidebar */}
|
||
<aside className={`fixed top-0 left-0 h-full bg-[#003366] text-white w-64 transform transition-transform duration-300 z-50 ${menuOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0`}>
|
||
<div className="p-6 border-b border-[#004B87]">
|
||
<h1 className="text-2xl font-bold">A2 Metro</h1>
|
||
<p className="text-sm text-[#90E0EF] mt-1">Yönetim Paneli</p>
|
||
</div>
|
||
|
||
<nav className="p-4 space-y-2">
|
||
{menuItems.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
onClick={() => {
|
||
setActiveSection(item.id);
|
||
setMenuOpen(false);
|
||
}}
|
||
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all ${
|
||
activeSection === item.id
|
||
? 'bg-[#004B87] text-white shadow-lg'
|
||
: 'text-[#90E0EF] hover:bg-[#004B87]/50'
|
||
}`}
|
||
>
|
||
<span className="text-2xl">{item.icon}</span>
|
||
<span className="font-medium">{item.label}</span>
|
||
</button>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-[#004B87]">
|
||
<button
|
||
onClick={handleLogout}
|
||
className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-[#90E0EF] hover:bg-red-500/20 hover:text-red-300 transition-all"
|
||
>
|
||
<span className="text-2xl">🚪</span>
|
||
<span className="font-medium">Çıkış Yap</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
{/* Main Content */}
|
||
<div className="lg:ml-64">
|
||
{/* Header */}
|
||
<header className="bg-white shadow-sm sticky top-0 z-40">
|
||
<div className="flex items-center justify-between px-4 py-4 lg:px-8">
|
||
<button
|
||
onClick={() => setMenuOpen(!menuOpen)}
|
||
className="lg:hidden text-[#003366] p-2"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
|
||
<h2 className="text-xl font-bold text-[#003366]">
|
||
{menuItems.find(item => item.id === activeSection)?.label || 'Dashboard'}
|
||
</h2>
|
||
|
||
<div className="flex items-center space-x-4">
|
||
<button className="relative p-2 text-gray-600 hover:text-[#004B87] transition-colors">
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||
</svg>
|
||
<span className="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
|
||
</button>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-10 h-10 bg-linear-to-br from-[#004B87] to-[#00B4D8] rounded-full flex items-center justify-center">
|
||
<span className="text-white font-bold">A</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Dashboard Content */}
|
||
<main className="p-4 lg:p-8">
|
||
{activeSection === 'overview' && (
|
||
<>
|
||
{/* Stats Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
|
||
{stats.map((stat, index) => (
|
||
<div key={index} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition-shadow">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className={`w-12 h-12 bg-linear-to-br ${stat.color} rounded-lg flex items-center justify-center text-2xl`}>
|
||
{stat.icon}
|
||
</div>
|
||
<span className="text-green-500 text-sm font-semibold">{stat.change}</span>
|
||
</div>
|
||
<h3 className="text-gray-600 text-sm font-medium mb-1">{stat.title}</h3>
|
||
<p className="text-3xl font-bold text-[#003366]">{stat.value}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Charts Section */}
|
||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<h3 className="text-lg font-bold text-[#003366] mb-4">İnşaat İlerleme Durumu</h3>
|
||
<div className="space-y-4">
|
||
{[
|
||
{ name: 'Temeller', progress: 100, color: 'bg-green-500' },
|
||
{ name: 'Yapı İnşaatı', progress: 75, color: 'bg-[#00B4D8]' },
|
||
{ name: 'Elektrik', progress: 60, color: 'bg-[#0096C7]' },
|
||
{ name: 'Ray Döşeme', progress: 40, color: 'bg-yellow-500' },
|
||
{ name: 'İç Mekan', progress: 25, color: 'bg-orange-500' },
|
||
].map((item, index) => (
|
||
<div key={index}>
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm font-medium text-gray-700">{item.name}</span>
|
||
<span className="text-sm font-semibold text-[#003366]">{item.progress}%</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||
<div className={`${item.color} h-2 rounded-full transition-all duration-500`} style={{ width: `${item.progress}%` }}></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<h3 className="text-lg font-bold text-[#003366] mb-4">Son Aktiviteler</h3>
|
||
<div className="space-y-4">
|
||
{[
|
||
{ action: 'Yeni haber eklendi', time: '5 dakika önce', icon: '📰', color: 'bg-blue-100 text-blue-600' },
|
||
{ action: 'Medya içeriği güncellendi', time: '1 saat önce', icon: '📸', color: 'bg-purple-100 text-purple-600' },
|
||
{ action: 'Belge yüklendi', time: '2 saat önce', icon: '📄', color: 'bg-green-100 text-green-600' },
|
||
{ action: 'İstasyon durumu güncellendi', time: '3 saat önce', icon: '🚇', color: 'bg-yellow-100 text-yellow-600' },
|
||
].map((activity, index) => (
|
||
<div key={index} className="flex items-start space-x-3">
|
||
<div className={`w-10 h-10 ${activity.color} rounded-lg flex items-center justify-center shrink-0`}>
|
||
{activity.icon}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium text-gray-900">{activity.action}</p>
|
||
<p className="text-xs text-gray-500">{activity.time}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Actions */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<h3 className="text-lg font-bold text-[#003366] mb-4">Hızlı İşlemler</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{[
|
||
{ label: 'Haber Ekle', icon: '➕', color: 'from-[#004B87] to-[#00B4D8]' },
|
||
{ label: 'Medya Yükle', icon: '📤', color: 'from-[#00B4D8] to-[#0096C7]' },
|
||
{ label: 'Belge Yükle', icon: '📁', color: 'from-[#0096C7] to-[#48CAE4]' },
|
||
{ label: 'Rapor Oluştur', icon: '📊', color: 'from-[#48CAE4] to-[#90E0EF]' },
|
||
].map((action, index) => (
|
||
<button
|
||
key={index}
|
||
className={`bg-linear-to-br ${action.color} text-white p-6 rounded-xl hover:shadow-lg transition-all duration-300 hover:scale-105`}
|
||
>
|
||
<div className="text-4xl mb-2">{action.icon}</div>
|
||
<div className="font-semibold text-sm">{action.label}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Slider Management Section */}
|
||
{activeSection === 'slider' && (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-[#003366]">Slider Yönetimi</h3>
|
||
<p className="text-gray-600 mt-1">Ana sayfa hero slider içeriklerini yönetin</p>
|
||
</div>
|
||
<button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
<span>Yeni Slide Ekle</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Slider Items Grid */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{sliderItems.map((slide, index) => (
|
||
<div key={slide.id} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition-all">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-12 h-12 bg-linear-to-br from-[#004B87] to-[#00B4D8] rounded-lg flex items-center justify-center text-white font-bold text-lg">
|
||
{index + 1}
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-[#003366] text-sm">Slide #{slide.id}</h4>
|
||
<span className={`text-xs px-2 py-1 rounded-full ${slide.active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-600'}`}>
|
||
{slide.active ? '✓ Aktif' : '○ Pasif'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex space-x-2">
|
||
<button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
</button>
|
||
<button className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div>
|
||
<label className="text-xs font-semibold text-gray-500 uppercase">Başlık</label>
|
||
<p className="text-sm font-semibold text-[#003366] mt-1">{slide.title}</p>
|
||
</div>
|
||
<div>
|
||
<label className="text-xs font-semibold text-gray-500 uppercase">Açıklama</label>
|
||
<p className="text-sm text-gray-600 mt-1 line-clamp-2">{slide.description}</p>
|
||
</div>
|
||
<div className="flex items-center justify-between pt-3 border-t">
|
||
<div>
|
||
<label className="text-xs font-semibold text-gray-500 uppercase">Buton Metni</label>
|
||
<p className="text-sm font-medium text-[#00B4D8]">{slide.buttonText}</p>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<button className="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors">
|
||
Sırayı Değiştir
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Info Box */}
|
||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
|
||
<div className="flex items-start space-x-3">
|
||
<div className="text-blue-500 text-2xl">ℹ️</div>
|
||
<div>
|
||
<h4 className="font-bold text-blue-900 mb-2">Slider Kullanım Bilgisi</h4>
|
||
<ul className="text-sm text-blue-700 space-y-1">
|
||
<li>• Slider otomatik olarak 5 saniyede bir değişir</li>
|
||
<li>• Maksimum 4 slide önerilir (mevcut: {sliderItems.length}/4)</li>
|
||
<li>• Başlık 80 karakter, açıklama 200 karakter ile sınırlıdır</li>
|
||
<li>• Değişiklikler anında ana sayfaya yansır</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* News Management Section */}
|
||
{activeSection === 'news' && (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-[#003366]">Haberler Yönetimi</h3>
|
||
<p className="text-gray-600 mt-1">Haberler ve duyuruları yönetin, düzenleyin</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowNewsForm(true)}
|
||
className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
<span>Yeni Haber Ekle</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Category Filter */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-wrap gap-3">
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
onClick={() => setSelectedNewsCategory(category.id)}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedNewsCategory === category.id
|
||
? 'bg-[#00B4D8] text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
{category.icon} {category.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* News Table */}
|
||
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead className="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Haber
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Kategori
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Tarih
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Yazar
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Durum
|
||
</th>
|
||
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
İşlemler
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-200">
|
||
{filteredNewsList.map((news) => (
|
||
<tr key={news.id} className="hover:bg-gray-50 transition-colors">
|
||
<td className="px-6 py-4">
|
||
<div className="flex items-center space-x-3">
|
||
<img
|
||
src={news.image}
|
||
alt={news.title}
|
||
className="w-16 h-16 rounded-lg object-cover"
|
||
/>
|
||
<div className="max-w-md">
|
||
<p className="font-semibold text-[#003366] line-clamp-1">{news.title}</p>
|
||
<p className="text-sm text-gray-500 line-clamp-1">{news.summary}</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<span className="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">
|
||
{categories.find(c => c.id === news.category)?.name}
|
||
</span>
|
||
</td>
|
||
<td className="px-6 py-4 text-sm text-gray-600">
|
||
{news.date}
|
||
</td>
|
||
<td className="px-6 py-4 text-sm text-gray-600">
|
||
{news.author}
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
{news.featured ? (
|
||
<span className="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
|
||
⭐ Ana Sayfa
|
||
</span>
|
||
) : (
|
||
<span className="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-600">
|
||
Yayında
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4 text-right">
|
||
<div className="flex items-center justify-end space-x-2">
|
||
<button
|
||
onClick={() => setEditingNews(news)}
|
||
className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors"
|
||
title="Düzenle"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||
title="Sil"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Toplam Haber</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{newsList.length}</p>
|
||
</div>
|
||
<div className="text-4xl">📰</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Ana Sayfada</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{newsList.filter(n => n.featured).length}</p>
|
||
</div>
|
||
<div className="text-4xl">⭐</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">İnşaat Haberleri</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{newsList.filter(n => n.category === 'construction').length}</p>
|
||
</div>
|
||
<div className="text-4xl">🏗️</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Duyurular</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{newsList.filter(n => n.category === 'announcements').length}</p>
|
||
</div>
|
||
<div className="text-4xl">📢</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Media Management Section */}
|
||
{activeSection === 'media' && (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-[#003366]">Medya Galerisi Yönetimi</h3>
|
||
<p className="text-gray-600 mt-1">Video ve fotoğraf içeriklerini yönetin</p>
|
||
</div>
|
||
<button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
<span>Yeni Medya Ekle</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Type Filter */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-wrap gap-3">
|
||
<button
|
||
onClick={() => setSelectedMediaType('all')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedMediaType === 'all'
|
||
? 'bg-[#00B4D8] text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
📁 Tümü
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedMediaType('video')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedMediaType === 'video'
|
||
? 'bg-[#00B4D8] text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
🎥 Videolar
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedMediaType('photo')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedMediaType === 'photo'
|
||
? 'bg-[#00B4D8] text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
📸 Fotoğraflar
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Media Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredMediaList.map((media) => (
|
||
<div key={media.id} className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all">
|
||
<div className="relative h-48">
|
||
<img src={media.thumbnail} alt={media.title} className="w-full h-full object-cover" />
|
||
<div className="absolute top-3 left-3">
|
||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||
media.type === 'video' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'
|
||
}`}>
|
||
{media.type === 'video' ? '🎥 Video' : '📸 Foto'}
|
||
</span>
|
||
</div>
|
||
{media.duration && (
|
||
<div className="absolute bottom-3 right-3 bg-black/70 text-white px-2 py-1 rounded text-xs font-semibold">
|
||
{media.duration}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="p-4">
|
||
<h4 className="font-bold text-[#003366] mb-2 line-clamp-2">{media.title}</h4>
|
||
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{media.description}</p>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-gray-500">{media.date}</span>
|
||
<div className="flex space-x-2">
|
||
<button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
</button>
|
||
<button className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Toplam Medya</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{mediaList.length}</p>
|
||
</div>
|
||
<div className="text-4xl">📁</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Videolar</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{mediaList.filter(m => m.type === 'video').length}</p>
|
||
</div>
|
||
<div className="text-4xl">🎥</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Fotoğraflar</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{mediaList.filter(m => m.type === 'photo').length}</p>
|
||
</div>
|
||
<div className="text-4xl">📸</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Documents Management Section */}
|
||
{activeSection === 'documents' && (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-[#003366]">Belgeler Yönetimi</h3>
|
||
<p className="text-gray-600 mt-1">Proje belgelerini ve dökümanları yönetin</p>
|
||
</div>
|
||
<button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
<span>Yeni Belge Ekle</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Category Filter */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-wrap gap-3">
|
||
{documentCategories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
onClick={() => setSelectedDocCategory(category.id)}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedDocCategory === category.id
|
||
? 'bg-[#00B4D8] text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
{category.icon} {category.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Documents Table */}
|
||
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead className="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Belge
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Kategori
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Tarih
|
||
</th>
|
||
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
Boyut
|
||
</th>
|
||
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||
İşlemler
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-200">
|
||
{filteredDocsList.map((doc) => (
|
||
<tr key={doc.id} className="hover:bg-gray-50 transition-colors">
|
||
<td className="px-6 py-4">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="text-3xl">{getFileIcon(doc.type)}</div>
|
||
<div>
|
||
<p className="font-semibold text-[#003366]">{doc.title}</p>
|
||
<p className="text-sm text-gray-500 line-clamp-1">{doc.description}</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<span className="px-3 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-700">
|
||
{documentCategories.find(c => c.id === doc.category)?.name}
|
||
</span>
|
||
</td>
|
||
<td className="px-6 py-4 text-sm text-gray-600">
|
||
{doc.date}
|
||
</td>
|
||
<td className="px-6 py-4 text-sm text-gray-600">
|
||
{doc.size}
|
||
</td>
|
||
<td className="px-6 py-4 text-right">
|
||
<div className="flex items-center justify-end space-x-2">
|
||
<button className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="İndir">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||
</svg>
|
||
</button>
|
||
<button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors" title="Düzenle">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
</button>
|
||
<button className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Sil">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="text-3xl mb-2">📋</div>
|
||
<p className="text-sm text-gray-600">Toplam</p>
|
||
<p className="text-xl font-bold text-[#003366]">{documentsList.length}</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="text-3xl mb-2">📄</div>
|
||
<p className="text-sm text-gray-600">İhale</p>
|
||
<p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'ihale').length}</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="text-3xl mb-2">📐</div>
|
||
<p className="text-sm text-gray-600">Teknik</p>
|
||
<p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'teknik').length}</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="text-3xl mb-2">🌱</div>
|
||
<p className="text-sm text-gray-600">Çevresel</p>
|
||
<p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'cevresel').length}</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="text-3xl mb-2">📊</div>
|
||
<p className="text-sm text-gray-600">Raporlar</p>
|
||
<p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'raporlar').length}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Metro Line Management Section */}
|
||
{activeSection === 'metro-line' && (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-[#003366]">Metro Hattı İstasyonları</h3>
|
||
<p className="text-gray-600 mt-1">İstasyon durumlarını ve ilerlemeyi yönetin</p>
|
||
</div>
|
||
<button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
<span>Yeni İstasyon Ekle</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Status Filter */}
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex flex-wrap gap-3">
|
||
<button
|
||
onClick={() => setSelectedStationStatus('all')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedStationStatus === 'all'
|
||
? 'bg-[#00B4D8] text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
📋 Tümü
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedStationStatus('completed')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedStationStatus === 'completed'
|
||
? 'bg-green-500 text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
✅ Tamamlandı
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedStationStatus('in-progress')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedStationStatus === 'in-progress'
|
||
? 'bg-blue-500 text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
🔄 Devam Ediyor
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedStationStatus('planned')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
selectedStationStatus === 'planned'
|
||
? 'bg-yellow-500 text-white shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
📅 Planlanıyor
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stations Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{filteredStationsList.map((station) => (
|
||
<div key={station.id} className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all">
|
||
{station.image && (
|
||
<div className="h-40 overflow-hidden">
|
||
<img src={station.image} alt={station.name} className="w-full h-full object-cover" />
|
||
</div>
|
||
)}
|
||
<div className="p-6">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div>
|
||
<h4 className="text-xl font-bold text-[#003366] mb-1">{station.name}</h4>
|
||
<span className={`inline-block px-3 py-1 text-xs font-semibold rounded-full text-white ${getStatusColor(station.status)}`}>
|
||
{getStatusText(station.status)}
|
||
</span>
|
||
</div>
|
||
<div className="flex space-x-2">
|
||
<button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Progress Bar */}
|
||
<div className="mb-4">
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm font-medium text-gray-700">İlerleme</span>
|
||
<span className="text-sm font-bold text-[#003366]">{station.progress}%</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-3">
|
||
<div
|
||
className={`h-3 rounded-full ${getStatusColor(station.status)}`}
|
||
style={{ width: `${station.progress}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Details */}
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-gray-600">📅 Başlangıç:</span>
|
||
<span className="font-semibold">{station.startDate}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-gray-600">🎯 Bitiş:</span>
|
||
<span className="font-semibold">{station.expectedCompletion}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-gray-600">👥 Günlük Kapasite:</span>
|
||
<span className="font-semibold">{station.dailyCapacity} yolcu</span>
|
||
</div>
|
||
{station.connections && station.connections.length > 0 && (
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-gray-600">🔄 Aktarma:</span>
|
||
<div className="flex gap-1">
|
||
{station.connections.map((conn, i) => (
|
||
<span key={i} className="px-2 py-1 bg-[#00B4D8] text-white text-xs rounded-full">
|
||
{conn}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="mt-4 pt-4 border-t">
|
||
<p className="text-xs font-semibold text-gray-600 mb-2">ÖZELLİKLER:</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{station.features.map((feature, i) => (
|
||
<span key={i} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
|
||
{feature}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Toplam İstasyon</p>
|
||
<p className="text-2xl font-bold text-[#003366] mt-1">{stationsList.length}</p>
|
||
</div>
|
||
<div className="text-4xl">🚇</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Tamamlanan</p>
|
||
<p className="text-2xl font-bold text-green-600 mt-1">{stationsList.filter(s => s.status === 'completed').length}</p>
|
||
</div>
|
||
<div className="text-4xl">✅</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Devam Eden</p>
|
||
<p className="text-2xl font-bold text-blue-600 mt-1">{stationsList.filter(s => s.status === 'in-progress').length}</p>
|
||
</div>
|
||
<div className="text-4xl">🔄</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-600">Planlanan</p>
|
||
<p className="text-2xl font-bold text-yellow-600 mt-1">{stationsList.filter(s => s.status === 'planned').length}</p>
|
||
</div>
|
||
<div className="text-4xl">📅</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Settings Section */}
|
||
{activeSection === 'settings' && (
|
||
<div className="space-y-6">
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<h3 className="text-2xl font-bold text-[#003366] mb-6">Sistem Ayarları</h3>
|
||
|
||
<div className="space-y-6">
|
||
{/* Site Settings */}
|
||
<div className="border-b pb-6">
|
||
<h4 className="text-lg font-semibold text-[#004B87] mb-4 flex items-center space-x-2">
|
||
<span>🌐</span>
|
||
<span>Site Ayarları</span>
|
||
</h4>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Site Başlığı</label>
|
||
<input type="text" defaultValue="A2 Metro Hattı Projesi" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent" />
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Site Açıklaması</label>
|
||
<textarea rows={3} defaultValue="Ankara Büyükşehir Belediyesi A2 Metro Hattı İnşaat Projesi" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Admin Settings */}
|
||
<div className="border-b pb-6">
|
||
<h4 className="text-lg font-semibold text-[#004B87] mb-4 flex items-center space-x-2">
|
||
<span>👤</span>
|
||
<span>Admin Ayarları</span>
|
||
</h4>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Kullanıcı Adı</label>
|
||
<input type="text" defaultValue="admin" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent" />
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Yeni Şifre</label>
|
||
<input type="password" placeholder="Boş bırakın değiştirmek istemiyorsanız" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Notification Settings */}
|
||
<div className="border-b pb-6">
|
||
<h4 className="text-lg font-semibold text-[#004B87] mb-4 flex items-center space-x-2">
|
||
<span>🔔</span>
|
||
<span>Bildirim Ayarları</span>
|
||
</h4>
|
||
<div className="space-y-3">
|
||
<label className="flex items-center space-x-3">
|
||
<input type="checkbox" defaultChecked className="w-5 h-5 text-[#00B4D8] rounded focus:ring-[#00B4D8]" />
|
||
<span className="text-sm text-gray-700">Yeni haber eklendiğinde bildir</span>
|
||
</label>
|
||
<label className="flex items-center space-x-3">
|
||
<input type="checkbox" defaultChecked className="w-5 h-5 text-[#00B4D8] rounded focus:ring-[#00B4D8]" />
|
||
<span className="text-sm text-gray-700">Belge yüklendiğinde bildir</span>
|
||
</label>
|
||
<label className="flex items-center space-x-3">
|
||
<input type="checkbox" className="w-5 h-5 text-[#00B4D8] rounded focus:ring-[#00B4D8]" />
|
||
<span className="text-sm text-gray-700">Günlük rapor gönder</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Save Button */}
|
||
<div className="flex justify-end space-x-3">
|
||
<button className="px-6 py-3 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all">
|
||
İptal
|
||
</button>
|
||
<button className="px-6 py-3 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all">
|
||
Değişiklikleri Kaydet
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeSection !== 'overview' && activeSection !== 'slider' && activeSection !== 'news' && activeSection !== 'media' && activeSection !== 'documents' && activeSection !== 'metro-line' && activeSection !== 'settings' && (
|
||
<div className="bg-white rounded-xl shadow-sm p-8 text-center">
|
||
<div className="text-6xl mb-4">
|
||
{menuItems.find(item => item.id === activeSection)?.icon}
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-[#003366] mb-2">
|
||
{menuItems.find(item => item.id === activeSection)?.label}
|
||
</h3>
|
||
<p className="text-gray-600">Bu bölüm yakında geliştirilecek...</p>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
|
||
{/* Mobile Overlay */}
|
||
{menuOpen && (
|
||
<div
|
||
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
||
onClick={() => setMenuOpen(false)}
|
||
></div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|