Build

app/belgeler/page.tsx

@@ -1,145 +1,40 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import { dataStore } from '@/lib/dataStore';
+import type { Document } from '@/data/documents';
 
 export default function Documents() {
+  const [documents, setDocuments] = useState<Document[]>([]);
   const [selectedCategory, setSelectedCategory] = useState('all');
 
-  const categories = [
-    { id: 'all', name: 'Tümü', icon: '📁' },
-    { id: 'technical', name: 'Teknik Dokümanlar', icon: '📐' },
-    { id: 'reports', name: 'Raporlar', icon: '📊' },
-    { id: 'permissions', name: 'İzinler', icon: '✅' },
-    { id: 'presentations', name: 'Sunumlar', icon: '📽️' },
-  ];
+  useEffect(() => {
+    setDocuments(dataStore.getDocuments());
+  }, []);
 
-  const documents = [
-    {
-      id: 1,
-      category: 'technical',
-      title: 'A2 Metro Hattı Teknik Şartnamesi',
-      description: 'Proje kapsamındaki tüm teknik detaylar',
-      date: '15 Ekim 2025',
-      size: '12.5 MB',
-      type: 'PDF',
-      icon: '📐',
-    },
-    {
-      id: 2,
-      category: 'technical',
-      title: 'İstasyon Mimari Projesi',
-      description: 'İstasyon binalarının mimari tasarımı',
-      date: '12 Ekim 2025',
-      size: '25.8 MB',
-      type: 'PDF',
-      icon: '🏗️',
-    },
-    {
-      id: 3,
-      category: 'technical',
-      title: 'Güvenlik Planı ve Prosedürleri',
-      description: 'İş güvenliği planı ve acil durum prosedürleri',
-      date: '10 Ekim 2025',
-      size: '6.8 MB',
-      type: 'PDF',
-      icon: '🛡️',
-    },
-    {
-      id: 4,
-      category: 'technical',
-      title: 'Malzeme Spesifikasyonları',
-      description: 'İnşaatta kullanılacak malzeme detayları',
-      date: '8 Ekim 2025',
-      size: '9.2 MB',
-      type: 'PDF',
-      icon: '🔧',
-    },
-    {
-      id: 5,
-      category: 'reports',
-      title: 'ÇED Raporu',
-      description: 'Çevresel Etki Değerlendirme',
-      date: '5 Ekim 2025',
-      size: '8.3 MB',
-      type: 'PDF',
-      icon: '🌍',
-    },
-    {
-      id: 6,
-      category: 'reports',
-      title: 'Eylül 2025 İlerleme Raporu',
-      description: 'Aylık proje ilerleme durumu',
-      date: '1 Ekim 2025',
-      size: '3.2 MB',
-      type: 'PDF',
-      icon: '📈',
-    },
-    {
-      id: 7,
-      category: 'reports',
-      title: 'Ağustos 2025 İlerleme Raporu',
-      description: 'Aylık proje ilerleme durumu',
-      date: '1 Eylül 2025',
-      size: '3.1 MB',
-      type: 'PDF',
-      icon: '📈',
-    },
-    {
-      id: 8,
-      category: 'permissions',
-      title: 'İnşaat Ruhsatı',
-      description: 'Belediye onaylı inşaat ruhsatı belgesi',
-      date: '5 Eylül 2025',
-      size: '1.5 MB',
-      type: 'PDF',
-      icon: '✅',
-    },
-    {
-      id: 9,
-      category: 'permissions',
-      title: 'Kamulaştırma İzin Belgeleri',
-      description: 'Proje alanı kamulaştırma işlem belgeleri',
-      date: '28 Ağustos 2025',
-      size: '4.7 MB',
-      type: 'PDF',
-      icon: '📋',
-    },
-    {
-      id: 10,
-      category: 'permissions',
-      title: 'Çalışma İzin Belgeleri',
-      description: 'İlgili kurumlardan alınan çalışma izinleri',
-      date: '15 Ağustos 2025',
-      size: '2.8 MB',
-      type: 'PDF',
-      icon: '📄',
-    },
-    {
-      id: 11,
-      category: 'presentations',
-      title: 'A2 Metro Hattı Tanıtım Sunumu',
-      description: 'Genel tanıtım ve proje özeti sunumu',
-      date: '20 Eylül 2025',
-      size: '15.6 MB',
-      type: 'PPTX',
-      icon: '📽️',
-    },
-    {
-      id: 12,
-      category: 'presentations',
-      title: 'Teknik Altyapı Sunumu',
-      description: 'Tünel ve istasyon altyapı detayları',
-      date: '15 Eylül 2025',
-      size: '22.4 MB',
-      type: 'PPTX',
-      icon: '🎯',
-    },
+  const categories = [
+    { id: 'all', name: 'Tümü', icon: '📋' },
+    { id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
+    { id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
+    { id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
+    { id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
+    { id: 'guvenlik', name: 'Güvenlik', icon: '🛡️' },
   ];
 
   const filteredDocs = selectedCategory === 'all' ? documents : documents.filter(d => d.category === selectedCategory);
 
+  const getFileIcon = (type: string) => {
+    switch (type) {
+      case 'PDF': return '📕';
+      case 'DWG': return '📐';
+      case 'XLSX': return '📊';
+      case 'DOCX': return '📝';
+      default: return '📄';
+    }
+  };
+
   return (
     <div className="min-h-screen bg-[#003366]">
       <Header />
@@ -169,7 +64,7 @@ export default function Documents() {
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {filteredDocs.map((doc) => (
               <div key={doc.id} className="bg-white rounded-2xl p-6">
-                <div className="text-4xl mb-4">{doc.icon}</div>
+                <div className="text-4xl mb-4">{getFileIcon(doc.type)}</div>
                 <h3 className="text-xl font-bold text-[#004B87] mb-2">{doc.title}</h3>
                 <p className="text-gray-600 text-sm mb-4">{doc.description}</p>
                 <div className="text-xs text-gray-500 mb-4">