import React, { useState } from 'react' import { useParams, Link, useNavigate } from 'react-router-dom' import { FaArrowLeft, FaEdit, FaUser, FaDollarSign, FaBullseye, FaBuilding, FaClock, FaFlag, FaTasks, FaFileAlt, FaExclamationCircle, FaChartLine, FaFolder, FaPhone, FaEnvelope, } from 'react-icons/fa' import { TaskStatusEnum } from '../../../types/ps' import { mockProjects } from '../../../mocks/mockProjects' import { mockProjectPhases } from '../../../mocks/mockProjectPhases' import { mockProjectTasks } from '../../../mocks/mockProjectTasks' import dayjs from 'dayjs' import classNames from 'classnames' import { PriorityEnum } from '../../../types/common' import { getProjectStatusColor, getProjectStatusIcon, getProjectStatusText, getProgressColor, getPriorityColor, getPriorityText, getProjectTypeColor, getProjectTypeText, } from '../../../utils/erp' import { Container } from '@/components/shared' const ProjectView: React.FC = () => { const { id } = useParams<{ id: string }>() const navigate = useNavigate() const [activeTab, setActiveTab] = useState('overview') // Find the project by ID const project = mockProjects.find((p) => p.id === id) if (!project) { return (

Proje bulunamadı

Belirtilen ID ile proje mevcut değil.

Projelere Dön
) } const tabs = [ { id: 'overview', name: 'Genel Bakış', icon: FaChartLine }, { id: 'phases', name: 'Fazlar', icon: FaFlag }, { id: 'tasks', name: 'Görevler', icon: FaTasks }, { id: 'documents', name: 'Belgeler', icon: FaFileAlt }, { id: 'risks', name: 'Riskler', icon: FaExclamationCircle }, { id: 'financial', name: 'Mali Özet', icon: FaDollarSign }, ] const budgetUsagePercentage = (project.actualCost / project.budget) * 100 const timeElapsed = dayjs().diff(dayjs(project.startDate), 'day') const totalDuration = dayjs(project.endDate).diff(dayjs(project.startDate), 'day') const timeProgress = Math.min((timeElapsed / totalDuration) * 100, 100) return (
{/* Header */}

{project.code}

{project.name}

{getProjectStatusIcon(project.status)} {getProjectStatusText(project.status)} Düzenle
{/* Summary Cards */}
{/* Progress Card */}
{project.progress}%

İlerleme

{/* Budget Card */}
{budgetUsagePercentage.toFixed(0)}%

Bütçe Kullanımı

₺{project.actualCost.toLocaleString()} / ₺{project.budget.toLocaleString()}
{/* Time Progress Card */}
{timeProgress.toFixed(0)}%

Zaman İlerlemesi

{timeElapsed} / {totalDuration} gün
{/* Priority Card */}
{getPriorityText(project.priority)}

Öncelik

{getProjectTypeText(project.projectType)}
{/* Tabs */}
{activeTab === 'overview' && (
{/* Project Info Grid */}
{/* Project Details */}

Proje Detayları

Proje Kodu: {project.code}
Proje Türü: {getProjectTypeText(project.projectType)}
Başlangıç Tarihi: {dayjs(project.startDate).format('DD.MM.YYYY')}
Bitiş Tarihi: {dayjs(project.endDate).format('DD.MM.YYYY')}
Gerçek Başlangıç: {project.actualStartDate ? dayjs(project.actualStartDate).format('DD.MM.YYYY') : 'Henüz başlamadı'}
{/* Description */} {project.description && (

Açıklama

{project.description}

)}
{/* Stakeholders */}
{/* Project Manager */}

Proje Yöneticisi

{project.projectManager && (

{project.projectManager.fullName}

{project.projectManager.jobPosition?.name || 'Proje Yöneticisi'}

{project.projectManager.email}
{project.projectManager.phone && (
{project.projectManager.phone}
)}
)}
{/* Customer */} {project.customer && (

Müşteri

{project.customer.name}

{project.customer.primaryContact?.firstName}{' '} {project.customer.primaryContact?.lastName}

{project.customer.primaryContact?.email && (
{project.customer.primaryContact.email}
)} {project.customer.primaryContact?.phone && (
{project.customer.primaryContact.phone}
)}
)}
)} {activeTab === 'phases' && (
{/* Phases List */}
{mockProjectPhases.filter((phase) => phase.projectId === project.id).length > 0 ? ( mockProjectPhases .filter((phase) => phase.projectId === project.id) .map((phase) => (

{phase.name}

{phase.code} {phase.status}

{phase.description}

Başlangıç

{dayjs(phase.startDate).format('DD.MM.YYYY')}

Bitiş

{dayjs(phase.endDate).format('DD.MM.YYYY')}

Bütçe

₺{phase.budget.toLocaleString()}

İlerleme

%{phase.progress}

)) ) : (

Faz bulunamadı

Bu proje için henüz faz tanımlanmamış.

)}
)} {activeTab === 'tasks' && (
{/* Tasks List */}
{mockProjectTasks.filter((task) => task.projectId === project.id).length > 0 ? ( mockProjectTasks .filter((task) => task.projectId === project.id) .map((task) => (

{task.name}

{task.taskCode} {task.status === TaskStatusEnum.Completed ? 'Tamamlandı' : task.status === TaskStatusEnum.InProgress ? 'Devam Ediyor' : task.status === TaskStatusEnum.NotStarted ? 'Başlamadı' : task.status} {task.priority === PriorityEnum.High ? 'Yüksek' : task.priority === PriorityEnum.Normal ? 'Normal' : task.priority === PriorityEnum.Urgent ? 'Acil' : 'Düşük'}

{task.description}

Başlangıç

{dayjs(task.startDate).format('DD.MM.YYYY')}

Bitiş

{dayjs(task.endDate).format('DD.MM.YYYY')}

Tahmini Saat

{task.estimatedHours}h

İlerleme

%{task.progress}

= 90 ? 'bg-green-500' : task.progress >= 70 ? 'bg-blue-500' : task.progress >= 50 ? 'bg-yellow-500' : 'bg-red-500' }`} style={{ width: `${task.progress}%` }} />
)) ) : (

Görev bulunamadı

Bu proje için henüz görev tanımlanmamış.

)}
)} {activeTab === 'documents' && (
{/* Documents List */}
{project.documents.length > 0 ? ( project.documents.map((doc) => (

{doc.documentName}

{doc.documentType} {doc.fileSize} MB {dayjs(doc.uploadedAt).format('DD.MM.YYYY')} Yükleyen: {doc.uploadedBy}
)) ) : (

Belge bulunamadı

Bu proje için henüz belge yüklenmemiş.

)}
)} {activeTab === 'risks' && (
{/* Risks List */}
{project.risks.length > 0 ? ( project.risks.map((risk) => (

{risk.title}

{risk.riskLevel} {risk.status}

{risk.description}

{risk.mitigationPlan && (

Önlem Planı:

{risk.mitigationPlan}

)}
Risk Kodu: {risk.riskCode} Tanımlama: {dayjs(risk.identifiedDate).format('DD.MM.YYYY')}
)) ) : (

Risk bulunamadı

Bu proje için henüz risk tanımlanmamış.

)}
)} {/* Financial Summary Tab */} {activeTab === 'financial' && (
{/* Overview Cards */}

Toplam Bütçe

₺{project.budget.toLocaleString()}

Harcanan

₺{project.actualCost.toLocaleString()}

Kalan Bütçe

₺{(project.budget - project.actualCost).toLocaleString()}

Kullanım Oranı

%{budgetUsagePercentage.toFixed(1)}

{/* Budget Progress */}

Bütçe Kullanım Durumu

Harcanan: ₺{project.actualCost.toLocaleString()} Toplam: ₺{project.budget.toLocaleString()}
90 ? 'bg-red-500' : budgetUsagePercentage > 70 ? 'bg-orange-500' : 'bg-green-500' }`} style={{ width: `${Math.min(budgetUsagePercentage, 100)}%`, }} />
90 ? 'text-red-600' : budgetUsagePercentage > 70 ? 'text-orange-600' : 'text-green-600' }`} > {budgetUsagePercentage > 90 ? 'Kritik Seviye - Bütçe Aşımı Riski' : budgetUsagePercentage > 70 ? 'Dikkat - Yüksek Kullanım' : 'Normal Seviye'}
{/* Phase Costs */}

Faz Bazında Maliyet Analizi

{mockProjectPhases .filter((phase) => phase.projectId === project.id) .map((phase) => { const phaseUsage = (phase.actualCost / phase.budget) * 100 return ( ) })}
Faz Adı Bütçe Harcanan Kalan Kullanım % Durum
{phase.name}
{phase.code}
 ₺{phase.budget.toLocaleString()} ₺{phase.actualCost.toLocaleString()} ₺{(phase.budget - phase.actualCost).toLocaleString()}
90 ? 'bg-red-500' : phaseUsage > 70 ? 'bg-orange-500' : 'bg-green-500' }`} style={{ width: `${Math.min(phaseUsage, 100)}%`, }} />
{phaseUsage.toFixed(1)}%
100 ? 'bg-red-100 text-red-800' : phaseUsage > 90 ? 'bg-orange-100 text-orange-800' : phaseUsage > 70 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }`} > {phaseUsage > 100 ? 'Bütçe Aşımı' : phaseUsage > 90 ? 'Kritik' : phaseUsage > 70 ? 'Dikkat' : 'Normal'}
{/* Cost Breakdown */}

Maliyet Kategorileri

Personel Maliyeti ₺{(project.actualCost * 0.6).toLocaleString()}
Malzeme Maliyeti ₺{(project.actualCost * 0.25).toLocaleString()}
İş Merkezi Maliyeti ₺{(project.actualCost * 0.1).toLocaleString()}
Diğer Giderler ₺{(project.actualCost * 0.05).toLocaleString()}

Maliyet Analizi

Ortalama Günlük Harcama ₺ {Math.round( project.actualCost / Math.max(timeElapsed, 1), ).toLocaleString()}
Tahmini Proje Sonu Maliyeti ₺ {Math.round( (project.actualCost / Math.max(project.progress, 1)) * 100, ).toLocaleString()}
Maliyet Varyansı project.budget ? 'text-red-600' : 'text-green-600' }`} > {project.actualCost > project.budget ? '+' : ''}₺ {(project.actualCost - project.budget).toLocaleString()}
CPI (Maliyet Performans İndeksi) = 1 ? 'text-green-600' : 'text-red-600' }`} > {(project.budget / project.actualCost).toFixed(2)}
)}
) } export default ProjectView