498 lines
23 KiB
TypeScript
498 lines
23 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { Incident, Building } from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { backendApi } from '../../services/apiClient';
|
|||
|
|
import {
|
|||
|
|
ShieldAlert,
|
|||
|
|
AlertCircle,
|
|||
|
|
MessageCircle,
|
|||
|
|
CheckCircle2,
|
|||
|
|
Phone,
|
|||
|
|
Search,
|
|||
|
|
Filter,
|
|||
|
|
Trash2,
|
|||
|
|
ChevronRight,
|
|||
|
|
Plus,
|
|||
|
|
Loader2,
|
|||
|
|
X
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
|
|||
|
|
export const NegativeResolution: React.FC = () => {
|
|||
|
|
const [incidents, setIncidents] = useState<Incident[]>([]);
|
|||
|
|
const [isLoading, setIsLoading] = useState(true);
|
|||
|
|
const [filterStatus, setFilterStatus] = useState<string>('');
|
|||
|
|
const [filterType, setFilterType] = useState<string>('');
|
|||
|
|
const [search, setSearch] = useState('');
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadIncidents();
|
|||
|
|
}, [filterStatus, filterType]);
|
|||
|
|
|
|||
|
|
const loadIncidents = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
if (filterStatus) params.append('status', filterStatus);
|
|||
|
|
if (filterType) params.append('type', filterType);
|
|||
|
|
|
|||
|
|
const queryString = params.toString();
|
|||
|
|
const path = `/pr/incidents${queryString ? `?${queryString}` : ''}`;
|
|||
|
|
const data = await apiClient.get<Incident[]>(path);
|
|||
|
|
setIncidents(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading incidents:', err);
|
|||
|
|
setIncidents([]);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleResolve = async (id: number, resolutionNotes?: string) => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.put(`/pr/incidents/${id}/resolve`, { resolution_notes: resolutionNotes });
|
|||
|
|
await loadIncidents();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error resolving incident:', err);
|
|||
|
|
alert('Ошибка разрешения инцидента');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleStatusChange = async (id: number, status: Incident['status']) => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.put(`/pr/incidents/${id}`, { status });
|
|||
|
|
await loadIncidents();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error updating incident status:', err);
|
|||
|
|
alert('Ошибка обновления статуса');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const filteredIncidents = incidents.filter(incident => {
|
|||
|
|
const matchesSearch = !search ||
|
|||
|
|
incident.title.toLowerCase().includes(search.toLowerCase()) ||
|
|||
|
|
incident.description.toLowerCase().includes(search.toLowerCase()) ||
|
|||
|
|
(incident.address && incident.address.toLowerCase().includes(search.toLowerCase()));
|
|||
|
|
return matchesSearch;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const newIncidents = filteredIncidents.filter(i => i.status === 'new');
|
|||
|
|
const inProgressIncidents = filteredIncidents.filter(i => i.status === 'in_progress');
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Header Alert */}
|
|||
|
|
<div className="bg-red-600 rounded-[2rem] p-6 text-white shadow-xl shadow-red-500/20 flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="p-3 bg-white/20 rounded-2xl animate-pulse">
|
|||
|
|
<ShieldAlert className="w-8 h-8 text-white"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-xl font-black leading-none">Работа с инцидентами</h3>
|
|||
|
|
<p className="text-red-100 text-xs mt-1 font-medium opacity-80">
|
|||
|
|
{newIncidents.length} новых инцидентов • {inProgressIncidents.length} в работе
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateForm(true)}
|
|||
|
|
className="bg-white text-red-600 px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest shadow-lg active:scale-95 transition-all"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4 inline mr-2" />
|
|||
|
|
Создать инцидент
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Filters */}
|
|||
|
|
<div className="flex gap-4">
|
|||
|
|
<div className="relative flex-1">
|
|||
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Поиск по инцидентам..."
|
|||
|
|
value={search}
|
|||
|
|
onChange={e => setSearch(e.target.value)}
|
|||
|
|
className="w-full pl-11 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<select
|
|||
|
|
value={filterStatus}
|
|||
|
|
onChange={e => setFilterStatus(e.target.value)}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Все статусы</option>
|
|||
|
|
<option value="new">Новые</option>
|
|||
|
|
<option value="in_progress">В работе</option>
|
|||
|
|
<option value="resolved">Разрешены</option>
|
|||
|
|
<option value="closed">Закрыты</option>
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={filterType}
|
|||
|
|
onChange={e => setFilterType(e.target.value)}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Все типы</option>
|
|||
|
|
<option value="property_damage">Повреждение имущества</option>
|
|||
|
|
<option value="debtor_complaint">Жалоба должника</option>
|
|||
|
|
<option value="service_quality">Качество услуг</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Create Form Modal */}
|
|||
|
|
{showCreateForm && (
|
|||
|
|
<IncidentCreateForm
|
|||
|
|
onClose={() => setShowCreateForm(false)}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
loadIncidents();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Incidents List */}
|
|||
|
|
{isLoading ? (
|
|||
|
|
<div className="flex justify-center items-center py-12">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-slate-400" />
|
|||
|
|
</div>
|
|||
|
|
) : filteredIncidents.length === 0 ? (
|
|||
|
|
<div className="text-center py-12 text-slate-400">
|
|||
|
|
<p>Инциденты не найдены</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{filteredIncidents.map(incident => (
|
|||
|
|
<IncidentCard
|
|||
|
|
key={incident.id}
|
|||
|
|
incident={incident}
|
|||
|
|
onResolve={handleResolve}
|
|||
|
|
onStatusChange={handleStatusChange}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface IncidentCardProps {
|
|||
|
|
incident: Incident;
|
|||
|
|
onResolve: (id: number, notes?: string) => void;
|
|||
|
|
onStatusChange: (id: number, status: Incident['status']) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const IncidentCard: React.FC<IncidentCardProps> = ({ incident, onResolve, onStatusChange }) => {
|
|||
|
|
const [showResolveForm, setShowResolveForm] = useState(false);
|
|||
|
|
const [resolutionNotes, setResolutionNotes] = useState('');
|
|||
|
|
|
|||
|
|
const typeLabels = {
|
|||
|
|
property_damage: 'Повреждение имущества',
|
|||
|
|
debtor_complaint: 'Жалоба должника',
|
|||
|
|
service_quality: 'Качество услуг',
|
|||
|
|
other: 'Другое'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const statusColors = {
|
|||
|
|
new: 'bg-red-50 text-red-600 border-red-100',
|
|||
|
|
in_progress: 'bg-amber-50 text-amber-600 border-amber-100',
|
|||
|
|
resolved: 'bg-emerald-50 text-emerald-600 border-emerald-100',
|
|||
|
|
closed: 'bg-slate-50 text-slate-600 border-slate-100'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const priorityColors = {
|
|||
|
|
low: 'bg-slate-100 text-slate-600',
|
|||
|
|
medium: 'bg-blue-100 text-blue-600',
|
|||
|
|
high: 'bg-orange-100 text-orange-600',
|
|||
|
|
urgent: 'bg-red-100 text-red-600'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white p-6 rounded-[2.5rem] border-2 border-red-50 shadow-sm relative overflow-hidden group hover:border-red-200 transition-all">
|
|||
|
|
<div className="flex justify-between items-start mb-4">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500">
|
|||
|
|
<AlertCircle className="w-7 h-7"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-black text-slate-800 text-base leading-tight">{incident.title}</h4>
|
|||
|
|
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
|||
|
|
<span className={`text-[10px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter border ${statusColors[incident.status]}`}>
|
|||
|
|
{incident.status === 'new' ? 'Новый' :
|
|||
|
|
incident.status === 'in_progress' ? 'В работе' :
|
|||
|
|
incident.status === 'resolved' ? 'Разрешен' : 'Закрыт'}
|
|||
|
|
</span>
|
|||
|
|
<span className={`text-[10px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter ${priorityColors[incident.priority]}`}>
|
|||
|
|
{incident.priority === 'urgent' ? 'Срочно' :
|
|||
|
|
incident.priority === 'high' ? 'Высокий' :
|
|||
|
|
incident.priority === 'medium' ? 'Средний' : 'Низкий'}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-[10px] text-slate-400 font-bold uppercase">
|
|||
|
|
{typeLabels[incident.type]}
|
|||
|
|
</span>
|
|||
|
|
{incident.address && (
|
|||
|
|
<span className="text-[10px] text-slate-400 font-bold">
|
|||
|
|
{incident.address}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 mb-6 text-sm text-slate-600 leading-relaxed">
|
|||
|
|
{incident.description}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{incident.review && (
|
|||
|
|
<div className="bg-amber-50 p-3 rounded-xl border border-amber-100 mb-4 text-xs text-amber-800 italic">
|
|||
|
|
<strong>Связанный отзыв:</strong> «{incident.review.text}» (Рейтинг: {incident.review.rating}/10)
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Actions */}
|
|||
|
|
{!showResolveForm ? (
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2">
|
|||
|
|
{incident.status === 'new' && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => onStatusChange(incident.id, 'in_progress')}
|
|||
|
|
className="py-3 bg-amber-600 text-white rounded-2xl text-[10px] font-black uppercase flex items-center justify-center gap-2 shadow-lg active:scale-95 transition-all"
|
|||
|
|
>
|
|||
|
|
<AlertCircle className="w-4 h-4"/> Взять в работу
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{incident.status === 'in_progress' && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowResolveForm(true)}
|
|||
|
|
className="py-3 bg-emerald-600 text-white rounded-2xl text-[10px] font-black uppercase flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/20 active:scale-95 transition-all"
|
|||
|
|
>
|
|||
|
|
<CheckCircle2 className="w-4 h-4"/> Разрешить инцидент
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{incident.status === 'resolved' && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => onStatusChange(incident.id, 'closed')}
|
|||
|
|
className="py-3 bg-slate-600 text-white rounded-2xl text-[10px] font-black uppercase flex items-center justify-center gap-2 shadow-lg active:scale-95 transition-all"
|
|||
|
|
>
|
|||
|
|
<CheckCircle2 className="w-4 h-4"/> Закрыть
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<textarea
|
|||
|
|
value={resolutionNotes}
|
|||
|
|
onChange={e => setResolutionNotes(e.target.value)}
|
|||
|
|
placeholder="Опишите, как был разрешен инцидент..."
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm resize-none"
|
|||
|
|
rows={3}
|
|||
|
|
/>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
onResolve(incident.id, resolutionNotes);
|
|||
|
|
setShowResolveForm(false);
|
|||
|
|
setResolutionNotes('');
|
|||
|
|
}}
|
|||
|
|
className="px-4 py-2 bg-emerald-600 text-white rounded-xl text-xs font-black uppercase flex items-center gap-2"
|
|||
|
|
>
|
|||
|
|
<CheckCircle2 className="w-4 h-4" />
|
|||
|
|
Сохранить
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowResolveForm(false);
|
|||
|
|
setResolutionNotes('');
|
|||
|
|
}}
|
|||
|
|
className="px-4 py-2 bg-slate-100 text-slate-600 rounded-xl text-xs font-black uppercase"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{incident.assignedTo && (
|
|||
|
|
<div className="mt-4 pt-4 border-t border-slate-50 flex items-center gap-2 text-[9px] font-black text-slate-400 uppercase tracking-widest">
|
|||
|
|
<CheckCircle2 className="w-3 h-3 text-slate-300"/> Ответственный: {incident.assignedTo}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface IncidentCreateFormProps {
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const IncidentCreateForm: React.FC<IncidentCreateFormProps> = ({ onClose, onSuccess }) => {
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
building_id: '',
|
|||
|
|
type: 'service_quality' as Incident['type'],
|
|||
|
|
title: '',
|
|||
|
|
description: '',
|
|||
|
|
priority: 'medium' as Incident['priority'],
|
|||
|
|
assigned_to: ''
|
|||
|
|
});
|
|||
|
|
const [buildings, setBuildings] = useState<Building[]>([]);
|
|||
|
|
const [isLoadingBuildings, setIsLoadingBuildings] = useState(true);
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadBuildings();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const loadBuildings = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoadingBuildings(true);
|
|||
|
|
const data = await backendApi.getBuildings();
|
|||
|
|
setBuildings(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading buildings:', err);
|
|||
|
|
setBuildings([]);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoadingBuildings(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
try {
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
await apiClient.post('/pr/incidents', {
|
|||
|
|
...formData,
|
|||
|
|
created_by: 'Current User' // TODO: получить из контекста
|
|||
|
|
});
|
|||
|
|
onSuccess();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error creating incident:', err);
|
|||
|
|
alert('Ошибка создания инцидента');
|
|||
|
|
} finally {
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-3xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-6">
|
|||
|
|
<h3 className="text-xl font-black text-slate-800">Создать инцидент</h3>
|
|||
|
|
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl">
|
|||
|
|
<X className="w-5 h-5 text-slate-400" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Дом
|
|||
|
|
</label>
|
|||
|
|
{isLoadingBuildings ? (
|
|||
|
|
<div className="w-full p-3 border border-slate-200 rounded-xl text-sm text-slate-400">
|
|||
|
|
Загрузка домов...
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<select
|
|||
|
|
value={formData.building_id}
|
|||
|
|
onChange={e => setFormData({ ...formData, building_id: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
>
|
|||
|
|
<option value="">Выберите дом</option>
|
|||
|
|
{buildings.map(building => (
|
|||
|
|
<option key={building.id} value={building.id}>
|
|||
|
|
{building.passport?.address || building.id}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Тип инцидента
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.type}
|
|||
|
|
onChange={e => setFormData({ ...formData, type: e.target.value as Incident['type'] })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="property_damage">Повреждение имущества</option>
|
|||
|
|
<option value="debtor_complaint">Жалоба должника</option>
|
|||
|
|
<option value="service_quality">Качество услуг</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Заголовок
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.title}
|
|||
|
|
onChange={e => setFormData({ ...formData, title: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Описание
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={formData.description}
|
|||
|
|
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm resize-none"
|
|||
|
|
rows={4}
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Приоритет
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.priority}
|
|||
|
|
onChange={e => setFormData({ ...formData, priority: e.target.value as Incident['priority'] })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="low">Низкий</option>
|
|||
|
|
<option value="medium">Средний</option>
|
|||
|
|
<option value="high">Высокий</option>
|
|||
|
|
<option value="urgent">Срочно</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Ответственный (опционально)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.assigned_to}
|
|||
|
|
onChange={e => setFormData({ ...formData, assigned_to: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={isSubmitting}
|
|||
|
|
className="flex-1 px-6 py-3 bg-primary-600 text-white rounded-xl text-xs font-black uppercase tracking-widest disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{isSubmitting ? 'Создание...' : 'Создать инцидент'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="px-6 py-3 bg-slate-100 text-slate-600 rounded-xl text-xs font-black uppercase tracking-widest"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|