730 lines
32 KiB
TypeScript
730 lines
32 KiB
TypeScript
|
import React, { useState, useEffect, useRef } from 'react';
|
|||
|
|
import { PaymentInvoice, UserRole } from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { ArrowLeft, Check, X, Calendar, Clock, FileText, Building2, MapPin, Briefcase, Users, Calculator, History, CheckCircle2, Paperclip, Download, PartyPopper, Wallet, Banknote } from 'lucide-react';
|
|||
|
|
import { PaymentStatusModal, PaymentStatusModalPayload } from './PaymentStatusModal';
|
|||
|
|
|
|||
|
|
interface PaymentInvoiceDetailProps {
|
|||
|
|
invoice: PaymentInvoice;
|
|||
|
|
currentUserId: string;
|
|||
|
|
onBack: () => void;
|
|||
|
|
onUpdate: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const StatusConfig: Record<PaymentInvoice['status'], { label: string; color: string; bg: string }> = {
|
|||
|
|
draft: { label: 'Черновик', color: 'text-slate-500', bg: 'bg-slate-100' },
|
|||
|
|
pending_manager_approval: { label: 'На согласовании у руководителя', color: 'text-amber-600', bg: 'bg-amber-50' },
|
|||
|
|
pending_finance_manager_approval: { label: 'На согласовании у финансового руководителя', color: 'text-blue-600', bg: 'bg-blue-50' },
|
|||
|
|
approved: { label: 'Согласован', color: 'text-indigo-600', bg: 'bg-indigo-50' },
|
|||
|
|
scheduled: { label: 'В графике платежей', color: 'text-purple-600', bg: 'bg-purple-50' },
|
|||
|
|
paid: { label: 'Оплачен', color: 'text-emerald-600', bg: 'bg-emerald-50' },
|
|||
|
|
postponed: { label: 'Отложен', color: 'text-orange-600', bg: 'bg-orange-50' },
|
|||
|
|
cancelled: { label: 'Отменен', color: 'text-red-600', bg: 'bg-red-50' },
|
|||
|
|
rejected: { label: 'Отклонен', color: 'text-red-600', bg: 'bg-red-50' },
|
|||
|
|
completed: { label: 'Выполнено', color: 'text-green-600', bg: 'bg-green-50' }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const PurposeTypeIcons: Record<PaymentInvoice['purposeType'], any> = {
|
|||
|
|
building: Building2,
|
|||
|
|
district: MapPin,
|
|||
|
|
legal: Briefcase,
|
|||
|
|
office: FileText,
|
|||
|
|
hr: Users,
|
|||
|
|
event: PartyPopper,
|
|||
|
|
other: FileText
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const PaymentInvoiceDetail: React.FC<PaymentInvoiceDetailProps> = ({
|
|||
|
|
invoice,
|
|||
|
|
currentUserId,
|
|||
|
|
onBack,
|
|||
|
|
onUpdate
|
|||
|
|
}) => {
|
|||
|
|
const [userRoles, setUserRoles] = useState<string[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [rejectionReason, setRejectionReason] = useState('');
|
|||
|
|
const [approvalComment, setApprovalComment] = useState('');
|
|||
|
|
const [scheduledDate, setScheduledDate] = useState(invoice.scheduledDate || '');
|
|||
|
|
const [closingDocsUpdating, setClosingDocsUpdating] = useState(false);
|
|||
|
|
const closingDocsFileInputRef = useRef<HTMLInputElement | null>(null);
|
|||
|
|
const [closingDocsUploading, setClosingDocsUploading] = useState(false);
|
|||
|
|
const [showPayModal, setShowPayModal] = useState<'default' | 'cash' | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchUserRoles();
|
|||
|
|
}, [currentUserId]);
|
|||
|
|
|
|||
|
|
const fetchUserRoles = async () => {
|
|||
|
|
try {
|
|||
|
|
const roles = await apiClient.get<UserRole[]>(`/finance/user-roles?userId=${currentUserId}`);
|
|||
|
|
setUserRoles(roles.map(r => r.role));
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error fetching user roles:', err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const canApprove = () => {
|
|||
|
|
// Проверка прав на согласование
|
|||
|
|
const TOP_MANAGEMENT_ROLES = ['finance_director', 'director', 'top_management'];
|
|||
|
|
const statusConfig: Record<string, { role?: string }> = {
|
|||
|
|
pending_manager_approval: { role: 'manager' },
|
|||
|
|
pending_finance_manager_approval: { role: 'finance_manager' }
|
|||
|
|
};
|
|||
|
|
const config = statusConfig[invoice.status];
|
|||
|
|
if (!config || !config.role) return false;
|
|||
|
|
|
|||
|
|
// Если требуется роль manager, но пользователь из высшего звена - может согласовать
|
|||
|
|
if (config.role === 'manager' && userRoles.some(role => TOP_MANAGEMENT_ROLES.includes(role))) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return userRoles.includes(config.role);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const canSchedule = () => {
|
|||
|
|
// Ставить в график может финансист ИЛИ финансовый руководитель.
|
|||
|
|
// В демо, если ролей нет, считаем текущего пользователя финансовым блоком.
|
|||
|
|
const canScheduleRole =
|
|||
|
|
userRoles.includes('financier') ||
|
|||
|
|
userRoles.includes('finance_manager') ||
|
|||
|
|
userRoles.length === 0;
|
|||
|
|
|
|||
|
|
if (!canScheduleRole) return false;
|
|||
|
|
|
|||
|
|
// Для постоплаты можем поставить в график после согласования или после выполнения
|
|||
|
|
if (invoice.paymentFormat === 'postpayment') {
|
|||
|
|
return ['approved', 'completed'].includes(invoice.status);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Для предоплаты и аванса ставим в график первый платеж после согласования
|
|||
|
|
if (invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') {
|
|||
|
|
return invoice.status === 'approved';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return invoice.status === 'approved';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const canMarkCompleted = () => {
|
|||
|
|
if (invoice.paymentFormat === 'postpayment') {
|
|||
|
|
return ['approved', 'scheduled'].includes(invoice.status) && !invoice.isCompleted;
|
|||
|
|
} else if (invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') {
|
|||
|
|
return invoice.status === 'paid' && !invoice.isCompleted;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleApprove = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/approve`, {
|
|||
|
|
userId: currentUserId,
|
|||
|
|
comment: approvalComment
|
|||
|
|
});
|
|||
|
|
setApprovalComment('');
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error approving invoice:', err);
|
|||
|
|
alert('Ошибка при согласовании счета');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleReject = async () => {
|
|||
|
|
if (!rejectionReason.trim()) {
|
|||
|
|
alert('Укажите причину отклонения');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/reject`, {
|
|||
|
|
userId: currentUserId,
|
|||
|
|
reason: rejectionReason
|
|||
|
|
});
|
|||
|
|
setRejectionReason('');
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error rejecting invoice:', err);
|
|||
|
|
alert('Ошибка при отклонении счета');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSchedule = async () => {
|
|||
|
|
if (!scheduledDate) {
|
|||
|
|
alert('Укажите дату для графика платежей');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/schedule`, {
|
|||
|
|
userId: currentUserId,
|
|||
|
|
scheduledDate
|
|||
|
|
});
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error scheduling invoice:', err);
|
|||
|
|
alert('Ошибка при постановке в график');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleMarkCompleted = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/mark-completed`);
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error marking as completed:', err);
|
|||
|
|
alert('Ошибка при отметке выполнения');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClosingDocsReceived = async () => {
|
|||
|
|
try {
|
|||
|
|
setClosingDocsUpdating(true);
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/closing-docs`, {
|
|||
|
|
received: true
|
|||
|
|
});
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error updating closing docs flag:', err);
|
|||
|
|
alert('Ошибка при отметке закрывающих документов');
|
|||
|
|
} finally {
|
|||
|
|
setClosingDocsUpdating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleMarkPaid = async (payload: PaymentStatusModalPayload) => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/update-payment-status`, {
|
|||
|
|
status: 'paid',
|
|||
|
|
paymentDate: payload.paymentDate,
|
|||
|
|
paymentRef: payload.paymentRef,
|
|||
|
|
isCash: payload.isCash
|
|||
|
|
});
|
|||
|
|
setShowPayModal(null);
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error marking invoice as paid:', err);
|
|||
|
|
alert('Ошибка при отметке оплаты');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClosingDocsFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const file = e.target.files?.[0];
|
|||
|
|
if (!file) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setClosingDocsUploading(true);
|
|||
|
|
|
|||
|
|
// Загружаем файл на сервер (как для обычных счетов)
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', file);
|
|||
|
|
|
|||
|
|
const uploadResponse = await fetch('/api/finance/payment-invoices/upload', {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!uploadResponse.ok) {
|
|||
|
|
throw new Error('Ошибка загрузки файла');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = await uploadResponse.json();
|
|||
|
|
const fileInfo = data.file;
|
|||
|
|
|
|||
|
|
// Привязываем файл к счету как закрывающий документ и помечаем, что закрывашки получены
|
|||
|
|
await apiClient.post(`/finance/payment-invoices/${invoice.id}/closing-docs`, {
|
|||
|
|
received: true,
|
|||
|
|
files: [fileInfo]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUpdate();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error uploading closing docs file:', err);
|
|||
|
|
alert('Ошибка при загрузке файла закрывающих документов');
|
|||
|
|
} finally {
|
|||
|
|
setClosingDocsUploading(false);
|
|||
|
|
if (closingDocsFileInputRef.current) {
|
|||
|
|
closingDocsFileInputRef.current.value = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const PurposeIcon = PurposeTypeIcons[invoice.purposeType] || FileText;
|
|||
|
|
const statusInfo = StatusConfig[invoice.status];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Заголовок */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<button
|
|||
|
|
onClick={onBack}
|
|||
|
|
className="flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium"
|
|||
|
|
>
|
|||
|
|
<ArrowLeft className="w-4 h-4" />
|
|||
|
|
Назад к списку
|
|||
|
|
</button>
|
|||
|
|
<div className={`px-3 py-1 rounded-lg ${statusInfo.bg} ${statusInfo.color}`}>
|
|||
|
|
<span className="text-sm font-bold">{statusInfo.label}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Основная информация */}
|
|||
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
|
|||
|
|
<div className="flex items-start justify-between mb-6">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-xl font-bold text-slate-800 mb-1">Счет № {invoice.invoiceNumber}</h2>
|
|||
|
|
<p className="text-sm text-slate-500">
|
|||
|
|
Создан {new Date(invoice.createdAt).toLocaleDateString('ru-RU')} пользователем {invoice.createdBy}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|||
|
|
{/* Назначение */}
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<PurposeIcon className="w-4 h-4" />
|
|||
|
|
Назначение
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-slate-800">
|
|||
|
|
{invoice.purposeType === 'building' && invoice.purposeBuildingIds.length > 0 && (
|
|||
|
|
<>Дом ({invoice.purposeBuildingIds.length} шт.)</>
|
|||
|
|
)}
|
|||
|
|
{invoice.purposeType === 'district' && invoice.purposeDistrictIds.length > 0 && (
|
|||
|
|
<>Участок ({invoice.purposeDistrictIds.length} шт.)</>
|
|||
|
|
)}
|
|||
|
|
{['legal', 'office', 'hr'].includes(invoice.purposeType) && (
|
|||
|
|
<>{invoice.purposeType === 'legal' ? 'Юристы' : invoice.purposeType === 'office' ? 'Офис' : 'HR'}</>
|
|||
|
|
)}
|
|||
|
|
{invoice.purposeType === 'event' && (invoice.purposeDescription || 'Мероприятие')}
|
|||
|
|
{invoice.purposeType === 'other' && invoice.purposeDescription}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Формат оплаты */}
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<Calculator className="w-4 h-4" />
|
|||
|
|
Формат оплаты
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-slate-800">
|
|||
|
|
{invoice.paymentFormat === 'prepayment' && 'Предоплата'}
|
|||
|
|
{invoice.paymentFormat === 'postpayment' && 'Постоплата'}
|
|||
|
|
{invoice.paymentFormat === 'advance' && 'Аванс'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Подрядчик */}
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2">Подрядчик</h3>
|
|||
|
|
<p className="text-slate-800 font-medium">{invoice.contractorName}</p>
|
|||
|
|
{invoice.contractorInn && (
|
|||
|
|
<p className="text-sm text-slate-500">ИНН: {invoice.contractorInn}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Сумма */}
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2">Сумма</h3>
|
|||
|
|
<p className="text-2xl font-black text-slate-900">
|
|||
|
|
{invoice.totalAmount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Услуги или ТМЦ */}
|
|||
|
|
<div className="md:col-span-2">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2">
|
|||
|
|
{invoice.itemType === 'service' ? 'Услуги' : 'ТМЦ (товарно-материальные ценности)'}
|
|||
|
|
</h3>
|
|||
|
|
|
|||
|
|
{invoice.itemType === 'service' && invoice.serviceItems && invoice.serviceItems.length > 0 ? (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{invoice.serviceItems.map((item, index) => (
|
|||
|
|
<div key={index} className="flex justify-between items-center p-2 bg-slate-50 rounded-lg">
|
|||
|
|
<span className="text-slate-800 font-medium">{item.name}</span>
|
|||
|
|
<span className="text-slate-900 font-bold">
|
|||
|
|
{item.amount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : invoice.itemType === 'materials' && invoice.materialItems && invoice.materialItems.length > 0 ? (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{invoice.materialItems.map((item, index) => (
|
|||
|
|
<div key={index} className="p-2 bg-slate-50 rounded-lg">
|
|||
|
|
<div className="flex justify-between items-center mb-1">
|
|||
|
|
<span className="text-slate-800 font-medium">{item.name}</span>
|
|||
|
|
<span className="text-slate-900 font-bold">
|
|||
|
|
{item.amount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-slate-500">
|
|||
|
|
{item.quantity} {item.unit} × {item.pricePerUnit.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-slate-800">{invoice.serviceDescription || 'Нет данных'}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Даты */}
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|||
|
|
{invoice.scheduledDate && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-1">Дата в графике</p>
|
|||
|
|
<p className="text-sm font-medium text-slate-800">
|
|||
|
|
{new Date(invoice.scheduledDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{invoice.paymentDate && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-1">Дата оплаты</p>
|
|||
|
|
<p className="text-sm font-medium text-slate-800">
|
|||
|
|
{new Date(invoice.paymentDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{invoice.status === 'paid' && invoice.paymentRef && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-1">Номер платежки</p>
|
|||
|
|
<p className="text-sm font-medium text-slate-800">{invoice.paymentRef}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{invoice.status === 'paid' && invoice.isCash && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-1">Способ оплаты</p>
|
|||
|
|
<p className="text-sm font-medium text-amber-700 flex items-center gap-1">
|
|||
|
|
<Banknote className="w-4 h-4" /> Оплата наличными
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{invoice.isCompleted && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-1">Статус выполнения</p>
|
|||
|
|
<p className="text-sm font-medium text-emerald-600 flex items-center gap-1">
|
|||
|
|
<CheckCircle2 className="w-4 h-4" />
|
|||
|
|
Выполнено
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{(invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-1">Закрывающие документы</p>
|
|||
|
|
<p className="text-sm font-medium text-slate-800">
|
|||
|
|
{invoice.closingDocsReceived ? 'Получены' : 'Не получены'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Загруженные файлы (физические счета) */}
|
|||
|
|
{invoice.fileUrls && invoice.fileUrls.length > 0 && (
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
|
|||
|
|
<Paperclip className="w-4 h-4" />
|
|||
|
|
Физические счета
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{invoice.fileUrls.map((fileUrl, index) => {
|
|||
|
|
// fileUrl может быть строкой или объектом с информацией о файле
|
|||
|
|
const fileInfo = typeof fileUrl === 'string'
|
|||
|
|
? { url: fileUrl, filename: fileUrl.split('/').pop() || 'Файл' }
|
|||
|
|
: fileUrl;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200">
|
|||
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|||
|
|
<FileText className="w-4 h-4 text-slate-500 flex-shrink-0" />
|
|||
|
|
<span className="text-sm text-slate-700 truncate" title={fileInfo.filename || fileInfo.url}>
|
|||
|
|
{fileInfo.filename || fileInfo.url}
|
|||
|
|
</span>
|
|||
|
|
{fileInfo.size && (
|
|||
|
|
<span className="text-xs text-slate-500 flex-shrink-0">
|
|||
|
|
({(fileInfo.size / 1024).toFixed(1)} KB)
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<a
|
|||
|
|
href={fileInfo.url}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium"
|
|||
|
|
>
|
|||
|
|
<Download className="w-4 h-4" />
|
|||
|
|
Скачать
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Файлы закрывающих документов (сканы/фото) */}
|
|||
|
|
{invoice.closingDocsFiles && invoice.closingDocsFiles.length > 0 && (
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
|
|||
|
|
<Paperclip className="w-4 h-4" />
|
|||
|
|
Закрывающие документы
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{invoice.closingDocsFiles.map((file: any, index: number) => {
|
|||
|
|
const fileInfo = file || {};
|
|||
|
|
return (
|
|||
|
|
<div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200">
|
|||
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|||
|
|
<FileText className="w-4 h-4 text-slate-500 flex-shrink-0" />
|
|||
|
|
<span className="text-sm text-slate-700 truncate" title={fileInfo.filename || fileInfo.url}>
|
|||
|
|
{fileInfo.filename || fileInfo.url || 'Файл'}
|
|||
|
|
</span>
|
|||
|
|
{fileInfo.size && (
|
|||
|
|
<span className="text-xs text-slate-500 flex-shrink-0">
|
|||
|
|
({(fileInfo.size / 1024).toFixed(1)} KB)
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{fileInfo.url && (
|
|||
|
|
<a
|
|||
|
|
href={fileInfo.url}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium"
|
|||
|
|
>
|
|||
|
|
<Download className="w-4 h-4" />
|
|||
|
|
Скачать
|
|||
|
|
</a>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Примечания */}
|
|||
|
|
{invoice.notes && (
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2">Примечания</h3>
|
|||
|
|
<p className="text-slate-800">{invoice.notes}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* История согласований */}
|
|||
|
|
{invoice.approvalHistory && invoice.approvalHistory.length > 0 && (
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
|
|||
|
|
<History className="w-4 h-4" />
|
|||
|
|
История согласований
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{invoice.approvalHistory.map((entry, index) => (
|
|||
|
|
<div key={index} className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
|
|||
|
|
<div className={`p-1.5 rounded ${
|
|||
|
|
entry.action === 'approve' ? 'bg-emerald-100 text-emerald-600' :
|
|||
|
|
entry.action === 'reject' ? 'bg-red-100 text-red-600' :
|
|||
|
|
'bg-amber-100 text-amber-600'
|
|||
|
|
}`}>
|
|||
|
|
{entry.action === 'approve' ? (
|
|||
|
|
<Check className="w-4 h-4" />
|
|||
|
|
) : entry.action === 'reject' ? (
|
|||
|
|
<X className="w-4 h-4" />
|
|||
|
|
) : (
|
|||
|
|
<Clock className="w-4 h-4" />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<p className="text-sm font-medium text-slate-800">
|
|||
|
|
{entry.action === 'approve' ? 'Согласовано' :
|
|||
|
|
entry.action === 'reject' ? 'Отклонено' : 'На доработку'}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-xs text-slate-500">
|
|||
|
|
{entry.userRole} • {new Date(entry.date).toLocaleString('ru-RU')}
|
|||
|
|
</p>
|
|||
|
|
{entry.comment && (
|
|||
|
|
<p className="text-sm text-slate-700 mt-1">{entry.comment}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Причина отклонения */}
|
|||
|
|
{invoice.status === 'rejected' && invoice.rejectionReason && (
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200">
|
|||
|
|
<h3 className="text-sm font-bold text-red-700 mb-2">Причина отклонения</h3>
|
|||
|
|
<p className="text-red-600">{invoice.rejectionReason}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Причина отмены */}
|
|||
|
|
{invoice.status === 'cancelled' && invoice.cancelReason && (
|
|||
|
|
<div className="mt-6 pt-6 border-t border-slate-200">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-2">Причина отмены</h3>
|
|||
|
|
<p className="text-slate-600">{invoice.cancelReason}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Действия */}
|
|||
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
|
|||
|
|
<h3 className="text-sm font-bold text-slate-700 mb-4">Действия</h3>
|
|||
|
|
|
|||
|
|
{canApprove() && (
|
|||
|
|
<div className="space-y-4 mb-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">Комментарий (необязательно)</label>
|
|||
|
|
<textarea
|
|||
|
|
value={approvalComment}
|
|||
|
|
onChange={(e) => setApprovalComment(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
rows={2}
|
|||
|
|
placeholder="Добавьте комментарий..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3">
|
|||
|
|
<button
|
|||
|
|
onClick={handleApprove}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Check className="w-4 h-4" />
|
|||
|
|
Согласовать
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
const reason = prompt('Укажите причину отклонения:');
|
|||
|
|
if (reason) {
|
|||
|
|
setRejectionReason(reason);
|
|||
|
|
setTimeout(() => handleReject(), 100);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<X className="w-4 h-4" />
|
|||
|
|
Отклонить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{canSchedule() && (
|
|||
|
|
<div className="space-y-4 mb-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">Дата в графике платежей *</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={scheduledDate}
|
|||
|
|
onChange={(e) => setScheduledDate(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={handleSchedule}
|
|||
|
|
disabled={loading || !scheduledDate}
|
|||
|
|
className="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Calendar className="w-4 h-4" />
|
|||
|
|
Поставить в график платежей
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{invoice.status === 'scheduled' && (
|
|||
|
|
<div className="space-y-2 mb-4">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowPayModal('default')}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="w-full px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Wallet className="w-4 h-4" />
|
|||
|
|
Оплатить
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowPayModal('cash')}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="w-full px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Banknote className="w-4 h-4" />
|
|||
|
|
Оплата наличкой
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{canMarkCompleted() && (
|
|||
|
|
<button
|
|||
|
|
onClick={handleMarkCompleted}
|
|||
|
|
disabled={loading}
|
|||
|
|
className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<CheckCircle2 className="w-4 h-4" />
|
|||
|
|
{invoice.itemType === 'materials' ? 'Отметить полученным (ТМЦ)' : 'Отметить выполненным'}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{(invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') &&
|
|||
|
|
invoice.isCompleted && (
|
|||
|
|
<div className="mt-4 space-y-3">
|
|||
|
|
{!invoice.closingDocsReceived && (
|
|||
|
|
<button
|
|||
|
|
onClick={handleClosingDocsReceived}
|
|||
|
|
disabled={closingDocsUpdating}
|
|||
|
|
className="w-full px-4 py-2 bg-sky-600 text-white rounded-lg hover:bg-sky-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Check className="w-4 h-4" />
|
|||
|
|
Подтвердить получение закрывающих документов
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
|
|||
|
|
<input
|
|||
|
|
ref={closingDocsFileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
className="hidden"
|
|||
|
|
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.txt,.zip,.rar"
|
|||
|
|
onChange={handleClosingDocsFileChange}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => closingDocsFileInputRef.current?.click()}
|
|||
|
|
disabled={closingDocsUploading}
|
|||
|
|
className="flex-1 px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 disabled:bg-slate-100 disabled:text-slate-400 flex items-center justify-center gap-2 text-sm"
|
|||
|
|
>
|
|||
|
|
<Paperclip className="w-4 h-4" />
|
|||
|
|
{closingDocsUploading ? 'Загрузка файла...' : 'Прикрепить скан/фото закрывающих'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{showPayModal !== null && (
|
|||
|
|
<PaymentStatusModal
|
|||
|
|
action="paid"
|
|||
|
|
invoiceLabel={`${invoice.contractorName} — ${invoice.totalAmount.toLocaleString('ru-RU')} ₽`}
|
|||
|
|
defaultIsCash={showPayModal === 'cash'}
|
|||
|
|
onConfirm={handleMarkPaid}
|
|||
|
|
onCancel={() => setShowPayModal(null)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|