sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions
erp-platform/ui/src/views/project/components/ProjectView.tsx

998 lines
51 KiB
TypeScript
Raw Normal View History

Project Management
2025-09-15 20:27:01 +00:00
import React, { useState } from 'react'
import { useParams, Link, useNavigate } from 'react-router-dom'
erp modülleri initial
2025-09-15 09:31:47 +00:00
import {
FaArrowLeft,
FaEdit,
FaUser,
FaDollarSign,
FaBullseye,
FaBuilding,
FaClock,
FaFlag,
FaTasks,
FaFileAlt,
FaExclamationCircle,
FaChartLine,
FaFolder,
FaPhone,
FaEnvelope,
Project Management
2025-09-15 20:27:01 +00:00
} 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'
erp modülleri initial
2025-09-15 09:31:47 +00:00
import {
getProjectStatusColor,
getProjectStatusIcon,
getProjectStatusText,
getProgressColor,
getPriorityColor,
getPriorityText,
getProjectTypeColor,
getProjectTypeText,
Project Management
2025-09-15 20:27:01 +00:00
} from '../../../utils/erp'
import { Container } from '@/components/shared'
erp modülleri initial
2025-09-15 09:31:47 +00:00
const ProjectView: React.FC = () => {
Project Management
2025-09-15 20:27:01 +00:00
const { id } = useParams<{ id: string }>()
const navigate = useNavigate()
const [activeTab, setActiveTab] = useState('overview')
erp modülleri initial
2025-09-15 09:31:47 +00:00
// Find the project by ID
Project Management
2025-09-15 20:27:01 +00:00
const project = mockProjects.find((p) => p.id === id)
erp modülleri initial
2025-09-15 09:31:47 +00:00
if (!project) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<FaFolder className="mx-auto h-12 w-12 text-gray-400" />
Project Management
2025-09-15 20:27:01 +00:00
<h3 className="mt-2 text-sm font-medium text-gray-900">Proje bulunamadı</h3>
<p className="mt-1 text-sm text-gray-500">Belirtilen ID ile proje mevcut değil.</p>
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div className="mt-6">
<Link
to="/admin/projects"
className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
>
<FaArrowLeft className="mr-2 h-4 w-4" />
Projelere Dön
</Link>
</div>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
)
erp modülleri initial
2025-09-15 09:31:47 +00:00
}
const tabs = [
Project Management
2025-09-15 20:27:01 +00:00
{ 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 },
]
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
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)
erp modülleri initial
2025-09-15 09:31:47 +00:00
return (
Project Management
2025-09-15 20:27:01 +00:00
<Container>
<div className="space-y-2">
{/* Header */}
<div className="bg-white shadow-sm border-b border-gray-200">
<div className="p-2">
<div className="flex items-center justify-between h-12">
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div className="flex items-center space-x-2">
Project Management
2025-09-15 20:27:01 +00:00
<button
onClick={() => navigate('/admin/projects')}
className="flex items-center px-2 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
>
<FaArrowLeft className="w-4 h-4 mr-2" />
Geri
</button>
<div className="flex items-center space-x-2">
<div className="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center">
<FaFolder className="w-6 h-6 text-blue-600" />
</div>
<div>
<h1 className="text-lg font-bold text-gray-900">{project.code}</h1>
Project Management ve Title
2025-09-15 21:02:48 +00:00
<p className="text-gray-600">{project.name}</p>
Project Management
2025-09-15 20:27:01 +00:00
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="flex items-center space-x-2">
<span
className={classNames(
'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border',
getProjectStatusColor(project.status),
)}
>
{getProjectStatusIcon(project.status)}
<span className="ml-2">{getProjectStatusText(project.status)}</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
Project Management
2025-09-15 20:27:01 +00:00
<Link
to={`/admin/projects/edit/${project.id}`}
className="inline-flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaEdit className="w-4 h-4 mr-2" />
Düzenle
</Link>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="mx-auto py-2">
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
{/* Progress Card */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
<div className="flex items-center justify-between mb-2">
<div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
<FaBullseye className="w-5 h-5 text-blue-600" />
</div>
<span className="text-lg font-bold text-blue-600">{project.progress}%</span>
</div>
<h3 className="text-sm font-medium text-gray-600 mb-1.5">İlerleme</h3>
<div className="w-full bg-gray-200 rounded-full h-1.5">
<div
className={classNames('h-1.5 rounded-full', getProgressColor(project.progress))}
style={{ width: `${project.progress}%` }}
/>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Budget Card */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
<div className="flex items-center justify-between mb-2">
<div className="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
<FaDollarSign className="w-5 h-5 text-green-600" />
</div>
<span className="text-lg font-bold text-green-600">
{budgetUsagePercentage.toFixed(0)}%
</span>
</div>
<h3 className="text-sm font-medium text-gray-600 mb-1">Bütçe Kullanımı</h3>
<div className="text-xs text-gray-500">
₺{project.actualCost.toLocaleString()} / ₺{project.budget.toLocaleString()}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Time Progress Card */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
<div className="flex items-center justify-between mb-2">
<div className="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
<FaClock className="w-5 h-5 text-orange-600" />
</div>
<span className="text-lg font-bold text-orange-600">
{timeProgress.toFixed(0)}%
</span>
</div>
<h3 className="text-sm font-medium text-gray-600 mb-1">Zaman İlerlemesi</h3>
<div className="text-xs text-gray-500">
{timeElapsed} / {totalDuration} gün
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Priority Card */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
<div className="flex items-center justify-between mb-2">
<div className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
<FaFlag className="w-5 h-5 text-red-600" />
</div>
<span
className={classNames('text-lg font-bold', getPriorityColor(project.priority))}
>
{getPriorityText(project.priority)}
</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
<h3 className="text-sm font-medium text-gray-600 mb-1">Öncelik</h3>
erp modülleri initial
2025-09-15 09:31:47 +00:00
<span
className={classNames(
Project Management
2025-09-15 20:27:01 +00:00
'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border',
getProjectTypeColor(project.projectType),
erp modülleri initial
2025-09-15 09:31:47 +00:00
)}
>
Project Management
2025-09-15 20:27:01 +00:00
{getProjectTypeText(project.projectType)}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Tabs */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div className="border-b border-gray-200">
<nav className="flex space-x-4 px-3" aria-label="Tabs">
{tabs.map((tab) => {
const Icon = tab.icon
return (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={classNames(
'py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 transition-colors',
activeTab === tab.id
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
)}
>
<Icon className="w-4 h-4" />
<span>{tab.name}</span>
</button>
)
})}
</nav>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
<div className="p-3">
{activeTab === 'overview' && (
<div className="space-y-3">
{/* Project Info Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
{/* Project Details */}
<div className="space-y-3">
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div>
<h3 className="text-base font-semibold text-gray-900 mb-2">
Project Management
2025-09-15 20:27:01 +00:00
Proje Detayları
erp modülleri initial
2025-09-15 09:31:47 +00:00
</h3>
Project Management
2025-09-15 20:27:01 +00:00
<div className="bg-gray-50 rounded-lg p-2.5 space-y-1.5 text-sm">
<div className="flex justify-between items-center">
<span className="text-gray-600">Proje Kodu:</span>
<span className="font-medium text-gray-900">{project.code}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Proje Türü:</span>
<span
className={classNames(
'px-2 py-0.5 rounded-full text-xs font-medium border',
getProjectTypeColor(project.projectType),
)}
>
{getProjectTypeText(project.projectType)}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Başlangıç Tarihi:</span>
<span className="font-medium text-gray-900">
{dayjs(project.startDate).format('DD.MM.YYYY')}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Bitiş Tarihi:</span>
<span className="font-medium text-gray-900">
{dayjs(project.endDate).format('DD.MM.YYYY')}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Gerçek Başlangıç:</span>
<span className="font-medium text-gray-900">
{project.actualStartDate
? dayjs(project.actualStartDate).format('DD.MM.YYYY')
: 'Henüz başlamadı'}
</span>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Description */}
{project.description && (
<div>
<h3 className="text-base font-semibold text-gray-900 mb-2">Açıklama</h3>
<div className="bg-gray-50 rounded-lg p-2.5">
<p className="text-sm text-gray-700 leading-relaxed">
{project.description}
</p>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
)}
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Stakeholders */}
<div className="space-y-3">
{/* Project Manager */}
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div>
<h3 className="text-base font-semibold text-gray-900 mb-2">
Project Management
2025-09-15 20:27:01 +00:00
Proje Yöneticisi
erp modülleri initial
2025-09-15 09:31:47 +00:00
</h3>
Project Management
2025-09-15 20:27:01 +00:00
{project.projectManager && (
<div className="bg-gray-50 rounded-lg p-2.5">
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<FaUser className="w-6 h-6 text-blue-600" />
</div>
<div>
<h4 className="font-medium text-gray-900">
{project.projectManager.fullName}
</h4>
Project Management ve Title
2025-09-15 21:02:48 +00:00
<p className="text-gray-600">
Project Management
2025-09-15 20:27:01 +00:00
{project.projectManager.jobPosition?.name || 'Proje Yöneticisi'}
</p>
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div className="flex items-center mt-1 text-sm text-gray-500">
<FaEnvelope className="w-3 h-3 mr-1" />
Project Management
2025-09-15 20:27:01 +00:00
{project.projectManager.email}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
{project.projectManager.phone && (
<div className="flex items-center mt-1 text-sm text-gray-500">
<FaPhone className="w-3 h-3 mr-1" />
{project.projectManager.phone}
</div>
)}
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Customer */}
{project.customer && (
<div>
<h3 className="text-base font-semibold text-gray-900 mb-2">Müşteri</h3>
<div className="bg-gray-50 rounded-lg p-2.5">
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<FaBuilding className="w-6 h-6 text-green-600" />
</div>
<div>
<h4 className="font-medium text-gray-900">
{project.customer.name}
</h4>
Project Management ve Title
2025-09-15 21:02:48 +00:00
<p className="text-gray-600">
Project Management
2025-09-15 20:27:01 +00:00
{project.customer.primaryContact?.firstName}{' '}
{project.customer.primaryContact?.lastName}
</p>
{project.customer.primaryContact?.email && (
<div className="flex items-center mt-1 text-sm text-gray-500">
<FaEnvelope className="w-3 h-3 mr-1" />
{project.customer.primaryContact.email}
</div>
)}
{project.customer.primaryContact?.phone && (
<div className="flex items-center mt-1 text-sm text-gray-500">
<FaPhone className="w-3 h-3 mr-1" />
{project.customer.primaryContact.phone}
</div>
)}
</div>
</div>
</div>
</div>
)}
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
{activeTab === 'phases' && (
<div className="space-y-3">
{/* Phases List */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="divide-y divide-gray-200">
{mockProjectPhases.filter((phase) => phase.projectId === project.id).length >
0 ? (
mockProjectPhases
.filter((phase) => phase.projectId === project.id)
.map((phase) => (
<div key={phase.id} className="px-3 py-2 hover:bg-gray-50">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center space-x-2 mb-1.5">
<h4 className="text-sm font-medium text-gray-900">
{phase.name}
</h4>
<span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{phase.code}
</span>
<span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
{phase.status}
</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
<p className="text-sm text-gray-600 mb-1.5">
{phase.description}
</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-1.5">
<div>
<p className="text-xs font-medium text-gray-700">Başlangıç</p>
<p className="text-xs text-gray-600">
{dayjs(phase.startDate).format('DD.MM.YYYY')}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-700">Bitiş</p>
<p className="text-xs text-gray-600">
{dayjs(phase.endDate).format('DD.MM.YYYY')}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-700">Bütçe</p>
<p className="text-xs text-gray-600">
₺{phase.budget.toLocaleString()}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-700">İlerleme</p>
<p className="text-xs text-gray-600">%{phase.progress}</p>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="w-full bg-gray-200 rounded-full h-1.5">
<div
className="bg-blue-500 h-1.5 rounded-full"
style={{ width: `${phase.progress}%` }}
/>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
</div>
<div className="flex items-center space-x-1 ml-2">
<button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
<FaFlag className="w-4 h-4" />
</button>
</div>
</div>
</div>
))
) : (
<div className="px-3 py-5 text-center">
<FaFlag className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Faz bulunamadı</h3>
<p className="mt-1 text-sm text-gray-500">
Bu proje için henüz faz tanımlanmamış.
</p>
</div>
)}
</div>
</div>
</div>
)}
{activeTab === 'tasks' && (
<div className="space-y-3">
{/* Tasks List */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="divide-y divide-gray-200">
{mockProjectTasks.filter((task) => task.projectId === project.id).length >
0 ? (
mockProjectTasks
.filter((task) => task.projectId === project.id)
.map((task) => (
<div key={task.id} className="px-3 py-2 hover:bg-gray-50">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center space-x-2 mb-1.5">
<h4 className="text-sm font-medium text-gray-900">
{task.name}
</h4>
<span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{task.taskCode}
</span>
<span
className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
task.status === TaskStatusEnum.Completed
? 'bg-green-100 text-green-800'
: task.status === TaskStatusEnum.InProgress
? 'bg-yellow-100 text-yellow-800'
: task.status === TaskStatusEnum.NotStarted
? 'bg-gray-100 text-gray-800'
: 'bg-red-100 text-red-800'
}`}
>
{task.status === TaskStatusEnum.Completed
? 'Tamamlandı'
: task.status === TaskStatusEnum.InProgress
? 'Devam Ediyor'
: task.status === TaskStatusEnum.NotStarted
? 'Başlamadı'
: task.status}
</span>
<span
className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
task.priority === PriorityEnum.High
? 'bg-red-100 text-red-800'
: task.priority === PriorityEnum.Normal
? 'bg-orange-100 text-orange-800'
: 'bg-green-100 text-green-800'
}`}
>
{task.priority === PriorityEnum.High
? 'Yüksek'
: task.priority === PriorityEnum.Normal
? 'Normal'
: task.priority === PriorityEnum.Urgent
? 'Acil'
: 'Düşük'}
</span>
</div>
<p className="text-sm text-gray-600 mb-2">{task.description}</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-2">
<div>
<p className="text-xs font-medium text-gray-700">Başlangıç</p>
<p className="text-xs text-gray-600">
{dayjs(task.startDate).format('DD.MM.YYYY')}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-700">Bitiş</p>
<p className="text-xs text-gray-600">
{dayjs(task.endDate).format('DD.MM.YYYY')}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-700">
Tahmini Saat
</p>
<p className="text-xs text-gray-600">
{task.estimatedHours}h
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-700">İlerleme</p>
<p className="text-xs text-gray-600">%{task.progress}</p>
</div>
</div>
<div className="w-full bg-gray-200 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full ${
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}%` }}
/>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="flex items-center space-x-1 ml-2">
<button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
<FaTasks className="w-4 h-4" />
</button>
</div>
</div>
</div>
))
) : (
<div className="px-3 py-5 text-center">
<FaTasks className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
Görev bulunamadı
</h3>
<p className="mt-1 text-sm text-gray-500">
Bu proje için henüz görev tanımlanmamış.
</p>
</div>
)}
</div>
</div>
</div>
)}
{activeTab === 'documents' && (
<div className="space-y-3">
{/* Documents List */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="divide-y divide-gray-200">
{project.documents.length > 0 ? (
project.documents.map((doc) => (
<div key={doc.id} className="px-3 py-2 hover:bg-gray-50">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
<FaFileAlt className="w-4 h-4 text-blue-600" />
</div>
<div>
<h4 className="text-sm font-medium text-gray-900">
{doc.documentName}
</h4>
<div className="flex items-center space-x-3 text-xs text-gray-500 mt-1">
<span>{doc.documentType}</span>
<span>{doc.fileSize} MB</span>
<span>{dayjs(doc.uploadedAt).format('DD.MM.YYYY')}</span>
<span>Yükleyen: {doc.uploadedBy}</span>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
<div className="flex items-center space-x-1 ml-2">
<button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
Project Management
2025-09-15 20:27:01 +00:00
<FaFolder className="w-4 h-4" />
erp modülleri initial
2025-09-15 09:31:47 +00:00
</button>
</div>
</div>
</div>
))
Project Management
2025-09-15 20:27:01 +00:00
) : (
<div className="px-3 py-5 text-center">
<FaFileAlt className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
Belge bulunamadı
</h3>
<p className="mt-1 text-sm text-gray-500">
Bu proje için henüz belge yüklenmemiş.
</p>
</div>
)}
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
{activeTab === 'risks' && (
<div className="space-y-3">
{/* Risks List */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="divide-y divide-gray-200">
{project.risks.length > 0 ? (
project.risks.map((risk) => (
<div key={risk.id} className="px-3 py-2 hover:bg-gray-50">
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center space-x-2 mb-1.5">
<h4 className="text-sm font-medium text-gray-900">
Project Management
2025-09-15 20:27:01 +00:00
{risk.title}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</h4>
Project Management
2025-09-15 20:27:01 +00:00
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
{risk.riskLevel}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
Project Management
2025-09-15 20:27:01 +00:00
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{risk.status}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<p className="text-sm text-gray-600 mb-1.5">{risk.description}</p>
{risk.mitigationPlan && (
<div className="bg-gray-50 rounded-lg p-2 mb-2">
<p className="text-xs font-medium text-gray-700 mb-1">
Önlem Planı:
erp modülleri initial
2025-09-15 09:31:47 +00:00
</p>
Project Management
2025-09-15 20:27:01 +00:00
<p className="text-xs text-gray-600">{risk.mitigationPlan}</p>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
<div className="flex items-center space-x-3 text-xs text-gray-500">
<span>Risk Kodu: {risk.riskCode}</span>
<span>
Tanımlama: {dayjs(risk.identifiedDate).format('DD.MM.YYYY')}
</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
<div className="flex items-center space-x-1 ml-2">
<button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
Project Management
2025-09-15 20:27:01 +00:00
<FaExclamationCircle className="w-4 h-4" />
erp modülleri initial
2025-09-15 09:31:47 +00:00
</button>
</div>
</div>
</div>
))
Project Management
2025-09-15 20:27:01 +00:00
) : (
<div className="px-3 py-5 text-center">
<FaExclamationCircle className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
Risk bulunamadı
</h3>
<p className="mt-1 text-sm text-gray-500">
Bu proje için henüz risk tanımlanmamış.
</p>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
{/* Financial Summary Tab */}
{activeTab === 'financial' && (
<div className="space-y-3">
{/* Overview Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
<div className="bg-white rounded-lg border border-gray-200 p-3">
<div className="flex items-center">
<div className="p-1.5 bg-blue-100 rounded-lg">
<FaDollarSign className="h-5 w-5 text-blue-600" />
</div>
<div className="ml-2">
<p className="text-sm font-medium text-gray-500">Toplam Bütçe</p>
<p className="text-base font-semibold text-gray-900">
₺{project.budget.toLocaleString()}
</p>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
<div className="bg-white rounded-lg border border-gray-200 p-3">
<div className="flex items-center">
<div className="p-1.5 bg-red-100 rounded-lg">
<FaDollarSign className="h-5 w-5 text-red-600" />
</div>
<div className="ml-2">
<p className="text-sm font-medium text-gray-500">Harcanan</p>
<p className="text-base font-semibold text-gray-900">
₺{project.actualCost.toLocaleString()}
</p>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="bg-white rounded-lg border border-gray-200 p-3">
<div className="flex items-center">
<div className="p-1.5 bg-green-100 rounded-lg">
<FaDollarSign className="h-5 w-5 text-green-600" />
</div>
<div className="ml-2">
<p className="text-sm font-medium text-gray-500">Kalan Bütçe</p>
<p className="text-base font-semibold text-gray-900">
₺{(project.budget - project.actualCost).toLocaleString()}
</p>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="bg-white rounded-lg border border-gray-200 p-3">
<div className="flex items-center">
<div className="p-1.5 bg-orange-100 rounded-lg">
<FaChartLine className="h-5 w-5 text-orange-600" />
</div>
<div className="ml-2">
<p className="text-sm font-medium text-gray-500">Kullanım Oranı</p>
<p className="text-base font-semibold text-gray-900">
%{budgetUsagePercentage.toFixed(1)}
</p>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Budget Progress */}
erp modülleri initial
2025-09-15 09:31:47 +00:00
<div className="bg-white rounded-lg border border-gray-200 p-3">
Project Management
2025-09-15 20:27:01 +00:00
<h3 className="text-base font-semibold text-gray-900 mb-2">
Bütçe Kullanım Durumu
</h3>
<div className="space-y-2">
<div className="flex justify-between text-xs">
<span>Harcanan: ₺{project.actualCost.toLocaleString()}</span>
<span>Toplam: ₺{project.budget.toLocaleString()}</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="w-full bg-gray-200 rounded-full h-2.5">
<div
className={`h-2.5 rounded-full transition-all duration-300 ${
budgetUsagePercentage > 90
? 'bg-red-500'
: budgetUsagePercentage > 70
? 'bg-orange-500'
: 'bg-green-500'
}`}
style={{
width: `${Math.min(budgetUsagePercentage, 100)}%`,
}}
/>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
<div
Project Management
2025-09-15 20:27:01 +00:00
className={`text-xs font-medium ${
erp modülleri initial
2025-09-15 09:31:47 +00:00
budgetUsagePercentage > 90
Project Management
2025-09-15 20:27:01 +00:00
? 'text-red-600'
erp modülleri initial
2025-09-15 09:31:47 +00:00
: budgetUsagePercentage > 70
Project Management
2025-09-15 20:27:01 +00:00
? 'text-orange-600'
: 'text-green-600'
erp modülleri initial
2025-09-15 09:31:47 +00:00
}`}
Project Management
2025-09-15 20:27:01 +00:00
>
{budgetUsagePercentage > 90
? 'Kritik Seviye - Bütçe Aşımı Riski'
erp modülleri initial
2025-09-15 09:31:47 +00:00
: budgetUsagePercentage > 70
Project Management
2025-09-15 20:27:01 +00:00
? 'Dikkat - Yüksek Kullanım'
: 'Normal Seviye'}
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Phase Costs */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="px-3 py-2 border-b border-gray-200">
<h3 className="text-base font-semibold text-gray-900">
Faz Bazında Maliyet Analizi
</h3>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 text-sm">
<thead className="bg-gray-50">
<tr>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Faz Adı
</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Bütçe
</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Harcanan
</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kalan
</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kullanım %
</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{mockProjectPhases
.filter((phase) => phase.projectId === project.id)
.map((phase) => {
const phaseUsage = (phase.actualCost / phase.budget) * 100
return (
<tr key={phase.id} className="hover:bg-gray-50">
<td className="px-3 py-2 whitespace-nowrap">
<div className="flex flex-col">
<div className="text-sm font-medium text-gray-900">
{phase.name}
</div>
<div className="text-sm text-gray-500">{phase.code}</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
</td>
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
₺{phase.budget.toLocaleString()}
</td>
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
₺{phase.actualCost.toLocaleString()}
</td>
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
₺{(phase.budget - phase.actualCost).toLocaleString()}
</td>
<td className="px-3 py-2 whitespace-nowrap">
<div className="flex items-center">
<div className="w-14 bg-gray-200 rounded-full h-1.5 mr-2">
<div
className={`h-1.5 rounded-full ${
phaseUsage > 90
? 'bg-red-500'
: phaseUsage > 70
? 'bg-orange-500'
: 'bg-green-500'
}`}
style={{
width: `${Math.min(phaseUsage, 100)}%`,
}}
/>
</div>
<span className="text-sm text-gray-900">
{phaseUsage.toFixed(1)}%
</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
Project Management
2025-09-15 20:27:01 +00:00
</td>
<td className="px-3 py-2 whitespace-nowrap">
<span
className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
phaseUsage > 100
? 'bg-red-100 text-red-800'
: phaseUsage > 90
? 'bg-orange-100 text-orange-800'
erp modülleri initial
2025-09-15 09:31:47 +00:00
: phaseUsage > 70
Project Management
2025-09-15 20:27:01 +00:00
? 'bg-yellow-100 text-yellow-800'
: 'bg-green-100 text-green-800'
}`}
>
{phaseUsage > 100
? 'Bütçe Aşımı'
erp modülleri initial
2025-09-15 09:31:47 +00:00
: phaseUsage > 90
Project Management
2025-09-15 20:27:01 +00:00
? 'Kritik'
: phaseUsage > 70
? 'Dikkat'
: 'Normal'}
</span>
</td>
</tr>
)
})}
</tbody>
</table>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
{/* Cost Breakdown */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div className="bg-white rounded-lg border border-gray-200 p-3">
<h3 className="text-base font-semibold text-gray-900 mb-2">
Maliyet Kategorileri
</h3>
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Personel Maliyeti</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
<span className="text-sm font-medium text-gray-900">
Project Management
2025-09-15 20:27:01 +00:00
₺{(project.actualCost * 0.6).toLocaleString()}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Malzeme Maliyeti</span>
erp modülleri initial
2025-09-15 09:31:47 +00:00
<span className="text-sm font-medium text-gray-900">
Project Management
2025-09-15 20:27:01 +00:00
₺{(project.actualCost * 0.25).toLocaleString()}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
</div>
Project Management
2025-09-15 20:27:01 +00:00
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">İş Merkezi Maliyeti</span>
<span className="text-sm font-medium text-gray-900">
₺{(project.actualCost * 0.1).toLocaleString()}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
Project Management
2025-09-15 20:27:01 +00:00
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Diğer Giderler</span>
<span className="text-sm font-medium text-gray-900">
₺{(project.actualCost * 0.05).toLocaleString()}
erp modülleri initial
2025-09-15 09:31:47 +00:00
</span>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
</div>
<div className="bg-white rounded-lg border border-gray-200 p-3">
<h3 className="text-base font-semibold text-gray-900 mb-2">
Maliyet Analizi
</h3>
<div className="space-y-2">
<div>
<div className="flex justify-between mb-1">
<span className="text-sm text-gray-600">Ortalama Günlük Harcama</span>
<span className="text-sm font-medium text-gray-900">
₺
{Math.round(
project.actualCost / Math.max(timeElapsed, 1),
).toLocaleString()}
</span>
</div>
</div>
<div>
<div className="flex justify-between mb-1">
<span className="text-sm text-gray-600">
Tahmini Proje Sonu Maliyeti
</span>
<span className="text-sm font-medium text-gray-900">
₺
{Math.round(
(project.actualCost / Math.max(project.progress, 1)) * 100,
).toLocaleString()}
</span>
</div>
</div>
<div>
<div className="flex justify-between mb-1">
<span className="text-sm text-gray-600">Maliyet Varyansı</span>
<span
className={`text-sm font-medium ${
project.actualCost > project.budget
? 'text-red-600'
: 'text-green-600'
}`}
>
{project.actualCost > project.budget ? '+' : ''}₺
{(project.actualCost - project.budget).toLocaleString()}
</span>
</div>
</div>
<div>
<div className="flex justify-between mb-1">
<span className="text-sm text-gray-600">
CPI (Maliyet Performans İndeksi)
</span>
<span
className={`text-sm font-medium ${
project.budget / project.actualCost >= 1
? 'text-green-600'
: 'text-red-600'
}`}
>
{(project.budget / project.actualCost).toFixed(2)}
</span>
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
</div>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
)}
</div>
erp modülleri initial
2025-09-15 09:31:47 +00:00
</div>
</div>
</div>
Project Management
2025-09-15 20:27:01 +00:00
</Container>
)
}
erp modülleri initial
2025-09-15 09:31:47 +00:00
Project Management
2025-09-15 20:27:01 +00:00
export default ProjectView
Reference in a new issue Copy permalink