2077 lines
100 KiB
TypeScript
2077 lines
100 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { dataStore, type SliderItem } from '@/lib/dataStore';
|
||
import type { NewsItem } from '@/data/news';
|
||
import type { MediaItem } from '@/data/media';
|
||
import type { Document } from '@/data/documents';
|
||
import type { MetroStation } from '@/data/metroStations';
|
||
|
||
export default function Dashboard() {
|
||
const router = useRouter();
|
||
const [activeSection, setActiveSection] = useState('overview');
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
|
||
// Gerçek veriler için state'ler
|
||
const [sliderItems, setSliderItems] = useState<SliderItem[]>([]);
|
||
const [newsItems, setNewsItems] = useState<NewsItem[]>([]);
|
||
const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
|
||
const [documents, setDocuments] = useState<Document[]>([]);
|
||
const [metroStations, setMetroStations] = useState<MetroStation[]>([]);
|
||
|
||
useEffect(() => {
|
||
const token = localStorage.getItem('admin_token');
|
||
if (!token) {
|
||
router.push('/yonetim-paneli-a2m-secure');
|
||
return;
|
||
}
|
||
|
||
// Verileri yükle
|
||
loadData();
|
||
}, [router]);
|
||
|
||
const loadData = () => {
|
||
setSliderItems(dataStore.getSlider());
|
||
setNewsItems(dataStore.getNews());
|
||
setMediaItems(dataStore.getMedia());
|
||
setDocuments(dataStore.getDocuments());
|
||
setMetroStations(dataStore.getMetroStations());
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('admin_token');
|
||
router.push('/yonetim-paneli-a2m-secure');
|
||
};
|
||
|
||
const stats = [
|
||
{ title: 'Aktif Slider', value: sliderItems.filter(s => s.active).length.toString(), icon: '🎬', color: 'from-[#004B87] to-[#00B4D8]', change: '+1' },
|
||
{ title: 'Toplam Haberler', value: newsItems.length.toString(), icon: '📰', color: 'from-[#00B4D8] to-[#0096C7]', change: '+2' },
|
||
{ title: 'Medya İçeriği', value: mediaItems.length.toString(), icon: '📸', color: 'from-[#0096C7] to-[#48CAE4]', change: '+3' },
|
||
{ title: 'Metro İstasyonları', value: metroStations.length.toString(), icon: '🚇', 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 management functions
|
||
const toggleSlideActive = (id: number) => {
|
||
const updated = sliderItems.map(item =>
|
||
item.id === id ? { ...item, active: !item.active } : item
|
||
);
|
||
setSliderItems(updated);
|
||
dataStore.setSlider(updated);
|
||
};
|
||
|
||
const updateSlide = (id: number, updates: Partial<SliderItem>) => {
|
||
const updated = sliderItems.map(item =>
|
||
item.id === id ? { ...item, ...updates } : item
|
||
);
|
||
setSliderItems(updated);
|
||
dataStore.setSlider(updated);
|
||
};
|
||
|
||
// News management functions
|
||
const handleDeleteNews = (id: number) => {
|
||
if (confirm('Bu haberi silmek istediğinizden emin misiniz?')) {
|
||
dataStore.deleteNews(id);
|
||
loadData();
|
||
}
|
||
};
|
||
|
||
const handleToggleFeatured = (id: number) => {
|
||
const news = newsItems.find(n => n.id === id);
|
||
if (news) {
|
||
dataStore.updateNews(id, { featured: !news.featured });
|
||
loadData();
|
||
}
|
||
};
|
||
|
||
// Media management functions
|
||
const handleDeleteMedia = (id: number) => {
|
||
if (confirm('Bu medya içeriğini silmek istediğinizden emin misiniz?')) {
|
||
dataStore.deleteMedia(id);
|
||
loadData();
|
||
}
|
||
};
|
||
|
||
// Document management functions
|
||
const handleDeleteDocument = (id: number) => {
|
||
if (confirm('Bu belgeyi silmek istediğinizden emin misiniz?')) {
|
||
dataStore.deleteDocument(id);
|
||
loadData();
|
||
}
|
||
};
|
||
|
||
// Metro station update function
|
||
const handleUpdateStation = (id: number, updates: Partial<MetroStation>) => {
|
||
dataStore.updateStation(id, updates);
|
||
loadData();
|
||
};
|
||
|
||
// Categories
|
||
const categories = [
|
||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
||
{ id: 'construction', name: 'İnşaat', icon: '🏗️' },
|
||
{ id: 'announcement', name: 'Duyuru', icon: '📢' },
|
||
{ id: 'event', name: 'Etkinlik', icon: '🎉' },
|
||
];
|
||
|
||
const documentCategories = [
|
||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
||
{ id: 'technical', name: 'Teknik', icon: '⚙️' },
|
||
{ id: 'administrative', name: 'İdari', icon: '📊' },
|
||
{ id: 'legal', name: 'Hukuki', icon: '⚖️' },
|
||
{ id: 'financial', name: 'Mali', icon: '💰' },
|
||
];
|
||
|
||
// Form states
|
||
const [selectedNewsCategory, setSelectedNewsCategory] = useState('all');
|
||
const [editingNews, setEditingNews] = useState<NewsItem | null>(null);
|
||
const [showNewsForm, setShowNewsForm] = useState(false);
|
||
const [selectedMediaType, setSelectedMediaType] = useState<'all' | 'video' | 'photo'>('all');
|
||
const [selectedDocCategory, setSelectedDocCategory] = useState('all');
|
||
|
||
// Filtered lists
|
||
const filteredNewsList = selectedNewsCategory === 'all'
|
||
? newsItems
|
||
: newsItems.filter(news => news.category === selectedNewsCategory);
|
||
|
||
const filteredMediaList = selectedMediaType === 'all'
|
||
? mediaItems
|
||
: mediaItems.filter(media => media.type === selectedMediaType);
|
||
|
||
const filteredDocsList = selectedDocCategory === 'all'
|
||
? documents
|
||
: documents.filter(doc => doc.category === selectedDocCategory);
|
||
|
||
// Station filtering and selection
|
||
const [selectedStationStatus, setSelectedStationStatus] = useState<'all' | 'completed' | 'in-progress' | 'planned'>('all');
|
||
const [selectedStationId, setSelectedStationId] = useState<number | null>(null);
|
||
|
||
// Edit modals
|
||
const [editingSlide, setEditingSlide] = useState<SliderItem | null>(null);
|
||
const [showSlideModal, setShowSlideModal] = useState(false);
|
||
const [editingNewsItem, setEditingNewsItem] = useState<NewsItem | null>(null);
|
||
const [showNewsModal, setShowNewsModal] = useState(false);
|
||
const [editingMediaItem, setEditingMediaItem] = useState<MediaItem | null>(null);
|
||
const [showMediaModal, setShowMediaModal] = useState(false);
|
||
const [editingDocument, setEditingDocument] = useState<Document | null>(null);
|
||
const [showDocumentModal, setShowDocumentModal] = useState(false);
|
||
const [editingStation, setEditingStation] = useState<MetroStation | null>(null);
|
||
const [showStationModal, setShowStationModal] = useState(false);
|
||
|
||
const filteredStationsList = selectedStationStatus === 'all'
|
||
? metroStations
|
||
: metroStations.filter(station => station.status === selectedStationStatus);
|
||
|
||
const handleStationClick = (stationId: number) => {
|
||
const newSelectedId = stationId === selectedStationId ? null : stationId;
|
||
setSelectedStationId(newSelectedId);
|
||
|
||
// Ana sayfadaki metro animasyonu için seçili istasyonu kaydet
|
||
if (newSelectedId !== null) {
|
||
localStorage.setItem('metro_selected_station', newSelectedId.toString());
|
||
} else {
|
||
localStorage.removeItem('metro_selected_station');
|
||
}
|
||
};
|
||
|
||
// Slider edit handlers
|
||
const handleEditSlide = (slide: SliderItem) => {
|
||
setEditingSlide(slide);
|
||
setShowSlideModal(true);
|
||
};
|
||
|
||
const handleSaveSlide = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (editingSlide) {
|
||
const isNew = !sliderItems.find(s => s.id === editingSlide.id);
|
||
if (isNew) {
|
||
// Yeni slider ekle
|
||
const updated = [...sliderItems, editingSlide];
|
||
setSliderItems(updated);
|
||
dataStore.setSlider(updated);
|
||
} else {
|
||
// Mevcut slider'ı güncelle
|
||
updateSlide(editingSlide.id, editingSlide);
|
||
}
|
||
setShowSlideModal(false);
|
||
setEditingSlide(null);
|
||
}
|
||
};
|
||
|
||
const handleAddSlide = () => {
|
||
const newSlide: SliderItem = {
|
||
id: Math.max(...sliderItems.map(s => s.id), 0) + 1,
|
||
title: '',
|
||
description: '',
|
||
buttonText: 'Detaylı Bilgi',
|
||
buttonLink: '#',
|
||
image: '',
|
||
active: false
|
||
};
|
||
setEditingSlide(newSlide);
|
||
setShowSlideModal(true);
|
||
};
|
||
|
||
const handleDeleteSlide = (id: number) => {
|
||
if (confirm('Bu slider\'ı silmek istediğinizden emin misiniz?')) {
|
||
const updated = sliderItems.filter(s => s.id !== id);
|
||
setSliderItems(updated);
|
||
dataStore.setSlider(updated);
|
||
}
|
||
};
|
||
|
||
// News edit handlers
|
||
const handleAddNews = () => {
|
||
const newNews: NewsItem = {
|
||
id: Math.max(...newsItems.map(n => n.id), 0) + 1,
|
||
title: '',
|
||
summary: '',
|
||
content: '',
|
||
date: new Date().toLocaleDateString('tr-TR'),
|
||
image: '',
|
||
category: 'announcement',
|
||
featured: false
|
||
};
|
||
setEditingNewsItem(newNews);
|
||
setShowNewsModal(true);
|
||
};
|
||
|
||
const handleEditNews = (news: NewsItem) => {
|
||
setEditingNewsItem(news);
|
||
setShowNewsModal(true);
|
||
};
|
||
|
||
const handleSaveNews = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (editingNewsItem) {
|
||
const isNew = !newsItems.find(n => n.id === editingNewsItem.id);
|
||
if (isNew) {
|
||
dataStore.addNews(editingNewsItem);
|
||
} else {
|
||
dataStore.updateNews(editingNewsItem.id, editingNewsItem);
|
||
}
|
||
loadData();
|
||
setShowNewsModal(false);
|
||
setEditingNewsItem(null);
|
||
}
|
||
};
|
||
|
||
// Media edit handlers
|
||
const handleAddMedia = () => {
|
||
const newMedia: MediaItem = {
|
||
id: Math.max(...mediaItems.map(m => m.id), 0) + 1,
|
||
title: '',
|
||
description: '',
|
||
type: 'photo',
|
||
url: '',
|
||
thumbnail: '',
|
||
date: new Date().toLocaleDateString('tr-TR'),
|
||
category: 'construction'
|
||
};
|
||
setEditingMediaItem(newMedia);
|
||
setShowMediaModal(true);
|
||
};
|
||
|
||
const handleEditMedia = (media: MediaItem) => {
|
||
setEditingMediaItem(media);
|
||
setShowMediaModal(true);
|
||
};
|
||
|
||
const handleSaveMedia = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (editingMediaItem) {
|
||
const isNew = !mediaItems.find(m => m.id === editingMediaItem.id);
|
||
if (isNew) {
|
||
dataStore.addMedia(editingMediaItem);
|
||
} else {
|
||
dataStore.updateMedia(editingMediaItem.id, editingMediaItem);
|
||
}
|
||
loadData();
|
||
setShowMediaModal(false);
|
||
setEditingMediaItem(null);
|
||
}
|
||
};
|
||
|
||
// Document edit handlers
|
||
const handleAddDocument = () => {
|
||
const newDoc: Document = {
|
||
id: Math.max(...documents.map(d => d.id), 0) + 1,
|
||
title: '',
|
||
description: '',
|
||
type: 'pdf',
|
||
size: '',
|
||
date: new Date().toLocaleDateString('tr-TR'),
|
||
category: 'technical',
|
||
downloadUrl: '#'
|
||
};
|
||
setEditingDocument(newDoc);
|
||
setShowDocumentModal(true);
|
||
};
|
||
|
||
const handleEditDocument = (doc: Document) => {
|
||
setEditingDocument(doc);
|
||
setShowDocumentModal(true);
|
||
};
|
||
|
||
const handleSaveDocument = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (editingDocument) {
|
||
const isNew = !documents.find(d => d.id === editingDocument.id);
|
||
if (isNew) {
|
||
dataStore.addDocument(editingDocument);
|
||
} else {
|
||
dataStore.updateDocument(editingDocument.id, editingDocument);
|
||
}
|
||
loadData();
|
||
setShowDocumentModal(false);
|
||
setEditingDocument(null);
|
||
}
|
||
};
|
||
|
||
// Station edit handlers
|
||
const handleEditStation = (station: MetroStation) => {
|
||
setEditingStation(station);
|
||
setShowStationModal(true);
|
||
};
|
||
|
||
const handleSaveStation = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (editingStation) {
|
||
dataStore.updateStation(editingStation.id, editingStation);
|
||
loadData();
|
||
setShowStationModal(false);
|
||
setEditingStation(null);
|
||
}
|
||
};
|
||
|
||
// Helper function for file icons
|
||
const getFileIcon = (type: string) => {
|
||
switch (type) {
|
||
case 'pdf': return '📄';
|
||
case 'doc': return '📝';
|
||
case 'xls': return '📊';
|
||
case 'image': return '🖼️';
|
||
default: return '📁';
|
||
}
|
||
};
|
||
|
||
// Helper functions for station status
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'completed': return 'bg-green-500';
|
||
case 'in-progress': return 'bg-yellow-500';
|
||
case 'planned': return 'bg-blue-500';
|
||
default: return 'bg-gray-500';
|
||
}
|
||
};
|
||
|
||
const getStatusText = (status: string) => {
|
||
switch (status) {
|
||
case 'completed': return 'Tamamlandı';
|
||
case 'in-progress': return 'Devam Ediyor';
|
||
case 'planned': return 'Planlandı';
|
||
default: return status;
|
||
}
|
||
};
|
||
|
||
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
|
||
onClick={handleAddSlide}
|
||
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>
|
||
<button
|
||
onClick={() => toggleSlideActive(slide.id)}
|
||
className={`text-xs px-3 py-1 rounded-full cursor-pointer transition-colors ${
|
||
slide.active
|
||
? 'bg-green-100 text-green-600 hover:bg-green-200'
|
||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
{slide.active ? '✓ Aktif - Tıkla Pasif Yap' : '○ Pasif - Tıkla Aktif Yap'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex space-x-2">
|
||
<button
|
||
onClick={() => handleEditSlide(slide)}
|
||
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
|
||
onClick={() => handleDeleteSlide(slide.id)}
|
||
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>
|
||
</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={handleAddNews}
|
||
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={() => handleToggleFeatured(news.id)}
|
||
className={`p-2 rounded-lg transition-colors ${
|
||
news.featured
|
||
? 'text-yellow-500 bg-yellow-50 hover:bg-yellow-100'
|
||
: 'text-gray-400 hover:bg-gray-100'
|
||
}`}
|
||
title={news.featured ? 'Ana Sayfadan Kaldır' : 'Ana Sayfaya Ekle'}
|
||
>
|
||
<svg className="w-5 h-5" fill={news.featured ? 'currentColor' : 'none'} viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
onClick={() => handleEditNews(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
|
||
onClick={() => handleDeleteNews(news.id)}
|
||
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">{newsItems.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">{newsItems.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">{newsItems.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">{newsItems.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
|
||
onClick={handleAddMedia}
|
||
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
|
||
onClick={() => handleEditMedia(media)}
|
||
className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors"
|
||
title="Düzenle"
|
||
>
|
||
<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
|
||
onClick={() => handleDeleteMedia(media.id)}
|
||
className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||
title="Sil"
|
||
>
|
||
<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">{mediaItems.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">{mediaItems.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">{mediaItems.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
|
||
onClick={handleAddDocument}
|
||
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
|
||
onClick={() => handleEditDocument(doc)}
|
||
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
|
||
onClick={() => handleDeleteDocument(doc.id)}
|
||
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]">{documents.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]">{documents.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]">{documents.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]">{documents.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]">{documents.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}
|
||
onClick={() => handleStationClick(station.id)}
|
||
className={`bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all cursor-pointer ${
|
||
selectedStationId === station.id ? 'ring-4 ring-[#00B4D8]' : ''
|
||
}`}
|
||
>
|
||
<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">
|
||
{selectedStationId === station.id && (
|
||
<div className="w-6 h-6 bg-[#00B4D8] rounded-full flex items-center justify-center">
|
||
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleEditStation(station);
|
||
}}
|
||
className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors"
|
||
title="Düzenle"
|
||
>
|
||
<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">{metroStations.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">{metroStations.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">{metroStations.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">{metroStations.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>
|
||
)}
|
||
|
||
{/* Slider Edit Modal */}
|
||
{showSlideModal && editingSlide && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||
<div className="p-6 border-b border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-2xl font-bold text-[#003366]">
|
||
{editingSlide.id > Math.max(...sliderItems.map(s => s.id)) ? 'Yeni Slider Ekle' : 'Slider Düzenle'}
|
||
</h3>
|
||
<button
|
||
onClick={() => {
|
||
setShowSlideModal(false);
|
||
setEditingSlide(null);
|
||
}}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSaveSlide} className="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Başlık *</label>
|
||
<input
|
||
type="text"
|
||
value={editingSlide.title}
|
||
onChange={(e) => setEditingSlide({ ...editingSlide, title: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Açıklama *</label>
|
||
<textarea
|
||
value={editingSlide.description}
|
||
onChange={(e) => setEditingSlide({ ...editingSlide, description: e.target.value })}
|
||
rows={3}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Görsel URL *</label>
|
||
<input
|
||
type="url"
|
||
value={editingSlide.image}
|
||
onChange={(e) => setEditingSlide({ ...editingSlide, image: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="https://example.com/image.jpg"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Buton Metni</label>
|
||
<input
|
||
type="text"
|
||
value={editingSlide.buttonText}
|
||
onChange={(e) => setEditingSlide({ ...editingSlide, buttonText: e.target.value })}
|
||
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-semibold text-gray-700 mb-2">Buton Linki</label>
|
||
<input
|
||
type="text"
|
||
value={editingSlide.buttonLink}
|
||
onChange={(e) => setEditingSlide({ ...editingSlide, buttonLink: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="#"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<input
|
||
type="checkbox"
|
||
id="slideActive"
|
||
checked={editingSlide.active}
|
||
onChange={(e) => setEditingSlide({ ...editingSlide, active: e.target.checked })}
|
||
className="w-4 h-4 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
|
||
/>
|
||
<label htmlFor="slideActive" className="text-sm font-medium text-gray-700">
|
||
Slider\'ı aktif yap (Ana sayfada göster)
|
||
</label>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowSlideModal(false);
|
||
setEditingSlide(null);
|
||
}}
|
||
className="px-6 py-2 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-6 py-2 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all"
|
||
>
|
||
Kaydet
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* News Edit Modal */}
|
||
{showNewsModal && editingNewsItem && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
|
||
<div className="p-6 border-b border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-2xl font-bold text-[#003366]">
|
||
{!newsItems.find(n => n.id === editingNewsItem.id) ? 'Yeni Haber Ekle' : 'Haber Düzenle'}
|
||
</h3>
|
||
<button
|
||
onClick={() => {
|
||
setShowNewsModal(false);
|
||
setEditingNewsItem(null);
|
||
}}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSaveNews} className="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Başlık *</label>
|
||
<input
|
||
type="text"
|
||
value={editingNewsItem.title}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, title: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Özet *</label>
|
||
<textarea
|
||
value={editingNewsItem.summary}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, summary: e.target.value })}
|
||
rows={2}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">İçerik *</label>
|
||
<textarea
|
||
value={editingNewsItem.content}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, content: e.target.value })}
|
||
rows={6}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Görsel URL *</label>
|
||
<input
|
||
type="url"
|
||
value={editingNewsItem.image}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, image: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="https://example.com/image.jpg"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Kategori *</label>
|
||
<select
|
||
value={editingNewsItem.category}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, category: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
>
|
||
<option value="construction">İnşaat</option>
|
||
<option value="announcement">Duyuru</option>
|
||
<option value="event">Etkinlik</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Yazar</label>
|
||
<input
|
||
type="text"
|
||
value={editingNewsItem.author || ''}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, author: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="Yazar adı"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<input
|
||
type="checkbox"
|
||
id="newsFeatured"
|
||
checked={editingNewsItem.featured || false}
|
||
onChange={(e) => setEditingNewsItem({ ...editingNewsItem, featured: e.target.checked })}
|
||
className="w-4 h-4 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
|
||
/>
|
||
<label htmlFor="newsFeatured" className="text-sm font-medium text-gray-700">
|
||
Öne çıkan haber (Ana sayfada göster)
|
||
</label>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowNewsModal(false);
|
||
setEditingNewsItem(null);
|
||
}}
|
||
className="px-6 py-2 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-6 py-2 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all"
|
||
>
|
||
Kaydet
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Media Edit Modal */}
|
||
{showMediaModal && editingMediaItem && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||
<div className="p-6 border-b border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-2xl font-bold text-[#003366]">
|
||
{!mediaItems.find(m => m.id === editingMediaItem.id) ? 'Yeni Medya Ekle' : 'Medya Düzenle'}
|
||
</h3>
|
||
<button
|
||
onClick={() => {
|
||
setShowMediaModal(false);
|
||
setEditingMediaItem(null);
|
||
}}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSaveMedia} className="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Başlık *</label>
|
||
<input
|
||
type="text"
|
||
value={editingMediaItem.title}
|
||
onChange={(e) => setEditingMediaItem({ ...editingMediaItem, title: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Açıklama *</label>
|
||
<textarea
|
||
value={editingMediaItem.description}
|
||
onChange={(e) => setEditingMediaItem({ ...editingMediaItem, description: e.target.value })}
|
||
rows={3}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Tip *</label>
|
||
<select
|
||
value={editingMediaItem.type}
|
||
onChange={(e) => setEditingMediaItem({ ...editingMediaItem, type: e.target.value as 'video' | 'photo' })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
>
|
||
<option value="photo">Fotoğraf</option>
|
||
<option value="video">Video</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Kategori</label>
|
||
<select
|
||
value={editingMediaItem.category}
|
||
onChange={(e) => setEditingMediaItem({ ...editingMediaItem, category: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
>
|
||
<option value="construction">İnşaat</option>
|
||
<option value="event">Etkinlik</option>
|
||
<option value="announcement">Duyuru</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Medya URL *</label>
|
||
<input
|
||
type="url"
|
||
value={editingMediaItem.url}
|
||
onChange={(e) => setEditingMediaItem({ ...editingMediaItem, url: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="https://example.com/video.mp4"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Thumbnail URL</label>
|
||
<input
|
||
type="url"
|
||
value={editingMediaItem.thumbnail}
|
||
onChange={(e) => setEditingMediaItem({ ...editingMediaItem, thumbnail: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="https://example.com/thumbnail.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowMediaModal(false);
|
||
setEditingMediaItem(null);
|
||
}}
|
||
className="px-6 py-2 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-6 py-2 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all"
|
||
>
|
||
Kaydet
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Document Edit Modal */}
|
||
{showDocumentModal && editingDocument && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||
<div className="p-6 border-b border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-2xl font-bold text-[#003366]">
|
||
{!documents.find(d => d.id === editingDocument.id) ? 'Yeni Belge Ekle' : 'Belge Düzenle'}
|
||
</h3>
|
||
<button
|
||
onClick={() => {
|
||
setShowDocumentModal(false);
|
||
setEditingDocument(null);
|
||
}}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSaveDocument} className="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Başlık *</label>
|
||
<input
|
||
type="text"
|
||
value={editingDocument.title}
|
||
onChange={(e) => setEditingDocument({ ...editingDocument, title: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Açıklama *</label>
|
||
<textarea
|
||
value={editingDocument.description}
|
||
onChange={(e) => setEditingDocument({ ...editingDocument, description: e.target.value })}
|
||
rows={3}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Dosya Tipi *</label>
|
||
<select
|
||
value={editingDocument.type}
|
||
onChange={(e) => setEditingDocument({ ...editingDocument, type: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
>
|
||
<option value="pdf">PDF</option>
|
||
<option value="doc">Word</option>
|
||
<option value="xls">Excel</option>
|
||
<option value="image">Görsel</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Dosya Boyutu</label>
|
||
<input
|
||
type="text"
|
||
value={editingDocument.size}
|
||
onChange={(e) => setEditingDocument({ ...editingDocument, size: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="2.5 MB"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Kategori *</label>
|
||
<select
|
||
value={editingDocument.category}
|
||
onChange={(e) => setEditingDocument({ ...editingDocument, category: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
>
|
||
<option value="technical">Teknik</option>
|
||
<option value="administrative">İdari</option>
|
||
<option value="legal">Hukuki</option>
|
||
<option value="financial">Mali</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">İndirme Linki</label>
|
||
<input
|
||
type="text"
|
||
value={editingDocument.downloadUrl}
|
||
onChange={(e) => setEditingDocument({ ...editingDocument, downloadUrl: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="#"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowDocumentModal(false);
|
||
setEditingDocument(null);
|
||
}}
|
||
className="px-6 py-2 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-6 py-2 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all"
|
||
>
|
||
Kaydet
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Station Edit Modal */}
|
||
{showStationModal && editingStation && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
|
||
<div className="p-6 border-b border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-2xl font-bold text-[#003366]">İstasyon Düzenle</h3>
|
||
<button
|
||
onClick={() => {
|
||
setShowStationModal(false);
|
||
setEditingStation(null);
|
||
}}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSaveStation} className="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">İstasyon Adı</label>
|
||
<input
|
||
type="text"
|
||
value={editingStation.name}
|
||
onChange={(e) => setEditingStation({ ...editingStation, name: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent bg-gray-50"
|
||
readOnly
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Durum *</label>
|
||
<select
|
||
value={editingStation.status}
|
||
onChange={(e) => setEditingStation({ ...editingStation, status: e.target.value as MetroStation['status'] })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
>
|
||
<option value="completed">Tamamlandı</option>
|
||
<option value="in-progress">Devam Ediyor</option>
|
||
<option value="planned">Planlandı</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">İlerleme (%) *</label>
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
max="100"
|
||
value={editingStation.progress}
|
||
onChange={(e) => setEditingStation({ ...editingStation, progress: parseInt(e.target.value) })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Başlangıç Tarihi</label>
|
||
<input
|
||
type="text"
|
||
value={editingStation.startDate}
|
||
onChange={(e) => setEditingStation({ ...editingStation, startDate: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="1 Ocak 2024"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Tahmini Bitiş</label>
|
||
<input
|
||
type="text"
|
||
value={editingStation.expectedCompletion}
|
||
onChange={(e) => setEditingStation({ ...editingStation, expectedCompletion: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="31 Aralık 2025"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Günlük Kapasite</label>
|
||
<input
|
||
type="text"
|
||
value={editingStation.dailyCapacity}
|
||
onChange={(e) => setEditingStation({ ...editingStation, dailyCapacity: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="50,000"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-2">Özellikler (virgülle ayırın)</label>
|
||
<input
|
||
type="text"
|
||
value={editingStation.features.join(', ')}
|
||
onChange={(e) => setEditingStation({ ...editingStation, features: e.target.value.split(',').map(f => f.trim()) })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"
|
||
placeholder="Otopark, Engelsiz Erişim, Modern Tasarım"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowStationModal(false);
|
||
setEditingStation(null);
|
||
}}
|
||
className="px-6 py-2 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-6 py-2 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all"
|
||
>
|
||
Kaydet
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|