1184 lines
82 KiB
TypeScript
Executable File
1184 lines
82 KiB
TypeScript
Executable File
import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
||
import { Building, PlanItem, InspectionAct, InspectionSection, InspectionCommonSection, InspectionMKDElement, PaymentInvoice } from '../../types';
|
||
import { apiClient } from '../../services/apiClient';
|
||
import {
|
||
Calendar,
|
||
Wallet,
|
||
CheckCircle2,
|
||
Clock,
|
||
Plus,
|
||
Trash2,
|
||
PieChart,
|
||
Upload,
|
||
ArrowRight,
|
||
PauseCircle,
|
||
CalendarDays,
|
||
FileSpreadsheet,
|
||
X,
|
||
AlertCircle,
|
||
History,
|
||
Archive,
|
||
ArrowUpRight,
|
||
LayoutGrid,
|
||
List,
|
||
Camera,
|
||
Table2,
|
||
Paperclip
|
||
} from 'lucide-react';
|
||
import { EditableField } from './EditableField';
|
||
|
||
const MONTHS = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
|
||
const CURRENT_YEAR = new Date().getFullYear();
|
||
const CURRENT_MONTH_IDX = new Date().getMonth();
|
||
|
||
function getDefaultMonthForNewItem(selectedYear: number): string {
|
||
if (selectedYear === CURRENT_YEAR && CURRENT_MONTH_IDX <= 2) return 'Январь';
|
||
return MONTHS[CURRENT_MONTH_IDX];
|
||
}
|
||
|
||
function isInspectionCandidate(el: InspectionMKDElement): boolean {
|
||
const st = [el.generalStatus, el.electroStatus, el.weldingStatus];
|
||
if (st.some(s => s === 'WARNING' || s === 'CRITICAL')) return true;
|
||
return !!el.repairType?.trim();
|
||
}
|
||
|
||
type InspectionCandidate = {
|
||
actId: string;
|
||
actNumber: string;
|
||
actDate: string;
|
||
sectionTitle: string;
|
||
element: InspectionMKDElement;
|
||
};
|
||
|
||
function collectCandidatesFromInspections(history: InspectionAct[]): InspectionCandidate[] {
|
||
const out: InspectionCandidate[] = [];
|
||
for (const act of history) {
|
||
const sections = act.sections || [];
|
||
const common = act.commonSections || [];
|
||
for (const s of sections) {
|
||
for (const el of s.elements || []) {
|
||
if (isInspectionCandidate(el)) out.push({ actId: act.id, actNumber: act.number, actDate: act.date, sectionTitle: s.title, element: el });
|
||
}
|
||
}
|
||
for (const s of common) {
|
||
for (const el of s.elements || []) {
|
||
if (isInspectionCandidate(el)) out.push({ actId: act.id, actNumber: act.number, actDate: act.date, sectionTitle: s.title, element: el });
|
||
}
|
||
}
|
||
}
|
||
return out;
|
||
}
|
||
|
||
type ViewMode = 'list' | 'months' | 'table';
|
||
|
||
export const BudgetPlanView: React.FC<{ building: Building, setBuilding: React.Dispatch<React.SetStateAction<Building>>, isEditing: boolean }> = ({ building, setBuilding, isEditing }) => {
|
||
const [showImportModal, setShowImportModal] = useState(false);
|
||
const [importData, setImportData] = useState('');
|
||
const [selectedYear, setSelectedYear] = useState(CURRENT_YEAR);
|
||
const [viewMode, setViewMode] = useState<ViewMode>('table');
|
||
const [showFromInspectionsModal, setShowFromInspectionsModal] = useState(false);
|
||
const [postponeModalId, setPostponeModalId] = useState<string | null>(null);
|
||
const [carryOverModalId, setCarryOverModalId] = useState<string | null>(null);
|
||
const [postponeReasonInput, setPostponeReasonInput] = useState('');
|
||
const [carryOverReasonInput, setCarryOverReasonInput] = useState('');
|
||
const [fromInspectionsYear, setFromInspectionsYear] = useState(selectedYear);
|
||
const [fromInspectionsMonth, setFromInspectionsMonth] = useState(getDefaultMonthForNewItem(selectedYear));
|
||
const [fromInspectionsSelectedActIds, setFromInspectionsSelectedActIds] = useState<string[]>([]);
|
||
const [fromInspectionsSelectedKeys, setFromInspectionsSelectedKeys] = useState<Record<string, boolean>>({});
|
||
const [invoicesForBuilding, setInvoicesForBuilding] = useState<PaymentInvoice[]>([]);
|
||
const [linkInvoicePlanItemId, setLinkInvoicePlanItemId] = useState<string | null>(null);
|
||
const [showCreatePlanItemModal, setShowCreatePlanItemModal] = useState(false);
|
||
const [createPlanItemMonth, setCreatePlanItemMonth] = useState<string | undefined>(undefined);
|
||
const [workCardItemId, setWorkCardItemId] = useState<string | null>(null);
|
||
type CreateTableRow = { workName: string; month: string; estimatedCost: number; byManagement: boolean };
|
||
const [createTableRows, setCreateTableRows] = useState<CreateTableRow[]>([]);
|
||
|
||
// Normalize existing data if years are missing
|
||
const plan = useMemo(() => {
|
||
return (building.annualPlan || []).map(item => ({
|
||
...item,
|
||
year: item.year || CURRENT_YEAR // Default to current if undefined
|
||
}));
|
||
}, [building.annualPlan]);
|
||
|
||
const availableYears = useMemo(() => {
|
||
const years = new Set([CURRENT_YEAR, CURRENT_YEAR + 1]);
|
||
plan.forEach(p => years.add(p.year));
|
||
return Array.from(years).sort((a, b) => b - a);
|
||
}, [plan]);
|
||
|
||
const filteredPlan = plan.filter(item => item.year === selectedYear);
|
||
|
||
const totalEstimated = filteredPlan.reduce((sum, item) => sum + (item.estimatedCost || 0), 0);
|
||
const totalActual = filteredPlan.reduce((sum, item) => sum + (item.actualCost || 0), 0);
|
||
|
||
const handleAddItem = (month?: string) => {
|
||
setCreatePlanItemMonth(month ?? getDefaultMonthForNewItem(selectedYear));
|
||
setShowCreatePlanItemModal(true);
|
||
};
|
||
|
||
const handleAddItemsFromTable = (rows: CreateTableRow[]) => {
|
||
const toAdd = rows.filter(r => (r.workName || '').trim());
|
||
if (toAdd.length === 0) return;
|
||
const baseTs = Date.now();
|
||
const newItems: PlanItem[] = toAdd.map((data, idx) => ({
|
||
id: `p-${baseTs}-${idx}`,
|
||
year: selectedYear,
|
||
month: data.month || getDefaultMonthForNewItem(selectedYear),
|
||
workName: (data.workName || '').trim() || 'Новая работа',
|
||
status: 'future' as const,
|
||
progress: 0,
|
||
estimatedCost: data.estimatedCost ?? 0,
|
||
byManagement: data.byManagement ?? false
|
||
}));
|
||
setBuilding(prev => ({
|
||
...prev,
|
||
annualPlan: [...(prev.annualPlan || []), ...newItems],
|
||
isDirty: true
|
||
}));
|
||
setShowCreatePlanItemModal(false);
|
||
setCreatePlanItemMonth(undefined);
|
||
setCreateTableRows([]);
|
||
};
|
||
|
||
const handleUpdateItem = (id: string, updates: Partial<PlanItem>) => {
|
||
setBuilding(prev => ({
|
||
...prev,
|
||
annualPlan: (prev.annualPlan || []).map(item => item.id === id ? { ...item, ...updates } : item),
|
||
isDirty: true
|
||
}));
|
||
};
|
||
|
||
const handleQuickComplete = (id: string) => {
|
||
const item = plan.find(p => p.id === id);
|
||
handleUpdateItem(id, {
|
||
progress: 100,
|
||
status: 'completed',
|
||
actualCost: item?.estimatedCost
|
||
});
|
||
};
|
||
|
||
const handlePostpone = (id: string, reason?: string) => {
|
||
const currentItem = plan.find(p => p.id === id);
|
||
if (!currentItem) return;
|
||
const currentMonthIdx = MONTHS.indexOf(currentItem.month);
|
||
if (currentMonthIdx === 11) return; // Dec -> use carry-over flow instead
|
||
const nextMonth = MONTHS[currentMonthIdx + 1];
|
||
handleUpdateItem(id, { month: nextMonth, status: 'future', progress: 0, postponeReason: reason || undefined });
|
||
};
|
||
|
||
const handleCarryOver = (id: string, targetYear: number, reason?: string) => {
|
||
const currentItem = plan.find(p => p.id === id);
|
||
if (!currentItem) return;
|
||
|
||
const carriedItem: PlanItem = {
|
||
...currentItem,
|
||
id: `p-carried-${Date.now()}`,
|
||
year: targetYear,
|
||
originalYear: currentItem.originalYear || currentItem.year,
|
||
status: 'future',
|
||
progress: 0,
|
||
month: 'Январь',
|
||
carryOverReason: reason || undefined
|
||
};
|
||
|
||
setBuilding(prev => {
|
||
const base = prev.annualPlan || [];
|
||
return {
|
||
...prev,
|
||
annualPlan: [
|
||
...base.map(item => item.id === id ? { ...item, status: 'carried_over' as const } : item),
|
||
carriedItem
|
||
],
|
||
isDirty: true
|
||
};
|
||
});
|
||
};
|
||
|
||
const handleDeleteItem = (id: string) => {
|
||
if (confirm('Удалить этот пункт плана?')) {
|
||
setBuilding(prev => ({
|
||
...prev,
|
||
annualPlan: (prev.annualPlan || []).filter(item => item.id !== id),
|
||
isDirty: true
|
||
}));
|
||
}
|
||
};
|
||
|
||
const handleAddFromInspections = () => {
|
||
const existingKeys = new Set((building.annualPlan || []).map(p => (p.sourceInspectionId && p.sourceElementId) ? `${p.sourceInspectionId}|${p.sourceElementId}` : null).filter(Boolean) as string[]);
|
||
const toAdd = inspectionCandidates.filter(c => {
|
||
const key = `${c.actId}|${c.element.id}`;
|
||
return fromInspectionsSelectedKeys[key] && !existingKeys.has(key);
|
||
});
|
||
const newItems: PlanItem[] = toAdd.map(c => {
|
||
const workName = [c.element.name, c.element.repairType?.trim() && ` — ${c.element.repairType.trim()}`, c.sectionTitle && `, ${c.sectionTitle}`].filter(Boolean).join('');
|
||
return {
|
||
id: `p-ins-${Date.now()}-${c.element.id}`,
|
||
year: fromInspectionsYear,
|
||
month: fromInspectionsMonth,
|
||
workName,
|
||
status: 'future',
|
||
progress: 0,
|
||
estimatedCost: 0,
|
||
byManagement: false,
|
||
sourceInspectionId: c.actId,
|
||
sourceElementId: c.element.id,
|
||
sourceSectionTitle: c.sectionTitle
|
||
};
|
||
});
|
||
if (newItems.length === 0) return;
|
||
setBuilding(prev => ({
|
||
...prev,
|
||
annualPlan: [...(prev.annualPlan || []), ...newItems],
|
||
isDirty: true
|
||
}));
|
||
setShowFromInspectionsModal(false);
|
||
};
|
||
|
||
const parsePlanRow = (row: string, idx: number, prefix: string): PlanItem => {
|
||
const [name, month, cost] = row.split(';').map(s => s?.trim() ?? '');
|
||
const byManagement = /силами\s*ук|силами\s*у\.?к\.?/i.test(cost);
|
||
const estimatedCost = byManagement ? 0 : (Number(cost?.replace(/\s/g, '')) || 0);
|
||
return {
|
||
id: `${prefix}-${Date.now()}-${idx}`,
|
||
year: selectedYear,
|
||
workName: name || 'Без названия',
|
||
month: month || 'Январь',
|
||
estimatedCost,
|
||
byManagement,
|
||
status: 'future',
|
||
progress: 0
|
||
};
|
||
};
|
||
|
||
const handleImportCSV = () => {
|
||
const rows = importData.split('\n').filter(r => r.trim());
|
||
const newItems: PlanItem[] = rows.map((row, idx) => parsePlanRow(row, idx, 'p-imp'));
|
||
setBuilding(prev => ({
|
||
...prev,
|
||
annualPlan: [...(prev.annualPlan || []), ...newItems],
|
||
isDirty: true
|
||
}));
|
||
setShowImportModal(false);
|
||
setImportData('');
|
||
};
|
||
|
||
const handleLinkInvoice = async (invoiceId: number, planItemId: string) => {
|
||
try {
|
||
await apiClient.put(`/finance/payment-invoices/${invoiceId}`, {
|
||
planItemId,
|
||
planItemBuildingId: building.id
|
||
});
|
||
await fetchInvoices();
|
||
setLinkInvoicePlanItemId(null);
|
||
} catch (e) {
|
||
console.error('Link invoice failed:', e);
|
||
alert('Не удалось привязать счёт. Возможны только счета в статусе «Черновик» или «Отклонён».');
|
||
}
|
||
};
|
||
|
||
const isArchive = selectedYear < CURRENT_YEAR;
|
||
|
||
const overdueItems = useMemo(() => {
|
||
if (selectedYear !== CURRENT_YEAR || isArchive) return [];
|
||
const now = new Date().getMonth();
|
||
return filteredPlan.filter(p =>
|
||
p.status !== 'completed' && p.status !== 'carried_over' && MONTHS.indexOf(p.month) < now
|
||
);
|
||
}, [filteredPlan, selectedYear, isArchive]);
|
||
|
||
const inspectionCandidates = useMemo(() => collectCandidatesFromInspections(building.inspectionHistory || []), [building.inspectionHistory]);
|
||
const inspectionActsWithCandidates = useMemo(() => {
|
||
const actIds = new Set(inspectionCandidates.map(c => c.actId));
|
||
return (building.inspectionHistory || []).filter(a => actIds.has(a.id));
|
||
}, [building.inspectionHistory, inspectionCandidates]);
|
||
|
||
useEffect(() => {
|
||
if (showFromInspectionsModal) {
|
||
setFromInspectionsYear(selectedYear);
|
||
setFromInspectionsMonth(getDefaultMonthForNewItem(selectedYear));
|
||
setFromInspectionsSelectedActIds([]);
|
||
setFromInspectionsSelectedKeys({});
|
||
}
|
||
}, [showFromInspectionsModal, selectedYear]);
|
||
|
||
useEffect(() => {
|
||
if (showCreatePlanItemModal) {
|
||
const defaultMonth = createPlanItemMonth ?? getDefaultMonthForNewItem(selectedYear);
|
||
setCreateTableRows([{ workName: '', month: defaultMonth, estimatedCost: 0, byManagement: false }]);
|
||
}
|
||
}, [showCreatePlanItemModal, createPlanItemMonth, selectedYear]);
|
||
|
||
const fetchInvoices = useCallback(async () => {
|
||
try {
|
||
const res = await apiClient.get<{ invoices: PaymentInvoice[] }>(
|
||
`/finance/payment-invoices?buildingId=${encodeURIComponent(building.id)}&limit=500`
|
||
);
|
||
const list = (res as any)?.invoices ?? [];
|
||
setInvoicesForBuilding(Array.isArray(list) ? list : []);
|
||
} catch {
|
||
setInvoicesForBuilding([]);
|
||
}
|
||
}, [building.id]);
|
||
|
||
useEffect(() => {
|
||
fetchInvoices();
|
||
}, [fetchInvoices]);
|
||
|
||
const invoicesByPlanItemId = useMemo(() => {
|
||
const map: Record<string, PaymentInvoice[]> = {};
|
||
for (const inv of invoicesForBuilding) {
|
||
if (inv.planItemId && inv.planItemBuildingId === building.id) {
|
||
const k = inv.planItemId;
|
||
if (!map[k]) map[k] = [];
|
||
map[k].push(inv);
|
||
}
|
||
}
|
||
return map;
|
||
}, [invoicesForBuilding, building.id]);
|
||
|
||
return (
|
||
<div className="space-y-6 animate-fade-in">
|
||
{/* Year Selector Tabs */}
|
||
<div className="flex gap-1 bg-slate-200/50 p-1 rounded-xl overflow-x-auto no-scrollbar">
|
||
{availableYears.map(year => (
|
||
<button
|
||
key={year}
|
||
onClick={() => setSelectedYear(year)}
|
||
className={`flex-shrink-0 min-w-[5rem] px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 whitespace-nowrap ${selectedYear === year ? 'bg-white text-primary-600 shadow-sm' : 'text-slate-500 hover:bg-white/50'}`}
|
||
>
|
||
{year < CURRENT_YEAR && <Archive className="w-3 h-3 opacity-50"/>}
|
||
{year} {year === CURRENT_YEAR && '(Тек.)'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Budget Summary Card */}
|
||
<div className={`rounded-2xl p-6 text-white shadow-xl transition-colors duration-500 ${isArchive ? 'bg-gradient-to-br from-slate-600 to-slate-700' : 'bg-gradient-to-br from-slate-800 to-slate-900'}`}>
|
||
<div className="flex justify-between items-start mb-6">
|
||
<div>
|
||
<h3 className="text-slate-300 text-[10px] font-bold uppercase tracking-wider mb-1">
|
||
План работ на {selectedYear} год {isArchive && '(Архив)'}
|
||
</h3>
|
||
<p className="text-3xl font-black">{totalEstimated.toLocaleString()} ₽</p>
|
||
</div>
|
||
<div className="p-3 bg-white/10 rounded-xl">
|
||
<PieChart className="w-6 h-6 text-primary-400"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-white/10">
|
||
<div>
|
||
<span className="text-xs text-slate-300 block mb-1">Фактически исполнено</span>
|
||
<span className="text-lg font-bold">{totalActual.toLocaleString()} ₽</span>
|
||
</div>
|
||
<div className="text-right">
|
||
<span className="text-xs text-slate-300 block mb-1">Процент выполнения</span>
|
||
<span className={`text-lg font-bold ${totalEstimated > 0 && (totalActual / totalEstimated) > 0.8 ? 'text-emerald-400' : 'text-amber-400'}`}>
|
||
{totalEstimated > 0 ? Math.round((totalActual / totalEstimated) * 100) : 0}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* View toggle */}
|
||
{!isArchive && (
|
||
<div className="flex gap-1 bg-slate-200/50 p-1 rounded-xl w-fit flex-wrap">
|
||
<button
|
||
type="button"
|
||
onClick={() => setViewMode('table')}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all ${viewMode === 'table' ? 'bg-white text-primary-600 shadow-sm' : 'text-slate-500 hover:bg-white/50'}`}
|
||
>
|
||
<Table2 className="w-3.5 h-3.5"/> Таблица
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setViewMode('list')}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all ${viewMode === 'list' ? 'bg-white text-primary-600 shadow-sm' : 'text-slate-500 hover:bg-white/50'}`}
|
||
>
|
||
<List className="w-3.5 h-3.5"/> Список
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setViewMode('months')}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all ${viewMode === 'months' ? 'bg-white text-primary-600 shadow-sm' : 'text-slate-500 hover:bg-white/50'}`}
|
||
>
|
||
<LayoutGrid className="w-3.5 h-3.5"/> По месяцам
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Management Bar — Создать пункт открывает модалку во всех режимах */}
|
||
{!isArchive && (
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => handleAddItem()}
|
||
className="flex-1 min-w-[120px] py-3 bg-primary-600 text-white rounded-xl font-bold text-xs flex items-center justify-center gap-2 hover:bg-primary-700 transition-all shadow-lg shadow-primary-500/20 active:scale-95"
|
||
>
|
||
<Plus className="w-4 h-4"/> Создать пункт
|
||
</button>
|
||
<button
|
||
onClick={() => setShowFromInspectionsModal(true)}
|
||
className="flex-1 min-w-[120px] py-3 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-xs flex items-center justify-center gap-2 hover:bg-slate-50 transition-all active:scale-95"
|
||
>
|
||
<Camera className="w-4 h-4 text-primary-500"/> Пополнить из обходов
|
||
</button>
|
||
<button
|
||
onClick={() => setShowImportModal(true)}
|
||
className="flex-1 min-w-[120px] py-3 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-xs flex items-center justify-center gap-2 hover:bg-slate-50 transition-all active:scale-95"
|
||
>
|
||
<Upload className="w-4 h-4 text-primary-500"/> Импорт
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Empty plan hint */}
|
||
{filteredPlan.length === 0 && (
|
||
<div className="py-12 px-6 text-center bg-white rounded-2xl border border-dashed border-slate-300">
|
||
<CalendarDays className="w-10 h-10 mx-auto mb-3 text-slate-300"/>
|
||
<p className="text-sm font-medium text-slate-600 mb-4">План на {selectedYear} год не заполнен</p>
|
||
<p className="text-xs text-slate-500 mb-6">Нажмите «Создать пункт», пополните из обходов или импортируйте CSV</p>
|
||
{!isArchive && (
|
||
<div className="flex flex-wrap gap-2 justify-center">
|
||
<button type="button" onClick={() => handleAddItem()} className="py-2.5 px-4 bg-primary-600 text-white rounded-xl font-bold text-xs hover:bg-primary-700 transition-all flex items-center gap-1.5 mx-auto"><Plus className="w-4 h-4"/> Создать пункт</button>
|
||
<button type="button" onClick={() => setShowFromInspectionsModal(true)} className="py-2.5 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-xs hover:bg-slate-50 transition-all"><Camera className="w-4 h-4 inline mr-1"/> Пополнить из обходов</button>
|
||
<button type="button" onClick={() => setShowImportModal(true)} className="py-2.5 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-xs hover:bg-slate-50 transition-all"><Upload className="w-4 h-4 inline mr-1 text-primary-500"/> Импорт</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Overdue block */}
|
||
{filteredPlan.length > 0 && overdueItems.length > 0 && (
|
||
<div className="rounded-xl border-2 border-red-200 bg-red-50/30 p-4 space-y-3">
|
||
<h3 className="text-xs font-black uppercase tracking-wider text-red-600 flex items-center gap-2">
|
||
<AlertCircle className="w-4 h-4"/> Просроченные ({overdueItems.length})
|
||
</h3>
|
||
<div className="space-y-2">
|
||
{overdueItems.map(item => (
|
||
<div key={item.id} className="flex flex-wrap items-center justify-between gap-2 py-2 px-3 bg-white rounded-lg border border-red-100">
|
||
<div>
|
||
<span className="font-bold text-slate-800 text-sm block">{item.workName}</span>
|
||
<span className="text-[10px] text-red-600 font-bold uppercase">{item.month}</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-sm font-bold text-slate-700">{item.byManagement ? 'силами УК' : `${item.estimatedCost?.toLocaleString() ?? 0} ₽`}</span>
|
||
<span className="text-[9px] font-black uppercase px-2 py-0.5 rounded bg-red-100 text-red-700">Просрочено</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Work Plan List (list view) or Months grid */}
|
||
{filteredPlan.length > 0 && viewMode === 'list' && (
|
||
<div className="space-y-4">
|
||
{[...filteredPlan].sort((a,b) => MONTHS.indexOf(a.month) - MONTHS.indexOf(b.month)).map((item) => {
|
||
const isOverdue = selectedYear === CURRENT_YEAR && item.status !== 'completed' && item.status !== 'carried_over' && MONTHS.indexOf(item.month) < new Date().getMonth();
|
||
const isCarryOver = !!item.originalYear && item.originalYear < item.year;
|
||
|
||
return (
|
||
<div
|
||
key={item.id}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => setWorkCardItemId(item.id)}
|
||
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setWorkCardItemId(item.id); } }}
|
||
className={`bg-white p-4 rounded-xl border shadow-sm relative group transition-all cursor-pointer hover:border-primary-300 hover:shadow-md ${isOverdue ? 'border-red-200 bg-red-50/10' : 'border-slate-200'} ${isArchive ? 'opacity-90 grayscale-[0.3]' : ''} ${item.status === 'carried_over' ? 'opacity-60 bg-slate-50' : ''}`}
|
||
>
|
||
<div className="flex justify-between items-start mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className={`p-1.5 rounded-lg ${item.status === 'completed' ? 'bg-emerald-50 text-emerald-600' : item.status === 'carried_over' ? 'bg-slate-200 text-slate-500' : 'bg-primary-50 text-primary-600'}`}>
|
||
{item.status === 'completed' ? <CheckCircle2 className="w-4 h-4"/> : item.status === 'carried_over' ? <ArrowUpRight className="w-4 h-4"/> : <Clock className="w-4 h-4"/>}
|
||
</div>
|
||
<div className="flex flex-col" onClick={e => e.stopPropagation()}>
|
||
<div className="flex items-center gap-2">
|
||
<EditableField
|
||
value={item.month}
|
||
onChange={(v) => handleUpdateItem(item.id, { month: v })}
|
||
isEditing={isEditing && !isArchive}
|
||
className={`text-[10px] font-black uppercase ${isOverdue ? 'text-red-500' : 'text-slate-400'}`}
|
||
/>
|
||
{isCarryOver && (
|
||
<span className="bg-amber-100 text-amber-700 text-[8px] px-1.5 py-0.5 rounded font-black uppercase flex items-center gap-0.5">
|
||
<History className="w-2 h-2"/> Перенос с {item.originalYear}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{isOverdue && <span className="text-[8px] font-bold text-red-600 flex items-center gap-0.5"><AlertCircle className="w-2 h-2"/> ПРОСРОЧЕНО</span>}
|
||
{item.status === 'carried_over' && <span className="text-[8px] font-bold text-slate-500 uppercase">ПЕРЕНЕСЕНО НА {selectedYear + 1} Г.</span>}
|
||
{item.postponeReason && <span className="text-[10px] text-slate-500 mt-0.5 block">Причина переноса: {item.postponeReason}</span>}
|
||
{item.carryOverReason && isCarryOver && <span className="text-[10px] text-slate-500 mt-0.5 block">Причина переноса на год: {item.carryOverReason}</span>}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 flex-wrap" onClick={e => e.stopPropagation()}>
|
||
{isEditing && !isArchive && (
|
||
<label className="flex items-center gap-1.5 text-[10px] font-bold text-slate-600 cursor-pointer">
|
||
<input type="checkbox" checked={!!item.byManagement} onChange={() => handleUpdateItem(item.id, { byManagement: !item.byManagement })} className="rounded accent-primary-600" />
|
||
силы УК
|
||
</label>
|
||
)}
|
||
{item.byManagement ? (
|
||
<span className="text-xs font-bold text-slate-600">силами УК</span>
|
||
) : (
|
||
<>
|
||
<Wallet className="w-3.5 h-3.5 text-slate-300"/>
|
||
<EditableField
|
||
value={item.estimatedCost}
|
||
onChange={(v) => handleUpdateItem(item.id, { estimatedCost: Number(v) })}
|
||
isEditing={isEditing && !isArchive}
|
||
type="number"
|
||
className="text-sm font-bold text-slate-800 text-right w-20"
|
||
/>
|
||
<span className="text-[10px] text-slate-400 font-bold">₽</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-4" onClick={e => e.stopPropagation()}>
|
||
<EditableField
|
||
value={item.workName}
|
||
onChange={(v) => handleUpdateItem(item.id, { workName: v })}
|
||
isEditing={isEditing && !isArchive}
|
||
className="font-bold text-slate-700 text-sm w-full block"
|
||
/>
|
||
</div>
|
||
|
||
{/* Progress Bar and Actions */}
|
||
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
|
||
<div className="flex-1 space-y-1" onClick={e => e.stopPropagation()}>
|
||
<div className="flex justify-between items-end">
|
||
<span className="text-[9px] text-slate-400 font-bold uppercase tracking-tighter">Готовность объекта</span>
|
||
<span className="text-[10px] font-black text-slate-700">{item.progress}%</span>
|
||
</div>
|
||
<div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
|
||
{isEditing && !isArchive ? (
|
||
<input
|
||
type="range" min="0" max="100"
|
||
value={item.progress}
|
||
onChange={(e) => handleUpdateItem(item.id, { progress: Number(e.target.value), status: Number(e.target.value) === 100 ? 'completed' : 'current' })}
|
||
className="w-full h-full accent-primary-600 cursor-pointer"
|
||
/>
|
||
) : (
|
||
<div
|
||
className={`h-full rounded-full transition-all duration-500 ${item.status === 'completed' ? 'bg-emerald-500' : 'bg-primary-500'}`}
|
||
style={{ width: `${item.progress}%` }}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Actions */}
|
||
{!isEditing && !isArchive && item.status !== 'completed' && item.status !== 'carried_over' && (
|
||
<div className="flex gap-1" onClick={e => e.stopPropagation()}>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleQuickComplete(item.id)}
|
||
className="p-2 bg-emerald-50 text-emerald-600 rounded-lg hover:bg-emerald-100 transition-colors"
|
||
title="Выполнено"
|
||
>
|
||
<CheckCircle2 className="w-4 h-4"/>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => { setCarryOverReasonInput(''); setCarryOverModalId(item.id); }}
|
||
className="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
|
||
title={`Перенести на ${selectedYear + 1} год`}
|
||
>
|
||
<ArrowUpRight className="w-4 h-4"/>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (MONTHS.indexOf(item.month) === 11) {
|
||
setCarryOverReasonInput(''); setCarryOverModalId(item.id);
|
||
} else {
|
||
setPostponeReasonInput(''); setPostponeModalId(item.id);
|
||
}
|
||
}}
|
||
className="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition-colors"
|
||
title="Перенести на след. месяц"
|
||
>
|
||
<ArrowRight className="w-4 h-4"/>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleUpdateItem(item.id, { progress: 0, status: 'future' })}
|
||
className="p-2 bg-slate-100 text-slate-500 rounded-lg hover:bg-slate-200 transition-colors"
|
||
title="Отложить"
|
||
>
|
||
<PauseCircle className="w-4 h-4"/>
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{isEditing && !isArchive && (
|
||
<button
|
||
type="button"
|
||
onClick={e => { e.stopPropagation(); handleDeleteItem(item.id); }}
|
||
className="p-2 text-red-300 hover:text-red-500 transition-colors"
|
||
>
|
||
<Trash2 className="w-5 h-5"/>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Months grid view */}
|
||
{filteredPlan.length > 0 && viewMode === 'months' && (
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||
{MONTHS.map(month => {
|
||
const monthItems = filteredPlan.filter(p => p.month === month);
|
||
const monthTotal = monthItems.reduce((s, p) => s + (p.byManagement ? 0 : (p.estimatedCost || 0)), 0);
|
||
return (
|
||
<div key={month} className="bg-white rounded-xl border border-slate-200 shadow-sm p-4 flex flex-col">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<span className="text-[10px] font-black uppercase text-slate-500">{month}</span>
|
||
<span className="text-xs font-bold text-slate-700">{monthItems.length} работ · {monthTotal.toLocaleString()} ₽</span>
|
||
</div>
|
||
<div className="space-y-2 flex-1 min-h-0 overflow-y-auto max-h-48">
|
||
{monthItems.map(item => (
|
||
<div
|
||
key={item.id}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => setWorkCardItemId(item.id)}
|
||
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setWorkCardItemId(item.id); } }}
|
||
className="py-1.5 border-b border-slate-100 last:border-0 cursor-pointer hover:bg-slate-50 rounded px-1 -mx-1 transition-colors"
|
||
>
|
||
<div className="flex justify-between items-center gap-2">
|
||
<span className="text-xs font-medium text-slate-700 truncate flex-1">{item.workName}</span>
|
||
<span className="text-[10px] font-bold text-slate-500 shrink-0">{item.byManagement ? 'силами УК' : `${item.estimatedCost?.toLocaleString() ?? 0} ₽`}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5 mt-0.5">
|
||
<div className="flex-1 h-1 bg-slate-100 rounded-full overflow-hidden">
|
||
<div className={`h-full rounded-full ${item.status === 'completed' ? 'bg-emerald-500' : 'bg-primary-500'}`} style={{ width: `${item.progress}%` }} />
|
||
</div>
|
||
<span className="text-[9px] font-bold text-slate-400 w-6">{item.progress}%</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{!isArchive && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleAddItem(month)}
|
||
className="mt-3 w-full py-2 text-[10px] font-bold uppercase tracking-wider text-primary-600 border border-dashed border-primary-200 rounded-lg hover:bg-primary-50 transition-colors flex items-center justify-center gap-1"
|
||
>
|
||
<Plus className="w-3 h-3"/> Добавить в {month}
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Table — только просмотр; клик по строке открывает карточку работы; добавление через модалку */}
|
||
{viewMode === 'table' && !isArchive && (
|
||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||
<div className="p-4 border-b border-slate-200 bg-slate-50/50">
|
||
<h3 className="text-sm font-bold text-slate-800">План работ на {selectedYear} год</h3>
|
||
<p className="text-xs text-slate-500 mt-0.5">Нажмите на строку, чтобы открыть карточку работы. Новый пункт — кнопка «Создать пункт» или «Добавить строку» ниже.</p>
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-slate-50 border-b border-slate-200 sticky top-0">
|
||
<tr>
|
||
<th className="p-3 text-left text-xs font-bold text-slate-600 uppercase">Работа</th>
|
||
<th className="p-3 text-left text-xs font-bold text-slate-600 uppercase">Бюджет / силы УК</th>
|
||
<th className="p-3 text-left text-xs font-bold text-slate-600 uppercase">Месяц</th>
|
||
<th className="p-3 text-left text-xs font-bold text-slate-600 uppercase">План / Факт</th>
|
||
<th className="p-3 text-center text-xs font-bold text-slate-600 uppercase w-12">Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{[...filteredPlan].sort((a, b) => MONTHS.indexOf(a.month) - MONTHS.indexOf(b.month)).map((item) => {
|
||
const invs = invoicesByPlanItemId[item.id] ?? [];
|
||
const fact = (invs.reduce((s, i) => s + (i.totalAmount ?? 0), 0) || item.actualCost) ?? 0;
|
||
const planLabel = item.byManagement ? 'силами УК' : (item.estimatedCost?.toLocaleString() ?? 0) + ' ₽';
|
||
return (
|
||
<tr
|
||
key={item.id}
|
||
onClick={() => setWorkCardItemId(item.id)}
|
||
className="hover:bg-primary-50/50 cursor-pointer transition-colors"
|
||
>
|
||
<td className="p-3 font-medium text-slate-800">{item.workName}</td>
|
||
<td className="p-3 text-slate-700">{planLabel}</td>
|
||
<td className="p-3 text-[10px] font-bold uppercase text-slate-500">{item.month}</td>
|
||
<td className="p-3">
|
||
<div className="flex flex-col gap-0.5">
|
||
<span className="text-xs text-slate-600">План: {planLabel}</span>
|
||
<span className="text-xs font-bold text-slate-800">Факт: {fact > 0 ? `${fact.toLocaleString()} ₽` : '—'}{invs.length > 0 && <span className="text-[10px] text-slate-400 ml-1">({invs.length} сч.)</span>}</span>
|
||
</div>
|
||
</td>
|
||
<td className="p-3 text-center">
|
||
{item.status === 'completed' && <CheckCircle2 className="w-5 h-5 text-emerald-500 mx-auto"/>}
|
||
{item.status === 'carried_over' && <ArrowUpRight className="w-5 h-5 text-slate-400 mx-auto"/>}
|
||
{(item.status === 'future' || item.status === 'current') && <span className="text-[10px] font-bold text-slate-400">{item.progress}%</span>}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
<tfoot className="bg-slate-50 border-t-2 border-slate-200">
|
||
<tr>
|
||
<td colSpan={5} className="p-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<span className="text-xs text-slate-500">Всего позиций: {filteredPlan.length}</span>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => { e.stopPropagation(); handleAddItem(); }}
|
||
className="px-4 py-2 bg-primary-100 text-primary-700 rounded-lg text-sm font-bold hover:bg-primary-200 transition-colors flex items-center gap-2"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
Добавить строку
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{viewMode === 'table' && isArchive && filteredPlan.length > 0 && (
|
||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-left">
|
||
<thead><tr className="bg-slate-50 border-b border-slate-200">
|
||
<th className="px-4 py-3 text-[10px] font-black uppercase text-slate-500">Работа</th>
|
||
<th className="px-4 py-3 text-[10px] font-black uppercase text-slate-500">Бюджет / силы УК</th>
|
||
<th className="px-4 py-3 text-[10px] font-black uppercase text-slate-500">Месяц</th>
|
||
<th className="px-4 py-3 text-[10px] font-black uppercase text-slate-500">План / Факт</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
{[...filteredPlan].sort((a, b) => MONTHS.indexOf(a.month) - MONTHS.indexOf(b.month)).map((item) => {
|
||
const invs = invoicesByPlanItemId[item.id] ?? [];
|
||
const fact = (invs.reduce((s, i) => s + (i.totalAmount ?? 0), 0) || item.actualCost) ?? 0;
|
||
const planLabel = item.byManagement ? 'силами УК' : (item.estimatedCost?.toLocaleString() ?? 0) + ' ₽';
|
||
return (
|
||
<tr key={item.id} className="border-b border-slate-100">
|
||
<td className="px-4 py-3 font-medium text-slate-800 text-sm">{item.workName}</td>
|
||
<td className="px-4 py-3 text-sm font-bold text-slate-700">{planLabel}</td>
|
||
<td className="px-4 py-3 text-[10px] font-bold uppercase text-slate-500">{item.month}</td>
|
||
<td className="px-4 py-3 text-xs">План: {planLabel} · Факт: {fact > 0 ? `${fact.toLocaleString()} ₽` : '—'}</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Модальное окно создания пунктов плана — табличная часть (сразу много строк) */}
|
||
{showCreatePlanItemModal && (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => setShowCreatePlanItemModal(false)}>
|
||
<div className="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] shadow-2xl animate-slide-up overflow-hidden flex flex-col" onClick={e => e.stopPropagation()}>
|
||
<div className="p-6 border-b border-slate-200 flex-shrink-0">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-2">
|
||
<div className="p-2 bg-primary-50 text-primary-600 rounded-lg"><Plus className="w-5 h-5"/></div>
|
||
<h3 className="text-lg font-bold text-slate-800">Создать пункты плана</h3>
|
||
</div>
|
||
<button type="button" onClick={() => setShowCreatePlanItemModal(false)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-5 h-5 text-slate-400"/></button>
|
||
</div>
|
||
<p className="text-xs text-slate-500 mt-2">Год: {selectedYear}. Добавляйте строки, заполняйте таблицу и нажмите «Добавить в план» — все заполненные строки станут пунктами плана.</p>
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-6">
|
||
<table className="w-full text-sm border border-slate-200 rounded-xl overflow-hidden">
|
||
<thead className="bg-slate-50 border-b border-slate-200">
|
||
<tr>
|
||
<th className="p-2 text-left text-xs font-bold text-slate-600 uppercase">Работа</th>
|
||
<th className="p-2 text-left text-xs font-bold text-slate-600 uppercase w-28">Месяц</th>
|
||
<th className="p-2 text-left text-xs font-bold text-slate-600 uppercase">Бюджет / силы УК</th>
|
||
<th className="p-2 w-10"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{createTableRows.map((row, idx) => (
|
||
<tr key={idx} className="hover:bg-slate-50/50">
|
||
<td className="p-2">
|
||
<input
|
||
type="text"
|
||
value={row.workName}
|
||
onChange={e => setCreateTableRows(prev => prev.map((r, i) => i === idx ? { ...r, workName: e.target.value } : r))}
|
||
className="w-full px-2 py-1.5 border border-slate-300 rounded text-sm focus:ring-2 focus:ring-primary-500 outline-none"
|
||
placeholder="Название работы"
|
||
/>
|
||
</td>
|
||
<td className="p-2">
|
||
<select
|
||
value={row.month}
|
||
onChange={e => setCreateTableRows(prev => prev.map((r, i) => i === idx ? { ...r, month: e.target.value } : r))}
|
||
className="w-full px-2 py-1.5 border border-slate-300 rounded text-xs focus:ring-2 focus:ring-primary-500 outline-none"
|
||
>
|
||
{MONTHS.map(m => <option key={m} value={m}>{m}</option>)}
|
||
</select>
|
||
</td>
|
||
<td className="p-2">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<label className="flex items-center gap-1.5 cursor-pointer shrink-0">
|
||
<input
|
||
type="checkbox"
|
||
checked={row.byManagement}
|
||
onChange={e => setCreateTableRows(prev => prev.map((r, i) => i === idx ? { ...r, byManagement: e.target.checked } : r))}
|
||
className="rounded accent-primary-600"
|
||
/>
|
||
<span className="text-xs font-medium text-slate-700">силы УК</span>
|
||
</label>
|
||
{!row.byManagement && (
|
||
<>
|
||
<input
|
||
type="number"
|
||
value={row.estimatedCost || ''}
|
||
onChange={e => setCreateTableRows(prev => prev.map((r, i) => i === idx ? { ...r, estimatedCost: Number(e.target.value) || 0 } : r))}
|
||
className="w-24 px-2 py-1.5 border border-slate-300 rounded text-sm text-right focus:ring-2 focus:ring-primary-500 outline-none"
|
||
placeholder="0"
|
||
min={0}
|
||
/>
|
||
<span className="text-[10px] text-slate-500">₽</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td className="p-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setCreateTableRows(prev => prev.length > 1 ? prev.filter((_, i) => i !== idx) : prev)}
|
||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
||
title="Удалить строку"
|
||
>
|
||
<Trash2 className="w-4 h-4"/>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
<tfoot className="bg-slate-50 border-t-2 border-slate-200">
|
||
<tr>
|
||
<td colSpan={4} className="p-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => setCreateTableRows(prev => [...prev, { workName: '', month: createPlanItemMonth ?? getDefaultMonthForNewItem(selectedYear), estimatedCost: 0, byManagement: false }])}
|
||
className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg text-sm font-bold hover:bg-slate-200 transition-colors flex items-center gap-2"
|
||
>
|
||
<Plus className="w-4 h-4"/> Добавить строку
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
<div className="flex gap-3 mt-6">
|
||
<button type="button" onClick={() => setShowCreatePlanItemModal(false)} className="flex-1 py-2.5 text-slate-600 font-bold bg-slate-100 rounded-xl hover:bg-slate-200">Отмена</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleAddItemsFromTable(createTableRows)}
|
||
disabled={!createTableRows.some(r => (r.workName || '').trim())}
|
||
className="flex-1 py-2.5 text-white font-bold bg-primary-600 rounded-xl hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||
>
|
||
<Plus className="w-4 h-4"/> Добавить в план ({createTableRows.filter(r => (r.workName || '').trim()).length} шт.)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Карточка работы */}
|
||
{workCardItemId && (() => {
|
||
const item = plan.find(p => p.id === workCardItemId);
|
||
if (!item) return null;
|
||
const invs = invoicesByPlanItemId[item.id] ?? [];
|
||
const fact = (invs.reduce((s, i) => s + (i.totalAmount ?? 0), 0) || item.actualCost) ?? 0;
|
||
const planLabel = item.byManagement ? 'силами УК' : (item.estimatedCost?.toLocaleString() ?? 0) + ' ₽';
|
||
const isOverdue = selectedYear === CURRENT_YEAR && item.status !== 'completed' && item.status !== 'carried_over' && MONTHS.indexOf(item.month) < new Date().getMonth();
|
||
const isCarryOver = !!item.originalYear && item.originalYear < item.year;
|
||
return (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => setWorkCardItemId(null)}>
|
||
<div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] overflow-hidden shadow-2xl animate-slide-up flex flex-col" onClick={e => e.stopPropagation()}>
|
||
<div className="p-6 border-b border-slate-200 flex-shrink-0">
|
||
<div className="flex justify-between items-start">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`p-2.5 rounded-xl ${item.status === 'completed' ? 'bg-emerald-50 text-emerald-600' : item.status === 'carried_over' ? 'bg-slate-100 text-slate-500' : 'bg-primary-50 text-primary-600'}`}>
|
||
{item.status === 'completed' ? <CheckCircle2 className="w-6 h-6"/> : item.status === 'carried_over' ? <ArrowUpRight className="w-6 h-6"/> : <Clock className="w-6 h-6"/>}
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-bold text-slate-800">{item.workName}</h3>
|
||
<p className="text-xs text-slate-500 mt-0.5">{item.month} · {selectedYear} г.</p>
|
||
{isCarryOver && item.originalYear && <span className="text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold">Перенос с {item.originalYear} г.</span>}
|
||
{isOverdue && <span className="text-[10px] text-red-600 bg-red-50 px-1.5 py-0.5 rounded font-bold block mt-1">Просрочено</span>}
|
||
</div>
|
||
</div>
|
||
<button type="button" onClick={() => setWorkCardItemId(null)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-5 h-5 text-slate-400"/></button>
|
||
</div>
|
||
</div>
|
||
<div className="p-6 flex-1 overflow-y-auto space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="p-3 bg-slate-50 rounded-xl">
|
||
<span className="text-[10px] font-bold uppercase text-slate-500 block mb-1">План</span>
|
||
<span className="text-sm font-bold text-slate-800">{planLabel}</span>
|
||
</div>
|
||
<div className="p-3 bg-slate-50 rounded-xl">
|
||
<span className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Факт</span>
|
||
<span className="text-sm font-bold text-slate-800">{fact > 0 ? `${fact.toLocaleString()} ₽` : '—'}</span>
|
||
{invs.length > 0 && <span className="text-[10px] text-slate-400 block">({invs.length} сч.)</span>}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span className="text-[10px] font-bold uppercase text-slate-500 block mb-2">Готовность</span>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex-1 h-3 bg-slate-100 rounded-full overflow-hidden">
|
||
<div className={`h-full rounded-full ${item.status === 'completed' ? 'bg-emerald-500' : 'bg-primary-500'}`} style={{ width: `${item.progress}%` }} />
|
||
</div>
|
||
<span className="text-sm font-bold text-slate-700 w-10">{item.progress}%</span>
|
||
</div>
|
||
</div>
|
||
{(item.postponeReason || (item.carryOverReason && isCarryOver)) && (
|
||
<div className="p-3 bg-amber-50 rounded-xl text-sm text-slate-700">
|
||
{item.postponeReason && <p><span className="font-bold text-amber-800">Причина переноса (месяц):</span> {item.postponeReason}</p>}
|
||
{item.carryOverReason && isCarryOver && <p className="mt-1"><span className="font-bold text-amber-800">Причина переноса (год):</span> {item.carryOverReason}</p>}
|
||
</div>
|
||
)}
|
||
{!isArchive && (
|
||
<div className="flex flex-wrap gap-2 pt-2">
|
||
<button type="button" onClick={() => setLinkInvoicePlanItemId(item.id)} className="px-3 py-2 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold flex items-center gap-1.5 hover:bg-slate-200"><Paperclip className="w-4 h-4"/> Привязать счёт</button>
|
||
{item.status !== 'completed' && item.status !== 'carried_over' && (
|
||
<>
|
||
<button type="button" onClick={() => { handleQuickComplete(item.id); setWorkCardItemId(null); }} className="px-3 py-2 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold flex items-center gap-1.5 hover:bg-emerald-200"><CheckCircle2 className="w-4 h-4"/> Выполнено</button>
|
||
<button type="button" onClick={() => { setCarryOverReasonInput(''); setCarryOverModalId(item.id); setWorkCardItemId(null); }} className="px-3 py-2 bg-blue-100 text-blue-700 rounded-lg text-xs font-bold flex items-center gap-1.5 hover:bg-blue-200"><ArrowUpRight className="w-4 h-4"/> На след. год</button>
|
||
<button type="button" onClick={() => { setPostponeReasonInput(''); setPostponeModalId(item.id); setWorkCardItemId(null); }} className="px-3 py-2 bg-amber-100 text-amber-700 rounded-lg text-xs font-bold flex items-center gap-1.5 hover:bg-amber-200"><ArrowRight className="w-4 h-4"/> На след. месяц</button>
|
||
<button type="button" onClick={() => { handleUpdateItem(item.id, { progress: 0, status: 'future' }); }} className="px-3 py-2 bg-slate-100 text-slate-600 rounded-lg text-xs font-bold hover:bg-slate-200"><PauseCircle className="w-4 h-4"/> Отложить</button>
|
||
</>
|
||
)}
|
||
<button type="button" onClick={() => { if (confirm('Удалить этот пункт плана?')) { handleDeleteItem(item.id); setWorkCardItemId(null); } }} className="px-3 py-2 bg-red-50 text-red-600 rounded-lg text-xs font-bold hover:bg-red-100 flex items-center gap-1.5"><Trash2 className="w-4 h-4"/> Удалить</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
|
||
{/* Link invoice to plan item modal */}
|
||
{linkInvoicePlanItemId && (() => {
|
||
const it = filteredPlan.find(p => p.id === linkInvoicePlanItemId);
|
||
const unlinked = invoicesForBuilding.filter(inv => !inv.planItemId);
|
||
return (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => setLinkInvoicePlanItemId(null)}>
|
||
<div className="bg-white rounded-2xl w-full max-w-lg p-6 shadow-2xl animate-slide-up max-h-[80vh] overflow-hidden flex flex-col" onClick={e => e.stopPropagation()}>
|
||
<div className="flex justify-between items-center mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<Paperclip className="w-5 h-5 text-primary-600"/>
|
||
<h3 className="text-lg font-bold text-slate-800">Привязать счёт к работе</h3>
|
||
</div>
|
||
<button onClick={() => setLinkInvoicePlanItemId(null)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-5 h-5 text-slate-400"/></button>
|
||
</div>
|
||
{it && <p className="text-sm text-slate-600 mb-4">«{it.workName}»</p>}
|
||
<div className="flex-1 overflow-y-auto min-h-0">
|
||
{unlinked.length === 0 ? (
|
||
<p className="text-sm text-slate-500 py-4">Нет непривязанных счетов по этому дому. Создайте счёт в разделе Финансы и отметьте «Из плана работ».</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{unlinked.map(inv => (
|
||
<button
|
||
key={inv.id}
|
||
type="button"
|
||
onClick={() => handleLinkInvoice(inv.id, linkInvoicePlanItemId!)}
|
||
className="w-full text-left p-3 rounded-xl border border-slate-200 hover:border-primary-300 hover:bg-primary-50/50 transition-colors"
|
||
>
|
||
<span className="font-medium text-slate-800 block">{inv.invoiceNumber} · {inv.contractorName}</span>
|
||
<span className="text-xs text-slate-500">{inv.totalAmount?.toLocaleString()} ₽</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
|
||
{/* Postpone (next month) modal */}
|
||
{postponeModalId && (() => {
|
||
const it = filteredPlan.find(p => p.id === postponeModalId);
|
||
if (!it) return null;
|
||
return (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => { setPostponeModalId(null); setPostponeReasonInput(''); }}>
|
||
<div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl animate-slide-up" onClick={e => e.stopPropagation()}>
|
||
<h3 className="text-lg font-bold text-slate-800 mb-2">Перенести на следующий месяц</h3>
|
||
<p className="text-sm text-slate-600 mb-4">«{it.workName}»</p>
|
||
<label className="block text-xs font-bold text-slate-500 uppercase mb-2">Причина переноса</label>
|
||
<textarea
|
||
value={postponeReasonInput}
|
||
onChange={e => setPostponeReasonInput(e.target.value)}
|
||
placeholder="Укажите причину (необязательно)"
|
||
className="w-full h-24 p-3 bg-slate-50 border border-slate-200 rounded-xl text-sm resize-none focus:ring-2 focus:ring-primary-500 outline-none"
|
||
/>
|
||
<div className="flex gap-3 mt-6">
|
||
<button onClick={() => { setPostponeModalId(null); setPostponeReasonInput(''); }} className="flex-1 py-2.5 text-slate-600 font-bold bg-slate-100 rounded-xl hover:bg-slate-200">Отмена</button>
|
||
<button onClick={() => { handlePostpone(postponeModalId, postponeReasonInput || undefined); setPostponeModalId(null); setPostponeReasonInput(''); }} className="flex-1 py-2.5 text-white font-bold bg-primary-600 rounded-xl hover:bg-primary-700">Перенести</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
|
||
{/* Carry-over (next year) modal */}
|
||
{carryOverModalId && (() => {
|
||
const it = filteredPlan.find(p => p.id === carryOverModalId);
|
||
if (!it) return null;
|
||
return (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => { setCarryOverModalId(null); setCarryOverReasonInput(''); }}>
|
||
<div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl animate-slide-up" onClick={e => e.stopPropagation()}>
|
||
<h3 className="text-lg font-bold text-slate-800 mb-2">Перенести на {selectedYear + 1} год</h3>
|
||
<p className="text-sm text-slate-600 mb-4">«{it.workName}»</p>
|
||
<label className="block text-xs font-bold text-slate-500 uppercase mb-2">Причина переноса на следующий год</label>
|
||
<textarea
|
||
value={carryOverReasonInput}
|
||
onChange={e => setCarryOverReasonInput(e.target.value)}
|
||
placeholder="Укажите причину (необязательно)"
|
||
className="w-full h-24 p-3 bg-slate-50 border border-slate-200 rounded-xl text-sm resize-none focus:ring-2 focus:ring-primary-500 outline-none"
|
||
/>
|
||
<div className="flex gap-3 mt-6">
|
||
<button onClick={() => { setCarryOverModalId(null); setCarryOverReasonInput(''); }} className="flex-1 py-2.5 text-slate-600 font-bold bg-slate-100 rounded-xl hover:bg-slate-200">Отмена</button>
|
||
<button onClick={() => { handleCarryOver(carryOverModalId, selectedYear + 1, carryOverReasonInput || undefined); setCarryOverModalId(null); setCarryOverReasonInput(''); }} className="flex-1 py-2.5 text-white font-bold bg-primary-600 rounded-xl hover:bg-primary-700">Перенести</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
|
||
{/* Пополнить из обходов modal */}
|
||
{showFromInspectionsModal && (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => setShowFromInspectionsModal(false)}>
|
||
<div className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden shadow-2xl animate-slide-up flex flex-col" onClick={e => e.stopPropagation()}>
|
||
<div className="p-6 border-b border-slate-200 flex-shrink-0">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-2">
|
||
<div className="p-2 bg-primary-50 text-primary-600 rounded-lg"><Camera className="w-5 h-5"/></div>
|
||
<h3 className="text-lg font-bold text-slate-800">Пополнить план из обходов</h3>
|
||
</div>
|
||
<button onClick={() => setShowFromInspectionsModal(false)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-5 h-5 text-slate-400"/></button>
|
||
</div>
|
||
{inspectionActsWithCandidates.length === 0 ? (
|
||
<p className="text-sm text-slate-500 mt-4">Нет осмотров с замечаниями. Проведите обход с фотофиксацией и отметьте элементы с ремонтом.</p>
|
||
) : (
|
||
<>
|
||
<div className="flex flex-wrap gap-4 mt-4">
|
||
<div>
|
||
<label className="block text-[10px] font-bold uppercase text-slate-500 mb-1">Год</label>
|
||
<select value={fromInspectionsYear} onChange={e => setFromInspectionsYear(Number(e.target.value))} className="px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium">
|
||
{availableYears.map(y => <option key={y} value={y}>{y}</option>)}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-[10px] font-bold uppercase text-slate-500 mb-1">Месяц</label>
|
||
<select value={fromInspectionsMonth} onChange={e => setFromInspectionsMonth(e.target.value)} className="px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium">
|
||
{MONTHS.map(m => <option key={m} value={m}>{m}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-slate-500 mt-2">Выберите акты осмотра, затем отметьте замечания для добавления в план.</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
{inspectionActsWithCandidates.length > 0 && (
|
||
<>
|
||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
||
{inspectionActsWithCandidates.map(act => {
|
||
const count = inspectionCandidates.filter(c => c.actId === act.id).length;
|
||
const checked = fromInspectionsSelectedActIds.includes(act.id);
|
||
return (
|
||
<div key={act.id} className="border border-slate-200 rounded-xl overflow-hidden">
|
||
<label className="flex items-center gap-3 p-3 bg-slate-50 cursor-pointer hover:bg-slate-100">
|
||
<input type="checkbox" checked={checked} onChange={() => setFromInspectionsSelectedActIds(prev => checked ? prev.filter(id => id !== act.id) : [...prev, act.id])} className="rounded accent-primary-600" />
|
||
<span className="font-bold text-slate-800">Акт № {act.number}</span>
|
||
<span className="text-slate-500 text-sm">{act.date}</span>
|
||
<span className="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded">{count} замечаний</span>
|
||
</label>
|
||
{checked && (
|
||
<div className="p-3 pt-0 space-y-2">
|
||
{inspectionCandidates.filter(c => c.actId === act.id).map(c => {
|
||
const key = `${c.actId}|${c.element.id}`;
|
||
const sel = !!fromInspectionsSelectedKeys[key];
|
||
return (
|
||
<label key={key} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||
<input type="checkbox" checked={sel} onChange={() => setFromInspectionsSelectedKeys(prev => ({ ...prev, [key]: !prev[key] }))} className="mt-0.5 rounded accent-primary-600 shrink-0" />
|
||
<div className="min-w-0 flex-1">
|
||
<span className="font-medium text-slate-800 block">{c.element.name}</span>
|
||
<div className="flex flex-wrap gap-2 mt-0.5">
|
||
{c.sectionTitle && <span className="text-[10px] text-slate-500">{c.sectionTitle}</span>}
|
||
{c.element.repairType?.trim() && <span className="text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded">{c.element.repairType}</span>}
|
||
</div>
|
||
</div>
|
||
</label>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="p-6 border-t border-slate-200 flex-shrink-0 flex gap-3">
|
||
<button onClick={() => setShowFromInspectionsModal(false)} className="flex-1 py-2.5 text-slate-600 font-bold bg-slate-100 rounded-xl hover:bg-slate-200">Отмена</button>
|
||
<button
|
||
onClick={handleAddFromInspections}
|
||
disabled={Object.keys(fromInspectionsSelectedKeys).filter(k => fromInspectionsSelectedKeys[k]).length === 0}
|
||
className="flex-1 py-2.5 text-white font-bold bg-primary-600 rounded-xl hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||
>
|
||
<Plus className="w-4 h-4"/> Добавить выбранные в план
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Import Modal */}
|
||
{showImportModal && (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={() => setShowImportModal(false)}>
|
||
<div className="bg-white rounded-2xl w-full max-w-xl p-6 shadow-2xl animate-slide-up" onClick={e => e.stopPropagation()}>
|
||
<div className="flex justify-between items-center mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="p-2 bg-primary-50 text-primary-600 rounded-lg"><FileSpreadsheet className="w-5 h-5"/></div>
|
||
<h3 className="text-lg font-bold text-slate-800">Импорт плана в {selectedYear} год</h3>
|
||
</div>
|
||
<button onClick={() => setShowImportModal(false)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-5 h-5 text-slate-400"/></button>
|
||
</div>
|
||
|
||
<textarea
|
||
value={importData}
|
||
onChange={(e) => setImportData(e.target.value)}
|
||
placeholder="Работа;Месяц;Сумма (или силы УК)"
|
||
className="w-full h-48 p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono focus:ring-2 focus:ring-primary-500 outline-none resize-none"
|
||
/>
|
||
|
||
<div className="mt-6 flex gap-3">
|
||
<button onClick={() => setShowImportModal(false)} className="flex-1 py-3 text-slate-600 font-bold bg-slate-100 rounded-xl hover:bg-slate-200">Отмена</button>
|
||
<button
|
||
onClick={handleImportCSV}
|
||
disabled={!importData.trim()}
|
||
className="flex-1 py-3 text-white font-bold bg-primary-600 rounded-xl hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||
>
|
||
<Upload className="w-4 h-4"/> Загрузить в {selectedYear} год
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|