1327 lines
54 KiB
TypeScript
1327 lines
54 KiB
TypeScript
|
import React, { useState, useEffect, useMemo } from 'react';
|
|||
|
|
import {
|
|||
|
|
Phone,
|
|||
|
|
Mail,
|
|||
|
|
MapPin,
|
|||
|
|
Calendar,
|
|||
|
|
DollarSign,
|
|||
|
|
Search,
|
|||
|
|
Filter,
|
|||
|
|
Plus,
|
|||
|
|
X,
|
|||
|
|
Clock,
|
|||
|
|
CheckCircle2,
|
|||
|
|
AlertCircle,
|
|||
|
|
Gavel,
|
|||
|
|
FileText,
|
|||
|
|
User,
|
|||
|
|
MessageSquare,
|
|||
|
|
ChevronDown,
|
|||
|
|
ChevronUp
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { authFetch, backendApi } from '../../services/apiClient';
|
|||
|
|
import { PreTrialWork as PreTrialWorkType, PreTrialAction, PromisedPayment } from '../../types';
|
|||
|
|
|
|||
|
|
export const PreTrialWork: React.FC = () => {
|
|||
|
|
const [works, setWorks] = useState<PreTrialWorkType[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
const [search, setSearch] = useState('');
|
|||
|
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
|||
|
|
const [assignedToFilter, setAssignedToFilter] = useState<string>('all'); // 'all' | 'mine' | employee name
|
|||
|
|
const [sortBy, setSortBy] = useState<'updatedAt' | 'debtAmount' | 'promisedDate'>('updatedAt');
|
|||
|
|
const [currentUserName, setCurrentUserName] = useState<string | null>(null);
|
|||
|
|
const [employeesList, setEmployeesList] = useState<Array<{ id: string; name: string }>>([]);
|
|||
|
|
const [expandedWorkId, setExpandedWorkId] = useState<number | null>(null);
|
|||
|
|
const [showActionModal, setShowActionModal] = useState(false);
|
|||
|
|
const [showPaymentModal, setShowPaymentModal] = useState(false);
|
|||
|
|
const [showTransferModal, setShowTransferModal] = useState(false);
|
|||
|
|
const [selectedWork, setSelectedWork] = useState<PreTrialWorkType | null>(null);
|
|||
|
|
const [showAddDebtorModal, setShowAddDebtorModal] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
backendApi.getMe().then(u => setCurrentUserName(u?.name ?? null)).catch(() => setCurrentUserName(null));
|
|||
|
|
backendApi.getEmployeesList().then(list => setEmployeesList(Array.isArray(list) ? list : [])).catch(() => setEmployeesList([]));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadWorks();
|
|||
|
|
}, [statusFilter, search, assignedToFilter]);
|
|||
|
|
|
|||
|
|
const loadWorks = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
setError(null);
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
if (statusFilter !== 'all') {
|
|||
|
|
params.append('status', statusFilter);
|
|||
|
|
}
|
|||
|
|
if (search) {
|
|||
|
|
params.append('search', search);
|
|||
|
|
}
|
|||
|
|
if (assignedToFilter === 'mine' && currentUserName) {
|
|||
|
|
params.append('assignedTo', currentUserName);
|
|||
|
|
} else if (assignedToFilter && assignedToFilter !== 'all') {
|
|||
|
|
params.append('assignedTo', assignedToFilter);
|
|||
|
|
}
|
|||
|
|
const response = await authFetch(`/api/legal/pre-trial-work?${params}`);
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
|
|||
|
|
throw new Error(errorData.error || `HTTP ${response.status}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
// Убеждаемся, что data - это массив и обрабатываем данные
|
|||
|
|
if (Array.isArray(data)) {
|
|||
|
|
// Фильтруем работы с валидными данными должника
|
|||
|
|
const validWorks = data.filter((work: any) => work && work.debtor);
|
|||
|
|
setWorks(validWorks);
|
|||
|
|
} else {
|
|||
|
|
setWorks([]);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error loading pre-trial work:', error);
|
|||
|
|
setError(error instanceof Error ? error.message : 'Ошибка загрузки данных');
|
|||
|
|
setWorks([]);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddAction = (work: PreTrialWorkType) => {
|
|||
|
|
setSelectedWork(work);
|
|||
|
|
setShowActionModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddPayment = (work: PreTrialWorkType) => {
|
|||
|
|
setSelectedWork(work);
|
|||
|
|
setShowPaymentModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTransferToCourt = (work: PreTrialWorkType) => {
|
|||
|
|
setSelectedWork(work);
|
|||
|
|
setShowTransferModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusColor = (status: string) => {
|
|||
|
|
switch (status) {
|
|||
|
|
case 'new': return 'bg-slate-100 text-slate-600';
|
|||
|
|
case 'in_progress': return 'bg-blue-100 text-blue-600';
|
|||
|
|
case 'promised_payment': return 'bg-amber-100 text-amber-600';
|
|||
|
|
case 'transferred_to_court': return 'bg-purple-100 text-purple-600';
|
|||
|
|
case 'resolved': return 'bg-emerald-100 text-emerald-600';
|
|||
|
|
default: return 'bg-slate-100 text-slate-600';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusLabel = (status: string) => {
|
|||
|
|
switch (status) {
|
|||
|
|
case 'new': return 'Новое';
|
|||
|
|
case 'in_progress': return 'В работе';
|
|||
|
|
case 'promised_payment': return 'Обещана оплата';
|
|||
|
|
case 'transferred_to_court': return 'Передано в суд';
|
|||
|
|
case 'resolved': return 'Решено';
|
|||
|
|
default: return status;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getActionIcon = (type: string) => {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'call': return Phone;
|
|||
|
|
case 'letter': return Mail;
|
|||
|
|
case 'visit': return MapPin;
|
|||
|
|
default: return FileText;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getActionLabel = (type: string) => {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'call': return 'Звонок';
|
|||
|
|
case 'letter': return 'Письмо';
|
|||
|
|
case 'visit': return 'Визит';
|
|||
|
|
default: return type;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const today = useMemo(() => new Date().toISOString().slice(0, 10), []);
|
|||
|
|
const attentionItems = useMemo(() => {
|
|||
|
|
const overdue: Array<{ work: PreTrialWorkType; payment: PromisedPayment }> = [];
|
|||
|
|
const noAssignee: PreTrialWorkType[] = [];
|
|||
|
|
for (const work of works) {
|
|||
|
|
if (!work.debtor) continue;
|
|||
|
|
if (
|
|||
|
|
work.status !== 'transferred_to_court' &&
|
|||
|
|
work.status !== 'resolved' &&
|
|||
|
|
!work.assignedTo
|
|||
|
|
) {
|
|||
|
|
noAssignee.push(work);
|
|||
|
|
}
|
|||
|
|
const payments = work.promisedPayments || [];
|
|||
|
|
for (const p of payments) {
|
|||
|
|
if (!p.isPaid && p.promisedDate < today) {
|
|||
|
|
overdue.push({ work, payment: p });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return { overdue, noAssignee };
|
|||
|
|
}, [works, today]);
|
|||
|
|
|
|||
|
|
const sortedWorks = useMemo(() => {
|
|||
|
|
const list = works.filter((w): w is PreTrialWorkType & { debtor: NonNullable<PreTrialWorkType['debtor']> } => !!w?.debtor);
|
|||
|
|
if (sortBy === 'updatedAt') {
|
|||
|
|
return [...list].sort((a, b) => {
|
|||
|
|
const da = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
|
|||
|
|
const db = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
|
|||
|
|
return db - da;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (sortBy === 'debtAmount') {
|
|||
|
|
return [...list].sort((a, b) => (b.debtor?.debtAmount ?? 0) - (a.debtor?.debtAmount ?? 0));
|
|||
|
|
}
|
|||
|
|
if (sortBy === 'promisedDate') {
|
|||
|
|
const getNearest = (w: typeof list[0]) => {
|
|||
|
|
const payments = w.promisedPayments?.filter(p => !p.isPaid) ?? [];
|
|||
|
|
if (payments.length === 0) return '';
|
|||
|
|
return payments.map(p => p.promisedDate).sort()[0] ?? '';
|
|||
|
|
};
|
|||
|
|
return [...list].sort((a, b) => {
|
|||
|
|
const pa = getNearest(a);
|
|||
|
|
const pb = getNearest(b);
|
|||
|
|
if (!pa) return 1;
|
|||
|
|
if (!pb) return -1;
|
|||
|
|
return pa.localeCompare(pb);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return list;
|
|||
|
|
}, [works, sortBy]);
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|||
|
|
<div className="text-slate-400">Загрузка...</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (error) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] space-y-4">
|
|||
|
|
<div className="text-red-600 font-bold">Ошибка загрузки данных</div>
|
|||
|
|
<div className="text-sm text-slate-600">{error}</div>
|
|||
|
|
<button
|
|||
|
|
onClick={loadWorks}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl text-xs font-black uppercase hover:bg-primary-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
Попробовать снова
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Header with Search and Filters */}
|
|||
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|||
|
|
<div className="relative flex-1">
|
|||
|
|
<Search className="absolute left-3 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-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<select
|
|||
|
|
value={statusFilter}
|
|||
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|||
|
|
className="px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все статусы</option>
|
|||
|
|
<option value="new">Новые</option>
|
|||
|
|
<option value="in_progress">В работе</option>
|
|||
|
|
<option value="promised_payment">Обещана оплата</option>
|
|||
|
|
<option value="transferred_to_court">В суде</option>
|
|||
|
|
<option value="resolved">Решено</option>
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={assignedToFilter}
|
|||
|
|
onChange={(e) => setAssignedToFilter(e.target.value)}
|
|||
|
|
className="px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
title="Ответственный"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все ответственные</option>
|
|||
|
|
<option value="mine">Мои должники</option>
|
|||
|
|
{employeesList.map((emp) => (
|
|||
|
|
<option key={emp.id} value={emp.name}>{emp.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={sortBy}
|
|||
|
|
onChange={(e) => setSortBy(e.target.value as 'updatedAt' | 'debtAmount' | 'promisedDate')}
|
|||
|
|
className="px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
title="Сортировка"
|
|||
|
|
>
|
|||
|
|
<option value="updatedAt">По дате обновления</option>
|
|||
|
|
<option value="debtAmount">По сумме долга</option>
|
|||
|
|
<option value="promisedDate">По сроку обещанной оплаты</option>
|
|||
|
|
</select>
|
|||
|
|
<button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-500 hover:bg-slate-50" title="Фильтры">
|
|||
|
|
<Filter className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowAddDebtorModal(true)}
|
|||
|
|
className="bg-primary-600 text-white px-4 py-2.5 rounded-xl shadow-lg shadow-primary-500/30 flex items-center gap-2 text-xs font-black uppercase tracking-wider active:scale-95 transition-all"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" /> Добавить должника
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Statistics */}
|
|||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
|
|||
|
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
|||
|
|
<p className="text-[10px] font-black text-slate-400 uppercase mb-1">Всего дел</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{works.length}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
|||
|
|
<p className="text-[10px] font-black text-slate-400 uppercase mb-1">В работе</p>
|
|||
|
|
<p className="text-2xl font-black text-blue-600">
|
|||
|
|
{works.filter(w => w.status === 'in_progress').length}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
|||
|
|
<p className="text-[10px] font-black text-slate-400 uppercase mb-1">Обещана оплата</p>
|
|||
|
|
<p className="text-2xl font-black text-amber-600">
|
|||
|
|
{works.filter(w => w.status === 'promised_payment').length}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
|||
|
|
<p className="text-[10px] font-black text-slate-400 uppercase mb-1">В суде</p>
|
|||
|
|
<p className="text-2xl font-black text-purple-600">
|
|||
|
|
{works.filter(w => w.status === 'transferred_to_court').length}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Требует внимания */}
|
|||
|
|
{(attentionItems.overdue.length > 0 || attentionItems.noAssignee.length > 0) && (
|
|||
|
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4 shadow-sm">
|
|||
|
|
<h3 className="text-sm font-black text-amber-900 uppercase mb-3 flex items-center gap-2">
|
|||
|
|
<AlertCircle className="w-4 h-4" />
|
|||
|
|
Требует внимания
|
|||
|
|
</h3>
|
|||
|
|
<ul className="space-y-2 text-sm">
|
|||
|
|
{attentionItems.overdue.length > 0 && (
|
|||
|
|
<li className="text-amber-800">
|
|||
|
|
<span className="font-bold">Просроченные обещанные платежи:</span>{' '}
|
|||
|
|
{attentionItems.overdue.length}{' '}
|
|||
|
|
{attentionItems.overdue.length === 1 ? 'дело' : 'дел'}
|
|||
|
|
{attentionItems.overdue.slice(0, 3).map(({ work, payment }) => (
|
|||
|
|
<span key={`${work.id}-${payment.id}`} className="block text-xs mt-1 text-amber-700">
|
|||
|
|
{work.debtor?.address}, кв. {work.debtor?.apartment} — {new Date(payment.promisedDate).toLocaleDateString('ru-RU')}, {payment.promisedAmount?.toLocaleString()} ₽
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
{attentionItems.overdue.length > 3 && (
|
|||
|
|
<span className="block text-xs text-amber-600">и ещё {attentionItems.overdue.length - 3}</span>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
)}
|
|||
|
|
{attentionItems.noAssignee.length > 0 && (
|
|||
|
|
<li className="text-amber-800">
|
|||
|
|
<span className="font-bold">Без ответственного:</span> {attentionItems.noAssignee.length}{' '}
|
|||
|
|
{attentionItems.noAssignee.length === 1 ? 'дело' : 'дел'}
|
|||
|
|
{attentionItems.noAssignee.slice(0, 3).map((w) => (
|
|||
|
|
<span key={w.id} className="block text-xs mt-1 text-amber-700">
|
|||
|
|
{w.debtor?.address}, кв. {w.debtor?.apartment}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
{attentionItems.noAssignee.length > 3 && (
|
|||
|
|
<span className="block text-xs text-amber-600">и ещё {attentionItems.noAssignee.length - 3}</span>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
)}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Works List */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{sortedWorks.length === 0 ? (
|
|||
|
|
<div className="bg-white p-12 rounded-xl border border-slate-200 text-center">
|
|||
|
|
<p className="text-slate-400">Нет дел для отображения</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
sortedWorks
|
|||
|
|
.map((work) => {
|
|||
|
|
if (!work.debtor) return null;
|
|||
|
|
return (
|
|||
|
|
<WorkCard
|
|||
|
|
key={work.id}
|
|||
|
|
work={work}
|
|||
|
|
expanded={expandedWorkId === work.id}
|
|||
|
|
onToggleExpand={() => setExpandedWorkId(expandedWorkId === work.id ? null : work.id)}
|
|||
|
|
onAddAction={() => handleAddAction(work)}
|
|||
|
|
onAddPayment={() => handleAddPayment(work)}
|
|||
|
|
onTransferToCourt={() => handleTransferToCourt(work)}
|
|||
|
|
getStatusColor={getStatusColor}
|
|||
|
|
getStatusLabel={getStatusLabel}
|
|||
|
|
getActionIcon={getActionIcon}
|
|||
|
|
getActionLabel={getActionLabel}
|
|||
|
|
onReload={loadWorks}
|
|||
|
|
employeesList={employeesList}
|
|||
|
|
onAssignChange={(workId, assignedTo) => {
|
|||
|
|
backendApi.updatePreTrialWork(workId, { assignedTo: assignedTo || undefined }).then(() => {
|
|||
|
|
window.dispatchEvent(new CustomEvent('mkd-legal-changed'));
|
|||
|
|
loadWorks();
|
|||
|
|
}).catch(() => alert('Ошибка при смене ответственного'));
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
.filter(Boolean) // Убираем null значения
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Action Modal */}
|
|||
|
|
{showActionModal && selectedWork && (
|
|||
|
|
<ActionModal
|
|||
|
|
work={selectedWork}
|
|||
|
|
onClose={() => {
|
|||
|
|
setShowActionModal(false);
|
|||
|
|
setSelectedWork(null);
|
|||
|
|
}}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
window.dispatchEvent(new CustomEvent('mkd-legal-changed'));
|
|||
|
|
loadWorks();
|
|||
|
|
setShowActionModal(false);
|
|||
|
|
setSelectedWork(null);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Payment Modal */}
|
|||
|
|
{showPaymentModal && selectedWork && (
|
|||
|
|
<PaymentModal
|
|||
|
|
work={selectedWork}
|
|||
|
|
onClose={() => {
|
|||
|
|
setShowPaymentModal(false);
|
|||
|
|
setSelectedWork(null);
|
|||
|
|
}}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
window.dispatchEvent(new CustomEvent('mkd-legal-changed'));
|
|||
|
|
loadWorks();
|
|||
|
|
setShowPaymentModal(false);
|
|||
|
|
setSelectedWork(null);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Transfer Modal */}
|
|||
|
|
{showTransferModal && selectedWork && (
|
|||
|
|
<TransferModal
|
|||
|
|
work={selectedWork}
|
|||
|
|
onClose={() => {
|
|||
|
|
setShowTransferModal(false);
|
|||
|
|
setSelectedWork(null);
|
|||
|
|
}}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
window.dispatchEvent(new CustomEvent('mkd-legal-changed'));
|
|||
|
|
loadWorks();
|
|||
|
|
setShowTransferModal(false);
|
|||
|
|
setSelectedWork(null);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Add Debtor Modal */}
|
|||
|
|
{showAddDebtorModal && (
|
|||
|
|
<AddDebtorModal
|
|||
|
|
onClose={() => setShowAddDebtorModal(false)}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
window.dispatchEvent(new CustomEvent('mkd-legal-changed'));
|
|||
|
|
loadWorks();
|
|||
|
|
setShowAddDebtorModal(false);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Add Debtor Modal Component
|
|||
|
|
interface AddDebtorModalProps {
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const AddDebtorModal: React.FC<AddDebtorModalProps> = ({ onClose, onSuccess }) => {
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [buildings, setBuildings] = useState<{ id: string; address?: string; districtId?: string }[]>([]);
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
buildingId: '',
|
|||
|
|
apartment: '',
|
|||
|
|
debtorName: '',
|
|||
|
|
phone: '',
|
|||
|
|
email: '',
|
|||
|
|
address: '',
|
|||
|
|
debtAmount: '',
|
|||
|
|
debtMonths: ''
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
authFetch('/api/buildings')
|
|||
|
|
.then(res => res.ok ? res.json() : [])
|
|||
|
|
.then(data => setBuildings(Array.isArray(data) ? data : []))
|
|||
|
|
.catch(() => setBuildings([]));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch('/api/legal/debtors', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
buildingId: formData.buildingId || undefined,
|
|||
|
|
apartment: formData.apartment,
|
|||
|
|
debtorName: formData.debtorName || undefined,
|
|||
|
|
phone: formData.phone || undefined,
|
|||
|
|
email: formData.email || undefined,
|
|||
|
|
address: formData.address,
|
|||
|
|
debtAmount: parseFloat(formData.debtAmount),
|
|||
|
|
debtMonths: parseInt(formData.debtMonths)
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
if (response.ok) {
|
|||
|
|
onSuccess();
|
|||
|
|
} else {
|
|||
|
|
const error = await response.json();
|
|||
|
|
alert(error.error || 'Ошибка при создании должника');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error creating debtor:', error);
|
|||
|
|
alert('Ошибка при создании должника');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full">
|
|||
|
|
<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 text-slate-400 hover:text-slate-600">
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Здание (объект МКД)</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.buildingId}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, buildingId: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">— не выбрано —</option>
|
|||
|
|
{buildings.map(b => (
|
|||
|
|
<option key={b.id} value={b.id}>
|
|||
|
|
{(b.passport?.address ?? b.address) || b.id}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Адрес *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.address}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Квартира *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.apartment}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, apartment: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">ФИО должника</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.debtorName}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, debtorName: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Телефон</label>
|
|||
|
|
<input
|
|||
|
|
type="tel"
|
|||
|
|
value={formData.phone}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Email</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
value={formData.email}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Сумма долга *</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={formData.debtAmount}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, debtAmount: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
min="0"
|
|||
|
|
step="0.01"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Месяцев долга *</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={formData.debtMonths}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, debtMonths: e.target.value })}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
min="1"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-slate-100 text-slate-700 rounded-xl text-xs font-black uppercase hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-xl text-xs font-black uppercase hover:bg-primary-700 transition-colors disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{loading ? 'Сохранение...' : 'Добавить'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Одна строка обещанной оплаты с кнопкой «Отметить оплачено»
|
|||
|
|
const PromisedPaymentRow: React.FC<{
|
|||
|
|
payment: PromisedPayment;
|
|||
|
|
onMarkPaid: () => void;
|
|||
|
|
}> = ({ payment, onMarkPaid }) => {
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const handleMarkPaid = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(`/api/legal/promised-payments/${payment.id}/mark-paid`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
actualPaymentDate: new Date().toISOString().slice(0, 10),
|
|||
|
|
actualPaymentAmount: payment.promisedAmount
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
if (res.ok) onMarkPaid();
|
|||
|
|
else alert('Ошибка при отметке оплаты');
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e);
|
|||
|
|
alert('Ошибка при отметке оплаты');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={`p-3 rounded-xl border-2 ${
|
|||
|
|
payment.isPaid
|
|||
|
|
? 'bg-emerald-50 border-emerald-200'
|
|||
|
|
: new Date(payment.promisedDate) < new Date()
|
|||
|
|
? 'bg-red-50 border-red-200'
|
|||
|
|
: 'bg-amber-50 border-amber-200'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-wrap items-center justify-between gap-2 mb-2">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Calendar className="w-4 h-4 text-slate-600" />
|
|||
|
|
<span className="text-sm font-black text-slate-800">
|
|||
|
|
{new Date(payment.promisedDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<DollarSign className="w-4 h-4 text-slate-600" />
|
|||
|
|
<span className="text-sm font-black text-slate-800">
|
|||
|
|
{payment.promisedAmount.toLocaleString()} ₽
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{payment.isPaid ? (
|
|||
|
|
<div className="flex items-center gap-1 text-emerald-600">
|
|||
|
|
<CheckCircle2 className="w-4 h-4" />
|
|||
|
|
<span className="text-xs font-black">Оплачено</span>
|
|||
|
|
</div>
|
|||
|
|
) : new Date(payment.promisedDate) < new Date() ? (
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<div className="flex items-center gap-1 text-red-600">
|
|||
|
|
<AlertCircle className="w-4 h-4" />
|
|||
|
|
<span className="text-xs font-black">Просрочено</span>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleMarkPaid}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="text-[10px] font-black uppercase px-2.5 py-1.5 rounded-lg bg-emerald-100 text-emerald-700 hover:bg-emerald-200 disabled:opacity-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
{loading ? 'Сохранение...' : 'Отметить оплачено'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<div className="flex items-center gap-1 text-amber-600">
|
|||
|
|
<Clock className="w-4 h-4" />
|
|||
|
|
<span className="text-xs font-black">Ожидается</span>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleMarkPaid}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="text-[10px] font-black uppercase px-2.5 py-1.5 rounded-lg bg-emerald-100 text-emerald-700 hover:bg-emerald-200 disabled:opacity-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
{loading ? 'Сохранение...' : 'Отметить оплачено'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{payment.actualPaymentDate && (
|
|||
|
|
<p className="text-xs text-slate-600 mt-1">
|
|||
|
|
Фактически оплачено: {new Date(payment.actualPaymentDate).toLocaleDateString('ru-RU')}
|
|||
|
|
{payment.actualPaymentAmount != null && ` - ${payment.actualPaymentAmount.toLocaleString()} ₽`}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface WorkCardProps {
|
|||
|
|
work: PreTrialWorkType;
|
|||
|
|
expanded: boolean;
|
|||
|
|
onToggleExpand: () => void;
|
|||
|
|
onAddAction: () => void;
|
|||
|
|
onAddPayment: () => void;
|
|||
|
|
onTransferToCourt: () => void;
|
|||
|
|
getStatusColor: (status: string) => string;
|
|||
|
|
getStatusLabel: (status: string) => string;
|
|||
|
|
getActionIcon: (type: string) => any;
|
|||
|
|
getActionLabel: (type: string) => string;
|
|||
|
|
onReload: () => void;
|
|||
|
|
employeesList: Array<{ id: string; name: string }>;
|
|||
|
|
onAssignChange: (workId: number, assignedTo: string | null) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const WorkCard: React.FC<WorkCardProps> = ({
|
|||
|
|
work,
|
|||
|
|
expanded,
|
|||
|
|
onToggleExpand,
|
|||
|
|
onAddAction,
|
|||
|
|
onAddPayment,
|
|||
|
|
onTransferToCourt,
|
|||
|
|
getStatusColor,
|
|||
|
|
getStatusLabel,
|
|||
|
|
getActionIcon,
|
|||
|
|
getActionLabel,
|
|||
|
|
onReload,
|
|||
|
|
employeesList,
|
|||
|
|
onAssignChange
|
|||
|
|
}) => {
|
|||
|
|
const debtor = work.debtor;
|
|||
|
|
if (!debtor) {
|
|||
|
|
console.warn('WorkCard: debtor is missing', work);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const actions = work.actions || [];
|
|||
|
|
const payments = work.promisedPayments || [];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white rounded-[2rem] border border-slate-200 shadow-sm hover:shadow-md transition-all">
|
|||
|
|
<div className="p-5">
|
|||
|
|
<div className="flex items-start justify-between mb-4">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="flex flex-wrap items-center gap-3 mb-2">
|
|||
|
|
<div className={`px-3 py-1 rounded-full text-[10px] font-black uppercase ${getStatusColor(work.status)}`}>
|
|||
|
|
{getStatusLabel(work.status)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<User className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
|||
|
|
<select
|
|||
|
|
value={work.assignedTo || ''}
|
|||
|
|
onChange={(e) => onAssignChange(work.id, e.target.value || null)}
|
|||
|
|
className="text-[10px] font-medium text-slate-600 bg-slate-50 border border-slate-200 rounded-lg px-2 py-1 outline-none focus:ring-1 focus:ring-primary-500 min-w-[120px]"
|
|||
|
|
title="Ответственный"
|
|||
|
|
>
|
|||
|
|
<option value="">— не назначен —</option>
|
|||
|
|
{employeesList.map((emp) => (
|
|||
|
|
<option key={emp.id} value={emp.name}>{emp.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-lg font-black text-slate-800 mb-1">
|
|||
|
|
{debtor.address}, кв. {debtor.apartment}
|
|||
|
|
</h3>
|
|||
|
|
{debtor.debtorName && (
|
|||
|
|
<p className="text-sm text-slate-600 mb-2">{debtor.debtorName}</p>
|
|||
|
|
)}
|
|||
|
|
<div className="flex items-center gap-4 text-xs text-slate-500">
|
|||
|
|
<div className="flex items-center gap-1.5">
|
|||
|
|
<DollarSign className="w-4 h-4" />
|
|||
|
|
<span className="font-black text-red-600">{debtor.debtAmount.toLocaleString()} ₽</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1.5">
|
|||
|
|
<Clock className="w-4 h-4" />
|
|||
|
|
<span>{debtor.debtMonths} мес. долга</span>
|
|||
|
|
</div>
|
|||
|
|
{debtor.phone && (
|
|||
|
|
<div className="flex items-center gap-1.5">
|
|||
|
|
<Phone className="w-4 h-4" />
|
|||
|
|
<span>{debtor.phone}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={onToggleExpand}
|
|||
|
|
className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
|
|||
|
|
>
|
|||
|
|
{expanded ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Action Buttons */}
|
|||
|
|
{work.status !== 'transferred_to_court' && work.status !== 'resolved' && (
|
|||
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|||
|
|
<button
|
|||
|
|
onClick={onAddAction}
|
|||
|
|
className="flex items-center gap-2 px-4 py-2 bg-primary-50 text-primary-600 rounded-xl text-xs font-black uppercase hover:bg-primary-100 transition-colors"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" />
|
|||
|
|
Добавить действие
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={onAddPayment}
|
|||
|
|
className="flex items-center gap-2 px-4 py-2 bg-amber-50 text-amber-600 rounded-xl text-xs font-black uppercase hover:bg-amber-100 transition-colors"
|
|||
|
|
>
|
|||
|
|
<Calendar className="w-4 h-4" />
|
|||
|
|
Обещанная оплата
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={onTransferToCourt}
|
|||
|
|
className="flex items-center gap-2 px-4 py-2 bg-purple-50 text-purple-600 rounded-xl text-xs font-black uppercase hover:bg-purple-100 transition-colors"
|
|||
|
|
>
|
|||
|
|
<Gavel className="w-4 h-4" />
|
|||
|
|
Передать в суд
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Expanded Content */}
|
|||
|
|
{expanded && (
|
|||
|
|
<div className="space-y-4 pt-4 border-t border-slate-100">
|
|||
|
|
{/* Actions History */}
|
|||
|
|
{actions.length > 0 && (
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-sm font-black text-slate-700 mb-3 uppercase">История действий</h4>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{actions.map((action) => {
|
|||
|
|
const Icon = getActionIcon(action.actionType);
|
|||
|
|
return (
|
|||
|
|
<div key={action.id} className="flex items-start gap-3 p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<div className="p-2 bg-white rounded-lg">
|
|||
|
|
<Icon className="w-4 h-4 text-slate-600" />
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="flex items-center gap-2 mb-1">
|
|||
|
|
<span className="text-xs font-black text-slate-800">
|
|||
|
|
{getActionLabel(action.actionType)}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-[10px] text-slate-400">
|
|||
|
|
{new Date(action.actionDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-slate-600 mb-1">
|
|||
|
|
Выполнил: {action.performedBy}
|
|||
|
|
</p>
|
|||
|
|
{action.result && (
|
|||
|
|
<p className="text-xs text-slate-700">{action.result}</p>
|
|||
|
|
)}
|
|||
|
|
{action.notes && (
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">{action.notes}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Promised Payments */}
|
|||
|
|
{payments.length > 0 && (
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-sm font-black text-slate-700 mb-3 uppercase">Обещанные оплаты</h4>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{payments.map((payment) => (
|
|||
|
|
<PromisedPaymentRow
|
|||
|
|
key={payment.id}
|
|||
|
|
payment={payment}
|
|||
|
|
onMarkPaid={onReload}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Notes */}
|
|||
|
|
{work.notes && (
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-sm font-black text-slate-700 mb-2 uppercase">Примечания</h4>
|
|||
|
|
<p className="text-xs text-slate-600 bg-slate-50 p-3 rounded-xl">{work.notes}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Action Modal Component
|
|||
|
|
interface ActionModalProps {
|
|||
|
|
work: PreTrialWorkType;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ActionModal: React.FC<ActionModalProps> = ({ work, onClose, onSuccess }) => {
|
|||
|
|
const [actionType, setActionType] = useState<'call' | 'letter' | 'visit'>('call');
|
|||
|
|
const [actionDate, setActionDate] = useState(new Date().toISOString().slice(0, 16));
|
|||
|
|
const [performedBy, setPerformedBy] = useState('');
|
|||
|
|
const [result, setResult] = useState('');
|
|||
|
|
const [notes, setNotes] = useState('');
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch(`/api/legal/pre-trial-work/${work.id}/actions`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
actionType,
|
|||
|
|
actionDate: new Date(actionDate).toISOString(),
|
|||
|
|
performedBy,
|
|||
|
|
result,
|
|||
|
|
notes
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
if (response.ok) {
|
|||
|
|
onSuccess();
|
|||
|
|
} else {
|
|||
|
|
alert('Ошибка при добавлении действия');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error adding action:', error);
|
|||
|
|
alert('Ошибка при добавлении действия');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-black text-slate-800">Добавить действие</h3>
|
|||
|
|
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-600">
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Тип действия</label>
|
|||
|
|
<select
|
|||
|
|
value={actionType}
|
|||
|
|
onChange={(e) => setActionType(e.target.value as any)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="call">Звонок</option>
|
|||
|
|
<option value="letter">Письмо</option>
|
|||
|
|
<option value="visit">Визит</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Дата и время</label>
|
|||
|
|
<input
|
|||
|
|
type="datetime-local"
|
|||
|
|
value={actionDate}
|
|||
|
|
onChange={(e) => setActionDate(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Выполнил</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={performedBy}
|
|||
|
|
onChange={(e) => setPerformedBy(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Результат</label>
|
|||
|
|
<textarea
|
|||
|
|
value={result}
|
|||
|
|
onChange={(e) => setResult(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
placeholder="Опишите результат действия..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Примечания</label>
|
|||
|
|
<textarea
|
|||
|
|
value={notes}
|
|||
|
|
onChange={(e) => setNotes(e.target.value)}
|
|||
|
|
rows={2}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3 pt-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-slate-100 text-slate-700 rounded-xl text-xs font-black uppercase hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-xl text-xs font-black uppercase hover:bg-primary-700 transition-colors disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{loading ? 'Сохранение...' : 'Сохранить'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Payment Modal Component
|
|||
|
|
interface PaymentModalProps {
|
|||
|
|
work: PreTrialWorkType;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const PaymentModal: React.FC<PaymentModalProps> = ({ work, onClose, onSuccess }) => {
|
|||
|
|
const [promisedDate, setPromisedDate] = useState('');
|
|||
|
|
const [promisedAmount, setPromisedAmount] = useState('');
|
|||
|
|
const [notes, setNotes] = useState('');
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const tomorrow = new Date();
|
|||
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|||
|
|
setPromisedDate(tomorrow.toISOString().slice(0, 10));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/legal/pre-trial-work/${work.id}/promised-payment`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
promisedDate,
|
|||
|
|
promisedAmount: parseFloat(promisedAmount),
|
|||
|
|
notes
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
if (response.ok) {
|
|||
|
|
onSuccess();
|
|||
|
|
} else {
|
|||
|
|
alert('Ошибка при добавлении обещанной оплаты');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error adding promised payment:', error);
|
|||
|
|
alert('Ошибка при добавлении обещанной оплаты');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-black text-slate-800">Обещанная оплата</h3>
|
|||
|
|
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-600">
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Дата обещанной оплаты</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={promisedDate}
|
|||
|
|
onChange={(e) => setPromisedDate(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Сумма</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={promisedAmount}
|
|||
|
|
onChange={(e) => setPromisedAmount(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
placeholder="0"
|
|||
|
|
min="0"
|
|||
|
|
step="0.01"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">Примечания</label>
|
|||
|
|
<textarea
|
|||
|
|
value={notes}
|
|||
|
|
onChange={(e) => setNotes(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3 pt-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-slate-100 text-slate-700 rounded-xl text-xs font-black uppercase hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-xl text-xs font-black uppercase hover:bg-primary-700 transition-colors disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{loading ? 'Сохранение...' : 'Сохранить'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Transfer Modal Component
|
|||
|
|
interface TransferModalProps {
|
|||
|
|
work: PreTrialWorkType;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const TransferModal: React.FC<TransferModalProps> = ({ work, onClose, onSuccess }) => {
|
|||
|
|
const [courtCaseId, setCourtCaseId] = useState('');
|
|||
|
|
const [courtCaseNumber, setCourtCaseNumber] = useState('');
|
|||
|
|
const [subject, setSubject] = useState('');
|
|||
|
|
const [courtName, setCourtName] = useState('');
|
|||
|
|
const [judge, setJudge] = useState('');
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
|
|||
|
|
// Автоматически заполняем предмет дела на основе данных должника
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (work.debtor && !subject) {
|
|||
|
|
const autoSubject = `Взыскание задолженности по оплате жилищно-коммунальных услуг. ${work.debtor.address || ''}, кв. ${work.debtor.apartment || ''}`;
|
|||
|
|
setSubject(autoSubject);
|
|||
|
|
}
|
|||
|
|
}, [work.debtor, subject]);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (!confirm('Вы уверены, что хотите передать это дело в суд? Будет автоматически создано судебное дело.')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch(`/api/legal/pre-trial-work/${work.id}/transfer-to-court`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
courtCaseId: courtCaseId || undefined,
|
|||
|
|
courtCaseNumber: courtCaseNumber || undefined,
|
|||
|
|
subject: subject || undefined,
|
|||
|
|
courtName: courtName || undefined,
|
|||
|
|
judge: judge || undefined
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
if (response.ok) {
|
|||
|
|
const result = await response.json();
|
|||
|
|
alert(result.message || 'Дело успешно передано в суд');
|
|||
|
|
onSuccess();
|
|||
|
|
} else {
|
|||
|
|
const error = await response.json().catch(() => ({ error: 'Unknown error' }));
|
|||
|
|
alert(error.error || 'Ошибка при передаче в суд');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error transferring to court:', error);
|
|||
|
|
alert('Ошибка при передаче в суд');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-black text-slate-800">Передать в суд</h3>
|
|||
|
|
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-600">
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-3">
|
|||
|
|
<p className="text-xs text-amber-800">
|
|||
|
|
После передачи в суд дело будет перемещено в модуль "Взыскание" для дальнейшей работы.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">
|
|||
|
|
Номер судебного дела (если уже существует)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={courtCaseId}
|
|||
|
|
onChange={(e) => setCourtCaseId(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 mb-2"
|
|||
|
|
placeholder="А40-12345/2024 (оставьте пустым для автогенерации)"
|
|||
|
|
/>
|
|||
|
|
<p className="text-[10px] text-slate-500 mb-3">
|
|||
|
|
Если оставить пустым, будет автоматически создано новое судебное дело
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">
|
|||
|
|
Номер дела (для нового дела)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={courtCaseNumber}
|
|||
|
|
onChange={(e) => setCourtCaseNumber(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
placeholder="А40-12345/2024 (автогенерация, если пусто)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">
|
|||
|
|
Предмет дела *
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={subject}
|
|||
|
|
onChange={(e) => setSubject(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
placeholder="Взыскание задолженности..."
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">
|
|||
|
|
Название суда
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={courtName}
|
|||
|
|
onChange={(e) => setCourtName(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
placeholder="Арбитражный суд г. Москвы"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-700 uppercase mb-1">
|
|||
|
|
Судья
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={judge}
|
|||
|
|
onChange={(e) => setJudge(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
placeholder="Иванов И.И."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3 pt-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-slate-100 text-slate-700 rounded-xl text-xs font-black uppercase hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex-1 px-4 py-2.5 bg-purple-600 text-white rounded-xl text-xs font-black uppercase hover:bg-purple-700 transition-colors disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{loading ? 'Передача...' : 'Передать в суд'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|