238 lines
7.6 KiB
TypeScript
238 lines
7.6 KiB
TypeScript
import React from "react";
|
||
import {
|
||
FaTimes,
|
||
FaTasks,
|
||
FaCalendar,
|
||
FaUser,
|
||
FaChartLine,
|
||
} from "react-icons/fa";
|
||
import { mockProjectTasks } from "../../../mocks/mockProjectTasks";
|
||
import { PsProject, TaskStatusEnum } from "../../../types/ps";
|
||
import dayjs from "dayjs";
|
||
import { PriorityEnum } from "../../../types/common";
|
||
|
||
interface TaskViewModalProps {
|
||
project: PsProject;
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
const statusConfig = {
|
||
[TaskStatusEnum.NotStarted]: {
|
||
name: "Başlamadı",
|
||
color: "bg-gray-100 text-gray-800",
|
||
},
|
||
[TaskStatusEnum.InProgress]: {
|
||
name: "Devam Ediyor",
|
||
color: "bg-yellow-100 text-yellow-800",
|
||
},
|
||
[TaskStatusEnum.Completed]: {
|
||
name: "Tamamlandı",
|
||
color: "bg-green-100 text-green-800",
|
||
},
|
||
[TaskStatusEnum.OnHold]: {
|
||
name: "Beklemede",
|
||
color: "bg-orange-100 text-orange-800",
|
||
},
|
||
[TaskStatusEnum.Cancelled]: {
|
||
name: "İptal Edildi",
|
||
color: "bg-red-100 text-red-800",
|
||
},
|
||
};
|
||
|
||
const priorityConfig = {
|
||
[PriorityEnum.Low]: { name: "Düşük", color: "bg-green-100 text-green-800" },
|
||
[PriorityEnum.Normal]: { name: "Normal", color: "bg-blue-100 text-blue-800" },
|
||
[PriorityEnum.High]: {
|
||
name: "Yüksek",
|
||
color: "bg-orange-100 text-orange-800",
|
||
},
|
||
[PriorityEnum.Urgent]: { name: "Acil", color: "bg-red-100 text-red-800" },
|
||
};
|
||
|
||
const Badge: React.FC<{ className?: string; children: React.ReactNode }> = ({
|
||
className,
|
||
children,
|
||
}) => (
|
||
<span
|
||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${className}`}
|
||
>
|
||
{children}
|
||
</span>
|
||
);
|
||
|
||
const TaskInfo: React.FC<{
|
||
icon: React.ElementType;
|
||
label: string;
|
||
value: string | number;
|
||
}> = ({ icon: Icon, label, value }) => (
|
||
<div className="flex items-center space-x-2">
|
||
<Icon className="h-4 w-4 text-gray-400" />
|
||
<div>
|
||
<p className="text-xs font-medium text-gray-700">{label}</p>
|
||
<p className="text-xs text-gray-600">{value}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
|
||
const getProgressColor = (p: number) => {
|
||
if (p >= 100) return "bg-green-500";
|
||
if (p >= 70) return "bg-blue-500";
|
||
if (p >= 50) return "bg-yellow-500";
|
||
return "bg-red-500";
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="font-medium">İlerleme</span>
|
||
<span>%{progress}</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||
<div
|
||
className={`h-2 rounded-full transition-all duration-300 ${getProgressColor(
|
||
progress
|
||
)}`}
|
||
style={{ width: `${progress}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const TaskViewModal: React.FC<TaskViewModalProps> = ({
|
||
project,
|
||
isOpen,
|
||
onClose,
|
||
}) => {
|
||
if (!isOpen) return null;
|
||
|
||
const projectTasks = mockProjectTasks.filter(
|
||
(task) => task.projectId === project.id
|
||
);
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||
<div className="relative top-10 mx-auto p-2 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
|
||
<div className="flex items-center justify-between p-2.5 border-b border-gray-200">
|
||
<div className="flex items-center">
|
||
<FaTasks className="h-6 w-6 text-blue-600 mr-3" />
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-gray-900">
|
||
Proje Görevleri
|
||
</h3>
|
||
<p className="text-gray-600">
|
||
{project.name} - {project.code}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-gray-400 hover:text-gray-600 focus:outline-none"
|
||
>
|
||
<FaTimes className="h-6 w-6" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-2.5 max-h-[75vh] overflow-y-auto">
|
||
{projectTasks.length > 0 ? (
|
||
<div className="space-y-3">
|
||
{projectTasks.map((task) => (
|
||
<div
|
||
key={task.id}
|
||
className="bg-white border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow"
|
||
>
|
||
<div className="flex items-center flex-wrap gap-2 mb-2">
|
||
<h4 className="text-base font-medium text-gray-900 flex-shrink-0">
|
||
{task.name}
|
||
</h4>
|
||
<Badge className="bg-gray-200 text-gray-700">
|
||
{task.taskCode}
|
||
</Badge>
|
||
<Badge className={statusConfig[task.status]?.color}>
|
||
{statusConfig[task.status]?.name || "Bilinmiyor"}
|
||
</Badge>
|
||
<Badge
|
||
className={
|
||
priorityConfig[task.priority as PriorityEnum]?.color
|
||
}
|
||
>
|
||
{priorityConfig[task.priority as PriorityEnum]?.name ||
|
||
"Bilinmiyor"}
|
||
</Badge>
|
||
</div>
|
||
|
||
{task.description && (
|
||
<p className="text-sm text-gray-600 mb-3">
|
||
{task.description}
|
||
</p>
|
||
)}
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3 border-t border-b border-gray-100 py-2.5">
|
||
<TaskInfo
|
||
icon={FaCalendar}
|
||
label="Başlangıç"
|
||
value={dayjs(task.startDate).format("DD.MM.YYYY")}
|
||
/>
|
||
<TaskInfo
|
||
icon={FaCalendar}
|
||
label="Bitiş"
|
||
value={dayjs(task.endDate).format("DD.MM.YYYY")}
|
||
/>
|
||
<TaskInfo
|
||
icon={FaUser}
|
||
label="Atanan"
|
||
value={task.assignee?.fullName || "-"}
|
||
/>
|
||
<TaskInfo
|
||
icon={FaChartLine}
|
||
label="Tahmini Süre"
|
||
value={`${task.estimatedHours} saat`}
|
||
/>
|
||
</div>
|
||
|
||
<ProgressBar progress={task.progress} />
|
||
|
||
{task.actualHours > 0 && (
|
||
<div className="mt-2.5 pt-2.5 border-t border-gray-200">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-600">Gerçek Saat:</span>
|
||
<span className="font-medium">
|
||
{task.actualHours}h / {task.estimatedHours}h
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-10">
|
||
<FaTasks className="mx-auto h-10 w-10 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 className="px-2.5 py-2 bg-gray-50 border-t border-gray-200 rounded-b-md">
|
||
<div className="flex justify-end">
|
||
<button
|
||
onClick={onClose}
|
||
className="px-3 py-1.5 bg-gray-600 text-white text-sm font-medium rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||
>
|
||
Kapat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TaskViewModal;
|