516 lines
22 KiB
TypeScript
516 lines
22 KiB
TypeScript
|
import React, { useState, useMemo, useEffect } from 'react';
|
|||
|
|
import {
|
|||
|
|
Invoice,
|
|||
|
|
InvoiceStatus,
|
|||
|
|
PaymentInvoice,
|
|||
|
|
PaymentCalendarEntry,
|
|||
|
|
PaymentDirection,
|
|||
|
|
FinanceAccount
|
|||
|
|
} from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import {
|
|||
|
|
Calendar,
|
|||
|
|
CheckCircle2,
|
|||
|
|
Wallet,
|
|||
|
|
History,
|
|||
|
|
Pause,
|
|||
|
|
XCircle,
|
|||
|
|
Plus,
|
|||
|
|
ArrowDownCircle,
|
|||
|
|
ArrowUpCircle,
|
|||
|
|
Banknote,
|
|||
|
|
Landmark
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { PaymentCalendarEntryForm } from './PaymentCalendarEntryForm';
|
|||
|
|
import { PaymentStatusModal, PaymentStatusAction, PaymentStatusModalPayload } from './PaymentStatusModal';
|
|||
|
|
|
|||
|
|
type CalendarInterval = 'week' | 'month';
|
|||
|
|
|
|||
|
|
function getPeriodBounds(interval: CalendarInterval): { dateFrom: string; dateTo: string; label: string } {
|
|||
|
|
const now = new Date();
|
|||
|
|
const year = now.getFullYear();
|
|||
|
|
const month = now.getMonth();
|
|||
|
|
if (interval === 'week') {
|
|||
|
|
const day = now.getDay();
|
|||
|
|
const mondayOffset = day === 0 ? -6 : 1 - day;
|
|||
|
|
const monday = new Date(now);
|
|||
|
|
monday.setDate(now.getDate() + mondayOffset);
|
|||
|
|
const sunday = new Date(monday);
|
|||
|
|
sunday.setDate(monday.getDate() + 6);
|
|||
|
|
const dateFrom = monday.toISOString().split('T')[0];
|
|||
|
|
const dateTo = sunday.toISOString().split('T')[0];
|
|||
|
|
const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'short' };
|
|||
|
|
const label = `${monday.toLocaleDateString('ru-RU', options)} – ${sunday.toLocaleDateString('ru-RU', options)} ${year}`;
|
|||
|
|
return { dateFrom, dateTo, label };
|
|||
|
|
}
|
|||
|
|
const first = new Date(year, month, 1);
|
|||
|
|
const last = new Date(year, month + 1, 0);
|
|||
|
|
const dateFrom = first.toISOString().split('T')[0];
|
|||
|
|
const dateTo = last.toISOString().split('T')[0];
|
|||
|
|
const label = first.toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' });
|
|||
|
|
return { dateFrom, dateTo, label };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface PaymentCalendarProps {
|
|||
|
|
invoices?: Invoice[];
|
|||
|
|
paymentInvoices?: PaymentInvoice[];
|
|||
|
|
calendarEntries?: PaymentCalendarEntry[];
|
|||
|
|
onUpdateStatus?: (id: string, s: InvoiceStatus, extra?: any) => void;
|
|||
|
|
onUpdatePaymentInvoiceStatus?: (id: number, status: 'paid' | 'postponed' | 'cancelled', payload?: PaymentStatusModalPayload) => Promise<void>;
|
|||
|
|
onRefreshCalendar?: () => void;
|
|||
|
|
currentBalance: number;
|
|||
|
|
currentUserId: string;
|
|||
|
|
interval?: CalendarInterval;
|
|||
|
|
onIntervalChange?: (interval: CalendarInterval) => void;
|
|||
|
|
periodLabel?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type RowItem = {
|
|||
|
|
id: string;
|
|||
|
|
direction: PaymentDirection;
|
|||
|
|
amount: number;
|
|||
|
|
scheduledDate: string;
|
|||
|
|
contractorName: string;
|
|||
|
|
description: string;
|
|||
|
|
probability?: string;
|
|||
|
|
isCash?: boolean;
|
|||
|
|
status?: string;
|
|||
|
|
paymentInvoiceId?: number;
|
|||
|
|
isOld?: boolean;
|
|||
|
|
type: 'invoice' | 'entry';
|
|||
|
|
entryId?: number;
|
|||
|
|
currency?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const PaymentCalendar: React.FC<PaymentCalendarProps> = ({
|
|||
|
|
invoices = [],
|
|||
|
|
paymentInvoices = [],
|
|||
|
|
calendarEntries = [],
|
|||
|
|
onUpdateStatus,
|
|||
|
|
onUpdatePaymentInvoiceStatus,
|
|||
|
|
onRefreshCalendar,
|
|||
|
|
currentBalance,
|
|||
|
|
currentUserId,
|
|||
|
|
interval = 'month',
|
|||
|
|
onIntervalChange,
|
|||
|
|
periodLabel: periodLabelProp
|
|||
|
|
}) => {
|
|||
|
|
const [filter, setFilter] = useState<'all' | 'planned' | 'paid'>('all');
|
|||
|
|
const [directionFilter, setDirectionFilter] = useState<'all' | 'outgoing' | 'incoming'>('all');
|
|||
|
|
const [loading, setLoading] = useState<Record<number, boolean>>({});
|
|||
|
|
const [showEntryForm, setShowEntryForm] = useState(false);
|
|||
|
|
const [defaultFormDirection, setDefaultFormDirection] = useState<PaymentDirection>('outgoing');
|
|||
|
|
const [statusModal, setStatusModal] = useState<{ action: PaymentStatusAction; row: RowItem } | null>(null);
|
|||
|
|
const [financeAccounts, setFinanceAccounts] = useState<FinanceAccount[]>([]);
|
|||
|
|
|
|||
|
|
const { dateFrom, dateTo, label } = useMemo(() => getPeriodBounds(interval), [interval]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const load = async () => {
|
|||
|
|
try {
|
|||
|
|
const list = await apiClient.get<FinanceAccount[]>('/finance/accounts');
|
|||
|
|
setFinanceAccounts(Array.isArray(list) ? list : []);
|
|||
|
|
} catch {
|
|||
|
|
setFinanceAccounts([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
load();
|
|||
|
|
}, []);
|
|||
|
|
const periodLabel = periodLabelProp ?? label;
|
|||
|
|
|
|||
|
|
const invoiceRows: RowItem[] = useMemo(() => {
|
|||
|
|
const invList = [
|
|||
|
|
...invoices.map((inv) => ({
|
|||
|
|
id: inv.id,
|
|||
|
|
direction: 'outgoing' as PaymentDirection,
|
|||
|
|
amount: Number(inv.amount) || 0,
|
|||
|
|
scheduledDate: inv.scheduledDate || '',
|
|||
|
|
contractorName: inv.contractorName,
|
|||
|
|
description: inv.serviceName,
|
|||
|
|
status: inv.status,
|
|||
|
|
isOld: true,
|
|||
|
|
type: 'invoice' as const,
|
|||
|
|
paymentInvoiceId: undefined
|
|||
|
|
})),
|
|||
|
|
...paymentInvoices.map((inv) => ({
|
|||
|
|
id: `pi-${inv.id}`,
|
|||
|
|
direction: 'outgoing' as PaymentDirection,
|
|||
|
|
amount: Number(inv.totalAmount) || 0,
|
|||
|
|
scheduledDate: inv.scheduledDate || '',
|
|||
|
|
contractorName: inv.contractorName,
|
|||
|
|
description: inv.serviceDescription,
|
|||
|
|
status: inv.status,
|
|||
|
|
isOld: false,
|
|||
|
|
type: 'invoice' as const,
|
|||
|
|
paymentInvoiceId: inv.id
|
|||
|
|
}))
|
|||
|
|
];
|
|||
|
|
return invList;
|
|||
|
|
}, [invoices, paymentInvoices]);
|
|||
|
|
|
|||
|
|
const entryRows: RowItem[] = useMemo(() => {
|
|||
|
|
const invoiceIds = new Set(paymentInvoices.map((pi) => pi.id));
|
|||
|
|
return calendarEntries
|
|||
|
|
.filter((e) => !e.paymentInvoiceId || !invoiceIds.has(e.paymentInvoiceId))
|
|||
|
|
.map((e) => ({
|
|||
|
|
id: `entry-${e.id}`,
|
|||
|
|
direction: e.direction,
|
|||
|
|
amount: Number(e.amount) || 0,
|
|||
|
|
scheduledDate: e.scheduledDate,
|
|||
|
|
contractorName: e.contractorName,
|
|||
|
|
description: e.description || e.category,
|
|||
|
|
probability: e.probability,
|
|||
|
|
isCash: e.isCash,
|
|||
|
|
type: 'entry' as const,
|
|||
|
|
entryId: e.id,
|
|||
|
|
currency: e.currency
|
|||
|
|
}));
|
|||
|
|
}, [calendarEntries, paymentInvoices]);
|
|||
|
|
|
|||
|
|
const allRows = useMemo(() => {
|
|||
|
|
const combined = [...invoiceRows, ...entryRows];
|
|||
|
|
return combined
|
|||
|
|
.filter((r) => {
|
|||
|
|
if (directionFilter !== 'all' && r.direction !== directionFilter) return false;
|
|||
|
|
if (filter === 'planned') {
|
|||
|
|
if (r.type === 'invoice') return r.status === 'scheduled' || r.status === 'overdue';
|
|||
|
|
return !r.scheduledDate ? false : true;
|
|||
|
|
}
|
|||
|
|
if (filter === 'paid') {
|
|||
|
|
if (r.type === 'invoice') return r.status === 'paid';
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
})
|
|||
|
|
.sort((a, b) => (a.scheduledDate || '').localeCompare(b.scheduledDate || ''));
|
|||
|
|
}, [invoiceRows, entryRows, filter, directionFilter]);
|
|||
|
|
|
|||
|
|
const scheduledTotalOutgoing =
|
|||
|
|
invoiceRows.filter((i) => i.status === 'scheduled').reduce((s, i) => s + Number(i.amount) || 0, 0) +
|
|||
|
|
entryRows.filter((e) => e.direction === 'outgoing').reduce((s, e) => s + Number(e.amount) || 0, 0);
|
|||
|
|
const scheduledTotalIncoming = entryRows
|
|||
|
|
.filter((e) => e.direction === 'incoming')
|
|||
|
|
.reduce((s, e) => s + Number(e.amount) || 0, 0);
|
|||
|
|
|
|||
|
|
const handlePaymentActionClick = (row: RowItem, action: 'paid' | 'postponed' | 'cancelled') => {
|
|||
|
|
if (row.type !== 'invoice' || row.isOld) {
|
|||
|
|
if (onUpdateStatus) onUpdateStatus(row.id, action === 'paid' ? 'paid' : 'scheduled');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (row.paymentInvoiceId && onUpdatePaymentInvoiceStatus) {
|
|||
|
|
setStatusModal({ action, row });
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleStatusModalConfirm = async (payload: PaymentStatusModalPayload) => {
|
|||
|
|
if (!statusModal || !statusModal.row.paymentInvoiceId || !onUpdatePaymentInvoiceStatus) return;
|
|||
|
|
const { row, action } = statusModal;
|
|||
|
|
const id = row.paymentInvoiceId!;
|
|||
|
|
setStatusModal(null);
|
|||
|
|
setLoading((prev) => ({ ...prev, [id]: true }));
|
|||
|
|
try {
|
|||
|
|
await onUpdatePaymentInvoiceStatus(id, action, payload);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error updating payment invoice status:', err);
|
|||
|
|
alert('Ошибка при обновлении статуса');
|
|||
|
|
} finally {
|
|||
|
|
setLoading((prev) => ({ ...prev, [id]: false }));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDeleteEntry = async (entryId: number) => {
|
|||
|
|
if (!window.confirm('Удалить запись из календаря?')) return;
|
|||
|
|
try {
|
|||
|
|
await apiClient.delete(`/finance/payment-calendar/entries/${entryId}`);
|
|||
|
|
onRefreshCalendar?.();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error deleting entry:', err);
|
|||
|
|
alert('Ошибка удаления');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const probabilityLabel: Record<string, string> = {
|
|||
|
|
confirmed: '100%',
|
|||
|
|
high: '80%',
|
|||
|
|
medium: '50%',
|
|||
|
|
low: '30%'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|||
|
|
<div className="flex flex-wrap items-center gap-2">
|
|||
|
|
<div className="flex bg-slate-100 p-1 rounded-xl w-fit">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilter('all')}
|
|||
|
|
className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${filter === 'all' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
Все
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilter('planned')}
|
|||
|
|
className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${filter === 'planned' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
План
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilter('paid')}
|
|||
|
|
className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${filter === 'paid' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
Оплачено
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex bg-slate-100 p-1 rounded-xl w-fit">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setDirectionFilter('all')}
|
|||
|
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${directionFilter === 'all' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
Все
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setDirectionFilter('outgoing')}
|
|||
|
|
className={`flex items-center gap-1 px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${directionFilter === 'outgoing' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
<ArrowUpCircle className="w-3.5 h-3.5" /> Расходы
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setDirectionFilter('incoming')}
|
|||
|
|
className={`flex items-center gap-1 px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${directionFilter === 'incoming' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
<ArrowDownCircle className="w-3.5 h-3.5" /> Поступления
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
{onIntervalChange && (
|
|||
|
|
<div className="flex bg-slate-100 p-1 rounded-xl">
|
|||
|
|
<button
|
|||
|
|
onClick={() => onIntervalChange('week')}
|
|||
|
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${interval === 'week' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
Неделя
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => onIntervalChange('month')}
|
|||
|
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${interval === 'month' ? 'bg-white shadow text-slate-800' : 'text-slate-500'}`}
|
|||
|
|
>
|
|||
|
|
Месяц
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{financeAccounts.length > 0 ? (
|
|||
|
|
<div className="flex flex-wrap items-center gap-4">
|
|||
|
|
<div className="flex flex-wrap gap-3">
|
|||
|
|
{financeAccounts.filter((a) => a.type === 'bank').map((a) => (
|
|||
|
|
<div key={a.id} className="flex items-center gap-2 px-3 py-2 bg-slate-100 rounded-xl border border-slate-200">
|
|||
|
|
<Landmark className="w-4 h-4 text-slate-500" />
|
|||
|
|
<div>
|
|||
|
|
<p className="text-[10px] text-slate-500 font-bold uppercase">{a.name}</p>
|
|||
|
|
<p className="text-sm font-black text-slate-800">{Number(a.balance).toLocaleString('ru-RU')} ₽</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{financeAccounts.filter((a) => a.type === 'cash').map((a) => (
|
|||
|
|
<div key={a.id} className="flex items-center gap-2 px-3 py-2 bg-amber-50 rounded-xl border border-amber-200">
|
|||
|
|
<Banknote className="w-4 h-4 text-amber-600" />
|
|||
|
|
<div>
|
|||
|
|
<p className="text-[10px] text-amber-700 font-bold uppercase">{a.name}</p>
|
|||
|
|
<p className="text-sm font-black text-amber-800">{Number(a.balance).toLocaleString('ru-RU')} ₽</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<p className="text-[10px] text-slate-400 font-black uppercase">Итого: {financeAccounts.reduce((s, a) => s + Number(a.balance), 0).toLocaleString('ru-RU')} ₽</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-right hidden sm:block">
|
|||
|
|
<p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Текущий остаток</p>
|
|||
|
|
<p className="text-sm font-black text-slate-800">{currentBalance.toLocaleString()} ₽</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setDefaultFormDirection('outgoing');
|
|||
|
|
setShowEntryForm(true);
|
|||
|
|
}}
|
|||
|
|
className="flex items-center gap-2 px-3 py-2 bg-slate-900 text-white rounded-xl text-xs font-bold hover:bg-slate-800 transition-colors"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" /> Добавить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|||
|
|
<div className="p-4 bg-slate-900 text-white flex flex-wrap justify-between items-center gap-4">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="p-2 bg-white/10 rounded-lg">
|
|||
|
|
<Calendar className="w-5 h-5" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-bold leading-none uppercase tracking-tighter">Платежный календарь</h3>
|
|||
|
|
<p className="text-[10px] text-slate-400 mt-1 uppercase font-bold tracking-widest">{periodLabel}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-6">
|
|||
|
|
<div className="text-right">
|
|||
|
|
<p className="text-lg font-black">{Number(scheduledTotalOutgoing).toLocaleString('ru-RU')} ₽</p>
|
|||
|
|
<p className="text-[10px] text-slate-400 uppercase font-bold">К оплате (план)</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-right">
|
|||
|
|
<p className="text-lg font-black text-emerald-300">+{Number(scheduledTotalIncoming).toLocaleString('ru-RU')} ₽</p>
|
|||
|
|
<p className="text-[10px] text-slate-400 uppercase font-bold">Ожидаемые поступления</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="divide-y divide-slate-100">
|
|||
|
|
{allRows.length === 0 && (
|
|||
|
|
<div className="p-12 text-center text-slate-400 italic">Нет записей за выбранный период</div>
|
|||
|
|
)}
|
|||
|
|
{allRows.map((row) => {
|
|||
|
|
const isPaid = row.type === 'invoice' && row.status === 'paid';
|
|||
|
|
const isOverdue = row.type === 'invoice' && row.status === 'overdue';
|
|||
|
|
const isIncoming = row.direction === 'incoming';
|
|||
|
|
const day = row.scheduledDate?.split('-')[2] || '??';
|
|||
|
|
const monthShort = row.scheduledDate
|
|||
|
|
? new Date(row.scheduledDate + 'T12:00:00').toLocaleDateString('ru-RU', { month: 'short' })
|
|||
|
|
: '—';
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={row.id}
|
|||
|
|
className={`p-4 flex items-center gap-4 hover:bg-slate-50 transition-colors group ${isPaid ? 'bg-slate-50/50' : ''}`}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={`p-2 rounded-xl text-center min-w-[50px] border ${
|
|||
|
|
isPaid
|
|||
|
|
? 'bg-emerald-50 border-emerald-100 text-emerald-600'
|
|||
|
|
: isOverdue
|
|||
|
|
? 'bg-red-50 border-red-100 text-red-600'
|
|||
|
|
: isIncoming
|
|||
|
|
? 'bg-emerald-50/50 border-emerald-100 text-emerald-700'
|
|||
|
|
: 'bg-white border-slate-200 text-slate-500 shadow-sm'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<p className="text-xs font-black leading-none">{day}</p>
|
|||
|
|
<p className="text-[9px] font-bold uppercase mt-1">{monthShort}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<div className="flex items-center gap-2 mb-0.5 flex-wrap">
|
|||
|
|
{isIncoming && <ArrowDownCircle className="w-3.5 h-3.5 text-emerald-500 shrink-0" />}
|
|||
|
|
{row.isCash && <Banknote className="w-3.5 h-3.5 text-amber-600 shrink-0" title="Наличные" />}
|
|||
|
|
<p
|
|||
|
|
className={`text-sm font-bold truncate ${isPaid ? 'text-slate-500' : 'text-slate-800'}`}
|
|||
|
|
>
|
|||
|
|
{row.contractorName || '—'}
|
|||
|
|
</p>
|
|||
|
|
{row.type === 'invoice' && isPaid && <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />}
|
|||
|
|
{row.probability && row.probability !== 'confirmed' && (
|
|||
|
|
<span className="text-[9px] font-bold text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">
|
|||
|
|
{probabilityLabel[row.probability] || row.probability}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<p className="text-[10px] text-slate-400 truncate">{row.description || '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="text-right flex items-center gap-4">
|
|||
|
|
<div>
|
|||
|
|
<p
|
|||
|
|
className={`text-sm font-black ${isPaid ? 'text-slate-400' : isIncoming ? 'text-emerald-700' : 'text-slate-900'}`}
|
|||
|
|
>
|
|||
|
|
{isIncoming ? '+' : ''}
|
|||
|
|
{row.amount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}{' '}
|
|||
|
|
{row.currency === 'RUB' || !row.currency ? '₽' : row.currency}
|
|||
|
|
</p>
|
|||
|
|
{!isPaid && !isIncoming && row.type === 'invoice' && (
|
|||
|
|
<p className="text-[8px] text-slate-400 font-bold uppercase">
|
|||
|
|
Остаток после: {((currentBalance - row.amount) / 1000).toFixed(0)}k
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-1">
|
|||
|
|
{row.type === 'entry' && row.entryId && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleDeleteEntry(row.entryId!)}
|
|||
|
|
className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
|
|||
|
|
title="Удалить запись"
|
|||
|
|
>
|
|||
|
|
<XCircle className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{row.type === 'invoice' &&
|
|||
|
|
(row.status !== 'paid' ? (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handlePaymentActionClick(row, 'paid')}
|
|||
|
|
disabled={loading[row.paymentInvoiceId!]}
|
|||
|
|
className="p-2 bg-slate-900 text-white rounded-lg hover:bg-slate-800 disabled:opacity-50"
|
|||
|
|
title="Подтвердить оплату"
|
|||
|
|
>
|
|||
|
|
<Wallet className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
{row.paymentInvoiceId && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handlePaymentActionClick(row, 'postponed')}
|
|||
|
|
disabled={loading[row.paymentInvoiceId!]}
|
|||
|
|
className="p-2 bg-orange-100 text-orange-600 rounded-lg hover:bg-orange-200 disabled:opacity-50"
|
|||
|
|
title="Отложить"
|
|||
|
|
>
|
|||
|
|
<Pause className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handlePaymentActionClick(row, 'cancelled')}
|
|||
|
|
disabled={loading[row.paymentInvoiceId!]}
|
|||
|
|
className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 disabled:opacity-50"
|
|||
|
|
title="Отменить"
|
|||
|
|
>
|
|||
|
|
<XCircle className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<button
|
|||
|
|
onClick={() => handlePaymentActionClick(row, 'postponed')}
|
|||
|
|
disabled={loading[row.paymentInvoiceId!]}
|
|||
|
|
className="p-2 bg-white text-slate-300 rounded-lg hover:text-indigo-600 disabled:opacity-50"
|
|||
|
|
title="Вернуть в план"
|
|||
|
|
>
|
|||
|
|
<History className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{showEntryForm && (
|
|||
|
|
<PaymentCalendarEntryForm
|
|||
|
|
currentUserId={currentUserId}
|
|||
|
|
defaultDirection={defaultFormDirection}
|
|||
|
|
onSave={async () => {
|
|||
|
|
setShowEntryForm(false);
|
|||
|
|
onRefreshCalendar?.();
|
|||
|
|
}}
|
|||
|
|
onCancel={() => setShowEntryForm(false)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{statusModal && (
|
|||
|
|
<PaymentStatusModal
|
|||
|
|
action={statusModal.action}
|
|||
|
|
invoiceLabel={`${statusModal.row.contractorName} — ${statusModal.row.amount.toLocaleString('ru-RU')} ₽`}
|
|||
|
|
onConfirm={handleStatusModalConfirm}
|
|||
|
|
onCancel={() => setStatusModal(null)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|