813 lines
35 KiB
TypeScript
813 lines
35 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useMemo, useEffect } from 'react';
|
|||
|
|
import { ExternalLink } from 'lucide-react';
|
|||
|
|
import { Review, AIAnalysisResult, AnalyzedFeedback } from '../../types';
|
|||
|
|
import { analyzeResidentFeedback } from '../../services/geminiService';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import {
|
|||
|
|
Smile,
|
|||
|
|
TrendingUp,
|
|||
|
|
TrendingDown,
|
|||
|
|
Sparkles,
|
|||
|
|
Bot,
|
|||
|
|
Filter,
|
|||
|
|
ThumbsUp,
|
|||
|
|
ThumbsDown,
|
|||
|
|
MessageSquare,
|
|||
|
|
Loader2,
|
|||
|
|
Search,
|
|||
|
|
Archive,
|
|||
|
|
AlertCircle,
|
|||
|
|
CheckCircle2,
|
|||
|
|
Plus,
|
|||
|
|
X
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { Building } from '../../types';
|
|||
|
|
import { backendApi } from '../../services/apiClient';
|
|||
|
|
|
|||
|
|
export const PRFeedbackFeed: React.FC = () => {
|
|||
|
|
const [reviews, setReviews] = useState<Review[]>([]);
|
|||
|
|
const [aiResult, setAiResult] = useState<AIAnalysisResult | null>(null);
|
|||
|
|
const [isLoading, setIsLoading] = useState(false);
|
|||
|
|
const [isLoadingReviews, setIsLoadingReviews] = useState(true);
|
|||
|
|
const [reviewsServiceUnavailable, setReviewsServiceUnavailable] = useState(false);
|
|||
|
|
const [search, setSearch] = useState('');
|
|||
|
|
const [filterSource, setFilterSource] = useState<string>('');
|
|||
|
|
const [filterStatus, setFilterStatus] = useState<string>('');
|
|||
|
|
const [filterBuilding, setFilterBuilding] = useState<string>('');
|
|||
|
|
const [filterRating, setFilterRating] = useState<string>('');
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
const [fetchSource, setFetchSource] = useState<'yandex_maps' | '2gis' | ''>('');
|
|||
|
|
const [isFetching, setIsFetching] = useState(false);
|
|||
|
|
const [stats, setStats] = useState<any>(null);
|
|||
|
|
const [buildings, setBuildings] = useState<Building[]>([]);
|
|||
|
|
const [isLoadingStats, setIsLoadingStats] = useState(false);
|
|||
|
|
|
|||
|
|
// Загрузка отзывов
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadReviews();
|
|||
|
|
loadStats();
|
|||
|
|
}, [filterSource, filterStatus, filterBuilding]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadBuildings();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const loadBuildings = async () => {
|
|||
|
|
try {
|
|||
|
|
const data = await backendApi.getBuildings();
|
|||
|
|
setBuildings(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading buildings:', err);
|
|||
|
|
setBuildings([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadStats = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoadingStats(true);
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
if (filterBuilding) params.append('building_id', filterBuilding);
|
|||
|
|
const queryString = params.toString();
|
|||
|
|
const path = `/pr/reviews/stats${queryString ? `?${queryString}` : ''}`;
|
|||
|
|
const data = await apiClient.get<any>(path);
|
|||
|
|
setStats(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading stats:', err);
|
|||
|
|
setStats(null);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoadingStats(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadReviews = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoadingReviews(true);
|
|||
|
|
setReviewsServiceUnavailable(false);
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
if (filterSource) params.append('source', filterSource);
|
|||
|
|
if (filterStatus) params.append('status', filterStatus);
|
|||
|
|
if (filterBuilding) params.append('building_id', filterBuilding);
|
|||
|
|
|
|||
|
|
const queryString = params.toString();
|
|||
|
|
const path = `/pr/reviews${queryString ? `?${queryString}` : ''}`;
|
|||
|
|
const data = await apiClient.get<Review[]>(path);
|
|||
|
|
setReviews(Array.isArray(data) ? data : []);
|
|||
|
|
} catch (err: any) {
|
|||
|
|
setReviews([]);
|
|||
|
|
setReviewsServiceUnavailable(true);
|
|||
|
|
if (err?.status !== 500 && !err?.message?.includes('fetch')) {
|
|||
|
|
console.warn('Reviews service:', err?.message || err);
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
setIsLoadingReviews(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAnalyze = async () => {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
setAiResult(null);
|
|||
|
|
// Анализируем только отфильтрованные отзывы
|
|||
|
|
const filteredReviews = reviews.filter(r => {
|
|||
|
|
// Фильтр по рейтингу
|
|||
|
|
if (filterRating === 'negative' && r.rating > 3) return false;
|
|||
|
|
if (filterRating === 'neutral' && (r.rating <= 3 || r.rating >= 8)) return false;
|
|||
|
|
if (filterRating === 'positive' && r.rating < 8) return false;
|
|||
|
|
return true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Преобразуем Review в ResidentFeedback для анализа
|
|||
|
|
const feedback = filteredReviews.map(r => ({
|
|||
|
|
id: String(r.id),
|
|||
|
|
buildingId: r.buildingId,
|
|||
|
|
address: r.address || '',
|
|||
|
|
date: r.date,
|
|||
|
|
text: r.text,
|
|||
|
|
source: r.source,
|
|||
|
|
rating: r.rating
|
|||
|
|
}));
|
|||
|
|
const result = await analyzeResidentFeedback(feedback);
|
|||
|
|
setAiResult(result);
|
|||
|
|
setIsLoading(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleStatusChange = async (reviewId: number, status: 'processed' | 'archived') => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.put(`/pr/reviews/${reviewId}/status`, { status });
|
|||
|
|
await loadReviews();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error updating review status:', err);
|
|||
|
|
alert('Ошибка обновления статуса отзыва');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCreateIncident = async (reviewId: number) => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.post(`/pr/incidents/from-review/${reviewId}`, {
|
|||
|
|
created_by: 'Current User' // TODO: получить из контекста пользователя
|
|||
|
|
});
|
|||
|
|
await loadReviews();
|
|||
|
|
alert('Инцидент создан успешно');
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error creating incident:', err);
|
|||
|
|
alert('Ошибка создания инцидента');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleFetchReviews = async () => {
|
|||
|
|
if (!fetchSource) {
|
|||
|
|
alert('Выберите источник для загрузки');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
setIsFetching(true);
|
|||
|
|
const result = await apiClient.post<{ success: boolean; parsed: number; found: number; message?: string; details?: string }>(
|
|||
|
|
'/pr/reviews/fetch',
|
|||
|
|
{ source: fetchSource }
|
|||
|
|
);
|
|||
|
|
await loadReviews();
|
|||
|
|
const msg = result.message || `Загружено отзывов: ${result.parsed ?? 0}`;
|
|||
|
|
alert(msg);
|
|||
|
|
} catch (err: any) {
|
|||
|
|
const status = err?.status ?? err?.response?.status;
|
|||
|
|
const details = err?.details ?? err?.response?.data?.details ?? err?.message;
|
|||
|
|
if (status === 400) {
|
|||
|
|
alert('Укажите API ключ в Настройках → Интеграции');
|
|||
|
|
} else {
|
|||
|
|
alert(details || 'Ошибка загрузки отзывов');
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
setIsFetching(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const analyzedFeedback = useMemo((): (AnalyzedFeedback & Review)[] => {
|
|||
|
|
// Применяем фильтры
|
|||
|
|
let filtered = reviews;
|
|||
|
|
|
|||
|
|
// Фильтр по рейтингу
|
|||
|
|
if (filterRating === 'negative') {
|
|||
|
|
filtered = filtered.filter(r => r.rating <= 3);
|
|||
|
|
} else if (filterRating === 'neutral') {
|
|||
|
|
filtered = filtered.filter(r => r.rating > 3 && r.rating < 8);
|
|||
|
|
} else if (filterRating === 'positive') {
|
|||
|
|
filtered = filtered.filter(r => r.rating >= 8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Поиск
|
|||
|
|
if (search) {
|
|||
|
|
filtered = filtered.filter(r =>
|
|||
|
|
(r.address || '').toLowerCase().includes(search.toLowerCase()) ||
|
|||
|
|
r.text.toLowerCase().includes(search.toLowerCase()) ||
|
|||
|
|
(r.authorName || '').toLowerCase().includes(search.toLowerCase())
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const raw = aiResult ? aiResult.analyzedFeedback.map(af => {
|
|||
|
|
// Находим соответствующий review для сохранения всех полей
|
|||
|
|
const review = filtered.find(r => String(r.id) === af.id);
|
|||
|
|
return {
|
|||
|
|
...af,
|
|||
|
|
...review,
|
|||
|
|
id: af.id
|
|||
|
|
};
|
|||
|
|
}) : filtered.map(r => ({
|
|||
|
|
id: String(r.id),
|
|||
|
|
buildingId: r.buildingId,
|
|||
|
|
address: r.address || '',
|
|||
|
|
date: r.date,
|
|||
|
|
text: r.text,
|
|||
|
|
source: r.source,
|
|||
|
|
rating: r.rating,
|
|||
|
|
category: 'Неизвестно',
|
|||
|
|
sentiment: r.rating >= 8 ? 'Positive' as const : r.rating <= 3 ? 'Negative' as const : 'Neutral' as const,
|
|||
|
|
// Сохраняем все поля Review
|
|||
|
|
authorName: r.authorName,
|
|||
|
|
sourceUrl: r.sourceUrl,
|
|||
|
|
status: r.status,
|
|||
|
|
processedAt: r.processedAt,
|
|||
|
|
processedBy: r.processedBy,
|
|||
|
|
createdAt: r.createdAt,
|
|||
|
|
updatedAt: r.updatedAt
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
return raw;
|
|||
|
|
}, [reviews, aiResult, search, filterRating]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Statistics Card */}
|
|||
|
|
{stats && !isLoadingStats && (
|
|||
|
|
<div className="bg-white rounded-[2rem] p-6 border border-slate-200 shadow-sm">
|
|||
|
|
<h4 className="font-bold text-slate-800 mb-4">Статистика отзывов</h4>
|
|||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|||
|
|
<div className="text-center p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{stats.total || 0}</p>
|
|||
|
|
<p className="text-xs text-slate-500 font-bold uppercase tracking-wider mt-1">Всего</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-4 bg-blue-50 rounded-xl">
|
|||
|
|
<p className="text-2xl font-black text-blue-600">{stats.new_count || 0}</p>
|
|||
|
|
<p className="text-xs text-blue-600 font-bold uppercase tracking-wider mt-1">Новых</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-4 bg-emerald-50 rounded-xl">
|
|||
|
|
<p className="text-2xl font-black text-emerald-600">{stats.processed_count || 0}</p>
|
|||
|
|
<p className="text-xs text-emerald-600 font-bold uppercase tracking-wider mt-1">Обработано</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-4 bg-amber-50 rounded-xl">
|
|||
|
|
<p className="text-2xl font-black text-amber-600">{stats.avg_rating ? parseFloat(stats.avg_rating).toFixed(1) : '0.0'}</p>
|
|||
|
|
<p className="text-xs text-amber-600 font-bold uppercase tracking-wider mt-1">Средний рейтинг</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
|
|||
|
|
<div className="text-center p-3 bg-emerald-50 rounded-lg">
|
|||
|
|
<p className="text-lg font-black text-emerald-600">{stats.positive_count || 0}</p>
|
|||
|
|
<p className="text-[10px] text-emerald-600 font-bold uppercase">Положительных</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-3 bg-red-50 rounded-lg">
|
|||
|
|
<p className="text-lg font-black text-red-600">{stats.negative_count || 0}</p>
|
|||
|
|
<p className="text-[10px] text-red-600 font-bold uppercase">Негативных</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-3 bg-blue-50 rounded-lg">
|
|||
|
|
<p className="text-lg font-black text-blue-600">{stats.yandex_count || 0}</p>
|
|||
|
|
<p className="text-[10px] text-blue-600 font-bold uppercase">Яндекс Карты</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-3 bg-purple-50 rounded-lg">
|
|||
|
|
<p className="text-lg font-black text-purple-600">{stats.gis2_count || 0}</p>
|
|||
|
|
<p className="text-[10px] text-purple-600 font-bold uppercase">2ГИС</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Поиск и фильтры — сверху */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|||
|
|
<div className="relative flex-1">
|
|||
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Поиск по отзывам и адресам..."
|
|||
|
|
value={search}
|
|||
|
|
onChange={e => setSearch(e.target.value)}
|
|||
|
|
className="w-full pl-11 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 flex-wrap">
|
|||
|
|
<select
|
|||
|
|
value={filterSource}
|
|||
|
|
onChange={e => setFilterSource(e.target.value)}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Все источники</option>
|
|||
|
|
<option value="yandex_maps">Яндекс Карты</option>
|
|||
|
|
<option value="2gis">2ГИС</option>
|
|||
|
|
<option value="internal">Внутренний</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={filterStatus}
|
|||
|
|
onChange={e => setFilterStatus(e.target.value)}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Все статусы</option>
|
|||
|
|
<option value="new">Новые</option>
|
|||
|
|
<option value="processed">Обработанные</option>
|
|||
|
|
<option value="archived">Архив</option>
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={filterBuilding}
|
|||
|
|
onChange={e => setFilterBuilding(e.target.value)}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Все здания</option>
|
|||
|
|
{buildings.map(building => (
|
|||
|
|
<option key={building.id} value={building.id}>
|
|||
|
|
{building.passport?.address || building.id}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={filterRating}
|
|||
|
|
onChange={e => setFilterRating(e.target.value)}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Все рейтинги</option>
|
|||
|
|
<option value="negative">Негативные (1-3)</option>
|
|||
|
|
<option value="neutral">Нейтральные (4-7)</option>
|
|||
|
|
<option value="positive">Положительные (8-10)</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/* Кнопки — под фильтрами, по правому краю */}
|
|||
|
|
<div className="flex gap-3 flex-wrap justify-end items-center">
|
|||
|
|
<select
|
|||
|
|
value={fetchSource}
|
|||
|
|
onChange={e => setFetchSource(e.target.value as 'yandex_maps' | '2gis' | '')}
|
|||
|
|
className="px-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
disabled={isFetching}
|
|||
|
|
>
|
|||
|
|
<option value="">Источник</option>
|
|||
|
|
<option value="2gis">2ГИС</option>
|
|||
|
|
<option value="yandex_maps">Яндекс Карты</option>
|
|||
|
|
</select>
|
|||
|
|
<button
|
|||
|
|
onClick={handleFetchReviews}
|
|||
|
|
disabled={isFetching || !fetchSource}
|
|||
|
|
className="px-5 py-3 bg-indigo-600 text-white rounded-2xl text-xs font-black uppercase tracking-widest flex items-center gap-2 shadow-lg active:scale-95 disabled:bg-indigo-400 disabled:cursor-not-allowed transition-all"
|
|||
|
|
>
|
|||
|
|
{isFetching ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
|
|||
|
|
{isFetching ? 'Загрузка...' : 'Загрузить отзывы'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateForm(true)}
|
|||
|
|
className="px-5 py-3 bg-primary-600 text-white rounded-2xl text-xs font-black uppercase tracking-widest flex items-center gap-2 shadow-lg active:scale-95 transition-all"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" />
|
|||
|
|
Добавить отзыв
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={handleAnalyze}
|
|||
|
|
disabled={isLoading || reviews.length === 0}
|
|||
|
|
className="px-6 py-3 bg-slate-900 text-white rounded-2xl text-xs font-black uppercase tracking-widest flex items-center gap-2 shadow-lg active:scale-95 disabled:bg-slate-400 transition-all"
|
|||
|
|
>
|
|||
|
|
{isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
|
|||
|
|
{isLoading ? 'Анализ...' : 'Анализ отзывов'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* AI Summary Card */}
|
|||
|
|
{aiResult && !isLoading && (
|
|||
|
|
<div className="bg-gradient-to-br from-slate-800 to-slate-900 text-white p-6 rounded-[2rem] shadow-xl animate-fade-in">
|
|||
|
|
<h4 className="font-bold flex items-center gap-2 mb-4"><Bot className="w-5 h-5 text-primary-400" /> Сводный отчет</h4>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-[11px] font-medium leading-relaxed">
|
|||
|
|
<div>
|
|||
|
|
<h5 className="font-black text-emerald-400 uppercase tracking-widest mb-3">Главные плюсы:</h5>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{aiResult.summary.positive.map((item, i) => <li key={i} className="flex gap-2"><span className="text-emerald-500">•</span> {item}</li>)}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h5 className="font-black text-red-400 uppercase tracking-widest mb-3">Болевые точки:</h5>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{aiResult.summary.negative.map((item, i) => <li key={i} className="flex gap-2"><span className="text-red-500">•</span> {item}</li>)}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Create Review Form */}
|
|||
|
|
{showCreateForm && (
|
|||
|
|
<ReviewCreateForm
|
|||
|
|
onClose={() => setShowCreateForm(false)}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
loadReviews();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Feedback List */}
|
|||
|
|
{isLoadingReviews ? (
|
|||
|
|
<div className="flex justify-center items-center py-12">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-slate-400" />
|
|||
|
|
</div>
|
|||
|
|
) : reviewsServiceUnavailable ? (
|
|||
|
|
<div className="text-center py-12 text-amber-600 bg-amber-50 rounded-2xl border border-amber-200">
|
|||
|
|
<p className="font-medium">Сервис отзывов временно недоступен</p>
|
|||
|
|
<p className="text-sm text-slate-500 mt-1">Проверьте подключение к n8n или повторите позже</p>
|
|||
|
|
<button
|
|||
|
|
onClick={() => loadReviews()}
|
|||
|
|
className="mt-4 px-4 py-2 bg-amber-600 text-white rounded-xl text-xs font-black uppercase tracking-wider"
|
|||
|
|
>
|
|||
|
|
Повторить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
) : analyzedFeedback.length === 0 ? (
|
|||
|
|
<div className="text-center py-12 text-slate-400">
|
|||
|
|
<p>Отзывы не найдены</p>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateForm(true)}
|
|||
|
|
className="mt-4 px-4 py-2 bg-primary-600 text-white rounded-xl text-xs font-black uppercase tracking-wider"
|
|||
|
|
>
|
|||
|
|
Добавить первый отзыв
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{analyzedFeedback.map(fb => (
|
|||
|
|
<FeedbackCard
|
|||
|
|
key={fb.id}
|
|||
|
|
feedback={fb}
|
|||
|
|
onStatusChange={handleStatusChange}
|
|||
|
|
onCreateIncident={handleCreateIncident}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Функция для получения читаемого названия источника
|
|||
|
|
const getSourceName = (source: string) => {
|
|||
|
|
const sourceNames: Record<string, string> = {
|
|||
|
|
'yandex_maps': 'Яндекс Карты',
|
|||
|
|
'2gis': '2ГИС',
|
|||
|
|
'internal': 'Внутренний',
|
|||
|
|
'other': 'Другое'
|
|||
|
|
};
|
|||
|
|
return sourceNames[source] || source;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface FeedbackCardProps {
|
|||
|
|
feedback: AnalyzedFeedback;
|
|||
|
|
onStatusChange: (reviewId: number, status: 'processed' | 'archived') => void;
|
|||
|
|
onCreateIncident: (reviewId: number) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const FeedbackCard: React.FC<FeedbackCardProps> = ({ feedback, onStatusChange, onCreateIncident }) => {
|
|||
|
|
const [incident, setIncident] = useState<any>(null);
|
|||
|
|
const [isLoadingIncident, setIsLoadingIncident] = useState(false);
|
|||
|
|
|
|||
|
|
const sentimentConfig = {
|
|||
|
|
Positive: { icon: ThumbsUp, color: 'text-emerald-500', bg: 'bg-emerald-50' },
|
|||
|
|
Negative: { icon: ThumbsDown, color: 'text-red-500', bg: 'bg-red-50' },
|
|||
|
|
Neutral: { icon: MessageSquare, color: 'text-slate-500', bg: 'bg-slate-50' },
|
|||
|
|
};
|
|||
|
|
const config = sentimentConfig[feedback.sentiment];
|
|||
|
|
const Icon = config.icon;
|
|||
|
|
|
|||
|
|
// Определяем статус из review (если есть)
|
|||
|
|
const review = feedback as any;
|
|||
|
|
const status = review.status || 'new';
|
|||
|
|
const isNegative = feedback.rating <= 3;
|
|||
|
|
const authorName = review.authorName || review.author_name;
|
|||
|
|
const sourceUrl = review.sourceUrl || review.source_url;
|
|||
|
|
const processedAt = review.processedAt || review.processed_at;
|
|||
|
|
const processedBy = review.processedBy || review.processed_by;
|
|||
|
|
|
|||
|
|
// Загружаем инцидент, если есть
|
|||
|
|
useEffect(() => {
|
|||
|
|
const loadIncident = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoadingIncident(true);
|
|||
|
|
const incidents = await apiClient.get<any[]>(`/pr/incidents?review_id=${Number(feedback.id)}`);
|
|||
|
|
if (incidents && incidents.length > 0) {
|
|||
|
|
setIncident(incidents[0]);
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
// Игнорируем ошибки загрузки инцидента
|
|||
|
|
console.warn('Error loading incident:', err);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoadingIncident(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (feedback.id && status === 'processed') {
|
|||
|
|
loadIncident();
|
|||
|
|
}
|
|||
|
|
}, [feedback.id, status]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white p-5 rounded-[2rem] border border-slate-200 shadow-sm hover:border-primary-300 transition-colors group">
|
|||
|
|
<div className="flex gap-4">
|
|||
|
|
<div className={`w-12 h-12 rounded-2xl flex-shrink-0 flex items-center justify-center ${config.bg}`}>
|
|||
|
|
<Icon className={`w-6 h-6 ${config.color}`} />
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="flex items-center justify-between gap-2 flex-wrap mb-2">
|
|||
|
|
<div>
|
|||
|
|
<h5 className="font-black text-slate-800 text-sm">{feedback.address}</h5>
|
|||
|
|
<p className="text-[10px] text-slate-400 font-bold mt-0.5 uppercase tracking-tighter">
|
|||
|
|
{feedback.date} • {getSourceName(feedback.source)}
|
|||
|
|
{authorName && ` • ${authorName}`}
|
|||
|
|
{status === 'processed' && ' • Обработан'}
|
|||
|
|
{status === 'archived' && ' • В архиве'}
|
|||
|
|
{processedAt && ` • ${new Date(processedAt).toLocaleDateString('ru-RU')}`}
|
|||
|
|
{processedBy && ` • ${processedBy}`}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span className="text-[9px] font-black text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full uppercase tracking-tighter border border-primary-100">
|
|||
|
|
{feedback.category}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-xs font-black text-amber-600">
|
|||
|
|
{feedback.rating}/10
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600 leading-relaxed font-medium mb-3">«{feedback.text}»</p>
|
|||
|
|
|
|||
|
|
{/* Индикатор инцидента */}
|
|||
|
|
{incident && (
|
|||
|
|
<div className="mb-3 p-2 bg-amber-50 border border-amber-200 rounded-lg">
|
|||
|
|
<p className="text-xs text-amber-800 font-bold flex items-center gap-2">
|
|||
|
|
<AlertCircle className="w-3 h-3" />
|
|||
|
|
Инцидент создан: {incident.title}
|
|||
|
|
<a
|
|||
|
|
href={`#negative`}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
// TODO: Переход к инциденту
|
|||
|
|
}}
|
|||
|
|
className="text-amber-600 hover:underline ml-2"
|
|||
|
|
>
|
|||
|
|
Открыть
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Ссылка на оригинал */}
|
|||
|
|
{sourceUrl && (
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<a
|
|||
|
|
href={sourceUrl}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="text-xs text-primary-600 hover:text-primary-700 font-bold flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<ExternalLink className="w-3 h-3" />
|
|||
|
|
Открыть оригинал отзыва
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Действия */}
|
|||
|
|
<div className="flex gap-2 flex-wrap">
|
|||
|
|
{status === 'new' && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
onClick={() => onStatusChange(Number(feedback.id), 'processed')}
|
|||
|
|
className="px-3 py-1.5 bg-emerald-50 text-emerald-600 rounded-xl text-[10px] font-black uppercase tracking-wider hover:bg-emerald-100 transition-all flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<CheckCircle2 className="w-3 h-3" />
|
|||
|
|
Обработано
|
|||
|
|
</button>
|
|||
|
|
{isNegative && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => onCreateIncident(Number(feedback.id))}
|
|||
|
|
className="px-3 py-1.5 bg-red-50 text-red-600 rounded-xl text-[10px] font-black uppercase tracking-wider hover:bg-red-100 transition-all flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<AlertCircle className="w-3 h-3" />
|
|||
|
|
Создать инцидент
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{status === 'processed' && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => onStatusChange(Number(feedback.id), 'archived')}
|
|||
|
|
className="px-3 py-1.5 bg-slate-100 text-slate-600 rounded-xl text-[10px] font-black uppercase tracking-wider hover:bg-slate-200 transition-all flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<Archive className="w-3 h-3" />
|
|||
|
|
В архив
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface ReviewCreateFormProps {
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ReviewCreateForm: React.FC<ReviewCreateFormProps> = ({ onClose, onSuccess }) => {
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
building_id: '',
|
|||
|
|
source: 'internal' as Review['source'],
|
|||
|
|
source_url: '',
|
|||
|
|
author_name: '',
|
|||
|
|
text: '',
|
|||
|
|
rating: 5,
|
|||
|
|
date: new Date().toISOString().split('T')[0]
|
|||
|
|
});
|
|||
|
|
const [buildings, setBuildings] = useState<Building[]>([]);
|
|||
|
|
const [isLoadingBuildings, setIsLoadingBuildings] = useState(true);
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadBuildings();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const loadBuildings = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoadingBuildings(true);
|
|||
|
|
const data = await backendApi.getBuildings();
|
|||
|
|
setBuildings(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading buildings:', err);
|
|||
|
|
setBuildings([]);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoadingBuildings(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (!formData.building_id || !formData.text || !formData.date) {
|
|||
|
|
alert('Заполните обязательные поля');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
await apiClient.post('/pr/reviews', formData);
|
|||
|
|
onSuccess();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error creating review:', err);
|
|||
|
|
alert('Ошибка создания отзыва');
|
|||
|
|
} finally {
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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-2xl w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Дом
|
|||
|
|
</label>
|
|||
|
|
{isLoadingBuildings ? (
|
|||
|
|
<div className="w-full p-3 border border-slate-200 rounded-xl text-sm text-slate-400">
|
|||
|
|
Загрузка домов...
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
<option value="">Выберите дом</option>
|
|||
|
|
{buildings.map(building => (
|
|||
|
|
<option key={building.id} value={building.id}>
|
|||
|
|
{building.passport?.address || building.id}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Источник
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.source}
|
|||
|
|
onChange={e => setFormData({ ...formData, source: e.target.value as Review['source'] })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="internal">Внутренний</option>
|
|||
|
|
<option value="yandex_maps">Яндекс Карты</option>
|
|||
|
|
<option value="2gis">2ГИС</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Ссылка на отзыв (опционально)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.source_url}
|
|||
|
|
onChange={e => setFormData({ ...formData, source_url: e.target.value })}
|
|||
|
|
placeholder="https://yandex.ru/maps/org/..."
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Автор (опционально)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.author_name}
|
|||
|
|
onChange={e => setFormData({ ...formData, author_name: e.target.value })}
|
|||
|
|
placeholder="Имя автора отзыва"
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Текст отзыва
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={formData.text}
|
|||
|
|
onChange={e => setFormData({ ...formData, text: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm resize-none"
|
|||
|
|
rows={4}
|
|||
|
|
placeholder="Текст отзыва..."
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Рейтинг (1-10)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={formData.rating}
|
|||
|
|
onChange={e => setFormData({ ...formData, rating: parseInt(e.target.value) || 5 })}
|
|||
|
|
min="1"
|
|||
|
|
max="10"
|
|||
|
|
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.date}
|
|||
|
|
onChange={e => setFormData({ ...formData, date: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={isSubmitting}
|
|||
|
|
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 ? 'Создание...' : 'Создать отзыв'}
|
|||
|
|
</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>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|