435 lines
15 KiB
TypeScript
435 lines
15 KiB
TypeScript
|
import React, { useState, useEffect } from "react";
|
|||
|
|
import { FaTimes, FaSave, FaCalendar, FaClock } from "react-icons/fa";
|
|||
|
|
import { PmCalendarEvent, WorkOrderStatusEnum } from "../../../types/pm";
|
|||
|
|
import { mockWorkCenters } from "../../../mocks/mockWorkCenters";
|
|||
|
|
import { mockEmployees } from "../../../mocks/mockEmployees";
|
|||
|
|
import { PriorityEnum } from "../../../types/common";
|
|||
|
|
|
|||
|
|
interface NewCalendarEventModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSave: (event: Partial<PmCalendarEvent>) => void;
|
|||
|
|
selectedDate?: Date;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const NewCalendarEventModal: React.FC<NewCalendarEventModalProps> = ({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
onSave,
|
|||
|
|
selectedDate,
|
|||
|
|
}) => {
|
|||
|
|
const getInitialStartTime = () => {
|
|||
|
|
if (selectedDate) {
|
|||
|
|
const hour = selectedDate.getHours();
|
|||
|
|
const minute = selectedDate.getMinutes();
|
|||
|
|
return `${hour.toString().padStart(2, "0")}:${minute
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}`;
|
|||
|
|
}
|
|||
|
|
return "09:00";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getInitialEndTime = () => {
|
|||
|
|
if (selectedDate) {
|
|||
|
|
const endTime = new Date(selectedDate);
|
|||
|
|
endTime.setHours(endTime.getHours() + 1);
|
|||
|
|
const hour = endTime.getHours();
|
|||
|
|
const minute = endTime.getMinutes();
|
|||
|
|
return `${hour.toString().padStart(2, "0")}:${minute
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}`;
|
|||
|
|
}
|
|||
|
|
return "10:00";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const [eventData, setEventData] = useState<Partial<PmCalendarEvent>>({
|
|||
|
|
title: "",
|
|||
|
|
type: "plan",
|
|||
|
|
date: selectedDate || new Date(),
|
|||
|
|
startTime: getInitialStartTime(),
|
|||
|
|
endTime: getInitialEndTime(),
|
|||
|
|
status: WorkOrderStatusEnum.Planned,
|
|||
|
|
priority: PriorityEnum.Normal,
|
|||
|
|
assignedTo: "",
|
|||
|
|
workCenterCode: "",
|
|||
|
|
duration: 60,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|||
|
|
|
|||
|
|
// Update form data when selectedDate changes
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (selectedDate) {
|
|||
|
|
const getInitialStartTime = () => {
|
|||
|
|
const hour = selectedDate.getHours();
|
|||
|
|
const minute = selectedDate.getMinutes();
|
|||
|
|
return `${hour.toString().padStart(2, "0")}:${minute
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getInitialEndTime = () => {
|
|||
|
|
const endTime = new Date(selectedDate);
|
|||
|
|
endTime.setHours(endTime.getHours() + 1);
|
|||
|
|
const hour = endTime.getHours();
|
|||
|
|
const minute = endTime.getMinutes();
|
|||
|
|
return `${hour.toString().padStart(2, "0")}:${minute
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setEventData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
date: selectedDate,
|
|||
|
|
startTime: getInitialStartTime(),
|
|||
|
|
endTime: getInitialEndTime(),
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
}, [selectedDate]);
|
|||
|
|
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
const validateForm = () => {
|
|||
|
|
const newErrors: Record<string, string> = {};
|
|||
|
|
|
|||
|
|
if (!eventData.title?.trim()) {
|
|||
|
|
newErrors.title = "Başlık gerekli";
|
|||
|
|
}
|
|||
|
|
if (!eventData.workCenterCode?.trim()) {
|
|||
|
|
newErrors.workCenterCode = "İş Merkezi seçimi gerekli";
|
|||
|
|
}
|
|||
|
|
if (!eventData.startTime) {
|
|||
|
|
newErrors.startTime = "Başlangıç saati gerekli";
|
|||
|
|
}
|
|||
|
|
if (!eventData.endTime) {
|
|||
|
|
newErrors.endTime = "Bitiş saati gerekli";
|
|||
|
|
}
|
|||
|
|
if (eventData.startTime && eventData.endTime) {
|
|||
|
|
const start = new Date(`2000-01-01 ${eventData.startTime}`);
|
|||
|
|
const end = new Date(`2000-01-01 ${eventData.endTime}`);
|
|||
|
|
if (start >= end) {
|
|||
|
|
newErrors.endTime = "Bitiş saati başlangıç saatinden sonra olmalı";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setErrors(newErrors);
|
|||
|
|
return Object.keys(newErrors).length === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSave = () => {
|
|||
|
|
if (validateForm()) {
|
|||
|
|
// Calculate duration
|
|||
|
|
if (eventData.startTime && eventData.endTime) {
|
|||
|
|
const start = new Date(`2000-01-01 ${eventData.startTime}`);
|
|||
|
|
const end = new Date(`2000-01-01 ${eventData.endTime}`);
|
|||
|
|
const durationMinutes = (end.getTime() - start.getTime()) / (1000 * 60);
|
|||
|
|
eventData.duration = durationMinutes;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onSave({
|
|||
|
|
...eventData,
|
|||
|
|
id: `E${Date.now()}`, // Generate a simple ID
|
|||
|
|
});
|
|||
|
|
onClose();
|
|||
|
|
// Reset form
|
|||
|
|
setEventData({
|
|||
|
|
title: "",
|
|||
|
|
type: "plan",
|
|||
|
|
date: selectedDate || new Date(),
|
|||
|
|
startTime: getInitialStartTime(),
|
|||
|
|
endTime: getInitialEndTime(),
|
|||
|
|
status: WorkOrderStatusEnum.Planned,
|
|||
|
|
priority: PriorityEnum.Normal,
|
|||
|
|
assignedTo: "",
|
|||
|
|
workCenterCode: "",
|
|||
|
|
duration: 60,
|
|||
|
|
});
|
|||
|
|
setErrors({});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleInputChange = (
|
|||
|
|
field: keyof PmCalendarEvent,
|
|||
|
|
value:
|
|||
|
|
| string
|
|||
|
|
| Date
|
|||
|
|
| PriorityEnum
|
|||
|
|
| WorkOrderStatusEnum
|
|||
|
|
| "plan"
|
|||
|
|
| "workorder"
|
|||
|
|
| "scheduled"
|
|||
|
|
) => {
|
|||
|
|
setEventData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[field]: value,
|
|||
|
|
}));
|
|||
|
|
// Clear error when user starts typing
|
|||
|
|
if (errors[field]) {
|
|||
|
|
setErrors((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[field]: "",
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const generateTimeOptions = () => {
|
|||
|
|
const options = [];
|
|||
|
|
for (let hour = 0; hour < 24; hour++) {
|
|||
|
|
for (let minute = 0; minute < 60; minute += 30) {
|
|||
|
|
const timeString = `${hour.toString().padStart(2, "0")}:${minute
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}`;
|
|||
|
|
options.push(timeString);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return options;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const timeOptions = generateTimeOptions();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|||
|
|
<div className="bg-white rounded-lg w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
|||
|
|
<h2 className="text-xl font-bold text-gray-900">
|
|||
|
|
Yeni Bakım Planlaması
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaTimes className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Content */}
|
|||
|
|
<div className="p-3 space-y-3">
|
|||
|
|
{/* Basic Info */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
<div className="md:col-span-2">
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Başlık *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={eventData.title || ""}
|
|||
|
|
onChange={(e) => handleInputChange("title", e.target.value)}
|
|||
|
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
|
|||
|
|
errors.title ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
placeholder="Bakım planı başlığı"
|
|||
|
|
/>
|
|||
|
|
{errors.title && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">{errors.title}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Tip
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.type || "plan"}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange(
|
|||
|
|
"type",
|
|||
|
|
e.target.value as "plan" | "workorder"
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="plan">Bakım Planı</option>
|
|||
|
|
<option value="workorder">İş Emri</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Öncelik
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.priority || PriorityEnum.Normal}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("priority", e.target.value as PriorityEnum)
|
|||
|
|
}
|
|||
|
|
className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value={PriorityEnum.Low}>Düşük</option>
|
|||
|
|
<option value={PriorityEnum.Normal}>Normal</option>
|
|||
|
|
<option value={PriorityEnum.High}>Yüksek</option>
|
|||
|
|
<option value={PriorityEnum.Urgent}>Acil</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
İş Merkezi *
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.workCenterCode || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("workCenterCode", e.target.value)
|
|||
|
|
}
|
|||
|
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
|
|||
|
|
errors.workCenterCode ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<option value="">İş merkezi seçin</option>
|
|||
|
|
{mockWorkCenters.map((workCenter) => (
|
|||
|
|
<option key={workCenter.id} value={workCenter.code}>
|
|||
|
|
{workCenter.code} - {workCenter.name}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
{errors.workCenterCode && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">
|
|||
|
|
{errors.workCenterCode}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Atanan Kişi
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.assignedTo || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("assignedTo", e.target.value)
|
|||
|
|
}
|
|||
|
|
className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Kişi seçin</option>
|
|||
|
|
{mockEmployees.map((employee) => (
|
|||
|
|
<option key={employee.id} value={employee.fullName}>
|
|||
|
|
{employee.fullName} ({employee.code})
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Date and Time */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
<FaCalendar className="inline w-4 h-4 mr-2" />
|
|||
|
|
Tarih
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={eventData.date?.toISOString().split("T")[0] || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("date", new Date(e.target.value))
|
|||
|
|
}
|
|||
|
|
className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
<FaClock className="inline w-4 h-4 mr-2" />
|
|||
|
|
Başlangıç Saati *
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.startTime || "09:00"}
|
|||
|
|
onChange={(e) => handleInputChange("startTime", e.target.value)}
|
|||
|
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
|
|||
|
|
errors.startTime ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{timeOptions.map((time) => (
|
|||
|
|
<option key={time} value={time}>
|
|||
|
|
{time}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
{errors.startTime && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">{errors.startTime}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Bitiş Saati *
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.endTime || "10:00"}
|
|||
|
|
onChange={(e) => handleInputChange("endTime", e.target.value)}
|
|||
|
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
|
|||
|
|
errors.endTime ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{timeOptions.map((time) => (
|
|||
|
|
<option key={time} value={time}>
|
|||
|
|
{time}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
{errors.endTime && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">{errors.endTime}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Status */}
|
|||
|
|
{eventData.type === "workorder" && (
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Durum
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={eventData.status || "scheduled"}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange(
|
|||
|
|
"status",
|
|||
|
|
e.target.value as WorkOrderStatusEnum | "scheduled"
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="scheduled">Planlanmış</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.Created}>Oluşturuldu</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.Planned}>Planlandı</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.Released}>
|
|||
|
|
Serbest Bırakıldı
|
|||
|
|
</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.InProgress}>
|
|||
|
|
Devam Ediyor
|
|||
|
|
</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.OnHold}>Beklemede</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.Completed}>
|
|||
|
|
Tamamlandı
|
|||
|
|
</option>
|
|||
|
|
<option value={WorkOrderStatusEnum.Cancelled}>
|
|||
|
|
İptal Edildi
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Footer */}
|
|||
|
|
<div className="flex items-center justify-end space-x-2 p-3 border-t border-gray-200">
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
İptal
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={handleSave}
|
|||
|
|
className="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2"
|
|||
|
|
>
|
|||
|
|
<FaSave className="w-4 h-4" />
|
|||
|
|
<span>Kaydet</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default NewCalendarEventModal;
|