1828 lines
108 KiB
TypeScript
1828 lines
108 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|||
|
|
import {
|
|||
|
|
Briefcase,
|
|||
|
|
Megaphone,
|
|||
|
|
Wrench,
|
|||
|
|
Banknote,
|
|||
|
|
Scale,
|
|||
|
|
TrendingUp,
|
|||
|
|
TrendingDown,
|
|||
|
|
UsersRound,
|
|||
|
|
Calendar,
|
|||
|
|
CalendarDays,
|
|||
|
|
Pencil,
|
|||
|
|
X,
|
|||
|
|
Target,
|
|||
|
|
Share2,
|
|||
|
|
Send,
|
|||
|
|
MessageSquare,
|
|||
|
|
CheckCircle2,
|
|||
|
|
User as UserIcon,
|
|||
|
|
Clock,
|
|||
|
|
Plus,
|
|||
|
|
UserPlus,
|
|||
|
|
Eye,
|
|||
|
|
Send as SendIcon,
|
|||
|
|
Newspaper,
|
|||
|
|
ArrowRight,
|
|||
|
|
LayoutGrid,
|
|||
|
|
Inbox,
|
|||
|
|
AlertTriangle,
|
|||
|
|
Camera,
|
|||
|
|
Package,
|
|||
|
|
Gauge,
|
|||
|
|
FileText,
|
|||
|
|
PartyPopper,
|
|||
|
|
ClipboardList
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { StrategicGoal, Department, UserRole, DomaApplication, User, BuildingTask, CompanyNews } from '../types';
|
|||
|
|
import { MOCK_STRATEGIC_GOALS, CURRENT_USER_MOCK } from '../constants';
|
|||
|
|
import { backendApi } from '../services/apiClient';
|
|||
|
|
import { DashboardTaskModal } from './DashboardTaskModal';
|
|||
|
|
|
|||
|
|
const DASHBOARD_TASKS_KEY = 'mkd_dashboard_tasks';
|
|||
|
|
|
|||
|
|
/** Роль текущего пользователя в задаче */
|
|||
|
|
export type TaskMyRole = 'executor' | 'co_executor' | 'assigner' | 'observer';
|
|||
|
|
|
|||
|
|
/** Мок задач для сводки (если нет сохранённых) */
|
|||
|
|
function getMockDashboardTasks(currentUserId: string): BuildingTask[] {
|
|||
|
|
const now = new Date().toISOString();
|
|||
|
|
const d = (days: number) => new Date(Date.now() + days * 86400000).toISOString().slice(0, 10);
|
|||
|
|
return [
|
|||
|
|
{ id: 'dt-1', title: 'Проверка стояков отопления', deadline: d(5), status: 'in_progress', priority: 'high', createdAt: now, updatedAt: now, buildingId: 'b-1', buildingAddress: 'ул. Мира, 10', assignedTo: currentUserId, assignedToName: 'Я', createdBy: 'u2', createdByName: 'Смирнов А.В.', requirePhotoReport: false, comments: [{ id: 'c1', authorName: 'Смирнов А.В.', text: 'Датчики заказаны, ждём поставку.', createdAt: now }] },
|
|||
|
|
{ id: 'dt-2', title: 'Подготовка отчёта по дому', deadline: d(3), status: 'new', priority: 'medium', createdAt: now, updatedAt: now, buildingId: 'b-1', buildingAddress: 'ул. Мира, 10', assignedTo: 'u2', assignedToName: 'Смирнов А.В.', coAssignees: [currentUserId], coAssigneesNames: ['Я'], createdBy: 'u1', createdByName: 'Петров А.В.', requirePhotoReport: false },
|
|||
|
|
{ id: 'dt-3', title: 'Согласование сметы на ремонт', deadline: d(7), status: 'new', priority: 'urgent', createdAt: now, updatedAt: now, buildingId: 'b-2', buildingAddress: 'пр. Ленина, 5', assignedTo: 'u3', assignedToName: 'Кузнецов В.В.', createdBy: currentUserId, createdByName: 'Я', requirePhotoReport: false },
|
|||
|
|
{ id: 'dt-4', title: 'Контроль качества уборки', deadline: d(1), status: 'done', priority: 'medium', createdAt: now, updatedAt: now, buildingId: 'b-1', buildingAddress: 'ул. Мира, 10', assignedTo: 'u2', assignedToName: 'Смирнов А.В.', observers: [currentUserId], observersNames: ['Я'], createdBy: 'u2', createdByName: 'Смирнов А.В.', requirePhotoReport: false },
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadDashboardTasks(currentUserId: string): BuildingTask[] {
|
|||
|
|
try {
|
|||
|
|
const raw = localStorage.getItem(DASHBOARD_TASKS_KEY);
|
|||
|
|
if (!raw) return getMockDashboardTasks(currentUserId);
|
|||
|
|
const parsed = JSON.parse(raw);
|
|||
|
|
if (!Array.isArray(parsed) || parsed.length === 0) return getMockDashboardTasks(currentUserId);
|
|||
|
|
return parsed as BuildingTask[];
|
|||
|
|
} catch {
|
|||
|
|
return getMockDashboardTasks(currentUserId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveDashboardTasks(tasks: BuildingTask[]): void {
|
|||
|
|
try {
|
|||
|
|
localStorage.setItem(DASHBOARD_TASKS_KEY, JSON.stringify(tasks));
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('[Dashboard] failed to persist tasks', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getTaskMyRole(task: BuildingTask, currentUserId: string): TaskMyRole | null {
|
|||
|
|
if (task.assignedTo === currentUserId) return 'executor';
|
|||
|
|
if (task.coAssignees?.includes(currentUserId)) return 'co_executor';
|
|||
|
|
if (task.createdBy === currentUserId) return 'assigner';
|
|||
|
|
if (task.observers?.includes(currentUserId)) return 'observer';
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ====================================================================================
|
|||
|
|
// Strategic Goals Components
|
|||
|
|
// ====================================================================================
|
|||
|
|
const DEPT_CONFIG: Record<Department, { icon: React.ElementType; color: string; }> = {
|
|||
|
|
production: { icon: Wrench, color: 'text-amber-500' },
|
|||
|
|
pr: { icon: Megaphone, color: 'text-indigo-500' },
|
|||
|
|
finance: { icon: Banknote, color: 'text-emerald-500' },
|
|||
|
|
development: { icon: Briefcase, color: 'text-sky-500' },
|
|||
|
|
legal: { icon: Scale, color: 'text-slate-600' },
|
|||
|
|
hr: { icon: UsersRound, color: 'text-violet-500' },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const GoalCard: React.FC<{ goal: StrategicGoal }> = ({ goal }) => {
|
|||
|
|
const { icon: Icon, color } = DEPT_CONFIG[goal.department];
|
|||
|
|
|
|||
|
|
const lowerIsBetter = ['production', 'hr'].includes(goal.department);
|
|||
|
|
|
|||
|
|
let progress = 0;
|
|||
|
|
if (lowerIsBetter) {
|
|||
|
|
const startValue = goal.targetValue * 2;
|
|||
|
|
progress = Math.max(0, (startValue - goal.currentValue) / (startValue - goal.targetValue)) * 100;
|
|||
|
|
} else {
|
|||
|
|
progress = (goal.currentValue / goal.targetValue) * 100;
|
|||
|
|
}
|
|||
|
|
progress = Math.min(100, Math.max(0, progress));
|
|||
|
|
|
|||
|
|
const formatValue = (val: number, unit: string) => {
|
|||
|
|
if (unit === '₽') return `${(val / 1000000).toFixed(1)}M ₽`;
|
|||
|
|
return `${val}${unit}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center gap-3 mb-3">
|
|||
|
|
<div className={`p-2 bg-slate-100 rounded-lg ${color}`}>
|
|||
|
|
<Icon className="w-5 h-5" />
|
|||
|
|
</div>
|
|||
|
|
<h4 className="font-bold text-slate-700">{goal.title}</h4>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600 mb-4">{goal.description}</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="flex justify-between items-end mb-1">
|
|||
|
|
<span className="text-xs text-slate-500">Прогресс</span>
|
|||
|
|
<span className="text-sm font-bold text-slate-800">
|
|||
|
|
{formatValue(goal.currentValue, goal.unit)} / <span className={color}>{formatValue(goal.targetValue, goal.unit)}</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-2.5">
|
|||
|
|
<div className={`${color.replace('text-', 'bg-')} h-2.5 rounded-full`} style={{ width: `${progress}%` }}></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-slate-400 mt-2 flex items-center gap-1.5">
|
|||
|
|
<Calendar className="w-3 h-3"/>
|
|||
|
|
<span>Срок: {goal.deadline}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ====================================================================================
|
|||
|
|
// Operational Panel Components
|
|||
|
|
// ====================================================================================
|
|||
|
|
|
|||
|
|
/** Блок дашборда, по которому можно открыть продвинутую статистику и перейти в модуль */
|
|||
|
|
const DASHBOARD_BLOCK_TO_MODULE: Record<string, { tabId: string; label: string }> = {
|
|||
|
|
production: { tabId: 'objects', label: 'Участки' },
|
|||
|
|
pr: { tabId: 'pr', label: 'PR и NPS' },
|
|||
|
|
finance: { tabId: 'finance', label: 'Финансы' },
|
|||
|
|
development: { tabId: 'development', label: 'Развитие' },
|
|||
|
|
legal: { tabId: 'legal', label: 'Юр. отдел' },
|
|||
|
|
hr: { tabId: 'hr', label: 'Кадры' },
|
|||
|
|
news: { tabId: 'office', label: 'Офис' },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** Модалка продвинутой статистики по отделу с кнопкой «Перейти в модуль» */
|
|||
|
|
const DepartmentStatsModal: React.FC<{
|
|||
|
|
title: string;
|
|||
|
|
blockId: string;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onGoToModule?: (tabId: string) => void;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
}> = ({ title, blockId, onClose, onGoToModule, children }) => {
|
|||
|
|
const moduleInfo = DASHBOARD_BLOCK_TO_MODULE[blockId];
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 pb-24 md:pb-28 bg-black/50 backdrop-blur-sm animate-fade-in" onClick={onClose}>
|
|||
|
|
<div
|
|||
|
|
className="bg-white rounded-2xl shadow-xl border border-slate-200 w-full max-w-5xl max-h-[calc(100vh-7rem)] md:max-h-[calc(100vh-8rem)] overflow-hidden flex flex-col animate-fade-in"
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center justify-between gap-4 p-4 border-b border-slate-200 bg-slate-50/80">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">{title} — продвинутая статистика</h3>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
{moduleInfo && onGoToModule && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
onGoToModule(moduleInfo.tabId);
|
|||
|
|
onClose();
|
|||
|
|
}}
|
|||
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-xl font-bold text-sm hover:bg-primary-700 transition-all shadow-sm"
|
|||
|
|
>
|
|||
|
|
Перейти в модуль
|
|||
|
|
<ArrowRight className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="p-2 text-slate-400 hover:text-slate-600 rounded-lg transition-colors"
|
|||
|
|
aria-label="Закрыть"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6 overflow-y-auto flex-1">
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const DashboardCard: React.FC<{
|
|||
|
|
title: string;
|
|||
|
|
icon: React.ElementType;
|
|||
|
|
iconColor: string;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
/** При указании карточка кликабельна — открывается продвинутая статистика по отделу */
|
|||
|
|
onClick?: () => void;
|
|||
|
|
}> = ({ title, icon: Icon, iconColor, children, onClick }) => {
|
|||
|
|
const Wrapper = onClick ? 'button' : 'div';
|
|||
|
|
const wrapperProps = onClick
|
|||
|
|
? { type: 'button' as const, onClick, className: 'w-full text-left bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4 hover:shadow-md transition-shadow cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500/50' }
|
|||
|
|
: { className: 'bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4 hover:shadow-md transition-shadow' };
|
|||
|
|
return (
|
|||
|
|
<Wrapper {...wrapperProps}>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className={`p-2 bg-slate-50 rounded-lg ${iconColor}`}>
|
|||
|
|
<Icon className="w-5 h-5" />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="font-bold text-slate-700">{title}</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
</Wrapper>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const Stat: React.FC<{
|
|||
|
|
value: string;
|
|||
|
|
label: string;
|
|||
|
|
trend?: 'up' | 'down';
|
|||
|
|
}> = ({ value, label, trend }) => {
|
|||
|
|
const trendColor = trend === 'up' ? 'text-emerald-500' : 'text-red-500';
|
|||
|
|
const TrendIcon = trend === 'up' ? TrendingUp : TrendingDown;
|
|||
|
|
return (
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{value}</p>
|
|||
|
|
<p className="text-xs text-slate-500">{label}</p>
|
|||
|
|
</div>
|
|||
|
|
{trend && <TrendIcon className={`w-6 h-6 ${trendColor}`} />}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const ProgressBar: React.FC<{ value: number; label: string }> = ({ value, label }) => (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex justify-between items-center mb-1">
|
|||
|
|
<p className="text-xs text-slate-500 font-bold">{label}</p>
|
|||
|
|
<p className="text-sm font-bold text-slate-700">{value}%</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-2">
|
|||
|
|
<div className="bg-sky-500 h-2 rounded-full" style={{ width: `${value}%` }}></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const GaugeChart: React.FC<{ value: number; label: string }> = ({ value, label }) => {
|
|||
|
|
const color = value > 75 ? 'bg-emerald-500' : value > 50 ? 'bg-blue-500' : value > 25 ? 'bg-amber-500' : 'bg-red-500';
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex justify-between items-baseline">
|
|||
|
|
<p className="text-xs text-slate-500">{label}</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{value}%</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-2 mt-2">
|
|||
|
|
<div className={`${color} h-2 rounded-full`} style={{ width: `${value}%` }}></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getPriorityColor = (p: BuildingTask['priority']) => {
|
|||
|
|
switch (p) { case 'urgent': return 'bg-red-50 text-red-600'; case 'high': return 'bg-amber-50 text-amber-600'; case 'medium': return 'bg-blue-50 text-blue-600'; default: return 'bg-slate-100 text-slate-600'; }
|
|||
|
|
};
|
|||
|
|
const getPriorityLabel = (p: BuildingTask['priority']) => {
|
|||
|
|
switch (p) { case 'urgent': return 'Срочно'; case 'high': return 'Высокий'; case 'medium': return 'Средний'; case 'low': return 'Низкий'; default: return p; }
|
|||
|
|
};
|
|||
|
|
const formatTaskDate = (dateStr: string) => {
|
|||
|
|
try { const d = new Date(dateStr); return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' }); } catch { return '—'; }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const ROLE_LABELS: Record<TaskMyRole, string> = { executor: 'Исполнитель', co_executor: 'Соисполнитель', assigner: 'Постановщик', observer: 'Наблюдатель' };
|
|||
|
|
|
|||
|
|
const DashboardTaskCard: React.FC<{
|
|||
|
|
task: BuildingTask;
|
|||
|
|
myRole: TaskMyRole;
|
|||
|
|
onToggleDone: () => void;
|
|||
|
|
onOpen: () => void;
|
|||
|
|
}> = ({ task, myRole, onToggleDone, onOpen }) => (
|
|||
|
|
<div
|
|||
|
|
onClick={onOpen}
|
|||
|
|
className="flex items-start gap-3 p-3 hover:bg-slate-50 rounded-xl border border-slate-100 transition-colors cursor-pointer"
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={(e) => { e.stopPropagation(); onToggleDone(); }}
|
|||
|
|
className={`mt-0.5 w-5 h-5 rounded-full border-2 flex-shrink-0 flex items-center justify-center transition-all ${
|
|||
|
|
task.status === 'done' ? 'bg-emerald-500 border-emerald-500' : 'border-slate-300 hover:border-primary-400'
|
|||
|
|
}`}
|
|||
|
|
title={task.status === 'done' ? 'Отметить невыполненной' : 'Отметить выполненной'}
|
|||
|
|
>
|
|||
|
|
{task.status === 'done' && <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>}
|
|||
|
|
</button>
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<p className={`text-sm font-bold truncate ${task.status === 'done' ? 'text-slate-400 line-through' : 'text-slate-800'}`}>{task.title}</p>
|
|||
|
|
<div className="flex flex-wrap items-center gap-2 mt-1.5">
|
|||
|
|
<span className="text-[10px] text-slate-400 font-bold flex items-center gap-1"><Calendar className="w-3 h-3" /> {formatTaskDate(task.deadline)}</span>
|
|||
|
|
<span className={`px-1.5 py-0.5 rounded text-[9px] font-black uppercase ${getPriorityColor(task.priority)}`}>{getPriorityLabel(task.priority)}</span>
|
|||
|
|
{task.buildingAddress && <span className="text-[10px] text-slate-500 truncate max-w-[120px]" title={task.buildingAddress}>{task.buildingAddress}</span>}
|
|||
|
|
<span className="text-[9px] font-bold text-primary-600 bg-primary-50 px-1.5 py-0.5 rounded">{ROLE_LABELS[myRole]}</span>
|
|||
|
|
{(task.comments?.length ?? 0) > 0 && (
|
|||
|
|
<span className="text-[10px] text-slate-500 font-bold flex items-center gap-1" title={task.comments!.map(c => `${c.authorName}: ${c.text}`).join('\n')}>
|
|||
|
|
<MessageSquare className="w-3 h-3" /> {task.comments!.length} коммент.
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ====================================================================================
|
|||
|
|
// Main Dashboard Component
|
|||
|
|
// ====================================================================================
|
|||
|
|
|
|||
|
|
export const SummaryDashboard: React.FC<{
|
|||
|
|
currentUserRole: UserRole;
|
|||
|
|
currentUser?: User;
|
|||
|
|
/** Какие блоки сводки показывать: 'all' или список id (goals, production, pr, finance, development, legal, hr, tasks, news) */
|
|||
|
|
allowedDashboardBlocks?: string[] | 'all';
|
|||
|
|
initialOpenTaskModal?: boolean;
|
|||
|
|
onQuickActionHandled?: () => void;
|
|||
|
|
/** Открыть модалку просмотра новости по id (из уведомления) */
|
|||
|
|
openNewsId?: number | null;
|
|||
|
|
onCloseNews?: () => void;
|
|||
|
|
/** Переход в модуль (HR, PR, Финансы и т.д.) из продвинутой статистики */
|
|||
|
|
onNavigateToModule?: (tabId: string) => void;
|
|||
|
|
}> = ({ currentUserRole, currentUser: currentUserProp, allowedDashboardBlocks = 'all', initialOpenTaskModal, onQuickActionHandled, openNewsId, onCloseNews, onNavigateToModule }) => {
|
|||
|
|
const currentUser = currentUserProp ?? CURRENT_USER_MOCK;
|
|||
|
|
const [isGoalsModalOpen, setIsGoalsModalOpen] = useState(false);
|
|||
|
|
/** Открытая модалка продвинутой статистики по отделу (production, pr, finance, development, legal, hr, news) */
|
|||
|
|
const [statsModalDepartment, setStatsModalDepartment] = useState<string | null>(null);
|
|||
|
|
const [tasksTab, setTasksTab] = useState<TaskMyRole>('executor');
|
|||
|
|
const [dashboardTasks, setDashboardTasks] = useState<BuildingTask[]>(() => loadDashboardTasks(currentUser.id));
|
|||
|
|
const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
|
|||
|
|
const [editingTask, setEditingTask] = useState<BuildingTask | null>(null);
|
|||
|
|
const [applications, setApplications] = useState<DomaApplication[]>([]);
|
|||
|
|
const [appsLoading, setAppsLoading] = useState(false);
|
|||
|
|
const [appsError, setAppsError] = useState<string | null>(null);
|
|||
|
|
const [productionMetrics, setProductionMetrics] = useState<{
|
|||
|
|
buildingCondition: { value: number; label: string; condition: string; totalBuildings: number; buildingsWithWear: number };
|
|||
|
|
workSchedule: { onTime: number; late: number; overdue: number; onTimeRate: number; lateRate: number };
|
|||
|
|
slaRating: number;
|
|||
|
|
} | null>(null);
|
|||
|
|
const [metricsLoading, setMetricsLoading] = useState(false);
|
|||
|
|
/** Полный дашборд производства для модалки продвинутой статистики */
|
|||
|
|
const [productionDashboard, setProductionDashboard] = useState<Awaited<ReturnType<typeof backendApi.getProductionDashboard>>['data'] | null>(null);
|
|||
|
|
const [productionDashboardLoading, setProductionDashboardLoading] = useState(false);
|
|||
|
|
const [companyNews, setCompanyNews] = useState<CompanyNews[]>([]);
|
|||
|
|
const [companyNewsLoading, setCompanyNewsLoading] = useState(false);
|
|||
|
|
const [isSuggestNewsModalOpen, setIsSuggestNewsModalOpen] = useState(false);
|
|||
|
|
const [viewNewsItem, setViewNewsItem] = useState<CompanyNews | null>(null);
|
|||
|
|
const [viewNewsLoading, setViewNewsLoading] = useState(false);
|
|||
|
|
const [smmSummary, setSmmSummary] = useState<{ total: number; byChannel: Array<{ id: number; name: string; type: string; subscribersCount: number }> } | null>(null);
|
|||
|
|
const [smmSummaryLoading, setSmmSummaryLoading] = useState(false);
|
|||
|
|
/** Дашборд PR для карточки и модалки продвинутой статистики */
|
|||
|
|
const [prDashboard, setPrDashboard] = useState<Awaited<ReturnType<typeof backendApi.getPRDashboard>>['data'] | null>(null);
|
|||
|
|
const [prDashboardLoading, setPrDashboardLoading] = useState(false);
|
|||
|
|
/** Дашборд офиса для карточки и модалки продвинутой статистики */
|
|||
|
|
const [officeDashboard, setOfficeDashboard] = useState<Awaited<ReturnType<typeof backendApi.getOfficeDashboard>>['data'] | null>(null);
|
|||
|
|
const [officeDashboardLoading, setOfficeDashboardLoading] = useState(false);
|
|||
|
|
|
|||
|
|
const canShowBlock = (blockId: string) =>
|
|||
|
|
allowedDashboardBlocks === 'all' || (Array.isArray(allowedDashboardBlocks) && allowedDashboardBlocks.includes(blockId));
|
|||
|
|
|
|||
|
|
const canSee = (dept: Department) => {
|
|||
|
|
if (currentUserRole === 'DIRECTOR') return true;
|
|||
|
|
if (currentUserRole === 'ENGINEER') return dept === 'production' || dept === 'development';
|
|||
|
|
if (currentUserRole === 'MASTER') return dept === 'production';
|
|||
|
|
if (currentUserRole === 'LAWYER') return dept === 'legal';
|
|||
|
|
if (currentUserRole === 'FINANCIER') return dept === 'finance';
|
|||
|
|
if (currentUserRole === 'HR_MANAGER') return dept === 'hr';
|
|||
|
|
if (currentUserRole === 'PR_MANAGER') return dept === 'pr';
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** Показывать карточку дашборда: при тонкой настройке прав — только canShowBlock, при доступе «всё» — ещё и canSee по роли */
|
|||
|
|
const showDashboardCard = (blockId: string, dept?: Department) =>
|
|||
|
|
canShowBlock(blockId) && (allowedDashboardBlocks === 'all' ? (dept == null || canSee(dept)) : true);
|
|||
|
|
|
|||
|
|
const filteredGoals =
|
|||
|
|
allowedDashboardBlocks === 'all'
|
|||
|
|
? MOCK_STRATEGIC_GOALS.filter((g) => canSee(g.department))
|
|||
|
|
: canShowBlock('goals')
|
|||
|
|
? MOCK_STRATEGIC_GOALS
|
|||
|
|
: [];
|
|||
|
|
|
|||
|
|
// Быстрое действие «Добавить задачу» — открыть модалку при переходе со сводки
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (initialOpenTaskModal) {
|
|||
|
|
setIsTaskModalOpen(true);
|
|||
|
|
onQuickActionHandled?.();
|
|||
|
|
}
|
|||
|
|
}, [initialOpenTaskModal, onQuickActionHandled]);
|
|||
|
|
|
|||
|
|
// Сохраняем задачи сводки в localStorage при любом изменении
|
|||
|
|
useEffect(() => {
|
|||
|
|
saveDashboardTasks(dashboardTasks);
|
|||
|
|
}, [dashboardTasks]);
|
|||
|
|
|
|||
|
|
// Загружаем метрики производства (для карточки на сводке)
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false;
|
|||
|
|
|
|||
|
|
const loadMetrics = async () => {
|
|||
|
|
setMetricsLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await backendApi.getProductionMetrics();
|
|||
|
|
if (!cancelled && response.success) {
|
|||
|
|
setProductionMetrics(response.data);
|
|||
|
|
}
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('[SummaryDashboard] Ошибка загрузки метрик производства:', err);
|
|||
|
|
} finally {
|
|||
|
|
if (!cancelled) {
|
|||
|
|
setMetricsLoading(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
loadMetrics();
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
cancelled = true;
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
// Загружаем полный дашборд производства при открытии модалки продвинутой статистики
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (statsModalDepartment !== 'production') {
|
|||
|
|
setProductionDashboard(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let cancelled = false;
|
|||
|
|
setProductionDashboardLoading(true);
|
|||
|
|
setProductionDashboard(null);
|
|||
|
|
backendApi
|
|||
|
|
.getProductionDashboard()
|
|||
|
|
.then((res) => {
|
|||
|
|
if (!cancelled && res.success && res.data) setProductionDashboard(res.data);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
if (!cancelled) console.error('[SummaryDashboard] Ошибка загрузки дашборда производства:', err);
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
if (!cancelled) setProductionDashboardLoading(false);
|
|||
|
|
});
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [statsModalDepartment]);
|
|||
|
|
|
|||
|
|
// Загрузка дашборда PR (NPS, CSAT, SMM и др.) для карточки и модалки
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!showDashboardCard('pr', 'pr')) return;
|
|||
|
|
let cancelled = false;
|
|||
|
|
setPrDashboardLoading(true);
|
|||
|
|
setPrDashboard(null);
|
|||
|
|
backendApi
|
|||
|
|
.getPRDashboard()
|
|||
|
|
.then((res) => {
|
|||
|
|
if (!cancelled && res.success && res.data) setPrDashboard(res.data);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
if (!cancelled) console.error('[SummaryDashboard] Ошибка загрузки дашборда PR:', err);
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
if (!cancelled) setPrDashboardLoading(false);
|
|||
|
|
});
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [allowedDashboardBlocks, currentUserRole]);
|
|||
|
|
|
|||
|
|
// Загрузка сводки SMM (подписчики по каналам) для блока PR — fallback, если дашборд не загружен
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!showDashboardCard('pr', 'pr')) return;
|
|||
|
|
let cancelled = false;
|
|||
|
|
setSmmSummaryLoading(true);
|
|||
|
|
backendApi
|
|||
|
|
.getSMMChannelsSummary()
|
|||
|
|
.then((data) => {
|
|||
|
|
if (!cancelled && data) setSmmSummary({ total: data.total ?? 0, byChannel: data.byChannel ?? [] });
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
if (!cancelled) setSmmSummary(null);
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
if (!cancelled) setSmmSummaryLoading(false);
|
|||
|
|
});
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [allowedDashboardBlocks, currentUserRole]);
|
|||
|
|
|
|||
|
|
// Загрузка дашборда офиса для карточки и модалки (блок office или news)
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!showDashboardCard('office') && !showDashboardCard('news')) return;
|
|||
|
|
let cancelled = false;
|
|||
|
|
setOfficeDashboardLoading(true);
|
|||
|
|
setOfficeDashboard(null);
|
|||
|
|
backendApi
|
|||
|
|
.getOfficeDashboard()
|
|||
|
|
.then((res) => {
|
|||
|
|
if (!cancelled && res.success && res.data) setOfficeDashboard(res.data);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
if (!cancelled) console.error('[SummaryDashboard] Ошибка загрузки дашборда офиса:', err);
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
if (!cancelled) setOfficeDashboardLoading(false);
|
|||
|
|
});
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [allowedDashboardBlocks]);
|
|||
|
|
|
|||
|
|
// Загрузка опубликованных новостей компании (блок «Новости компании»)
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!canShowBlock('news')) return;
|
|||
|
|
let cancelled = false;
|
|||
|
|
const load = async () => {
|
|||
|
|
setCompanyNewsLoading(true);
|
|||
|
|
try {
|
|||
|
|
const list = await backendApi.getCompanyNews({ status: 'published', limit: 5 });
|
|||
|
|
if (!cancelled && Array.isArray(list)) setCompanyNews(list);
|
|||
|
|
} catch (err) {
|
|||
|
|
if (!cancelled) setCompanyNews([]);
|
|||
|
|
} finally {
|
|||
|
|
if (!cancelled) setCompanyNewsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
load();
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [allowedDashboardBlocks]);
|
|||
|
|
|
|||
|
|
// Открыть модалку просмотра новости по openNewsId (из уведомления)
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (openNewsId == null) {
|
|||
|
|
setViewNewsItem(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let cancelled = false;
|
|||
|
|
setViewNewsLoading(true);
|
|||
|
|
setViewNewsItem(null);
|
|||
|
|
backendApi
|
|||
|
|
.getCompanyNewsById(openNewsId)
|
|||
|
|
.then((item) => {
|
|||
|
|
if (!cancelled) {
|
|||
|
|
setViewNewsItem(item);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
if (!cancelled) setViewNewsItem(null);
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
if (!cancelled) setViewNewsLoading(false);
|
|||
|
|
});
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [openNewsId]);
|
|||
|
|
|
|||
|
|
const appsStats = useMemo(() => {
|
|||
|
|
const stats = {
|
|||
|
|
total: applications.length,
|
|||
|
|
new: 0,
|
|||
|
|
inProgress: 0,
|
|||
|
|
deferred: 0,
|
|||
|
|
done: 0,
|
|||
|
|
canceled: 0,
|
|||
|
|
overdue: 0,
|
|||
|
|
overduePercent: 0,
|
|||
|
|
completionRate: 0,
|
|||
|
|
active: 0,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (applications.length === 0) {
|
|||
|
|
return stats;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
stats.new = applications.filter(a => a.status === 'new').length;
|
|||
|
|
stats.inProgress = applications.filter(a => a.status === 'in_progress').length;
|
|||
|
|
stats.deferred = applications.filter(a => a.status === 'deferred').length;
|
|||
|
|
stats.done = applications.filter(a => a.status === 'done').length;
|
|||
|
|
stats.canceled = applications.filter(a => a.status === 'canceled').length;
|
|||
|
|
|
|||
|
|
// Используем поле isOverdue из БД, если есть, иначе вычисляем
|
|||
|
|
stats.overdue = applications.filter(a =>
|
|||
|
|
a.isOverdue !== undefined
|
|||
|
|
? a.isOverdue
|
|||
|
|
: (a.status !== 'done' && a.status !== 'canceled' && new Date(a.deadlineAt) < new Date())
|
|||
|
|
).length;
|
|||
|
|
|
|||
|
|
stats.active = stats.new + stats.inProgress + stats.deferred;
|
|||
|
|
|
|||
|
|
if (stats.total > 0) {
|
|||
|
|
stats.overduePercent = Math.round((stats.overdue / stats.total) * 100);
|
|||
|
|
}
|
|||
|
|
if (stats.done + stats.active > 0) {
|
|||
|
|
stats.completionRate = Math.round((stats.done / (stats.done + stats.active)) * 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return stats;
|
|||
|
|
}, [applications]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="animate-fade-in pb-20 space-y-8">
|
|||
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-xl font-bold text-slate-800">Сводка</h2>
|
|||
|
|
<p className="text-sm text-slate-500">Ключевые показатели для вашей роли.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 'Set Goals' Button - prominent placement */}
|
|||
|
|
{canShowBlock('goals') && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => setIsGoalsModalOpen(true)}
|
|||
|
|
className="flex items-center justify-center gap-2 px-6 py-3 bg-white border-2 border-primary-600 text-primary-700 rounded-2xl font-bold text-sm hover:bg-primary-50 transition-all shadow-sm active:scale-95 group"
|
|||
|
|
>
|
|||
|
|
<Target className="w-5 h-5 text-primary-600 group-hover:scale-110 transition-transform" />
|
|||
|
|
Стратегические цели
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* KPI Dashboards Section - Main focus */}
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Оперативные Панели</h3>
|
|||
|
|
<div className="h-px flex-1 bg-slate-200"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|||
|
|
{showDashboardCard('production', 'production') && (
|
|||
|
|
<DashboardCard title="Производство" icon={Wrench} iconColor="text-amber-500" onClick={() => setStatsModalDepartment('production')}>
|
|||
|
|
{metricsLoading ? (
|
|||
|
|
<div className="text-center py-4 text-slate-400 text-sm">Загрузка...</div>
|
|||
|
|
) : productionMetrics ? (
|
|||
|
|
<>
|
|||
|
|
{/* Состояние домов */}
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<span className="text-xs text-slate-600 font-bold">Состояние домов</span>
|
|||
|
|
<span className={`text-sm font-black ${
|
|||
|
|
productionMetrics.buildingCondition.condition === 'excellent' ? 'text-emerald-600' :
|
|||
|
|
productionMetrics.buildingCondition.condition === 'good' ? 'text-blue-600' :
|
|||
|
|
productionMetrics.buildingCondition.condition === 'fair' ? 'text-amber-600' :
|
|||
|
|
'text-red-600'
|
|||
|
|
}`}>
|
|||
|
|
{productionMetrics.buildingCondition.label}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-[10px] text-slate-400">
|
|||
|
|
Средний износ: {productionMetrics.buildingCondition.value > 0 ? `${productionMetrics.buildingCondition.value.toFixed(1)}%` : 'Н/Д'}
|
|||
|
|
({productionMetrics.buildingCondition.buildingsWithWear} из {productionMetrics.buildingCondition.totalBuildings} домов)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* График работ */}
|
|||
|
|
<div className="space-y-2 pt-2 border-t border-slate-100">
|
|||
|
|
<div className="flex justify-between items-center text-xs">
|
|||
|
|
<span className="text-slate-600 font-bold">График работ</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<span className="text-[10px] text-slate-500">В срок:</span>
|
|||
|
|
<span className="text-sm font-black text-emerald-600">{productionMetrics.workSchedule.onTimeRate}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<span className="text-[10px] text-slate-500">С опозданием:</span>
|
|||
|
|
<span className="text-sm font-black text-red-600">{productionMetrics.workSchedule.lateRate}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<span className="text-[10px] text-slate-500">Просрочено:</span>
|
|||
|
|
<span className="text-sm font-black text-amber-600">{productionMetrics.workSchedule.overdue}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Рейтинг SLA */}
|
|||
|
|
<div className="pt-2 border-t border-slate-100">
|
|||
|
|
<GaugeChart
|
|||
|
|
value={productionMetrics.slaRating}
|
|||
|
|
label={`Рейтинг SLA`}
|
|||
|
|
/>
|
|||
|
|
<div className="text-[10px] text-slate-400 mt-1 text-center">
|
|||
|
|
{productionMetrics.workSchedule.onTime} из {productionMetrics.workSchedule.onTime + productionMetrics.workSchedule.late} выполнено в срок
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-4 text-slate-400 text-sm">Нет данных</div>
|
|||
|
|
)}
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showDashboardCard('pr', 'pr') && (
|
|||
|
|
<DashboardCard title="PR и Клиентский Опыт" icon={Megaphone} iconColor="text-indigo-500" onClick={() => setStatsModalDepartment('pr')}>
|
|||
|
|
{prDashboardLoading && !prDashboard ? (
|
|||
|
|
<div className="text-center py-4 text-slate-400 text-sm">Загрузка...</div>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<GaugeChart value={prDashboard?.npsCompany ?? 0} label="Общий NPS по компании" />
|
|||
|
|
<Stat value={`${prDashboard?.csatPercent ?? 0}%`} label="Удовлетворенность (CSAT)" />
|
|||
|
|
<div className="pt-4 border-t border-slate-100 space-y-2">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Share2 className="w-4 h-4 text-indigo-500" />
|
|||
|
|
<span className="text-xs font-bold text-slate-600">SMM — подписчики</span>
|
|||
|
|
</div>
|
|||
|
|
{(prDashboardLoading && !prDashboard) ? (
|
|||
|
|
<p className="text-xs text-slate-400">Загрузка...</p>
|
|||
|
|
) : (() => {
|
|||
|
|
const smm = prDashboard?.smm ?? smmSummary;
|
|||
|
|
return smm && (smm.byChannel?.length > 0 || (smm.total ?? 0) > 0) ? (
|
|||
|
|
<>
|
|||
|
|
<div className="flex justify-between items-baseline">
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{(smm.total ?? 0).toLocaleString('ru-RU')}</p>
|
|||
|
|
<span className="text-[10px] text-slate-400 font-bold uppercase">всего</span>
|
|||
|
|
</div>
|
|||
|
|
{smm.byChannel && smm.byChannel.length > 0 ? (
|
|||
|
|
<div className="flex flex-wrap gap-x-3 gap-y-1 text-[10px]">
|
|||
|
|
{smm.byChannel.map((c: { id: number; name: string; type: string; subscribersCount: number }) => (
|
|||
|
|
<span key={c.id} className="flex items-center gap-1">
|
|||
|
|
{c.type === 'tg' && <Send className="w-3 h-3 text-sky-600" />}
|
|||
|
|
{c.type === 'vk' && <Share2 className="w-3 h-3 text-blue-600" />}
|
|||
|
|
{c.type === 'wa' && <MessageSquare className="w-3 h-3 text-emerald-600" />}
|
|||
|
|
<span className={c.type === 'tg' ? 'text-sky-600' : c.type === 'vk' ? 'text-blue-600' : c.type === 'wa' ? 'text-emerald-600' : 'text-slate-600'}>
|
|||
|
|
{c.type === 'tg' ? 'TG' : c.type === 'vk' ? 'VK' : c.type === 'wa' ? 'WA' : c.name} {(c.subscribersCount ?? 0).toLocaleString('ru-RU')}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-[10px] text-slate-400">Добавьте каналы в модуле PR → SMM</p>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-[10px] text-slate-400">Добавьте каналы в модуле PR → SMM</p>
|
|||
|
|
);
|
|||
|
|
})()}
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showDashboardCard('finance', 'finance') && (
|
|||
|
|
<DashboardCard title="Финансы" icon={Banknote} iconColor="text-emerald-500" onClick={() => setStatsModalDepartment('finance')}>
|
|||
|
|
<Stat value="1.2M ₽" label="Чистая прибыль (мес)" trend="up" />
|
|||
|
|
<Stat value="8.5M ₽" label="Общая дебиторка" />
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-lg text-center">
|
|||
|
|
<TrendingUp className="w-10 h-10 text-emerald-300 mx-auto opacity-50" />
|
|||
|
|
<p className="text-[10px] text-slate-400 mt-1 uppercase font-bold tracking-widest">Тренд прибыли</p>
|
|||
|
|
</div>
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showDashboardCard('development', 'development') && (
|
|||
|
|
<DashboardCard title="Отдел Развития" icon={Briefcase} iconColor="text-sky-500" onClick={() => setStatsModalDepartment('development')}>
|
|||
|
|
<Stat value="+3" label="Новых дома (квартал)" />
|
|||
|
|
<Stat value="12" label="Домов в воронке продаж" />
|
|||
|
|
<ProgressBar value={25} label="Конверсия" />
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showDashboardCard('legal', 'legal') && (
|
|||
|
|
<DashboardCard title="Юридический отдел" icon={Scale} iconColor="text-slate-600" onClick={() => setStatsModalDepartment('legal')}>
|
|||
|
|
<Stat value="2.1M ₽" label="Взыскано за квартал" trend="up"/>
|
|||
|
|
<Stat value="42" label="Активных судебных дел" />
|
|||
|
|
<ProgressBar value={85} label="Процент выигранных дел" />
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showDashboardCard('hr', 'hr') && (
|
|||
|
|
<DashboardCard title="Отдел Кадров (HR)" icon={UsersRound} iconColor="text-violet-500" onClick={() => setStatsModalDepartment('hr')}>
|
|||
|
|
<Stat value="24" label="Всего сотрудников" />
|
|||
|
|
<Stat value="2" label="Кандидатов в воронке" />
|
|||
|
|
<ProgressBar value={12} label="Текучесть кадров (год)" />
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{(showDashboardCard('office') || showDashboardCard('news')) && (allowedDashboardBlocks === 'all' ? currentUserRole !== 'MASTER' : true) && (
|
|||
|
|
<DashboardCard title="Офис" icon={LayoutGrid} iconColor="text-slate-600" onClick={() => setStatsModalDepartment('news')}>
|
|||
|
|
{officeDashboardLoading && !officeDashboard ? (
|
|||
|
|
<div className="text-center py-4 text-slate-400 text-sm">Загрузка...</div>
|
|||
|
|
) : officeDashboard ? (
|
|||
|
|
<>
|
|||
|
|
<Stat value={String(officeDashboard.companyNews.publishedThisMonth)} label="Новостей за месяц" />
|
|||
|
|
<Stat value={String(officeDashboard.repairRequests.open + officeDashboard.repairRequests.in_progress)} label="Заявок на ремонт (активных)" />
|
|||
|
|
<div className="pt-2 border-t border-slate-100 space-y-1">
|
|||
|
|
<div className="flex justify-between items-center text-xs">
|
|||
|
|
<span className="text-slate-600 font-bold">Документы</span>
|
|||
|
|
<span className="text-slate-800 font-black">{officeDashboard.documents.total}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between items-center text-xs">
|
|||
|
|
<span className="text-slate-500">Заявки на закупку</span>
|
|||
|
|
<span className="text-slate-700 font-bold">{officeDashboard.supplyRequests.total}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-4 text-slate-400 text-sm">Нет данных</div>
|
|||
|
|
)}
|
|||
|
|
</DashboardCard>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Новости компании — чтение и предложение новости */}
|
|||
|
|
{canShowBlock('news') && (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="flex items-center justify-between gap-3">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Новости компании</h3>
|
|||
|
|
<div className="h-px flex-1 bg-slate-200"></div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setIsSuggestNewsModalOpen(true)}
|
|||
|
|
className="flex items-center justify-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-xl font-bold text-sm hover:bg-primary-700 transition-all shadow-sm active:scale-95"
|
|||
|
|
>
|
|||
|
|
<Newspaper className="w-4 h-4" /> Предложить новость
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|||
|
|
{companyNewsLoading ? (
|
|||
|
|
<div className="p-6 text-center text-slate-400 text-sm">Загрузка...</div>
|
|||
|
|
) : companyNews.length === 0 ? (
|
|||
|
|
<div className="p-6 text-center text-slate-400 text-sm">Нет опубликованных новостей</div>
|
|||
|
|
) : (
|
|||
|
|
<ul className="divide-y divide-slate-100">
|
|||
|
|
{companyNews.map((n) => (
|
|||
|
|
<li key={n.id} className="p-4 hover:bg-slate-50/50 transition-colors">
|
|||
|
|
<div className="flex justify-between items-start gap-2">
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<p className="font-bold text-slate-800 truncate">{n.title}</p>
|
|||
|
|
<p className="text-xs text-slate-500 mt-0.5">
|
|||
|
|
{n.publishedAt ? new Date(n.publishedAt).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' }) : new Date(n.createdAt).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' })}
|
|||
|
|
{n.createdByName && ` · ${n.createdByName}`}
|
|||
|
|
</p>
|
|||
|
|
{n.body && <p className="text-sm text-slate-600 mt-1 line-clamp-2">{n.body}</p>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Мои задачи — список по ролям (исполнитель / соисполнитель / постановщик / наблюдатель) */}
|
|||
|
|
{canShowBlock('tasks') && (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Мои задачи</h3>
|
|||
|
|
<div className="h-px flex-1 bg-slate-200"></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|||
|
|
<div className="flex p-1 bg-slate-100/80 border-b border-slate-200 overflow-x-auto no-scrollbar gap-1">
|
|||
|
|
{([
|
|||
|
|
{ id: 'executor' as TaskMyRole, label: 'Я исполнитель', icon: UserIcon },
|
|||
|
|
{ id: 'co_executor' as TaskMyRole, label: 'Я соисполнитель', icon: UserPlus },
|
|||
|
|
{ id: 'assigner' as TaskMyRole, label: 'Я постановщик', icon: SendIcon },
|
|||
|
|
{ id: 'observer' as TaskMyRole, label: 'Я наблюдатель', icon: Eye },
|
|||
|
|
]).map(({ id, label, icon: Icon }) => (
|
|||
|
|
<button
|
|||
|
|
key={id}
|
|||
|
|
onClick={() => setTasksTab(id)}
|
|||
|
|
className={`flex-shrink-0 min-w-[7rem] flex items-center gap-2 px-4 py-2.5 text-xs font-bold whitespace-nowrap rounded-lg transition-all ${tasksTab === id ? 'bg-white text-primary-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
|
|||
|
|
>
|
|||
|
|
<Icon className="w-3.5 h-3.5" /> {label}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 min-h-[200px]">
|
|||
|
|
{dashboardTasks
|
|||
|
|
.filter(t => getTaskMyRole(t, currentUser.id) === tasksTab)
|
|||
|
|
.length === 0 ? (
|
|||
|
|
<p className="text-center py-8 text-slate-400 text-sm">Нет задач в этой роли</p>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{dashboardTasks
|
|||
|
|
.filter(t => getTaskMyRole(t, currentUser.id) === tasksTab)
|
|||
|
|
.map(task => (
|
|||
|
|
<DashboardTaskCard
|
|||
|
|
key={task.id}
|
|||
|
|
task={task}
|
|||
|
|
myRole={getTaskMyRole(task, currentUser.id)!}
|
|||
|
|
onToggleDone={() => {
|
|||
|
|
const nextStatus = task.status === 'done' ? 'new' : 'done';
|
|||
|
|
setDashboardTasks(prev =>
|
|||
|
|
prev.map(t => (t.id === task.id ? { ...t, status: nextStatus as BuildingTask['status'], updatedAt: new Date().toISOString() } : t))
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
onOpen={() => { setEditingTask(task); setIsTaskModalOpen(true); }}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 border-t border-slate-100">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => { setEditingTask(null); setIsTaskModalOpen(true); }}
|
|||
|
|
className="w-full py-3 border-2 border-dashed border-slate-200 rounded-xl text-slate-500 hover:border-primary-300 hover:text-primary-600 hover:bg-primary-50/50 text-sm font-bold flex items-center justify-center gap-2 transition-colors"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" /> Добавить задачу
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка задачи (без фото отчёта) */}
|
|||
|
|
{isTaskModalOpen && (
|
|||
|
|
<DashboardTaskModal
|
|||
|
|
isOpen={isTaskModalOpen}
|
|||
|
|
onClose={() => { setIsTaskModalOpen(false); setEditingTask(null); }}
|
|||
|
|
currentUser={currentUser}
|
|||
|
|
task={editingTask}
|
|||
|
|
onSave={(task) => {
|
|||
|
|
setDashboardTasks(prev => {
|
|||
|
|
const idx = prev.findIndex(t => t.id === task.id);
|
|||
|
|
if (idx >= 0) return prev.map((t, i) => (i === idx ? task : t));
|
|||
|
|
return [...prev, task];
|
|||
|
|
});
|
|||
|
|
setIsTaskModalOpen(false);
|
|||
|
|
setEditingTask(null);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка продвинутой статистики по отделу */}
|
|||
|
|
{statsModalDepartment && (
|
|||
|
|
<DepartmentStatsModal
|
|||
|
|
title={
|
|||
|
|
statsModalDepartment === 'production' ? 'Производство' :
|
|||
|
|
statsModalDepartment === 'pr' ? 'PR и Клиентский Опыт' :
|
|||
|
|
statsModalDepartment === 'finance' ? 'Финансы' :
|
|||
|
|
statsModalDepartment === 'development' ? 'Отдел Развития' :
|
|||
|
|
statsModalDepartment === 'legal' ? 'Юридический отдел' :
|
|||
|
|
statsModalDepartment === 'hr' ? 'Отдел Кадров (HR)' :
|
|||
|
|
statsModalDepartment === 'news' ? 'Офис' :
|
|||
|
|
'Новости компании'
|
|||
|
|
}
|
|||
|
|
blockId={statsModalDepartment}
|
|||
|
|
onClose={() => setStatsModalDepartment(null)}
|
|||
|
|
onGoToModule={onNavigateToModule ?? undefined}
|
|||
|
|
>
|
|||
|
|
{statsModalDepartment === 'production' && (
|
|||
|
|
<div className="space-y-8">
|
|||
|
|
{productionDashboardLoading ? (
|
|||
|
|
<p className="text-slate-400 text-sm">Загрузка дашборда...</p>
|
|||
|
|
) : !productionDashboard ? (
|
|||
|
|
<p className="text-slate-400 text-sm">Нет данных</p>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
{/* 4.1 Состояние домов, SLA, график работ */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Wrench className="w-4 h-4" /> Состояние и график</h4>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Состояние домов</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.buildingCondition.label}</p>
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">Средний износ {productionDashboard.buildingCondition.value > 0 ? `${productionDashboard.buildingCondition.value.toFixed(1)}%` : 'Н/Д'} · {productionDashboard.buildingCondition.buildingsWithWear} из {productionDashboard.buildingCondition.totalBuildings} домов</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Рейтинг SLA</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{productionDashboard.slaRating}%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-3 pt-3 border-t border-slate-200">
|
|||
|
|
<p className="text-sm font-bold text-slate-700 mb-1">График работ</p>
|
|||
|
|
<p className="text-sm text-slate-600">В срок: <span className="font-bold text-emerald-600">{productionDashboard.workSchedule.onTimeRate}%</span> · С опозданием: <span className="font-bold text-red-600">{productionDashboard.workSchedule.lateRate}%</span> · Просрочено: <span className="font-bold text-amber-600">{productionDashboard.workSchedule.overdue}</span></p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4.2 По участкам */}
|
|||
|
|
{productionDashboard.districts && productionDashboard.districts.length > 0 && (
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><LayoutGrid className="w-4 h-4" /> По участкам</h4>
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<table className="w-full text-sm border-collapse">
|
|||
|
|
<thead>
|
|||
|
|
<tr className="border-b border-slate-200">
|
|||
|
|
<th className="text-left py-2 font-bold text-slate-600">Участок</th>
|
|||
|
|
<th className="text-left py-2 font-bold text-slate-600">Руководитель</th>
|
|||
|
|
<th className="text-right py-2 font-bold text-slate-600">Домов</th>
|
|||
|
|
<th className="text-right py-2 font-bold text-slate-600">Заявок</th>
|
|||
|
|
<th className="text-right py-2 font-bold text-slate-600">Выполнено</th>
|
|||
|
|
<th className="text-right py-2 font-bold text-slate-600">Просрочено</th>
|
|||
|
|
<th className="text-right py-2 font-bold text-slate-600">Успеваемость %</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{productionDashboard.districts.map((d) => (
|
|||
|
|
<tr key={d.districtId} className="border-b border-slate-100">
|
|||
|
|
<td className="py-2 font-medium text-slate-800">{d.districtName}</td>
|
|||
|
|
<td className="py-2 text-slate-600">{d.managerName}</td>
|
|||
|
|
<td className="py-2 text-right">{d.buildingCount}</td>
|
|||
|
|
<td className="py-2 text-right">{d.totalApplications}</td>
|
|||
|
|
<td className="py-2 text-right text-emerald-600">{d.totalCompleted}</td>
|
|||
|
|
<td className="py-2 text-right text-amber-600">{d.totalOverdue}</td>
|
|||
|
|
<td className="py-2 text-right font-bold">{Math.round(d.completionRate)}%</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 4.3 Заявки — временные срезы */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Clock className="w-4 h-4" /> Заявки — временные срезы</h4>
|
|||
|
|
<div className="grid grid-cols-3 gap-4">
|
|||
|
|
<div className="p-4 bg-amber-50 rounded-xl border border-amber-100">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Сегодня</p>
|
|||
|
|
<p className="text-lg font-black text-slate-800">Создано: {productionDashboard.applicationsTimeSlices.today.created}</p>
|
|||
|
|
<p className="text-sm text-slate-600">Закрыто: {productionDashboard.applicationsTimeSlices.today.closed} · Просрочено: {productionDashboard.applicationsTimeSlices.today.overdueNow}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-blue-50 rounded-xl border border-blue-100">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Неделя</p>
|
|||
|
|
<p className="text-lg font-black text-slate-800">Создано: {productionDashboard.applicationsTimeSlices.week.created}</p>
|
|||
|
|
<p className="text-sm text-slate-600">Закрыто: {productionDashboard.applicationsTimeSlices.week.closed} · Просрочено: {productionDashboard.applicationsTimeSlices.week.overdueNow}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl border border-slate-200">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Месяц</p>
|
|||
|
|
<p className="text-lg font-black text-slate-800">Создано: {productionDashboard.applicationsTimeSlices.month.created}</p>
|
|||
|
|
<p className="text-sm text-slate-600">Закрыто: {productionDashboard.applicationsTimeSlices.month.closed} · Просрочено: {productionDashboard.applicationsTimeSlices.month.overdueNow}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4.4 Заявки — общая сводка */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Inbox className="w-4 h-4" /> Заявки — сводка</h4>
|
|||
|
|
<div className="flex flex-wrap gap-3">
|
|||
|
|
<span className="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-xs font-bold">Новые: {productionDashboard.applicationsSummary.new}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">В работе: {productionDashboard.applicationsSummary.inProgress}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-orange-50 text-orange-700 rounded-lg text-xs font-bold">Отложено: {productionDashboard.applicationsSummary.deferred}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Выполнено: {productionDashboard.applicationsSummary.done}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold flex items-center gap-1"><AlertTriangle className="w-3 h-3" /> Просрочено: {productionDashboard.applicationsSummary.overdue}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Индекс SLA: {productionDashboard.applicationsSummary.completionRate}%</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4.5 Загрузка мастеров */}
|
|||
|
|
{productionDashboard.topPerformers && productionDashboard.topPerformers.length > 0 && (
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><UsersRound className="w-4 h-4" /> Загрузка мастеров</h4>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{productionDashboard.topPerformers.map((p, i) => (
|
|||
|
|
<li key={i} className="flex justify-between items-center py-1.5 px-3 rounded-lg bg-slate-50">
|
|||
|
|
<span className="font-medium text-slate-800">{p.name}</span>
|
|||
|
|
<span className={`font-bold ${p.activeCount > 5 ? 'text-amber-600' : 'text-slate-700'}`}>{p.activeCount} активных</span>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 4.6 План работ */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><CalendarDays className="w-4 h-4" /> План работ (текущий месяц)</h4>
|
|||
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Всего работ</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.planWorks.total}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-emerald-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Выполнено</p>
|
|||
|
|
<p className="text-xl font-black text-emerald-700">{productionDashboard.planWorks.completed}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-amber-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Перенесено</p>
|
|||
|
|
<p className="text-xl font-black text-amber-700">{productionDashboard.planWorks.carriedOver}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Смета (мес)</p>
|
|||
|
|
<p className="text-lg font-black text-slate-800">{productionDashboard.planWorks.estimatedCostMonth > 0 ? `${(productionDashboard.planWorks.estimatedCostMonth / 1000).toFixed(0)}k ₽` : '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{productionDashboard.planWorks.byDistrict && productionDashboard.planWorks.byDistrict.length > 0 && (
|
|||
|
|
<p className="text-xs text-slate-500 mt-2">По участкам: {productionDashboard.planWorks.byDistrict.map((d) => `${d.districtId}: ${d.total} работ, выполнено ${d.completed}`).join('; ')}</p>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4.7 Обходы (осмотры) */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Camera className="w-4 h-4" /> Обходы (осмотры)</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.inspections.countMonth}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За квартал</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.inspections.countQuarter}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Последний осмотр</p>
|
|||
|
|
<p className="text-sm font-bold text-slate-800">{productionDashboard.inspections.lastDate ? new Date(productionDashboard.inspections.lastDate).toLocaleDateString('ru-RU') : '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4.8 Списания */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Package className="w-4 h-4" /> Списания</h4>
|
|||
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Сегодня</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.writeOffs.countToday}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За неделю</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.writeOffs.countWeek}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.writeOffs.countMonth}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-emerald-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Сумма (мес)</p>
|
|||
|
|
<p className="text-lg font-black text-emerald-700">{productionDashboard.writeOffs.sumMonth > 0 ? `${(productionDashboard.writeOffs.sumMonth / 1000).toFixed(0)}k ₽` : '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{productionDashboard.districtInventorySummary && productionDashboard.districtInventorySummary.length > 0 && (
|
|||
|
|
<p className="text-xs text-slate-500 mt-2">Остатки складов участков: {productionDashboard.districtInventorySummary.map((d) => `${d.districtName}: ${d.totalQuantity} ед.`).join('; ')}</p>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4.9 Обходы счетчиков */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Gauge className="w-4 h-4" /> Обходы счетчиков</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{productionDashboard.meterRounds.countMonth}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Последний обход</p>
|
|||
|
|
<p className="text-sm font-bold text-slate-800">{productionDashboard.meterRounds.lastDate ? new Date(productionDashboard.meterRounds.lastDate).toLocaleDateString('ru-RU') : '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{statsModalDepartment === 'pr' && (
|
|||
|
|
<div className="space-y-8">
|
|||
|
|
{prDashboardLoading ? (
|
|||
|
|
<p className="text-slate-400 text-sm">Загрузка дашборда...</p>
|
|||
|
|
) : !prDashboard ? (
|
|||
|
|
<p className="text-slate-400 text-sm">Нет данных</p>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
{/* 1. NPS по компании */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Megaphone className="w-4 h-4" /> NPS по компании</h4>
|
|||
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
|||
|
|
<div className="p-4 bg-indigo-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Индекс NPS</p>
|
|||
|
|
<p className="text-2xl font-black text-indigo-700">{prDashboard.npsCompany}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Ответов за месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.npsResponsesCount}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Средний балл</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.npsAvgScore > 0 ? prDashboard.npsAvgScore.toFixed(1) : '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Промоутеры: {prDashboard.npsPromoters}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Нейтралы: {prDashboard.npsPassives}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-xs font-bold">Критики: {prDashboard.npsDetractors}</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 2. Удовлетворённость (CSAT) */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Gauge className="w-4 h-4" /> Удовлетворённость (CSAT)</h4>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">CSAT, %</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">{prDashboard.csatPercent}%</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Средний рейтинг отзывов</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.reviewsAvgRating > 0 ? prDashboard.reviewsAvgRating.toFixed(1) : '—'}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="col-span-2 p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Всего отзывов</p>
|
|||
|
|
<p className="text-lg font-black text-slate-800">{prDashboard.reviewsTotal}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 3. SMM — подписчики */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Share2 className="w-4 h-4" /> SMM — подписчики</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-4 bg-indigo-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Всего</p>
|
|||
|
|
<p className="text-2xl font-black text-indigo-700">{prDashboard.smm.total.toLocaleString('ru-RU')}</p>
|
|||
|
|
</div>
|
|||
|
|
{prDashboard.smm.byChannel && prDashboard.smm.byChannel.length > 0 && (
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{prDashboard.smm.byChannel.map((c) => (
|
|||
|
|
<span key={c.id} className="px-3 py-1.5 bg-slate-100 rounded-lg text-xs font-bold text-slate-700">
|
|||
|
|
{c.type === 'tg' ? 'TG' : c.type === 'vk' ? 'VK' : c.type === 'wa' ? 'WA' : c.name}: {c.subscribersCount.toLocaleString('ru-RU')}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{(!prDashboard.smm.byChannel || prDashboard.smm.byChannel.length === 0) && prDashboard.smm.total === 0 && (
|
|||
|
|
<p className="text-xs text-slate-400 mt-2">Добавьте каналы в модуле PR → SMM</p>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4. Отзывы */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><MessageSquare className="w-4 h-4" /> Отзывы</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {prDashboard.reviewsStats.total}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">Новые: {prDashboard.reviewsStats.new_count}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Обработано: {prDashboard.reviewsStats.processed_count}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Положительные: {prDashboard.reviewsStats.positive_count}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-xs font-bold">Негативные: {prDashboard.reviewsStats.negative_count}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">Яндекс: {prDashboard.reviewsStats.yandex_count}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">2GIS: {prDashboard.reviewsStats.gis2_count}</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 5. Инциденты */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><AlertTriangle className="w-4 h-4" /> Инциденты</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {prDashboard.incidentsSummary.total}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-xs font-bold">Открытые: {prDashboard.incidentsSummary.open}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">В работе: {prDashboard.incidentsSummary.in_progress}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Закрыты: {prDashboard.incidentsSummary.resolved}</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 6. Мероприятия */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><PartyPopper className="w-4 h-4" /> Мероприятия</h4>
|
|||
|
|
<div className="grid grid-cols-3 gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.events.countMonth}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Предстоящие</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.events.upcoming}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Прошедшие</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.events.past}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 7. Отчёты жителям */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><FileText className="w-4 h-4" /> Отчёты жителям</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Всего отчётов</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.residentReports.total}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Опубликовано за месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.residentReports.publishedThisMonth}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 8. Фото отчёты */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Camera className="w-4 h-4" /> Фото отчёты</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Всего</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.workPhotos.total}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">За месяц</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{prDashboard.workPhotos.thisMonth}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 9. NPS опросы */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><ClipboardList className="w-4 h-4" /> NPS опросы</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2 mb-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {prDashboard.npsSurveys.total}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-xs font-bold">Активных: {prDashboard.npsSurveys.active}</span>
|
|||
|
|
</div>
|
|||
|
|
{prDashboard.npsSurveys.list && prDashboard.npsSurveys.list.length > 0 && (
|
|||
|
|
<ul className="space-y-1.5 text-sm text-slate-600">
|
|||
|
|
{prDashboard.npsSurveys.list.map((s) => (
|
|||
|
|
<li key={s.id} className="flex justify-between items-center py-1 border-b border-slate-100 last:border-0">
|
|||
|
|
<span className="font-medium truncate mr-2">{s.title}</span>
|
|||
|
|
<span className="text-xs font-bold text-slate-500">{s.responsesCount} ответов · {s.status}</span>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 10. Отложенные посты */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Send className="w-4 h-4" /> Отложенные посты</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Черновик: {prDashboard.scheduledPosts.draft}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">На модерации: {prDashboard.scheduledPosts.pending_approval}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">Одобрено: {prDashboard.scheduledPosts.approved}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Опубликовано: {prDashboard.scheduledPosts.published}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-xs font-bold">Отклонено: {prDashboard.scheduledPosts.rejected}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">На редактировании: {prDashboard.scheduledPosts.edited}</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 11. Негатив в работе */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><AlertTriangle className="w-4 h-4" /> Негатив в работе</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-red-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Открытые инциденты</p>
|
|||
|
|
<p className="text-xl font-black text-red-700">{prDashboard.negative.openIncidents}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-amber-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Негативных отзывов</p>
|
|||
|
|
<p className="text-xl font-black text-amber-700">{prDashboard.negative.negativeReviewsCount}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{statsModalDepartment === 'finance' && (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="p-4 bg-emerald-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Чистая прибыль (мес)</p>
|
|||
|
|
<p className="text-2xl font-black text-emerald-700">1.2M ₽</p>
|
|||
|
|
<span className="text-xs text-emerald-600 font-bold flex items-center gap-1 mt-1"><TrendingUp className="w-3 h-3" /> тренд вверх</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Общая дебиторка</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">8.5M ₽</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600">В модуле «Финансы» доступны кассовый план, реестр счетов, платёжный календарь и отчёты по домам.</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{statsModalDepartment === 'development' && (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="p-4 bg-sky-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Новых дома (квартал)</p>
|
|||
|
|
<p className="text-2xl font-black text-sky-700">+3</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Домов в воронке</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">12</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="col-span-2 p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-2">Конверсия</p>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-3"><div className="bg-sky-500 h-3 rounded-full" style={{ width: '25%' }} /></div>
|
|||
|
|
<p className="text-sm font-bold text-slate-700 mt-1">25%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600">В модуле «Развитие» — воронка продаж, ОСС, маркетинг и технический аудит.</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{statsModalDepartment === 'legal' && (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="p-4 bg-slate-100 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Взыскано за квартал</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">2.1M ₽</p>
|
|||
|
|
<span className="text-xs text-emerald-600 font-bold flex items-center gap-1 mt-1"><TrendingUp className="w-3 h-3" /> тренд вверх</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Активных судебных дел</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">42</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="col-span-2 p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-2">Процент выигранных дел</p>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-3"><div className="bg-emerald-500 h-3 rounded-full" style={{ width: '85%' }} /></div>
|
|||
|
|
<p className="text-sm font-bold text-slate-700 mt-1">85%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600">В модуле «Юр. отдел» — досудебная работа, договоры, судебные дела и проверки контрагентов.</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{statsModalDepartment === 'hr' && (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="p-4 bg-violet-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Всего сотрудников</p>
|
|||
|
|
<p className="text-2xl font-black text-violet-700">24</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">Кандидатов в воронке</p>
|
|||
|
|
<p className="text-2xl font-black text-slate-800">2</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="col-span-2 p-4 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-2">Текучесть кадров (год)</p>
|
|||
|
|
<div className="w-full bg-slate-200 rounded-full h-3"><div className="bg-violet-500 h-3 rounded-full" style={{ width: '12%' }} /></div>
|
|||
|
|
<p className="text-sm font-bold text-slate-700 mt-1">12%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600">В модуле «Кадры» — штат, вакансии, кандидаты, отпуска и календарь событий.</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{statsModalDepartment === 'news' && (
|
|||
|
|
<div className="space-y-8">
|
|||
|
|
{officeDashboardLoading ? (
|
|||
|
|
<p className="text-slate-400 text-sm">Загрузка дашборда...</p>
|
|||
|
|
) : !officeDashboard ? (
|
|||
|
|
<p className="text-slate-400 text-sm">Нет данных</p>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
{/* 1. Новости компании */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Newspaper className="w-4 h-4" /> Новости компании</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {officeDashboard.companyNews.total}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Опубликовано: {officeDashboard.companyNews.published}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">Черновики: {officeDashboard.companyNews.draft}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">На модерации: {officeDashboard.companyNews.pending}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-xs font-bold">За месяц: {officeDashboard.companyNews.publishedThisMonth}</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 2. Оборудование */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Package className="w-4 h-4" /> Оборудование</h4>
|
|||
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Всего</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.equipment.total}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-emerald-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Хорошее</p>
|
|||
|
|
<p className="text-xl font-black text-emerald-700">{officeDashboard.equipment.byCondition.good}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-amber-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Удовлетв.</p>
|
|||
|
|
<p className="text-xl font-black text-amber-700">{officeDashboard.equipment.byCondition.fair}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-red-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Плохое</p>
|
|||
|
|
<p className="text-xl font-black text-red-700">{officeDashboard.equipment.byCondition.poor}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="col-span-2 sm:col-span-4 p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Гарантия истекает (30 дн.)</p>
|
|||
|
|
<p className="text-lg font-black text-slate-800">{officeDashboard.equipment.warrantyExpiringSoon}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 3. Заявки на ремонт */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Wrench className="w-4 h-4" /> Заявки на ремонт</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {officeDashboard.repairRequests.total}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-xs font-bold">Открытые: {officeDashboard.repairRequests.open}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">В работе: {officeDashboard.repairRequests.in_progress}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">Выполнено: {officeDashboard.repairRequests.completed}</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 4. Заявки на закупку */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Package className="w-4 h-4" /> Заявки на закупку</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {officeDashboard.supplyRequests.total}</span>
|
|||
|
|
{Object.entries(officeDashboard.supplyRequests.byStatus || {}).map(([status, cnt]) => (
|
|||
|
|
<span key={status} className="px-3 py-1.5 bg-slate-50 text-slate-700 rounded-lg text-xs font-bold">{status}: {cnt}</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 5. Инвентарь */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Package className="w-4 h-4" /> Инвентарь</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Позиций всего</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.inventory.totalItems}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-amber-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Низкий остаток</p>
|
|||
|
|
<p className="text-xl font-black text-amber-700">{officeDashboard.inventory.lowStockCount}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 6. Документооборот */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><FileText className="w-4 h-4" /> Документооборот</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2 mb-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {officeDashboard.documents.total}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">Входящие: {officeDashboard.documents.incoming}</span>
|
|||
|
|
<span className="px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-xs font-bold">Исходящие: {officeDashboard.documents.outgoing}</span>
|
|||
|
|
</div>
|
|||
|
|
{Object.keys(officeDashboard.documents.byStatus || {}).length > 0 && (
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{Object.entries(officeDashboard.documents.byStatus).map(([status, cnt]) => (
|
|||
|
|
<span key={status} className="px-2 py-1 bg-slate-50 text-slate-600 rounded text-xs font-bold">{status}: {cnt}</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 7. Заказы */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Package className="w-4 h-4" /> Заказы</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<span className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold">Всего: {officeDashboard.orders.total}</span>
|
|||
|
|
{Object.entries(officeDashboard.orders.byStatus || {}).map(([status, cnt]) => (
|
|||
|
|
<span key={status} className="px-3 py-1.5 bg-slate-50 text-slate-700 rounded-lg text-xs font-bold">{status}: {cnt}</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 8. Совещания */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><Calendar className="w-4 h-4" /> Совещания</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">На эту неделю</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.meetings.thisWeek}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Предстоящие</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.meetings.upcoming}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 9. Переговорные */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><LayoutGrid className="w-4 h-4" /> Переговорные</h4>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl inline-block">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Комнат</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.meetingRooms.total}</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 10. База знаний */}
|
|||
|
|
<section>
|
|||
|
|
<h4 className="text-sm font-bold text-slate-500 uppercase mb-3 flex items-center gap-2"><ClipboardList className="w-4 h-4" /> База знаний</h4>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Категорий</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.knowledgeBase.categoriesCount}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|||
|
|
<p className="text-xs text-slate-500 uppercase font-bold">Статей</p>
|
|||
|
|
<p className="text-xl font-black text-slate-800">{officeDashboard.knowledgeBase.articlesCount}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</DepartmentStatsModal>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Strategic Goals Modal */}
|
|||
|
|
{isGoalsModalOpen && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-fade-in" onClick={() => setIsGoalsModalOpen(false)}>
|
|||
|
|
<div className="bg-slate-50 rounded-[2rem] w-full max-w-5xl max-h-[90vh] overflow-y-auto shadow-2xl animate-slide-up" onClick={e => e.stopPropagation()}>
|
|||
|
|
{/* Modal Header */}
|
|||
|
|
<div className="p-8 border-b border-slate-200 flex justify-between items-start sticky top-0 bg-slate-50 z-10 rounded-t-[2rem]">
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center gap-2 text-primary-600 mb-1">
|
|||
|
|
<Target className="w-6 h-6" />
|
|||
|
|
<span className="text-xs font-black uppercase tracking-[0.2em]">Стратегическое планирование</span>
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-3xl font-black text-slate-900">Цели компании 2024</h3>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setIsGoalsModalOpen(false)}
|
|||
|
|
className="p-3 bg-white hover:bg-red-50 text-slate-400 hover:text-red-500 rounded-2xl transition-all shadow-sm border border-slate-200"
|
|||
|
|
>
|
|||
|
|
<X className="w-6 h-6" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Modal Content */}
|
|||
|
|
<div className="p-8">
|
|||
|
|
{filteredGoals.length > 0 ? (
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|||
|
|
{filteredGoals.map(goal => <GoalCard key={goal.id} goal={goal} />)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="py-20 text-center text-slate-400 italic">
|
|||
|
|
Нет доступных целей для вашей роли
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Modal Footer */}
|
|||
|
|
<div className="p-8 bg-white border-t border-slate-200 rounded-b-[2rem] flex justify-between items-center">
|
|||
|
|
<p className="text-sm text-slate-500 font-medium italic">Обновлено: {new Date().toLocaleDateString('ru-RU')}</p>
|
|||
|
|
{currentUserRole === 'DIRECTOR' && (
|
|||
|
|
<button className="flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 transition-all shadow-lg active:scale-95">
|
|||
|
|
<Pencil className="w-4 h-4" /> Редактировать показатели
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка «Предложить новость» */}
|
|||
|
|
{isSuggestNewsModalOpen && (
|
|||
|
|
<SuggestNewsModal
|
|||
|
|
onClose={() => setIsSuggestNewsModalOpen(false)}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
setIsSuggestNewsModalOpen(false);
|
|||
|
|
backendApi.getCompanyNews({ status: 'published', limit: 5 }).then((list) => Array.isArray(list) && setCompanyNews(list));
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка просмотра новости (из уведомления) */}
|
|||
|
|
{openNewsId != null && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-fade-in" onClick={() => onCloseNews?.()}>
|
|||
|
|
<div className="bg-white rounded-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto shadow-2xl animate-slide-up" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="p-6 border-b border-slate-200 flex justify-between items-start sticky top-0 bg-white z-10 rounded-t-2xl">
|
|||
|
|
<h3 className="text-lg font-black text-slate-900">Новость компании</h3>
|
|||
|
|
<button type="button" onClick={() => onCloseNews?.()} className="p-2 text-slate-400 hover:text-slate-600 rounded-xl hover:bg-slate-100">
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
{viewNewsLoading ? (
|
|||
|
|
<div className="text-center py-8 text-slate-400 text-sm">Загрузка...</div>
|
|||
|
|
) : viewNewsItem ? (
|
|||
|
|
<>
|
|||
|
|
<p className="font-bold text-slate-800 text-xl">{viewNewsItem.title}</p>
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">
|
|||
|
|
{viewNewsItem.publishedAt
|
|||
|
|
? new Date(viewNewsItem.publishedAt).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
|
|||
|
|
: new Date(viewNewsItem.createdAt).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })}
|
|||
|
|
{viewNewsItem.createdByName && ` · ${viewNewsItem.createdByName}`}
|
|||
|
|
</p>
|
|||
|
|
{viewNewsItem.body && <div className="mt-4 text-slate-700 whitespace-pre-wrap">{viewNewsItem.body}</div>}
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-slate-500 text-sm">Новость не найдена</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ====================================================================================
|
|||
|
|
// Suggest News Modal — предложить новость (черновик), выбор уведомлений по отделам и лично
|
|||
|
|
// ====================================================================================
|
|||
|
|
const DEPT_LABELS: Record<Department, string> = {
|
|||
|
|
production: 'Производство',
|
|||
|
|
pr: 'PR',
|
|||
|
|
finance: 'Финансы',
|
|||
|
|
development: 'Развитие',
|
|||
|
|
legal: 'Юр. отдел',
|
|||
|
|
hr: 'Кадры',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const SuggestNewsModal: React.FC<{ onClose: () => void; onSuccess: () => void }> = ({ onClose, onSuccess }) => {
|
|||
|
|
const [title, setTitle] = useState('');
|
|||
|
|
const [body, setBody] = useState('');
|
|||
|
|
const [notifyDepartments, setNotifyDepartments] = useState<Department[]>([]);
|
|||
|
|
const [notifyEmployeeIds, setNotifyEmployeeIds] = useState<string[]>([]);
|
|||
|
|
const [employeesList, setEmployeesList] = useState<Array<{ id: string; name: string }>>([]);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
backendApi.getEmployeesList().then((list) => setEmployeesList(Array.isArray(list) ? list : [])).catch(() => setEmployeesList([]));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const toggleDepartment = (d: Department) => {
|
|||
|
|
setNotifyDepartments((prev) => (prev.includes(d) ? prev.filter((x) => x !== d) : [...prev, d]));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleEmployee = (id: string) => {
|
|||
|
|
setNotifyEmployeeIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (!title.trim()) {
|
|||
|
|
setError('Укажите заголовок');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setError(null);
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
await backendApi.createCompanyNews({
|
|||
|
|
title: title.trim(),
|
|||
|
|
body: body.trim() || null,
|
|||
|
|
status: 'draft',
|
|||
|
|
notifyDepartments: notifyDepartments.length ? notifyDepartments : undefined,
|
|||
|
|
notifyEmployeeIds: notifyEmployeeIds.length ? notifyEmployeeIds : undefined,
|
|||
|
|
});
|
|||
|
|
window.dispatchEvent(new CustomEvent('mkd-news-changed'));
|
|||
|
|
onSuccess();
|
|||
|
|
} catch (err: any) {
|
|||
|
|
setError(err?.message || 'Не удалось сохранить новость');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-fade-in" onClick={onClose}>
|
|||
|
|
<div className="bg-white rounded-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto shadow-2xl animate-slide-up" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="p-6 border-b border-slate-200 flex justify-between items-center sticky top-0 bg-white z-10 rounded-t-2xl">
|
|||
|
|
<h3 className="text-xl font-black text-slate-900">Предложить новость</h3>
|
|||
|
|
<button type="button" onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600 rounded-xl hover:bg-slate-100">
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Заголовок *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={title}
|
|||
|
|
onChange={(e) => setTitle(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-medium text-slate-800 placeholder-slate-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|||
|
|
placeholder="Заголовок новости"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Текст</label>
|
|||
|
|
<textarea
|
|||
|
|
value={body}
|
|||
|
|
onChange={(e) => setBody(e.target.value)}
|
|||
|
|
rows={4}
|
|||
|
|
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-y"
|
|||
|
|
placeholder="Текст новости"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-2">Уведомить по отделам</label>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{(['production', 'pr', 'finance', 'development', 'legal', 'hr'] as Department[]).map((d) => (
|
|||
|
|
<button
|
|||
|
|
key={d}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => toggleDepartment(d)}
|
|||
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-colors ${notifyDepartments.includes(d) ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
|||
|
|
>
|
|||
|
|
{DEPT_LABELS[d]}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-2">Уведомить лично (сотрудники)</label>
|
|||
|
|
<div className="max-h-32 overflow-y-auto border border-slate-200 rounded-xl p-2 space-y-1">
|
|||
|
|
{employeesList.length === 0 && <p className="text-xs text-slate-400 py-2">Список сотрудников загружается...</p>}
|
|||
|
|
{employeesList.map((emp) => (
|
|||
|
|
<label key={emp.id} className="flex items-center gap-2 py-1 px-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={notifyEmployeeIds.includes(emp.id)}
|
|||
|
|
onChange={() => toggleEmployee(emp.id)}
|
|||
|
|
className="rounded border-slate-300 text-primary-600 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
<span className="text-sm text-slate-700">{emp.name}</span>
|
|||
|
|
</label>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{error && <p className="text-sm text-red-600 font-medium">{error}</p>}
|
|||
|
|
<div className="flex gap-3 pt-2">
|
|||
|
|
<button type="button" onClick={onClose} className="flex-1 py-3 border border-slate-200 rounded-xl font-bold text-slate-600 hover:bg-slate-50">
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
<button type="submit" disabled={loading} className="flex-1 py-3 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 disabled:opacity-50">
|
|||
|
|
{loading ? 'Сохранение...' : 'Сохранить как черновик'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|