483 lines
18 KiB
TypeScript
483 lines
18 KiB
TypeScript
|
import React, { useState } from "react";
|
|||
|
|
import { FaTimes, FaSave, FaUpload, FaMinus } from "react-icons/fa";
|
|||
|
|
import {
|
|||
|
|
PmFaultNotification,
|
|||
|
|
FaultTypeEnum,
|
|||
|
|
CriticalityLevelEnum,
|
|||
|
|
NotificationStatusEnum,
|
|||
|
|
} from "../../../types/pm";
|
|||
|
|
import { mockWorkCenters } from "../../../mocks/mockWorkCenters";
|
|||
|
|
import { mockEmployees } from "../../../mocks/mockEmployees";
|
|||
|
|
import { PriorityEnum } from "../../../types/common";
|
|||
|
|
|
|||
|
|
interface NewFaultNotificationModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSave: (notification: Partial<PmFaultNotification>) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const NewFaultNotificationModal: React.FC<NewFaultNotificationModalProps> = ({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
onSave,
|
|||
|
|
}) => {
|
|||
|
|
const [notificationData, setNotificationData] = useState<
|
|||
|
|
Partial<PmFaultNotification>
|
|||
|
|
>({
|
|||
|
|
notificationCode: `ARZ-${new Date().getFullYear()}-${String(
|
|||
|
|
Date.now()
|
|||
|
|
).slice(-3)}`,
|
|||
|
|
faultType: FaultTypeEnum.Mechanical,
|
|||
|
|
priority: PriorityEnum.Normal,
|
|||
|
|
severity: CriticalityLevelEnum.Medium,
|
|||
|
|
status: NotificationStatusEnum.Open,
|
|||
|
|
followUpRequired: false,
|
|||
|
|
isActive: true,
|
|||
|
|
images: [],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|||
|
|
const [uploadedImages, setUploadedImages] = useState<string[]>([]);
|
|||
|
|
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
const validateForm = () => {
|
|||
|
|
const newErrors: Record<string, string> = {};
|
|||
|
|
|
|||
|
|
if (!notificationData.workCenterId) {
|
|||
|
|
newErrors.workCenterId = "İş merkezi seçimi gerekli";
|
|||
|
|
}
|
|||
|
|
if (!notificationData.title?.trim()) {
|
|||
|
|
newErrors.title = "Başlık gerekli";
|
|||
|
|
}
|
|||
|
|
if (!notificationData.description?.trim()) {
|
|||
|
|
newErrors.description = "Açıklama gerekli";
|
|||
|
|
}
|
|||
|
|
if (!notificationData.location?.trim()) {
|
|||
|
|
newErrors.location = "Konum gerekli";
|
|||
|
|
}
|
|||
|
|
if (!notificationData.reportedBy?.trim()) {
|
|||
|
|
newErrors.reportedBy = "Bildiren kişi gerekli";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setErrors(newErrors);
|
|||
|
|
return Object.keys(newErrors).length === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleInputChange = (
|
|||
|
|
field: keyof PmFaultNotification,
|
|||
|
|
value: string | number | boolean | undefined
|
|||
|
|
) => {
|
|||
|
|
setNotificationData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[field]: value,
|
|||
|
|
}));
|
|||
|
|
// Clear error when user starts typing
|
|||
|
|
if (errors[field]) {
|
|||
|
|
setErrors((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[field]: "",
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleWorkCenterChange = (workCenterId: string) => {
|
|||
|
|
const selectedWorkCenter = mockWorkCenters.find(
|
|||
|
|
(eq) => eq.id === workCenterId
|
|||
|
|
);
|
|||
|
|
if (selectedWorkCenter) {
|
|||
|
|
setNotificationData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
workCenterId: selectedWorkCenter.id,
|
|||
|
|
workCenterCode: selectedWorkCenter.code,
|
|||
|
|
workCenterName: selectedWorkCenter.name,
|
|||
|
|
location: selectedWorkCenter.location,
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const files = event.target.files;
|
|||
|
|
if (files) {
|
|||
|
|
const imageNames = Array.from(files).map((file) => file.name);
|
|||
|
|
setUploadedImages((prev) => [...prev, ...imageNames]);
|
|||
|
|
setNotificationData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
images: [...(prev.images || []), ...imageNames],
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeImage = (index: number) => {
|
|||
|
|
setUploadedImages((prev) => prev.filter((_, i) => i !== index));
|
|||
|
|
setNotificationData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
images: prev.images?.filter((_, i) => i !== index) || [],
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSave = () => {
|
|||
|
|
if (validateForm()) {
|
|||
|
|
const notificationToSave: Partial<PmFaultNotification> = {
|
|||
|
|
...notificationData,
|
|||
|
|
id: `FN${Date.now()}`,
|
|||
|
|
reportedAt: new Date(),
|
|||
|
|
creationTime: new Date(),
|
|||
|
|
lastModificationTime: new Date(),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onSave(notificationToSave);
|
|||
|
|
onClose();
|
|||
|
|
|
|||
|
|
// Reset form
|
|||
|
|
setNotificationData({
|
|||
|
|
notificationCode: `ARZ-${new Date().getFullYear()}-${String(
|
|||
|
|
Date.now()
|
|||
|
|
).slice(-3)}`,
|
|||
|
|
faultType: FaultTypeEnum.Mechanical,
|
|||
|
|
priority: PriorityEnum.Normal,
|
|||
|
|
severity: CriticalityLevelEnum.Medium,
|
|||
|
|
status: NotificationStatusEnum.Open,
|
|||
|
|
followUpRequired: false,
|
|||
|
|
isActive: true,
|
|||
|
|
images: [],
|
|||
|
|
});
|
|||
|
|
setUploadedImages([]);
|
|||
|
|
setErrors({});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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-3xl 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 Arıza Bildirimi
|
|||
|
|
</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>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Bildirim Kodu *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={notificationData.notificationCode || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("notificationCode", 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"
|
|||
|
|
placeholder="ARZ-2024-001"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
İş Merkezi *
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={notificationData.workCenterId || ""}
|
|||
|
|
onChange={(e) => handleWorkCenterChange(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.workCenterId ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<option value="">İş merkezi seçin</option>
|
|||
|
|
{mockWorkCenters.map((workCenter) => (
|
|||
|
|
<option key={workCenter.id} value={workCenter.id}>
|
|||
|
|
{workCenter.code} - {workCenter.name}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
{errors.workCenterId && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">
|
|||
|
|
{errors.workCenterId}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Title and Description */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Arıza Başlığı *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={notificationData.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="Arıza 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">
|
|||
|
|
Detaylı Açıklama *
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={notificationData.description || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("description", e.target.value)
|
|||
|
|
}
|
|||
|
|
rows={2}
|
|||
|
|
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.description ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
placeholder="Arızanın detaylı açıklaması, belirtiler ve gözlemler"
|
|||
|
|
/>
|
|||
|
|
{errors.description && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">
|
|||
|
|
{errors.description}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Location and Reporter */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Konum *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={notificationData.location || ""}
|
|||
|
|
onChange={(e) => handleInputChange("location", 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.location ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
placeholder="Atölye A - Hat 1"
|
|||
|
|
/>
|
|||
|
|
{errors.location && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">{errors.location}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Bildiren Kişi *
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={notificationData.reportedBy || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("reportedBy", 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.reportedBy ? "border-red-500" : "border-gray-300"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<option value="">Bildiren kişi seçin</option>
|
|||
|
|
{mockEmployees.map((employee) => (
|
|||
|
|
<option key={employee.id} value={employee.fullName}>
|
|||
|
|
{employee.fullName} - {employee.jobPosition?.name}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
{errors.reportedBy && (
|
|||
|
|
<p className="text-red-500 text-xs mt-1">{errors.reportedBy}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<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">
|
|||
|
|
Arıza Türü
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={notificationData.faultType || FaultTypeEnum.Mechanical}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange(
|
|||
|
|
"faultType",
|
|||
|
|
e.target.value as FaultTypeEnum
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
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={FaultTypeEnum.Mechanical}>Mekanik</option>
|
|||
|
|
<option value={FaultTypeEnum.Electrical}>Elektrik</option>
|
|||
|
|
<option value={FaultTypeEnum.Hydraulic}>Hidrolik</option>
|
|||
|
|
<option value={FaultTypeEnum.Pneumatic}>Pnömatik</option>
|
|||
|
|
<option value={FaultTypeEnum.Software}>Yazılım</option>
|
|||
|
|
<option value={FaultTypeEnum.Safety}>Güvenlik</option>
|
|||
|
|
<option value={FaultTypeEnum.Performance}>Performans</option>
|
|||
|
|
<option value={FaultTypeEnum.Other}>Diğer</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Öncelik
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={notificationData.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">
|
|||
|
|
Kritiklik
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={notificationData.severity || CriticalityLevelEnum.Medium}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange(
|
|||
|
|
"severity",
|
|||
|
|
e.target.value as CriticalityLevelEnum
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
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={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>
|
|||
|
|
|
|||
|
|
{/* Estimated Repair Time */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Tahmini Onarım Süresi (dakika)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={notificationData.estimatedRepairTime || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange(
|
|||
|
|
"estimatedRepairTime",
|
|||
|
|
parseInt(e.target.value) || undefined
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
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"
|
|||
|
|
placeholder="120"
|
|||
|
|
min="0"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<label className="flex items-center">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={notificationData.followUpRequired || false}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("followUpRequired", e.target.checked)
|
|||
|
|
}
|
|||
|
|
className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
|||
|
|
/>
|
|||
|
|
<span className="ml-2 text-sm text-gray-700">
|
|||
|
|
Takip gerekli
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Image Upload */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Fotoğraflar
|
|||
|
|
</label>
|
|||
|
|
<div className="border-2 border-dashed border-gray-300 rounded-lg p-4">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<FaUpload className="mx-auto h-10 w-10 text-gray-400" />
|
|||
|
|
<div className="mt-4">
|
|||
|
|
<label htmlFor="image-upload" className="cursor-pointer">
|
|||
|
|
<span className="mt-2 block text-sm font-medium text-gray-900">
|
|||
|
|
Fotoğraf yükleyin
|
|||
|
|
</span>
|
|||
|
|
<span className="mt-1 block text-sm text-gray-500">
|
|||
|
|
PNG, JPG, GIF formatında dosyalar
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="image-upload"
|
|||
|
|
name="image-upload"
|
|||
|
|
type="file"
|
|||
|
|
multiple
|
|||
|
|
accept="image/*"
|
|||
|
|
className="sr-only"
|
|||
|
|
onChange={handleImageUpload}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{uploadedImages.length > 0 && (
|
|||
|
|
<div className="mt-4">
|
|||
|
|
<h4 className="text-sm font-medium text-gray-700 mb-1">
|
|||
|
|
Yüklenen Fotoğraflar:
|
|||
|
|
</h4>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{uploadedImages.map((image, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="flex items-center justify-between p-1.5 bg-gray-50 rounded"
|
|||
|
|
>
|
|||
|
|
<span className="text-sm text-gray-600">{image}</span>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => removeImage(index)}
|
|||
|
|
className="text-red-600 hover:text-red-800"
|
|||
|
|
>
|
|||
|
|
<FaMinus className="w-3 h-3" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</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 NewFaultNotificationModal;
|