294 lines
13 KiB
TypeScript
294 lines
13 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { PaymentInvoice, PaymentInvoiceStatus, PaymentInvoicePurposeType, PaymentInvoiceFormat } from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { FileText, Search, Filter, Eye, Edit2, CheckCircle2, XCircle, Clock, Calendar } from 'lucide-react';
|
|||
|
|
|
|||
|
|
interface PaymentInvoiceListProps {
|
|||
|
|
onInvoiceClick: (invoice: PaymentInvoice) => void;
|
|||
|
|
onCreateNew: () => void;
|
|||
|
|
currentUserId: string;
|
|||
|
|
/** Можно ли создавать/редактировать (по умолчанию true) */
|
|||
|
|
canEdit?: boolean;
|
|||
|
|
/** Показывать только счета на своё имя / от своего имени */
|
|||
|
|
scopeOwn?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const StatusBadge: React.FC<{ status: PaymentInvoiceStatus }> = ({ status }) => {
|
|||
|
|
const config: Record<PaymentInvoiceStatus, { 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 s = config[status] || config.draft;
|
|||
|
|
return (
|
|||
|
|
<span className={`px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${s.bg} ${s.color}`}>
|
|||
|
|
{s.label}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const PurposeTypeLabel: Record<PaymentInvoicePurposeType, string> = {
|
|||
|
|
building: 'Дом',
|
|||
|
|
district: 'Участок',
|
|||
|
|
legal: 'Юристы',
|
|||
|
|
office: 'Офис',
|
|||
|
|
hr: 'HR',
|
|||
|
|
event: 'Мероприятие',
|
|||
|
|
other: 'Другое'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const PaymentFormatLabel: Record<PaymentInvoiceFormat, string> = {
|
|||
|
|
prepayment: 'Предоплата',
|
|||
|
|
postpayment: 'Постоплата',
|
|||
|
|
advance: 'Аванс'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const PaymentInvoiceList: React.FC<PaymentInvoiceListProps> = ({
|
|||
|
|
onInvoiceClick,
|
|||
|
|
onCreateNew,
|
|||
|
|
currentUserId,
|
|||
|
|
canEdit = true,
|
|||
|
|
scopeOwn = false,
|
|||
|
|
}) => {
|
|||
|
|
const [invoices, setInvoices] = useState<PaymentInvoice[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [search, setSearch] = useState('');
|
|||
|
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
|||
|
|
const [purposeTypeFilter, setPurposeTypeFilter] = useState<string>('all');
|
|||
|
|
const [paymentFormatFilter, setPaymentFormatFilter] = useState<string>('all');
|
|||
|
|
const [page, setPage] = useState(1);
|
|||
|
|
const [totalPages, setTotalPages] = useState(1);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchInvoices();
|
|||
|
|
}, [statusFilter, purposeTypeFilter, paymentFormatFilter, search, page, scopeOwn]);
|
|||
|
|
|
|||
|
|
const fetchInvoices = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
if (statusFilter !== 'all') params.append('status', statusFilter);
|
|||
|
|
if (purposeTypeFilter !== 'all') params.append('purposeType', purposeTypeFilter);
|
|||
|
|
if (paymentFormatFilter !== 'all') params.append('paymentFormat', paymentFormatFilter);
|
|||
|
|
if (search) params.append('search', search);
|
|||
|
|
if (scopeOwn) params.append('scope', 'own');
|
|||
|
|
params.append('page', page.toString());
|
|||
|
|
params.append('limit', '20');
|
|||
|
|
|
|||
|
|
const response = await apiClient.get<{ invoices: PaymentInvoice[]; pagination: any }>(
|
|||
|
|
`/finance/payment-invoices?${params.toString()}`
|
|||
|
|
);
|
|||
|
|
setInvoices(response.invoices);
|
|||
|
|
setTotalPages(response.pagination.totalPages);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error fetching invoices:', err);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getPurposeLabel = (invoice: PaymentInvoice): string => {
|
|||
|
|
if (invoice.purposeType === 'building' && invoice.purposeBuildingIds.length > 0) {
|
|||
|
|
return `Дом (${invoice.purposeBuildingIds.length})`;
|
|||
|
|
}
|
|||
|
|
if (invoice.purposeType === 'district' && invoice.purposeDistrictIds.length > 0) {
|
|||
|
|
return `Участок (${invoice.purposeDistrictIds.length})`;
|
|||
|
|
}
|
|||
|
|
if (invoice.purposeType === 'event') {
|
|||
|
|
return invoice.purposeDescription || PurposeTypeLabel.event || 'Мероприятие';
|
|||
|
|
}
|
|||
|
|
return PurposeTypeLabel[invoice.purposeType] || invoice.purposeDescription || 'Не указано';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-12 text-center">
|
|||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
|||
|
|
<p className="text-slate-600">Загрузка счетов...</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* Фильтры и поиск */}
|
|||
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|||
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|||
|
|
{/* Поиск */}
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="relative">
|
|||
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={search}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setSearch(e.target.value);
|
|||
|
|
setPage(1);
|
|||
|
|
}}
|
|||
|
|
placeholder="Поиск по номеру, подрядчику, услуге..."
|
|||
|
|
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Фильтры */}
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<select
|
|||
|
|
value={statusFilter}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setStatusFilter(e.target.value);
|
|||
|
|
setPage(1);
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все статусы</option>
|
|||
|
|
<option value="draft">Черновик</option>
|
|||
|
|
<option value="pending_manager_approval">На согл. руков.</option>
|
|||
|
|
<option value="pending_finance_manager_approval">На согл. фин. руков.</option>
|
|||
|
|
<option value="approved">Согласован</option>
|
|||
|
|
<option value="scheduled">В графике</option>
|
|||
|
|
<option value="paid">Оплачен</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<select
|
|||
|
|
value={purposeTypeFilter}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setPurposeTypeFilter(e.target.value);
|
|||
|
|
setPage(1);
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все назначения</option>
|
|||
|
|
<option value="building">Дом</option>
|
|||
|
|
<option value="district">Участок</option>
|
|||
|
|
<option value="legal">Юристы</option>
|
|||
|
|
<option value="office">Офис</option>
|
|||
|
|
<option value="hr">HR</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<select
|
|||
|
|
value={paymentFormatFilter}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setPaymentFormatFilter(e.target.value);
|
|||
|
|
setPage(1);
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все форматы</option>
|
|||
|
|
<option value="prepayment">Предоплата</option>
|
|||
|
|
<option value="postpayment">Постоплата</option>
|
|||
|
|
<option value="advance">Аванс</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Список счетов */}
|
|||
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|||
|
|
<div className="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
|
|||
|
|
<h3 className="font-black text-slate-700 text-sm uppercase tracking-widest">
|
|||
|
|
Счета на оплату ({invoices.length})
|
|||
|
|
</h3>
|
|||
|
|
{canEdit && (
|
|||
|
|
<button
|
|||
|
|
onClick={onCreateNew}
|
|||
|
|
className="px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-xs font-bold transition-colors"
|
|||
|
|
>
|
|||
|
|
+ Новый счет
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="divide-y divide-slate-100">
|
|||
|
|
{invoices.length === 0 ? (
|
|||
|
|
<div className="p-10 text-center text-slate-400 text-sm">Счетов не найдено</div>
|
|||
|
|
) : (
|
|||
|
|
invoices.map(invoice => (
|
|||
|
|
<div
|
|||
|
|
key={invoice.id}
|
|||
|
|
onClick={() => onInvoiceClick(invoice)}
|
|||
|
|
className="p-4 flex flex-col md:flex-row md:items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group gap-4"
|
|||
|
|
>
|
|||
|
|
<div className="flex gap-4 items-center flex-1 min-w-0">
|
|||
|
|
<div className="p-3 rounded-xl bg-slate-50 text-slate-400 group-hover:bg-primary-50 group-hover:text-primary-600 transition-colors">
|
|||
|
|
<FileText className="w-5 h-5" />
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<div className="flex items-center gap-2 mb-1">
|
|||
|
|
<StatusBadge status={invoice.status} />
|
|||
|
|
<span className="text-xs text-slate-500 font-mono">{invoice.invoiceNumber}</span>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm font-bold text-slate-800 truncate">{invoice.contractorName}</p>
|
|||
|
|
<p className="text-[10px] text-slate-500 truncate">
|
|||
|
|
{getPurposeLabel(invoice)} • {PaymentFormatLabel[invoice.paymentFormat]} • {invoice.itemType === 'materials' ? 'ТМЦ' : 'Услуга'} • {invoice.serviceDescription}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between md:justify-end gap-6">
|
|||
|
|
<div className="text-right">
|
|||
|
|
<p className="text-sm font-black text-slate-900">
|
|||
|
|
{invoice.totalAmount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
|
|||
|
|
</p>
|
|||
|
|
<p className="text-[10px] text-slate-400">
|
|||
|
|
{new Date(invoice.createdAt).toLocaleDateString('ru-RU')}
|
|||
|
|
</p>
|
|||
|
|
{invoice.scheduledDate && (
|
|||
|
|
<p className="text-[10px] text-slate-400 flex items-center gap-1">
|
|||
|
|
<Calendar className="w-3 h-3" />
|
|||
|
|
{new Date(invoice.scheduledDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
onInvoiceClick(invoice);
|
|||
|
|
}}
|
|||
|
|
className="p-2 bg-slate-100 text-slate-600 rounded-lg hover:bg-primary-100 hover:text-primary-600 transition-colors"
|
|||
|
|
title="Просмотр"
|
|||
|
|
>
|
|||
|
|
<Eye className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Пагинация */}
|
|||
|
|
{totalPages > 1 && (
|
|||
|
|
<div className="p-4 border-t border-slate-200 flex justify-center gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|||
|
|
disabled={page === 1}
|
|||
|
|
className="px-3 py-1 border border-slate-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50"
|
|||
|
|
>
|
|||
|
|
Назад
|
|||
|
|
</button>
|
|||
|
|
<span className="px-4 py-1 text-sm text-slate-600">
|
|||
|
|
Страница {page} из {totalPages}
|
|||
|
|
</span>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
|||
|
|
disabled={page === totalPages}
|
|||
|
|
className="px-3 py-1 border border-slate-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50"
|
|||
|
|
>
|
|||
|
|
Вперед
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|