700 lines
29 KiB
TypeScript
700 lines
29 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { ResidentReport, Building, WorkPhoto } from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { FileText, Sparkles, Send, Download, Eye, CheckCircle2, History, Bot, X, Loader2, Calendar, Link2, Key } from 'lucide-react';
|
|||
|
|
import { BuildingReportPage } from './BuildingReportPage';
|
|||
|
|
|
|||
|
|
export const ResidentReports: React.FC = () => {
|
|||
|
|
const [reports, setReports] = useState<ResidentReport[]>([]);
|
|||
|
|
const [isLoading, setIsLoading] = useState(true);
|
|||
|
|
const [selectedReportId, setSelectedReportId] = useState<string | number | null>(null);
|
|||
|
|
const [showAccessKeyModal, setShowAccessKeyModal] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadReports();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const loadReports = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
const data = await apiClient.get<ResidentReport[]>('/pr/reports');
|
|||
|
|
setReports(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading reports:', err);
|
|||
|
|
setReports([]);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePublish = async (reportId: string | number) => {
|
|||
|
|
try {
|
|||
|
|
// При публикации отчет обновляется актуальными данными
|
|||
|
|
await apiClient.post(`/pr/reports/${reportId}/publish`);
|
|||
|
|
await loadReports();
|
|||
|
|
alert('Отчет обновлен актуальными данными и опубликован');
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('Error publishing report:', err);
|
|||
|
|
alert(`Ошибка публикации отчета: ${err.message || 'Неизвестная ошибка'}`);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Если выбран отчет для просмотра, показываем страницу отчета
|
|||
|
|
if (selectedReportId) {
|
|||
|
|
// Для демо используем BuildingReportPage
|
|||
|
|
if (selectedReportId === 'demo') {
|
|||
|
|
return (
|
|||
|
|
<BuildingReportPage
|
|||
|
|
buildingAddress="Кавказская, 12"
|
|||
|
|
month="Январь 2025"
|
|||
|
|
onBack={() => setSelectedReportId(null)}
|
|||
|
|
mode="portal"
|
|||
|
|
reportId="demo"
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Для реальных отчетов используем BuildingReportPage с данными из БД
|
|||
|
|
const report = reports.find(r => r.id === selectedReportId);
|
|||
|
|
if (report) {
|
|||
|
|
// Определяем текущий месяц из отчета или используем текущий месяц
|
|||
|
|
const now = new Date();
|
|||
|
|
const currentMonthName = now.toLocaleDateString('ru-RU', { month: 'long' });
|
|||
|
|
const currentYear = now.getFullYear();
|
|||
|
|
const initialMonth = report.month || `${currentMonthName} ${currentYear}`;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<BuildingReportPage
|
|||
|
|
buildingId={report.buildingId}
|
|||
|
|
buildingAddress={report.address || `Отчет #${report.id}`}
|
|||
|
|
month={initialMonth}
|
|||
|
|
onBack={() => setSelectedReportId(null)}
|
|||
|
|
mode="portal"
|
|||
|
|
reportId={report.buildingId} // Используем buildingId для загрузки данных по месяцам
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Fallback, если отчет не найден
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen flex items-center justify-center">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<p className="text-slate-600 mb-4">Отчет не найден</p>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedReportId(null)}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl"
|
|||
|
|
>
|
|||
|
|
Вернуться к списку
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em]">Реестр ежемесячных отчетов</h3>
|
|||
|
|
<p className="text-xs text-slate-400 mt-1">Отчеты создаются автоматически 1 числа каждого месяца</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* List of Reports */}
|
|||
|
|
{isLoading ? (
|
|||
|
|
<div className="flex justify-center items-center py-12">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-slate-400" />
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
|
|||
|
|
{reports.map(report => (
|
|||
|
|
<div key={report.id} className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm flex flex-col md:flex-row justify-between gap-6 hover:border-primary-200 transition-all group">
|
|||
|
|
<div className="flex items-center gap-4 flex-1">
|
|||
|
|
<div className={`p-4 rounded-3xl ${report.status === 'published' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600'}`}>
|
|||
|
|
<FileText className="w-8 h-8"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-black text-slate-800 text-base leading-tight group-hover:text-primary-600 transition-colors">
|
|||
|
|
{report.address || `Отчет #${report.id}`}
|
|||
|
|
</h4>
|
|||
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1">
|
|||
|
|
{report.month} • {report.status === 'published' ? 'Опубликован' : 'Черновик'}
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{(report.liveStats || (report.content && typeof report.content === 'object')) && (
|
|||
|
|
<div className="flex gap-4 mt-4">
|
|||
|
|
<ReportStat
|
|||
|
|
label="Заявок"
|
|||
|
|
value={report.liveStats?.applicationsTotal ?? report.content?.applications?.total ?? 0}
|
|||
|
|
/>
|
|||
|
|
<ReportStat
|
|||
|
|
label="NPS"
|
|||
|
|
value={report.liveStats?.npsScore ?? (report.content as any)?.nps?.score ?? report.content?.statistics?.nps ?? 0}
|
|||
|
|
/>
|
|||
|
|
<ReportStat
|
|||
|
|
label="Собрано"
|
|||
|
|
value={(() => {
|
|||
|
|
const collected = report.liveStats?.fundsCollected ?? (report.content as any)?.finances?.collected ?? report.content?.finances?.income ?? 0;
|
|||
|
|
return `${(collected / 1000000).toFixed(1)}M ₽`;
|
|||
|
|
})()}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between md:justify-end gap-2 border-t md:border-t-0 border-slate-50 pt-4 md:pt-0">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedReportId(report.id)}
|
|||
|
|
className="p-3 bg-slate-50 text-slate-500 rounded-2xl hover:bg-slate-100"
|
|||
|
|
title="Открыть отчет"
|
|||
|
|
>
|
|||
|
|
<Eye className="w-5 h-5"/>
|
|||
|
|
</button>
|
|||
|
|
<button className="p-3 bg-slate-50 text-slate-500 rounded-2xl hover:bg-slate-100" title="Скачать PDF">
|
|||
|
|
<Download className="w-5 h-5"/>
|
|||
|
|
</button>
|
|||
|
|
{report.status === 'draft' ? (
|
|||
|
|
<button
|
|||
|
|
onClick={() => handlePublish(report.id)}
|
|||
|
|
className="bg-primary-600 text-white px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-lg flex items-center gap-2 ml-2 active:scale-95 transition-all"
|
|||
|
|
title="Обновить данные и опубликовать отчет"
|
|||
|
|
>
|
|||
|
|
<Send className="w-4 h-4"/> Опубликовать
|
|||
|
|
</button>
|
|||
|
|
) : (
|
|||
|
|
<div className="bg-emerald-50 text-emerald-600 px-5 py-3 rounded-2xl text-[10px] font-black uppercase flex items-center gap-2 border border-emerald-100 ml-2">
|
|||
|
|
<CheckCircle2 className="w-4 h-4"/> Опубликован
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модальное окно с ключом доступа */}
|
|||
|
|
{showAccessKeyModal && (
|
|||
|
|
<AccessKeyModal
|
|||
|
|
onClose={() => setShowAccessKeyModal(false)}
|
|||
|
|
reportId="demo"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const ReportStat = ({ label, value }: { label: string; value: string | number }) => (
|
|||
|
|
<div className="text-left">
|
|||
|
|
<p className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{label}</p>
|
|||
|
|
<p className="text-xs font-black text-slate-700">{value}</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
interface ReportCreateFormProps {
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
selectedBuilding: Building | null;
|
|||
|
|
onBuildingSelect: (building: Building | null) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ReportCreateForm: React.FC<ReportCreateFormProps> = ({ onClose, onSuccess, selectedBuilding, onBuildingSelect }) => {
|
|||
|
|
const [buildings, setBuildings] = useState<Building[]>([]);
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
building_id: '',
|
|||
|
|
month: '',
|
|||
|
|
period_start: '',
|
|||
|
|
period_end: '',
|
|||
|
|
createForAll: false, // Создать для всех домов
|
|||
|
|
selectedBuildings: [] as string[] // Выбранные дома для массового создания
|
|||
|
|
});
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
const [reportData, setReportData] = useState<any>(null);
|
|||
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|||
|
|
const [creationProgress, setCreationProgress] = useState<{
|
|||
|
|
total: number;
|
|||
|
|
completed: number;
|
|||
|
|
current: string;
|
|||
|
|
} | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadBuildings();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (formData.building_id && formData.period_start && formData.period_end) {
|
|||
|
|
loadReportData();
|
|||
|
|
}
|
|||
|
|
}, [formData.building_id, formData.period_start, formData.period_end]);
|
|||
|
|
|
|||
|
|
const loadBuildings = async () => {
|
|||
|
|
try {
|
|||
|
|
const data = await apiClient.get<Building[]>('/buildings');
|
|||
|
|
setBuildings(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading buildings:', err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadReportData = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsGenerating(true);
|
|||
|
|
// Загружаем данные для отчета
|
|||
|
|
const building = buildings.find(b => b.id === formData.building_id);
|
|||
|
|
if (!building) return;
|
|||
|
|
|
|||
|
|
// Заявки
|
|||
|
|
const applications = await apiClient.get(`/applications`).catch(() => []);
|
|||
|
|
|
|||
|
|
// Финансовые данные
|
|||
|
|
const financialData = await apiClient.get(`/finance/buildings/${formData.building_id}/summary`).catch(() => null);
|
|||
|
|
|
|||
|
|
// Фото отчеты
|
|||
|
|
const workPhotos = await apiClient.get<WorkPhoto[]>(`/pr/work-photos?building_id=${formData.building_id}`).catch(() => []);
|
|||
|
|
|
|||
|
|
setReportData({
|
|||
|
|
building,
|
|||
|
|
applications: Array.isArray(applications) ? applications : [],
|
|||
|
|
financialData,
|
|||
|
|
workPhotos: Array.isArray(workPhotos) ? workPhotos : []
|
|||
|
|
});
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading report data:', err);
|
|||
|
|
} finally {
|
|||
|
|
setIsGenerating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleGenerate = async () => {
|
|||
|
|
if (!formData.period_start || !formData.period_end) {
|
|||
|
|
alert('Заполните период отчета');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.createForAll && !formData.building_id) {
|
|||
|
|
alert('Выберите дом или включите создание для всех домов');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setIsGenerating(true);
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
|
|||
|
|
if (formData.createForAll) {
|
|||
|
|
// Массовое создание для всех домов
|
|||
|
|
const targetBuildings = formData.selectedBuildings.length > 0
|
|||
|
|
? formData.selectedBuildings
|
|||
|
|
: buildings.map(b => b.id);
|
|||
|
|
|
|||
|
|
setCreationProgress({ total: targetBuildings.length, completed: 0, current: 'Начало создания...' });
|
|||
|
|
|
|||
|
|
const result = await apiClient.post<{
|
|||
|
|
success: boolean;
|
|||
|
|
reportsCreated: number;
|
|||
|
|
reports: Array<{ buildingId: string; reportId: number; updated: boolean }>;
|
|||
|
|
}>('/pr/reports/bulk-create', {
|
|||
|
|
month: formData.month,
|
|||
|
|
period_start: formData.period_start,
|
|||
|
|
period_end: formData.period_end,
|
|||
|
|
building_ids: targetBuildings
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setCreationProgress({
|
|||
|
|
total: targetBuildings.length,
|
|||
|
|
completed: result.reportsCreated,
|
|||
|
|
current: 'Завершено'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setCreationProgress(null);
|
|||
|
|
alert(`Успешно создано отчетов: ${result.reportsCreated} из ${targetBuildings.length}`);
|
|||
|
|
onSuccess();
|
|||
|
|
}, 1000);
|
|||
|
|
} else {
|
|||
|
|
// Создание для одного дома
|
|||
|
|
const report = await apiClient.post<ResidentReport>('/pr/reports', {
|
|||
|
|
building_id: formData.building_id,
|
|||
|
|
month: formData.month,
|
|||
|
|
period_start: formData.period_start,
|
|||
|
|
period_end: formData.period_end
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Генерируем контент
|
|||
|
|
await apiClient.post(`/pr/reports/${report.id}/generate`);
|
|||
|
|
|
|||
|
|
onSuccess();
|
|||
|
|
}
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('Error creating report:', err);
|
|||
|
|
alert(`Ошибка создания отчета: ${err.message || 'Неизвестная ошибка'}`);
|
|||
|
|
} finally {
|
|||
|
|
setIsGenerating(false);
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
setCreationProgress(null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const selectedBuildingData = buildings.find(b => b.id === formData.building_id);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
|
|||
|
|
<div className="bg-white rounded-3xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto my-8">
|
|||
|
|
<div className="flex justify-between items-center mb-6">
|
|||
|
|
<h3 className="text-xl font-black text-slate-800">Создать отчет жителям</h3>
|
|||
|
|
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl">
|
|||
|
|
<X className="w-5 h-5 text-slate-400" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* Опция создания для всех домов */}
|
|||
|
|
<div className="bg-indigo-50 border border-indigo-200 rounded-xl p-4">
|
|||
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={formData.createForAll}
|
|||
|
|
onChange={e => setFormData({
|
|||
|
|
...formData,
|
|||
|
|
createForAll: e.target.checked,
|
|||
|
|
building_id: e.target.checked ? '' : formData.building_id
|
|||
|
|
})}
|
|||
|
|
className="w-5 h-5 text-indigo-600 rounded focus:ring-indigo-500"
|
|||
|
|
/>
|
|||
|
|
<div>
|
|||
|
|
<span className="font-black text-slate-800">Создать отчеты для всех домов</span>
|
|||
|
|
<p className="text-xs text-slate-600 mt-1">
|
|||
|
|
Автоматически создаст отчеты для всех домов за указанный период
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Форма выбора дома и периода */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
{!formData.createForAll ? (
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Дом
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.building_id}
|
|||
|
|
onChange={e => setFormData({ ...formData, building_id: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required={!formData.createForAll}
|
|||
|
|
>
|
|||
|
|
<option value="">Выберите дом</option>
|
|||
|
|
{buildings.map(b => (
|
|||
|
|
<option key={b.id} value={b.id}>
|
|||
|
|
{b.passport?.address || b.id}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Выбрать дома (оставьте пустым для всех)
|
|||
|
|
</label>
|
|||
|
|
<div className="max-h-48 overflow-y-auto border border-slate-200 rounded-xl p-3 space-y-2">
|
|||
|
|
{buildings.map(b => (
|
|||
|
|
<label key={b.id} className="flex items-center gap-2 cursor-pointer hover:bg-slate-50 p-2 rounded">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={formData.selectedBuildings.includes(b.id)}
|
|||
|
|
onChange={e => {
|
|||
|
|
if (e.target.checked) {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
selectedBuildings: [...formData.selectedBuildings, b.id]
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
selectedBuildings: formData.selectedBuildings.filter(id => id !== b.id)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
className="w-4 h-4 text-indigo-600 rounded"
|
|||
|
|
/>
|
|||
|
|
<span className="text-sm text-slate-700">{b.passport?.address || b.id}</span>
|
|||
|
|
</label>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-slate-500 mt-2">
|
|||
|
|
Выбрано: {formData.selectedBuildings.length || 'Все'} домов
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Месяц (например: Май 2024)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.month}
|
|||
|
|
onChange={e => setFormData({ ...formData, month: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
placeholder="Май 2024"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Период начала
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.period_start}
|
|||
|
|
onChange={e => setFormData({ ...formData, period_start: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Период окончания
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.period_end}
|
|||
|
|
onChange={e => setFormData({ ...formData, period_end: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Прогресс создания */}
|
|||
|
|
{creationProgress && (
|
|||
|
|
<div className="bg-indigo-50 border border-indigo-200 rounded-xl p-6">
|
|||
|
|
<div className="flex items-center justify-between mb-4">
|
|||
|
|
<h4 className="font-black text-slate-800">Создание отчетов</h4>
|
|||
|
|
<span className="text-sm font-bold text-indigo-600">
|
|||
|
|
{creationProgress.completed} / {creationProgress.total}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-3 mb-2">
|
|||
|
|
<div
|
|||
|
|
className="bg-indigo-600 h-3 rounded-full transition-all duration-300"
|
|||
|
|
style={{ width: `${(creationProgress.completed / creationProgress.total) * 100}%` }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{creationProgress.current && (
|
|||
|
|
<p className="text-xs text-slate-600 mt-2">
|
|||
|
|
Обрабатывается: {creationProgress.current}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Данные отчета */}
|
|||
|
|
{isGenerating && !creationProgress && (
|
|||
|
|
<div className="flex justify-center py-8">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-primary-600" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{reportData && !isGenerating && (
|
|||
|
|
<div className="space-y-4 border-t pt-6">
|
|||
|
|
<h4 className="font-black text-slate-800 text-lg">Данные для отчета</h4>
|
|||
|
|
|
|||
|
|
{/* Информация о доме */}
|
|||
|
|
{reportData.building && (
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-xl">
|
|||
|
|
<h5 className="font-bold text-slate-800 mb-2">Информация о доме</h5>
|
|||
|
|
<p className="text-sm text-slate-600">
|
|||
|
|
{reportData.building.passport?.address || 'Адрес не указан'}
|
|||
|
|
</p>
|
|||
|
|
{reportData.building.passport?.apartmentsCount && (
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">
|
|||
|
|
Квартир: {reportData.building.passport.apartmentsCount}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Заявки */}
|
|||
|
|
{reportData.applications && (
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-xl">
|
|||
|
|
<h5 className="font-bold text-slate-800 mb-2">Заявки за период</h5>
|
|||
|
|
<p className="text-sm text-slate-600">
|
|||
|
|
Всего: {reportData.applications.length}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Финансы */}
|
|||
|
|
{reportData.financialData && (
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-xl">
|
|||
|
|
<h5 className="font-bold text-slate-800 mb-2">Финансы</h5>
|
|||
|
|
<p className="text-sm text-slate-600">
|
|||
|
|
Доходы: {reportData.financialData.totalIncome || 0} ₽
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-slate-600">
|
|||
|
|
Расходы: {reportData.financialData.totalExpenses || 0} ₽
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Фото отчеты */}
|
|||
|
|
{reportData.workPhotos && reportData.workPhotos.length > 0 && (
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-xl">
|
|||
|
|
<h5 className="font-bold text-slate-800 mb-2">Фото отчеты</h5>
|
|||
|
|
<p className="text-sm text-slate-600">
|
|||
|
|
Работ: {reportData.workPhotos.length}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Кнопки */}
|
|||
|
|
<div className="flex gap-3 pt-4 border-t">
|
|||
|
|
<button
|
|||
|
|
onClick={handleGenerate}
|
|||
|
|
disabled={isSubmitting || isGenerating || (!formData.createForAll && !formData.building_id) || !formData.period_start || !formData.period_end}
|
|||
|
|
className="flex-1 px-6 py-3 bg-primary-600 text-white rounded-xl text-xs font-black uppercase tracking-widest disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{isSubmitting || isGenerating
|
|||
|
|
? (formData.createForAll ? `Создание отчетов...` : 'Создание...')
|
|||
|
|
: (formData.createForAll ? `Создать отчеты для всех домов` : 'Создать отчет')}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="px-6 py-3 bg-slate-100 text-slate-600 rounded-xl text-xs font-black uppercase tracking-widest"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Модальное окно с ключом доступа
|
|||
|
|
interface AccessKeyModalProps {
|
|||
|
|
onClose: () => void;
|
|||
|
|
reportId: string | number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const AccessKeyModal: React.FC<AccessKeyModalProps> = ({ onClose, reportId }) => {
|
|||
|
|
const accessKey = `mkd-${String(reportId)}-key`; // Уникальный ключ на каждый отчёт (демо)
|
|||
|
|
const link = `${window.location.origin}/reports/${reportId}?mode=published&key=${accessKey}`;
|
|||
|
|
const [copied, setCopied] = useState(false);
|
|||
|
|
const [showKey, setShowKey] = useState(false);
|
|||
|
|
|
|||
|
|
const handleCopyLink = () => {
|
|||
|
|
navigator.clipboard.writeText(link);
|
|||
|
|
setCopied(true);
|
|||
|
|
setTimeout(() => setCopied(false), 2000);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCopyKey = () => {
|
|||
|
|
navigator.clipboard.writeText(accessKey);
|
|||
|
|
setCopied(true);
|
|||
|
|
setTimeout(() => setCopied(false), 2000);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-3xl p-6 max-w-lg w-full shadow-2xl">
|
|||
|
|
<div className="flex justify-between items-center mb-6">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="p-2 bg-indigo-100 rounded-xl">
|
|||
|
|
<Key className="w-6 h-6 text-indigo-600" />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-xl font-black text-slate-800">Ключ доступа к отчету</h3>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="p-2 hover:bg-slate-100 rounded-xl transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5 text-slate-400" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Ключ доступа
|
|||
|
|
</label>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<div className="flex-1 relative">
|
|||
|
|
<input
|
|||
|
|
type={showKey ? "text" : "password"}
|
|||
|
|
value={accessKey}
|
|||
|
|
readOnly
|
|||
|
|
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500 pr-12"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowKey(!showKey)}
|
|||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
|||
|
|
type="button"
|
|||
|
|
>
|
|||
|
|
{showKey ? <X className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={handleCopyKey}
|
|||
|
|
className="px-4 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
|
|||
|
|
>
|
|||
|
|
{copied ? '✓' : 'Копировать'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Ссылка на опубликованную версию
|
|||
|
|
</label>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={link}
|
|||
|
|
readOnly
|
|||
|
|
className="flex-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
onClick={handleCopyLink}
|
|||
|
|
className="px-4 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
|
|||
|
|
>
|
|||
|
|
{copied ? '✓' : 'Копировать'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-4 bg-amber-50 border border-amber-200 rounded-xl">
|
|||
|
|
<p className="text-xs text-amber-800 leading-relaxed">
|
|||
|
|
<strong className="font-black">Важно:</strong> Сохраните ключ доступа в безопасном месте.
|
|||
|
|
Он потребуется для просмотра опубликованной версии отчета.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
window.open(link, '_blank');
|
|||
|
|
onClose();
|
|||
|
|
}}
|
|||
|
|
className="flex-1 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
|
|||
|
|
>
|
|||
|
|
Открыть опубликованную версию
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-sm font-bold transition-colors"
|
|||
|
|
>
|
|||
|
|
Закрыть
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|