299 lines
14 KiB
TypeScript
Executable File
299 lines
14 KiB
TypeScript
Executable File
|
||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||
import { Building, District } from '../types';
|
||
import {
|
||
ArrowLeft,
|
||
Pencil,
|
||
Save,
|
||
X,
|
||
LayoutDashboard,
|
||
Gauge,
|
||
CalendarDays,
|
||
Package,
|
||
Camera,
|
||
Banknote,
|
||
Users,
|
||
FileText,
|
||
MapPin
|
||
} from 'lucide-react';
|
||
import { storageService } from '../services/storageService';
|
||
import { backendApi } from '../services/apiClient';
|
||
import { readCache, saveCache } from '../hooks/useCachedFetch';
|
||
import { REFRESH_EVENTS } from '../constants/refreshEvents';
|
||
|
||
// Modular Sheet Imports
|
||
import { Overview } from './building/Overview';
|
||
import { MeterCheck } from './building/MeterCheck';
|
||
import { WorkPlan } from './building/WorkPlan';
|
||
import { Supply } from './building/Supply';
|
||
import { Inspections } from './building/Inspections';
|
||
import { Finance } from './building/Finance';
|
||
import { Accounts } from './building/Accounts';
|
||
import { Passport } from './building/Passport';
|
||
|
||
interface Props {
|
||
building: Building;
|
||
onBack: () => void;
|
||
onBuildingUpdate?: (building: Building) => void;
|
||
}
|
||
|
||
type TabType = 'overview' | 'meterCheck' | 'workPlan' | 'supply' | 'inspections' | 'finance' | 'accounts' | 'passport';
|
||
|
||
const TABS: { id: TabType; label: string; icon: any }[] = [
|
||
{ id: 'overview', label: 'Сводка', icon: LayoutDashboard },
|
||
{ id: 'meterCheck', label: 'Сверка ПУ', icon: Gauge },
|
||
{ id: 'workPlan', label: 'План работ', icon: CalendarDays },
|
||
{ id: 'supply', label: 'Снабжение', icon: Package },
|
||
{ id: 'inspections', label: 'Осмотры', icon: Camera },
|
||
{ id: 'finance', label: 'Финансы', icon: Banknote },
|
||
{ id: 'accounts', label: 'Счета', icon: Users },
|
||
{ id: 'passport', label: 'Паспорт', icon: FileText },
|
||
];
|
||
|
||
const BUILDING_TABS: TabType[] = ['overview', 'meterCheck', 'workPlan', 'supply', 'inspections', 'finance', 'accounts', 'passport'];
|
||
const SUBTAB_KEY = 'mkd_subTab_building';
|
||
|
||
export const BuildingCharacteristics: React.FC<Props> = ({ building: initialBuilding, onBack, onBuildingUpdate }) => {
|
||
const [building, setBuildingState] = useState<Building>(initialBuilding);
|
||
const setBuilding = useCallback((next: Building | ((prev: Building) => Building)) => {
|
||
setBuildingState(prev => {
|
||
const nextBuilding = typeof next === 'function' ? next(prev) : next;
|
||
onBuildingUpdate?.(nextBuilding);
|
||
return nextBuilding;
|
||
});
|
||
}, [onBuildingUpdate]);
|
||
const [originalBuilding, setOriginalBuilding] = useState<Building>(initialBuilding);
|
||
const [activeTab, setActiveTab] = useState<TabType>(() => {
|
||
const s = localStorage.getItem(SUBTAB_KEY);
|
||
return (s && BUILDING_TABS.includes(s as TabType)) ? s as TabType : 'overview';
|
||
});
|
||
useEffect(() => {
|
||
localStorage.setItem(SUBTAB_KEY, activeTab);
|
||
}, [activeTab]);
|
||
const [isEditing, setIsEditing] = useState(false);
|
||
const [districts, setDistricts] = useState<District[]>([]);
|
||
|
||
// Синхронизируем состояние только при смене дома (по id), чтобы избежать бесконечного цикла
|
||
// при перерисовке родителя с новым объектом initialBuilding.
|
||
// Кеш лицевых счетов: при открытии дома показываем из кеша для мгновенного отображения.
|
||
useEffect(() => {
|
||
const buildingId = initialBuilding.id;
|
||
const globalFields = storageService.getGlobalPassportFields();
|
||
const fromStorage = storageService.getBuildingById(buildingId);
|
||
const cachedBuilding = readCache<Building | null>(`mkd_building_${buildingId}`, null);
|
||
let updatedBuilding: Building = {
|
||
...initialBuilding,
|
||
tasks: Array.isArray(fromStorage?.tasks) ? fromStorage.tasks : (initialBuilding.tasks || []),
|
||
annualPlan: Array.isArray(fromStorage?.annualPlan) ? fromStorage.annualPlan : (initialBuilding.annualPlan || []),
|
||
};
|
||
if (cachedBuilding?.accounts?.length) {
|
||
updatedBuilding.accounts = cachedBuilding.accounts;
|
||
}
|
||
|
||
if (!updatedBuilding.passport.odpu) {
|
||
updatedBuilding.passport.odpu = { customFields: {} };
|
||
}
|
||
|
||
(['general', 'construction', 'engineering', 'odpu', 'land', 'management'] as const).forEach(section => {
|
||
if (globalFields[section]) {
|
||
const sectionData = updatedBuilding.passport[section] as any;
|
||
if (!sectionData) {
|
||
updatedBuilding.passport[section] = { customFields: {} } as any;
|
||
return;
|
||
}
|
||
const customFields = { ...(sectionData.customFields || {}) };
|
||
Object.keys(globalFields[section]).forEach(fieldName => {
|
||
if (!customFields[fieldName]) {
|
||
customFields[fieldName] = { ...globalFields[section][fieldName] };
|
||
} else {
|
||
customFields[fieldName] = {
|
||
...customFields[fieldName],
|
||
type: globalFields[section][fieldName].type,
|
||
files: customFields[fieldName].files || []
|
||
};
|
||
}
|
||
});
|
||
updatedBuilding.passport[section] = { ...sectionData, customFields } as any;
|
||
}
|
||
});
|
||
|
||
setBuildingState(updatedBuilding);
|
||
setOriginalBuilding(updatedBuilding);
|
||
// Зависимость только по id — эффект не дергается при каждой перерисовке родителя
|
||
}, [initialBuilding.id]);
|
||
|
||
// Загружаем список участков для выбора
|
||
useEffect(() => {
|
||
const loadDistricts = async () => {
|
||
try {
|
||
const allDistricts = await backendApi.getDistricts();
|
||
setDistricts(allDistricts);
|
||
} catch (error) {
|
||
console.warn('Failed to load districts, using local storage:', error);
|
||
setDistricts(storageService.getDistricts());
|
||
}
|
||
};
|
||
loadDistricts();
|
||
}, []);
|
||
|
||
// Реестр лицевых счетов: кеш, polling 30 сек, dispatch при изменении
|
||
const buildingId = building.id;
|
||
const fetchBuilding = useCallback(async () => {
|
||
try {
|
||
const fresh = await backendApi.getBuilding(buildingId);
|
||
const fromStorage = storageService.getBuildingById(buildingId);
|
||
const merged: Building = {
|
||
...fresh,
|
||
tasks: Array.isArray(fromStorage?.tasks) ? fromStorage.tasks : (fresh.tasks || []),
|
||
annualPlan: Array.isArray(fromStorage?.annualPlan) ? fromStorage.annualPlan : (fresh.annualPlan || []),
|
||
};
|
||
setBuilding(merged);
|
||
saveCache(`mkd_building_${buildingId}`, merged);
|
||
} catch (e) {
|
||
console.warn('[BuildingCharacteristics] Failed to refresh building:', e);
|
||
}
|
||
}, [buildingId, setBuilding]);
|
||
|
||
useEffect(() => {
|
||
const onRefresh = () => fetchBuilding();
|
||
window.addEventListener(REFRESH_EVENTS.buildingAccounts, onRefresh);
|
||
return () => window.removeEventListener(REFRESH_EVENTS.buildingAccounts, onRefresh);
|
||
}, [fetchBuilding]);
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => fetchBuilding(), 10 * 1000);
|
||
return () => clearInterval(interval);
|
||
}, [fetchBuilding]);
|
||
|
||
// Автосохранение при изменениях (план работ, осмотры и т.д.) — в storage и в БД
|
||
const skipInitialPersist = useRef(true);
|
||
useEffect(() => {
|
||
if (skipInitialPersist.current) {
|
||
skipInitialPersist.current = false;
|
||
return;
|
||
}
|
||
const t = setTimeout(() => {
|
||
const toSave = { ...building, isDirty: true };
|
||
storageService.saveBuildingData(toSave);
|
||
backendApi.updateBuilding(toSave).catch((err) => {
|
||
console.warn('[BuildingCharacteristics] Auto-save to backend failed:', err);
|
||
});
|
||
}, 1000);
|
||
return () => clearTimeout(t);
|
||
}, [building]);
|
||
|
||
const handleSave = async () => {
|
||
const newBuilding = { ...building, isDirty: true };
|
||
setBuilding(newBuilding);
|
||
setOriginalBuilding(newBuilding);
|
||
storageService.saveBuildingData(newBuilding);
|
||
setIsEditing(false);
|
||
|
||
// Дополнительно отправляем в БД (паспорт и прочие изменения)
|
||
try {
|
||
await backendApi.updateBuilding(newBuilding);
|
||
} catch (error) {
|
||
console.error('[BuildingCharacteristics] Failed to sync building to backend:', error);
|
||
// UI продолжит работать, данные останутся хотя бы в localStorage
|
||
}
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
setBuilding(originalBuilding);
|
||
setIsEditing(false);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 animate-fade-in pb-24">
|
||
{/* Header Panel */}
|
||
<div className="sticky top-0 z-30 bg-slate-50/95 backdrop-blur-md pt-2 pb-4 border-b border-slate-200 -mx-4 px-4 md:-mx-8 md:px-8 flex justify-between items-center">
|
||
<div className="flex items-center gap-3 max-w-[70%]">
|
||
<button
|
||
onClick={onBack}
|
||
className="p-2 -ml-2 rounded-full hover:bg-slate-200 text-slate-600 transition-colors"
|
||
>
|
||
<ArrowLeft className="w-5 h-5" />
|
||
</button>
|
||
<div className="overflow-hidden">
|
||
{isEditing ? (
|
||
<div className="space-y-2">
|
||
<input
|
||
value={building.passport.address}
|
||
onChange={(e) => setBuilding({...building, passport: {...building.passport, address: e.target.value}})}
|
||
className="text-lg font-black text-slate-900 w-full bg-white border border-primary-300 rounded px-2 py-1 outline-none focus:ring-2 focus:ring-primary-500/20"
|
||
/>
|
||
<div className="flex items-center gap-2">
|
||
<MapPin className="w-3.5 h-3.5 text-slate-400" />
|
||
<select
|
||
value={building.districtId}
|
||
onChange={(e) => setBuilding({...building, districtId: e.target.value})}
|
||
className="text-xs font-bold text-slate-700 bg-white border border-slate-300 rounded px-2 py-1 outline-none focus:ring-2 focus:ring-primary-500/20"
|
||
>
|
||
{districts.map(district => (
|
||
<option key={district.id} value={district.id}>
|
||
{district.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<h1 className="text-lg font-black text-slate-900 truncate leading-tight">{building.passport.address}</h1>
|
||
<div className="flex items-center gap-1.5 mt-0.5">
|
||
<MapPin className="w-3 h-3 text-slate-400" />
|
||
<span className="text-[10px] text-slate-500 font-bold">
|
||
{districts.find(d => d.id === building.districtId)?.name || 'Участок не указан'}
|
||
</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
<div className="flex items-center gap-2 mt-0.5">
|
||
<span className={`text-[10px] font-black uppercase px-1.5 py-0.5 rounded ${isEditing ? 'bg-amber-100 text-amber-600' : 'bg-slate-200 text-slate-500'}`}>
|
||
{isEditing ? 'Правка данных' : 'Режим просмотра'}
|
||
</span>
|
||
<span className="text-[10px] text-slate-400 font-bold uppercase">{TABS.find(t => t.id === activeTab)?.label}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{isEditing ? (
|
||
<>
|
||
<button onClick={handleCancel} className="p-2.5 rounded-xl bg-white text-slate-400 border border-slate-200 hover:text-red-500 transition-all shadow-sm" title="Отмена"><X className="w-5 h-5" /></button>
|
||
<button onClick={handleSave} className="p-2.5 rounded-xl bg-emerald-600 text-white shadow-lg shadow-emerald-500/30 hover:bg-emerald-700 transition-all" title="Сохранить"><Save className="w-5 h-5" /></button>
|
||
</>
|
||
) : (
|
||
<button onClick={() => setIsEditing(true)} className="p-2.5 rounded-xl bg-white border border-slate-200 text-slate-500 hover:text-primary-600 transition-all shadow-sm" title="Редактировать"><Pencil className="w-5 h-5" /></button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sheet Selector (Excel-style bottom tabs look) */}
|
||
<div className="flex p-1 bg-slate-200/50 rounded-2xl overflow-x-auto no-scrollbar gap-1">
|
||
{TABS.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`flex-shrink-0 min-w-[7rem] flex items-center justify-center gap-2 px-4 py-2.5 text-[10px] font-black uppercase tracking-wider whitespace-nowrap rounded-xl transition-all ${activeTab === tab.id ? 'bg-white text-primary-600 shadow-sm border border-white' : 'text-slate-500 hover:text-slate-700'}`}
|
||
>
|
||
<tab.icon className="w-3.5 h-3.5" />
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Dynamic Content Area */}
|
||
<div className="min-h-[280px] sm:min-h-[360px] md:min-h-[500px]">
|
||
{activeTab === 'overview' && <Overview building={building} onNavigate={setActiveTab} setBuilding={setBuilding} />}
|
||
{activeTab === 'meterCheck' && <MeterCheck building={building} setBuilding={setBuilding} />}
|
||
{activeTab === 'workPlan' && <WorkPlan building={building} setBuilding={setBuilding} isEditing={isEditing} />}
|
||
{activeTab === 'supply' && <Supply building={building} setBuilding={setBuilding} isEditing={isEditing} />}
|
||
{activeTab === 'inspections' && <Inspections building={building} setBuilding={setBuilding} isEditing={isEditing} />}
|
||
{activeTab === 'finance' && <Finance building={building} setBuilding={setBuilding} isEditing={isEditing} />}
|
||
{activeTab === 'accounts' && <Accounts building={building} setBuilding={setBuilding} />}
|
||
{activeTab === 'passport' && <Passport building={building} isEditing={isEditing} setBuilding={setBuilding} />}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|