256 lines
9.4 KiB
TypeScript
256 lines
9.4 KiB
TypeScript
|
import React, { useState } from "react";
|
|||
|
|
import { FaTimes, FaSave, FaExclamationTriangle } from "react-icons/fa";
|
|||
|
|
import {
|
|||
|
|
PmWorkCenter,
|
|||
|
|
WorkCenterStatusEnum,
|
|||
|
|
CriticalityLevelEnum,
|
|||
|
|
} from "../../../types/pm";
|
|||
|
|
import {
|
|||
|
|
getCriticalityLevelText,
|
|||
|
|
getWorkCenterStatusText,
|
|||
|
|
} from "../../../utils/erp";
|
|||
|
|
|
|||
|
|
interface StatusUpdateModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSave: (updatedWorkCenters: PmWorkCenter[]) => void;
|
|||
|
|
selectedWorkCenters: PmWorkCenter[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const StatusUpdateModal: React.FC<StatusUpdateModalProps> = ({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
onSave,
|
|||
|
|
selectedWorkCenters,
|
|||
|
|
}) => {
|
|||
|
|
const [newStatus, setNewStatus] = useState<WorkCenterStatusEnum>(
|
|||
|
|
WorkCenterStatusEnum.Operational
|
|||
|
|
);
|
|||
|
|
const [newCriticality, setNewCriticality] = useState<CriticalityLevelEnum>(
|
|||
|
|
CriticalityLevelEnum.Medium
|
|||
|
|
);
|
|||
|
|
const [updateStatus, setUpdateStatus] = useState(true);
|
|||
|
|
const [updateCriticality, setUpdateCriticality] = useState(false);
|
|||
|
|
const [reason, setReason] = useState("");
|
|||
|
|
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
const handleSave = () => {
|
|||
|
|
const updatedWorkCenters = selectedWorkCenters.map((workCenter) => ({
|
|||
|
|
...workCenter,
|
|||
|
|
status: updateStatus ? newStatus : workCenter.status,
|
|||
|
|
criticality: updateCriticality ? newCriticality : workCenter.criticality,
|
|||
|
|
lastModificationTime: new Date(),
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
onSave(updatedWorkCenters);
|
|||
|
|
onClose();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const isStatusCritical =
|
|||
|
|
newStatus === WorkCenterStatusEnum.OutOfOrder ||
|
|||
|
|
newStatus === WorkCenterStatusEnum.UnderMaintenance;
|
|||
|
|
|
|||
|
|
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-2xl 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-lg font-semibold text-gray-900">
|
|||
|
|
Durum Güncelle ({selectedWorkCenters.length} iş merkezi)
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="p-1 hover:bg-gray-100 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaTimes className="w-4 h-4 text-gray-500" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Content */}
|
|||
|
|
<div className="p-4 space-y-4">
|
|||
|
|
{/* Selected WorkCenter List */}
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-base font-medium text-gray-900 mb-2">
|
|||
|
|
Seçili İş Merkezleri
|
|||
|
|
</h3>
|
|||
|
|
<div className="max-h-28 overflow-y-auto bg-gray-50 rounded-lg p-2">
|
|||
|
|
{selectedWorkCenters.map((workCenter) => (
|
|||
|
|
<div
|
|||
|
|
key={workCenter.id}
|
|||
|
|
className="flex items-center justify-between py-0.5"
|
|||
|
|
>
|
|||
|
|
<span className="text-sm text-gray-700">
|
|||
|
|
{workCenter.code} - {workCenter.name}
|
|||
|
|
</span>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<span className="text-xs text-gray-500">
|
|||
|
|
Mevcut: {getWorkCenterStatusText(workCenter.status)}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-xs text-gray-500">
|
|||
|
|
{getCriticalityLevelText(workCenter.criticality)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Status Update Options */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<div className="flex items-center space-x-3">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
id="updateStatus"
|
|||
|
|
checked={updateStatus}
|
|||
|
|
onChange={(e) => setUpdateStatus(e.target.checked)}
|
|||
|
|
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|||
|
|
/>
|
|||
|
|
<label
|
|||
|
|
htmlFor="updateStatus"
|
|||
|
|
className="text-sm font-medium text-gray-700"
|
|||
|
|
>
|
|||
|
|
Operasyonel durumu güncelle
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{updateStatus && (
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Yeni Durum
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={newStatus}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setNewStatus(e.target.value as WorkCenterStatusEnum)
|
|||
|
|
}
|
|||
|
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value={WorkCenterStatusEnum.Operational}>
|
|||
|
|
Operasyonel
|
|||
|
|
</option>
|
|||
|
|
<option value={WorkCenterStatusEnum.UnderMaintenance}>
|
|||
|
|
Bakımda
|
|||
|
|
</option>
|
|||
|
|
<option value={WorkCenterStatusEnum.OutOfOrder}>
|
|||
|
|
Arızalı
|
|||
|
|
</option>
|
|||
|
|
<option value={WorkCenterStatusEnum.Retired}>Emekli</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
{isStatusCritical && (
|
|||
|
|
<div className="mt-2 p-2 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<FaExclamationTriangle className="w-4 h-4 text-yellow-600" />
|
|||
|
|
<span className="text-sm text-yellow-800 font-medium">
|
|||
|
|
Dikkat!
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-yellow-700 mt-1">
|
|||
|
|
Bu durum değişikliği iş merkezinin üretim kapasitesini
|
|||
|
|
etkileyebilir.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex items-center space-x-3">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
id="updateCriticality"
|
|||
|
|
checked={updateCriticality}
|
|||
|
|
onChange={(e) => setUpdateCriticality(e.target.checked)}
|
|||
|
|
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|||
|
|
/>
|
|||
|
|
<label
|
|||
|
|
htmlFor="updateCriticality"
|
|||
|
|
className="text-sm font-medium text-gray-700"
|
|||
|
|
>
|
|||
|
|
Kritiklik seviyesini güncelle
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{updateCriticality && (
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Yeni Kritiklik Seviyesi
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={newCriticality}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setNewCriticality(e.target.value as CriticalityLevelEnum)
|
|||
|
|
}
|
|||
|
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value={CriticalityLevelEnum.Low}>Düşük</option>
|
|||
|
|
<option value={CriticalityLevelEnum.Medium}>Orta</option>
|
|||
|
|
<option value={CriticalityLevelEnum.High}>Yüksek</option>
|
|||
|
|
<option value={CriticalityLevelEnum.Critical}>Kritik</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Reason */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Değişiklik Nedeni
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={reason}
|
|||
|
|
onChange={(e) => setReason(e.target.value)}
|
|||
|
|
rows={2}
|
|||
|
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
placeholder="Durum değişikliğinin nedenini açıklayın..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Summary */}
|
|||
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|||
|
|
<h4 className="font-medium text-blue-900 mb-2">Değişiklik Özeti</h4>
|
|||
|
|
<div className="text-sm text-blue-800 space-y-1">
|
|||
|
|
<p>• {selectedWorkCenters.length} iş merkezi güncellenecek</p>
|
|||
|
|
{updateStatus && (
|
|||
|
|
<p>
|
|||
|
|
• Durum "{getWorkCenterStatusText(newStatus)}" olarak
|
|||
|
|
değiştirilecek
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
{updateCriticality && (
|
|||
|
|
<p>
|
|||
|
|
• Kritiklik seviyesi "
|
|||
|
|
{getCriticalityLevelText(newCriticality)}" olarak
|
|||
|
|
değiştirilecek
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Footer */}
|
|||
|
|
<div className="flex items-center justify-end space-x-2 p-4 border-t border-gray-200">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
İptal
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleSave}
|
|||
|
|
disabled={!updateStatus && !updateCriticality}
|
|||
|
|
className="flex items-center space-x-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaSave className="w-4 h-4" />
|
|||
|
|
<span>Durumu Güncelle</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default StatusUpdateModal;
|