+ )} + +

+ +

DigOpsCC

+ +

+ {filteredItems.map((item) => { + const Icon = item.icon; + return ( + cn( + "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200", + isActive + ? "bg-indigo-50 text-indigo-700 shadow-sm" + : "text-slate-600 hover:bg-slate-50 hover:text-slate-900" + )} + > + {({ isActive }) => ( + <> + + {item.label} + {isActive && ( + + )} + + )} + + ); + })} +

+ +

+ v2.4.0 Высокопроизводительное ядро +

+ +

+ + ); +}; diff --git a/src/components/Layout/TopBar.tsx b/src/components/Layout/TopBar.tsx new file mode 100644 index 0000000..17558f7 --- /dev/null +++ b/src/components/Layout/TopBar.tsx @@ -0,0 +1,123 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { useAuth } from '../../context/AuthContext'; +import { Bell, Search, ChevronDown, User as UserIcon, Menu } from 'lucide-react'; +import { cn } from '../../lib/utils'; +import { UserStatus, UserRole } from '../../types'; + +const statusColors = { + [UserStatus.ONLINE]: 'bg-emerald-500', + [UserStatus.AWAY]: 'bg-amber-500', + [UserStatus.BUSY]: 'bg-rose-500', + [UserStatus.OFFLINE]: 'bg-slate-400', +}; + +export const TopBar: React.FC<{ onMenuClick: () => void }> = ({ onMenuClick }) => { + const { user, logout, setStatus } = useAuth(); + const [showStatusMenu, setShowStatusMenu] = React.useState(false); + + const roleLabels: Record = { + [UserRole.OPERATOR]: 'Оператор', + [UserRole.SUPERVISOR]: 'Супервайзер', + [UserRole.ADMIN]: 'Администратор', + [UserRole.ANALYST]: 'Аналитик', + }; + + if (!user) return null; + + return ( +

+ +

+ + +

+ +

+ + +

+ +

setShowStatusMenu(!showStatusMenu)}> + {user.name} + {roleLabels[user.role]} +

+ +

setShowStatusMenu(!showStatusMenu)}> +

+ {user.avatarUrl ? ( + {user.name}

+ ) : ( +

+ +

+ )} +

+ + setShowStatusMenu(!showStatusMenu)} + /> + + {showStatusMenu && ( +

Изменить статус

+ {Object.values(UserStatus).map((status) => { + const labels: Record = { + [UserStatus.ONLINE]: 'В сети', + [UserStatus.AWAY]: 'Отошел', + [UserStatus.BUSY]: 'Занят', + [UserStatus.OFFLINE]: 'Не в сети' + }; + return ( + + )})} +

+ +

+ )} +

+ ); +}; diff --git a/src/components/ui/FeedbackStates.tsx b/src/components/ui/FeedbackStates.tsx new file mode 100644 index 0000000..341c665 --- /dev/null +++ b/src/components/ui/FeedbackStates.tsx @@ -0,0 +1,53 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { Loader2, AlertCircle, Inbox } from 'lucide-react'; +import { cn } from '../../lib/utils'; + +export const LoadingState: React.FC<{ message?: string; className?: string }> = ({ message = 'Syncing data...', className }) => ( +

+ +

{message}

Please wait while the quantum cores stabilize.

+); + +export const EmptyState: React.FC<{ title: string; description: string; icon?: any; action?: React.ReactNode; className?: string }> = ({ + title, + description, + icon: Icon = Inbox, + action, + className +}) => ( +

+ +

{title}

{description}

+ {action} +

+); + +export const ErrorState: React.FC<{ message: string; onRetry?: () => void; className?: string }> = ({ message, onRetry, className }) => ( +

+ +

System Fault Detected

{message}

+ {onRetry && ( + + )} +

+); diff --git a/src/components/ui/Toast.tsx b/src/components/ui/Toast.tsx new file mode 100644 index 0000000..baf94f9 --- /dev/null +++ b/src/components/ui/Toast.tsx @@ -0,0 +1,95 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react'; +import { motion, AnimatePresence } from 'motion/react'; +import { CheckCircle2, XCircle, AlertCircle, Info, X } from 'lucide-react'; +import { cn } from '../../lib/utils'; + +type ToastType = 'success' | 'error' | 'warning' | 'info'; + +interface Toast { + id: string; + type: ToastType; + title: string; + message?: string; +} + +interface ToastContextType { + showToast: (type: ToastType, title: string, message?: string) => void; + removeToast: (id: string) => void; +} + +const ToastContext = createContext(undefined); + +export const useToast = () => { + const context = useContext(ToastContext); + if (!context) throw new Error('useToast must be used within ToastProvider'); + return context; +}; + +export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [toasts, setToasts] = useState([]); + + const removeToast = useCallback((id: string) => { + setToasts((prev) => prev.filter((t) => t.id !== id)); + }, []); + + const showToast = useCallback((type: ToastType, title: string, message?: string) => { + const id = Math.random().toString(36).substring(2, 9); + setToasts((prev) => [...prev, { id, type, title, message }]); + setTimeout(() => removeToast(id), 5000); + }, [removeToast]); + + return ( + + {children} +

+ + {toasts.map((toast) => ( + removeToast(toast.id)} /> + ))} + +

+ + ); +}; + +const ToastItem: React.FC<{ toast: Toast; onClose: () => void }> = ({ toast, onClose }) => { + const icons = { + success: , + error: , + warning: , + info: , + }; + + const bgColors = { + success: 'bg-emerald-50 border-emerald-100', + error: 'bg-rose-50 border-rose-100', + warning: 'bg-amber-50 border-amber-100', + info: 'bg-indigo-50 border-indigo-100', + }; + + return ( + +

{icons[toast.type]}

{toast.title}

+ {toast.message &&

{toast.message}

} +

+ + + ); +}; diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx new file mode 100644 index 0000000..8bacd58 --- /dev/null +++ b/src/context/AuthContext.tsx @@ -0,0 +1,110 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import { User, UserStatus } from '../types'; +import { + AuthSession, + clearStoredSession, + getStoredSession, + loginWithPassword, + roleFromBackend, + roleToBackend, + saveStoredSession, + sessionToUser, +} from '../lib/api'; + +interface AuthContextType { + user: User | null; + session: AuthSession | null; + isAuthenticated: boolean; + login: (username: string, password: string) => Promise; + applySession: (session: AuthSession) => void; + logout: () => void; + setStatus: (status: UserStatus) => void; + isLoading: boolean; +} + +const AuthContext = createContext(undefined); + +export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [session, setSession] = useState(null); + const [user, setUser] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const savedSession = getStoredSession(); + if (savedSession) { + setSession(savedSession); + setUser(sessionToUser(savedSession)); + } + setIsLoading(false); + + const handleAuthExpired = () => { + setSession(null); + setUser(null); + }; + window.addEventListener('digopscc-auth-expired', handleAuthExpired); + return () => window.removeEventListener('digopscc-auth-expired', handleAuthExpired); + }, []); + + const applySession = useCallback((nextSession: AuthSession) => { + const normalizedSession: AuthSession = { + ...nextSession, + role: roleFromBackend(nextSession.backendRole || nextSession.role), + backendRole: roleToBackend(nextSession.backendRole || nextSession.role), + }; + setSession(normalizedSession); + setUser(sessionToUser(normalizedSession)); + saveStoredSession(normalizedSession); + }, []); + + const login = useCallback( + async (username: string, password: string) => { + setIsLoading(true); + try { + const nextSession = await loginWithPassword(username.trim(), password); + applySession(nextSession); + } finally { + setIsLoading(false); + } + }, + [applySession], + ); + + const logout = useCallback(() => { + setUser(null); + setSession(null); + clearStoredSession(); + }, []); + + const setStatus = useCallback((status: UserStatus) => { + setUser((current) => (current ? { ...current, status } : current)); + }, []); + + const value = useMemo( + () => ({ + user, + session, + isAuthenticated: Boolean(session && user), + login, + applySession, + logout, + setStatus, + isLoading, + }), + [applySession, isLoading, login, logout, session, setStatus, user], + ); + + return {children}; +}; + +export const useAuth = () => { + const context = useContext(AuthContext); + if (context === undefined) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +}; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..db57134 --- /dev/null +++ b/src/index.css @@ -0,0 +1,45 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); +@import "tailwindcss"; + +@theme { + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; +} + +@layer base { + body { + @apply font-sans text-slate-900 antialiased bg-slate-50; + } +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + @apply bg-slate-200 rounded-full hover:bg-slate-300 transition-colors; +} + +/* Smooth Transitions */ +* { + @apply transition-colors duration-200; +} + +.glass-morphism { + @apply backdrop-blur-md bg-white/70 border border-white/20; +} + +@keyframes pulse-slow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.8; } +} + +.animate-pulse-slow { + animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} diff --git a/src/lib/api.ts b/src/lib/api.ts new file mode 100644 index 0000000..0d8ff30 --- /dev/null +++ b/src/lib/api.ts @@ -0,0 +1,387 @@ +import { ChannelType, User, UserRole, UserStatus } from '../types'; + +const SESSION_STORAGE_KEY = 'digopscc_session'; +const API_BASE = String(import.meta.env.VITE_API_BASE || '').replace(/\/+$/, ''); + +export type BackendRole = 'operator' | 'supervisor' | 'admin' | 'analyst'; + +export interface AuthSession { + accessToken: string; + tokenType: string; + username: string; + fullName?: string | null; + role: UserRole; + backendRole: BackendRole; + authSource?: string | null; + provider?: string | null; +} + +export interface LoginResponse { + access_token: string; + token_type?: string; + role: BackendRole; + auth_source?: string | null; + provider?: string | null; + full_name?: string | null; +} + +export interface OidcConfig { + enabled: boolean; + login_path?: string; + provider_label?: string; +} + +export interface BackendInteraction { + interaction_id: string; + channel: string; + subject: string; + customer_id?: string | null; + queue_id?: string | null; + priority: number; + status: string; + assigned_to?: string | null; + created_at: string; + updated_at: string; +} + +export interface BackendThread { + thread_id: string; + chat_id: string; + interaction_id: string; + username?: string | null; + display_name?: string | null; + phone_number?: string | null; + queue_id?: string | null; + status: string; + claimed_by_user?: string | null; + ai_state?: string | null; + ai_handoff_reason?: string | null; + unread_count?: number; + last_message_at: string; + last_message_preview: string; + created_at: string; + updated_at: string; +} + +export interface BackendThreadMessage { + message_id: string; + thread_id: string; + interaction_id: string; + chat_id: string; + direction: 'inbound' | 'outbound' | 'system'; + text: string; + operator_user?: string | null; + author_type?: 'customer' | 'human' | 'ai' | 'system'; + delivery_status?: string | null; + created_at: string; +} + +export interface BackendLiveCall { + call_id: string; + interaction_id: string; + queue_id: string; + queue_code?: string; + caller_number?: string | null; + caller_name?: string | null; + status: string; + telephony_status?: string; + claimed_by_user?: string | null; + operator_extension?: string | null; + started_at: string; + connected_at?: string | null; + ended_at?: string | null; + updated_at: string; + ai_state?: string | null; + ai_handoff_reason?: string | null; + has_recording?: boolean; +} + +export interface BackendAgentState { + agent_id: string; + state: 'READY' | 'BUSY' | 'BREAK' | 'OFFLINE'; + queue_id?: string | null; + updated_at: string; +} + +export interface BackendRealtime { + agents: { + total: number; + by_state: Record; + items: BackendAgentState[]; + }; + queues: Array<{ + queue_id: string; + in_queue: number; + avg_wait_seconds: number; + updated_at: string; + }>; + timestamp: string; +} + +export interface BackendQueue { + queue_id: string; + name: string; + description: string; + rules: Array<{ + channel: string; + priority: number; + strategy: string; + sla_seconds: number; + }>; + created_at: string; +} + +export interface BackendUser { + user_id: string; + username: string; + full_name: string; + role: BackendRole; +} + +export interface BackendKpi { + volume?: { + total?: number; + answered?: number; + abandoned?: number; + }; + kpi?: Record; + breakdowns?: { + by_channel?: + | Array<{ channel: string; total: number; answered?: number; abandoned?: number }> + | Record; + }; +} + +export interface BackendTimeseries { + points?: Array<{ + ts?: string; + bucket?: string; + label?: string; + value?: number; + sample_size?: number; + }>; +} + +export interface BackendDrilldown { + items: BackendInteraction[]; + total: number; + limit: number; + offset: number; +} + +export interface BackendAgentOverviewItem { + agent_id: string; + current_state?: 'READY' | 'BUSY' | 'BREAK' | 'OFFLINE' | null; + current_queue_id?: string | null; + dominant_queue_id?: string | null; + interactions_total: number; + answered_total: number; + closed_total: number; + abandoned_total: number; + avg_handle_seconds?: number | null; + answer_rate: number; + fcr_rate?: number | null; + last_activity_at?: string | null; +} + +export interface BackendAgentOverview { + totals: { + agents_total: number; + agents_with_activity: number; + interactions_total: number; + answered_total: number; + ready_now: number; + busy_now: number; + break_now: number; + offline_now: number; + avg_handle_seconds?: number | null; + avg_fcr_rate?: number | null; + }; + items: BackendAgentOverviewItem[]; +} + +export interface BackendQueueOverviewItem { + queue_id: string; + name: string; + description?: string; + interactions_total: number; + answered_total: number; + abandoned_total: number; + service_level?: number | null; + answer_rate?: number | null; + fcr_rate?: number | null; + avg_handle_seconds?: number | null; + in_queue: number; + avg_wait_seconds: number; + updated_at?: string | null; +} + +export interface BackendQueueOverview { + items: BackendQueueOverviewItem[]; +} + +export interface BackendOmnichannelInsights { + summary_text: string; + primary_metric: { label: string; value: string }; + secondary_metric: { label: string; value: string }; + generated_at: string; +} + +export class ApiError extends Error { + status: number; + detail: unknown; + + constructor(status: number, detail: unknown) { + super(`${status}: ${typeof detail === 'string' ? detail : JSON.stringify(detail)}`); + this.name = 'ApiError'; + this.status = status; + this.detail = detail; + } +} + +export const roleToBackend = (role: UserRole | string | undefined): BackendRole => { + const normalized = String(role || UserRole.OPERATOR).toLowerCase(); + if (normalized.includes('admin')) return 'admin'; + if (normalized.includes('supervisor')) return 'supervisor'; + if (normalized.includes('analyst')) return 'analyst'; + return 'operator'; +}; + +export const roleFromBackend = (role: string | undefined): UserRole => { + switch (String(role || '').toLowerCase()) { + case 'admin': + return UserRole.ADMIN; + case 'supervisor': + return UserRole.SUPERVISOR; + case 'analyst': + return UserRole.ANALYST; + default: + return UserRole.OPERATOR; + } +}; + +export const channelFromBackend = (channel: string | undefined): ChannelType => { + switch (String(channel || '').toLowerCase()) { + case 'telegram': + return ChannelType.TELEGRAM; + case 'whatsapp': + return ChannelType.WHATSAPP; + case 'webchat': + return ChannelType.WEBCHAT; + case 'email': + return ChannelType.EMAIL; + default: + return ChannelType.VOICE; + } +}; + +export const sessionToUser = (session: AuthSession): User => ({ + id: session.username, + username: session.username, + email: session.username.includes('@') ? session.username : `${session.username}@call-center.local`, + name: session.fullName || session.username, + role: session.role, + status: UserStatus.ONLINE, + avatarUrl: undefined, +}); + +export const getStoredSession = (): AuthSession | null => { + try { + const raw = localStorage.getItem(SESSION_STORAGE_KEY); + if (!raw) return null; + const parsed = JSON.parse(raw) as AuthSession; + if (!parsed?.accessToken || !parsed?.username) return null; + return { + ...parsed, + role: roleFromBackend(parsed.backendRole || parsed.role), + backendRole: roleToBackend(parsed.backendRole || parsed.role), + }; + } catch { + return null; + } +}; + +export const saveStoredSession = (session: AuthSession) => { + localStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(session)); +}; + +export const clearStoredSession = () => { + localStorage.removeItem(SESSION_STORAGE_KEY); +}; + +const buildUrl = (path: string) => `${API_BASE}${path.startsWith('/') ? path : `/${path}`}`; + +const parseResponseBody = async (response: Response) => { + const contentType = response.headers.get('content-type') || ''; + if (contentType.includes('application/json')) { + return response.json(); + } + return response.text(); +}; + +export async function gatewayRequest(path: string, options: RequestInit = {}): Promise { + const response = await fetch(buildUrl(path), options); + const payload = await parseResponseBody(response); + if (!response.ok) { + throw new ApiError(response.status, payload); + } + return payload as T; +} + +export async function apiRequest( + service: string, + path: string, + options: RequestInit & { session?: AuthSession | null } = {}, +): Promise { + const { session = getStoredSession(), headers: optionHeaders, ...fetchOptions } = options; + const headers = new Headers(optionHeaders); + const body = fetchOptions.body; + + if (body && !(body instanceof FormData) && !headers.has('Content-Type')) { + headers.set('Content-Type', 'application/json'); + } + if (session) { + headers.set('X-User', session.username); + headers.set('X-Role', session.backendRole); + headers.set('Authorization', `Bearer ${session.accessToken}`); + } + + const response = await fetch(buildUrl(`/proxy/${service}/${path}`), { + ...fetchOptions, + headers, + }); + const payload = await parseResponseBody(response); + + if (!response.ok) { + if (response.status === 401) { + clearStoredSession(); + window.dispatchEvent(new CustomEvent('digopscc-auth-expired')); + } + throw new ApiError(response.status, payload); + } + + return payload as T; +} + +export const loginWithPassword = async (username: string, password: string): Promise => { + const data = await apiRequest('auth', 'auth/login', { + method: 'POST', + body: JSON.stringify({ username, password }), + session: null, + }); + const role = roleFromBackend(data.role); + return { + accessToken: data.access_token, + tokenType: data.token_type || 'bearer', + username, + fullName: data.full_name, + role, + backendRole: roleToBackend(data.role), + authSource: data.auth_source || 'local', + provider: data.provider, + }; +}; + +export const getOidcConfig = () => gatewayRequest('/proxy/auth/auth/oidc/config'); + +export const health = () => gatewayRequest<{ status: string; service: string; version?: string }>('/health'); diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..365058c --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..080dac3 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..2536efa --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,271 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { useAuth } from '../context/AuthContext'; +import { UserRole } from '../types'; +import { AlertCircle, HelpCircle, Loader2, Shield, Zap } from 'lucide-react'; +import { cn } from '../lib/utils'; +import { AuthSession, getOidcConfig, roleFromBackend, roleToBackend } from '../lib/api'; +import { motion } from 'motion/react'; + +const rolePresets: Record = { + [UserRole.OPERATOR]: { + label: 'Оператор', + description: 'Работа с запросами', + username: 'operator', + password: 'op12345', + }, + [UserRole.SUPERVISOR]: { + label: 'Супервайзер', + description: 'Команды и очереди', + username: 'supervisor', + password: 'sup12345', + }, + [UserRole.ADMIN]: { + label: 'Админ', + description: 'Настройка системы', + username: 'admin', + password: 'admin123', + }, + [UserRole.ANALYST]: { + label: 'Аналитик', + description: 'KPI и инсайты', + username: 'analyst', + password: 'an12345', + }, +}; + +export const Login: React.FC = () => { + const { login, applySession } = useAuth(); + const [username, setUsername] = React.useState(rolePresets[UserRole.OPERATOR].username); + const [password, setPassword] = React.useState(rolePresets[UserRole.OPERATOR].password); + const [role, setRole] = React.useState(UserRole.OPERATOR); + const [isSubmitting, setIsSubmitting] = React.useState(false); + const [error, setError] = React.useState(null); + const [oidc, setOidc] = React.useState({ enabled: false, loginPath: '', providerLabel: 'SSO' }); + + React.useEffect(() => { + getOidcConfig() + .then((config) => { + setOidc({ + enabled: Boolean(config.enabled), + loginPath: config.login_path || '/auth/oidc/start?return_mode=popup', + providerLabel: config.provider_label || 'Keycloak', + }); + }) + .catch(() => { + setOidc((current) => ({ ...current, enabled: false })); + }); + }, []); + + React.useEffect(() => { + const handleOidcMessage = (event: MessageEvent) => { + const data = event.data; + if (!data || typeof data !== 'object') return; + if (data.type === 'oidc-login' && data.access_token) { + const backendRole = roleToBackend(data.role); + const session: AuthSession = { + accessToken: data.access_token, + tokenType: 'bearer', + username: data.username || data.email || 'oidc-user', + fullName: data.full_name || data.username || data.email, + role: roleFromBackend(backendRole), + backendRole, + authSource: data.auth_source || 'oidc', + provider: data.provider, + }; + applySession(session); + } + if (data.type === 'oidc-error') { + setError(data.message || 'Корпоративная авторизация не выполнена'); + } + }; + + window.addEventListener('message', handleOidcMessage); + return () => window.removeEventListener('message', handleOidcMessage); + }, [applySession]); + + const selectRole = (nextRole: UserRole) => { + const preset = rolePresets[nextRole]; + setRole(nextRole); + setUsername(preset.username); + setPassword(preset.password); + setError(null); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setError(null); + try { + await login(username, password); + } catch (err) { + const message = err instanceof Error ? err.message : 'Не удалось авторизоваться через backend'; + setError(message); + } finally { + setIsSubmitting(false); + } + }; + + const startCorporateLogin = () => { + if (!oidc.enabled) { + setError('Корпоративный вход сейчас недоступен в auth-service.'); + return; + } + const popup = window.open(`/proxy/auth${oidc.loginPath}`, 'oidc-login', 'width=620,height=760'); + if (!popup) { + setError('Браузер заблокировал окно корпоративного входа.'); + } + }; + + return ( +

+ +

+ DigOpsCC +

+ +

+ Новый интерфейс
+ того же call-center ядра. +

+ DigOpsCC работает через существующий API Gateway, auth-service, routing, supervisor, + reporting и канальные адаптеры. +

+ +

Gateway

+ :8080 +

Backend

+ /proxy +

+ +

+ + DigOpsCC +

+ +

Вход через call-center

Используются учетные записи auth-service, как в старом UI.

+ +

+ Быстрый профиль +

+ {Object.values(UserRole).map((item) => ( + + ))} +

+ +

+ + Логин + + setUsername(event.target.value)} + placeholder="operator" + className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all" + required + /> +

+ +

+ + Пароль + + setPassword(event.target.value)} + placeholder="op12345" + className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all" + required + /> +

+ + {error && ( +

+ + {error} +

+ )} + + +

+ +

+ + + + Health + +

+ ); +}; diff --git a/src/pages/VoiceAIPage.tsx b/src/pages/VoiceAIPage.tsx new file mode 100644 index 0000000..ca2a797 --- /dev/null +++ b/src/pages/VoiceAIPage.tsx @@ -0,0 +1,591 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { Mic, PhoneCall, PhoneOff, RotateCcw } from 'lucide-react'; +import { cn } from '../lib/utils'; + +const TARGET_SAMPLE_RATE = 16000; + +type MsgRole = 'user' | 'assistant' | 'system'; + +interface ChatMessage { + id: number; + role: MsgRole; + text: string; +} + +function downsample(buf: Float32Array, inRate: number, outRate: number): Float32Array { + if (inRate === outRate) return buf; + const ratio = inRate / outRate; + const len = Math.round(buf.length / ratio); + const out = new Float32Array(len); + for (let i = 0; i < len; i++) { + const start = Math.round(i * ratio); + const end = Math.round((i + 1) * ratio); + let acc = 0, count = 0; + for (let j = start; j < end && j < buf.length; j++) { acc += buf[j]; count++; } + out[i] = acc / Math.max(count, 1); + } + return out; +} + +function floatTo16Bit(buf: Float32Array): ArrayBuffer { + const out = new Int16Array(buf.length); + for (let i = 0; i < buf.length; i++) { + const s = Math.max(-1, Math.min(1, buf[i])); + out[i] = s < 0 ? s * 0x8000 : s * 0x7fff; + } + return out.buffer; +} + +export const VoiceAIPage: React.FC = () => { + // ── UI state ──────────────────────────────────────────────────────────────── + const [isRunning, setIsRunning] = useState(false); + const [isMuted, setIsMuted] = useState(false); + const [statusText, setStatusText] = useState('offline'); + const [statusKind, setStatusKind] = useState(''); + const [partialText, setPartialText] = useState('Готов к звонку.'); + const [messages, setMessages] = useState([]); + const [levelPct, setLevelPct] = useState(0); + + // ── Mutable refs (avoid stale closures in audio callbacks) ────────────────── + const isRunningRef = useRef(false); + const isMutedRef = useRef(false); + const isStoppingRef = useRef(false); + const lastErrRef = useRef(''); + + const socketRef = useRef(null); + const audioCtxRef = useRef(null); + const sourceRef = useRef(null); + const processorRef = useRef(null); + const streamRef = useRef(null); + + const playbackCursorRef = useRef(0); + const chainRef = useRef>(Promise.resolve()); + const pendingEncodedRef = useRef(0); + const activeAudiosRef = useRef>(new Set()); + const unmuteTimerRef = useRef(null); + + const currentMsgIdRef = useRef(null); + const currentTextRef = useRef(''); + const currentChunksRef = useRef(0); + const currentTtsFailedRef = useRef(false); + const currentTtsMsgRef = useRef(''); + + const msgCounterRef = useRef(0); + const bottomRef = useRef(null); + const canvasRef = useRef(null); + + // Keep refs in sync with state + useEffect(() => { isRunningRef.current = isRunning; }, [isRunning]); + useEffect(() => { isMutedRef.current = isMuted; }, [isMuted]); + + // ── Canvas helpers ─────────────────────────────────────────────────────────── + const drawIdle = useCallback(() => { + const c = canvasRef.current; + if (!c) return; + const ctx = c.getContext('2d'); + if (!ctx) return; + ctx.fillStyle = '#0f172a'; + ctx.fillRect(0, 0, c.width, c.height); + ctx.strokeStyle = '#2f9e80'; + ctx.lineWidth = 2; + ctx.beginPath(); + const mid = c.height / 2; + for (let x = 0; x < c.width; x++) { + const y = mid + Math.sin(x / 28) * 8 + Math.sin(x / 83) * 14; + x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); + } + ctx.stroke(); + }, []); + + const drawWave = useCallback((buf: Float32Array) => { + const c = canvasRef.current; + if (!c) return; + const ctx = c.getContext('2d'); + if (!ctx) return; + ctx.fillStyle = '#0f172a'; + ctx.fillRect(0, 0, c.width, c.height); + ctx.strokeStyle = isMutedRef.current ? '#ef4444' : '#22c55e'; + ctx.lineWidth = 2; + ctx.beginPath(); + const slice = Math.max(1, Math.floor(buf.length / c.width)); + const mid = c.height / 2; + for (let x = 0; x < c.width; x++) { + const y = mid + (buf[x * slice] || 0) * mid * 0.8; + x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); + } + ctx.stroke(); + }, []); + + useEffect(() => { drawIdle(); }, [drawIdle]); + + // ── Audio playback ─────────────────────────────────────────────────────────── + const scheduleUnmute = useCallback(() => { + if (pendingEncodedRef.current > 0) return; + if (unmuteTimerRef.current) clearTimeout(unmuteTimerRef.current); + const ac = audioCtxRef.current; + const ms = ac ? Math.max(0, (playbackCursorRef.current - ac.currentTime) * 1000) : 0; + unmuteTimerRef.current = window.setTimeout(() => setIsMuted(false), ms + 120); + }, []); + + const playPcm = useCallback((b64: string, sampleRate: number) => { + const ac = audioCtxRef.current; + if (!ac) return; + if (ac.state === 'suspended') ac.resume(); + const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0)); + const samples = new Int16Array(bytes.buffer); + const ab = ac.createBuffer(1, samples.length, sampleRate); + const ch = ab.getChannelData(0); + for (let i = 0; i < samples.length; i++) ch[i] = samples[i] / 32768; + const src = ac.createBufferSource(); + src.buffer = ab; + src.connect(ac.destination); + const at = Math.max(ac.currentTime + 0.03, playbackCursorRef.current); + src.start(at); + playbackCursorRef.current = at + ab.duration; + }, []); + + const playEncoded = useCallback((b64: string, mime: string) => { + pendingEncodedRef.current += 1; + chainRef.current = chainRef.current.then( + () => new Promise(resolve => { + const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0)); + const url = URL.createObjectURL(new Blob([bytes], { type: mime })); + const audio = new Audio(url); + activeAudiosRef.current.add(audio); + const cleanup = () => { + URL.revokeObjectURL(url); + activeAudiosRef.current.delete(audio); + pendingEncodedRef.current = Math.max(0, pendingEncodedRef.current - 1); + if (pendingEncodedRef.current === 0 && isMutedRef.current) scheduleUnmute(); + resolve(); + }; + audio.onended = cleanup; + audio.onerror = cleanup; + audio.play().catch(cleanup); + }), + ); + }, [scheduleUnmute]); + + // ── Transcript helpers ─────────────────────────────────────────────────────── + const addMsg = useCallback((role: MsgRole, text: string): number => { + const id = ++msgCounterRef.current; + setMessages(prev => [...prev, { id, role, text }]); + return id; + }, []); + + const updateMsg = useCallback((id: number, text: string) => { + setMessages(prev => prev.map(m => m.id === id ? { ...m, text } : m)); + }, []); + + useEffect(() => { + bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages, partialText]); + + // ── Browser TTS fallback ───────────────────────────────────────────────────── + const browserFallback = useCallback((): boolean => { + if (currentChunksRef.current > 0 || !currentTextRef.current.trim()) return false; + if (!('speechSynthesis' in window)) { + setPartialText(currentTtsFailedRef.current ? currentTtsMsgRef.current : 'TTS не ответил.'); + return false; + } + window.speechSynthesis.cancel(); + const u = new SpeechSynthesisUtterance(currentTextRef.current); + u.lang = 'ru-RU'; + u.rate = 1.04; + const done = () => { setIsMuted(false); setStatusText('live'); setStatusKind('live'); setPartialText('Слушаю...'); }; + u.onend = done; + u.onerror = done; + setIsMuted(true); + setStatusText('browser tts'); + setStatusKind('busy'); + setPartialText('Резервная озвучка браузера...'); + window.speechSynthesis.speak(u); + return true; + }, []); + + // ── WebSocket message handler ──────────────────────────────────────────────── + const handleMsg = useCallback((e: MessageEvent) => { + const d = JSON.parse(e.data as string); + + switch (d.type) { + case 'ready': + setStatusText(d.model || 'ready'); + setStatusKind('live'); + break; + case 'stt_ready': + setPartialText('Слушаю...'); + break; + case 'stt_partial': + setPartialText(d.text || 'Слушаю...'); + break; + case 'user_final': + currentMsgIdRef.current = null; + addMsg('user', d.text); + setPartialText('Думаю...'); + break; + case 'assistant_started': + setIsMuted(true); + currentMsgIdRef.current = addMsg('assistant', ''); + currentTextRef.current = ''; + currentChunksRef.current = 0; + currentTtsFailedRef.current = false; + currentTtsMsgRef.current = ''; + setStatusText('отвечает'); + setStatusKind('busy'); + break; + case 'assistant_delta': + if (currentMsgIdRef.current !== null) { + currentTextRef.current += d.text || ''; + updateMsg(currentMsgIdRef.current, currentTextRef.current); + } + break; + case 'assistant_text_done': + currentTextRef.current = d.text || currentTextRef.current; + setPartialText('Озвучиваю...'); + break; + case 'tts_audio': + currentChunksRef.current += 1; + if ((d.format || '').startsWith('mp3') || (d.mime_type || '').includes('mpeg')) { + playEncoded(d.audio, d.mime_type || 'audio/mpeg'); + } else { + playPcm(d.audio, d.sample_rate || TARGET_SAMPLE_RATE); + } + break; + case 'tts_failed': + currentTtsFailedRef.current = true; + currentTtsMsgRef.current = d.message || 'ElevenLabs TTS недоступен.'; + addMsg('system', currentTtsMsgRef.current); + break; + case 'assistant_done': { + const fell = browserFallback(); + if (!fell) { + scheduleUnmute(); + setStatusText(currentTtsFailedRef.current ? 'tts fallback' : 'live'); + setStatusKind(currentTtsFailedRef.current ? 'busy' : 'live'); + setPartialText(currentTtsFailedRef.current ? currentTtsMsgRef.current : 'Слушаю...'); + } + break; + } + case 'reset_done': + setPartialText('Контекст очищен.'); + if (isRunningRef.current && socketRef.current?.readyState === WebSocket.OPEN) { + socketRef.current.send(JSON.stringify({ type: 'start_greeting' })); + } + break; + case 'error': + lastErrRef.current = d.message || 'Ошибка.'; + setPartialText(lastErrRef.current); + addMsg('system', lastErrRef.current); + setStatusText('error'); + setStatusKind('error'); + break; + } + }, [addMsg, updateMsg, playPcm, playEncoded, browserFallback, scheduleUnmute]); + + // ── Stop ───────────────────────────────────────────────────────────────────── + const stopCall = useCallback(async (msg = 'Звонок завершён.') => { + if (isStoppingRef.current) return; + isStoppingRef.current = true; + + setIsRunning(false); + setIsMuted(false); + setLevelPct(0); + + processorRef.current?.disconnect(); + if (processorRef.current) processorRef.current.onaudioprocess = null; + sourceRef.current?.disconnect(); + streamRef.current?.getTracks().forEach(t => t.stop()); + if (socketRef.current?.readyState === WebSocket.OPEN) socketRef.current.close(); + const ac = audioCtxRef.current; + if (ac && ac.state !== 'closed') await ac.close(); + + processorRef.current = null; + sourceRef.current = null; + streamRef.current = null; + audioCtxRef.current = null; + socketRef.current = null; + + currentMsgIdRef.current = null; + currentTextRef.current = ''; + currentChunksRef.current = 0; + currentTtsFailedRef.current = false; + currentTtsMsgRef.current = ''; + playbackCursorRef.current = 0; + pendingEncodedRef.current = 0; + activeAudiosRef.current.forEach(a => { a.pause(); a.src = ''; }); + activeAudiosRef.current.clear(); + chainRef.current = Promise.resolve(); + + setPartialText(msg); + drawIdle(); + isStoppingRef.current = false; + }, [drawIdle]); + + // ── Start ───────────────────────────────────────────────────────────────────── + const startCall = useCallback(async () => { + lastErrRef.current = ''; + isStoppingRef.current = false; + setStatusText('connecting'); + setStatusKind('busy'); + + try { + const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; + const ws = new WebSocket(`${proto}//${window.location.host}/voice-ai/ws`); + socketRef.current = ws; + + ws.addEventListener('message', handleMsg); + ws.addEventListener('close', () => { + if (isRunningRef.current) stopCall(lastErrRef.current || 'Звонок остановлен.'); + }); + ws.addEventListener('error', () => { + lastErrRef.current = 'Ошибка WebSocket.'; + setStatusText('ws error'); + setStatusKind('error'); + setPartialText(lastErrRef.current); + addMsg('system', lastErrRef.current); + }); + + await new Promise((res, rej) => { + ws.addEventListener('open', () => res(), { once: true }); + ws.addEventListener('error', () => rej(new Error('Нет подключения к серверу.')), { once: true }); + }); + + // Wait for server "ready" + await new Promise((res, rej) => { + const t = window.setTimeout(() => { off(); rej(new Error('Сервер не ответил.')); }, 6000); + const off = () => { clearTimeout(t); ws.removeEventListener('message', onM); ws.removeEventListener('close', onC); }; + const onM = (e: MessageEvent) => { + const d = JSON.parse(e.data); + if (d.type === 'ready') { off(); res(); } + else if (d.type === 'error') { off(); rej(new Error(d.message || 'Ошибка.')); } + }; + const onC = () => { off(); rej(new Error('WebSocket закрыт.')); }; + ws.addEventListener('message', onM); + ws.addEventListener('close', onC); + }); + + const media = await navigator.mediaDevices.getUserMedia({ + audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, channelCount: 1 }, + }); + streamRef.current = media; + + const ac = new AudioContext(); + await ac.resume(); + audioCtxRef.current = ac; + + const src = ac.createMediaStreamSource(media); + sourceRef.current = src; + const proc = ac.createScriptProcessor(4096, 1, 1); + processorRef.current = proc; + + proc.onaudioprocess = ev => { + const buf = ev.inputBuffer.getChannelData(0); + drawWave(buf); + + let sum = 0; + for (let i = 0; i < buf.length; i++) sum += buf[i] * buf[i]; + setLevelPct(Math.min(100, Math.round(Math.sqrt(sum / buf.length) * 260))); + + if (!isRunningRef.current || isMutedRef.current || ws.readyState !== WebSocket.OPEN) return; + ws.send(floatTo16Bit(downsample(buf, ac.sampleRate, TARGET_SAMPLE_RATE))); + }; + + src.connect(proc); + proc.connect(ac.destination); + + setIsRunning(true); + setStatusText('live'); + setStatusKind('live'); + setPartialText('Слушаю...'); + ws.send(JSON.stringify({ type: 'start_greeting' })); + } catch (err: unknown) { + const msg = err instanceof Error ? err.message : 'Не удалось начать звонок.'; + lastErrRef.current = msg; + processorRef.current?.disconnect(); + sourceRef.current?.disconnect(); + streamRef.current?.getTracks().forEach(t => t.stop()); + if (socketRef.current?.readyState === WebSocket.OPEN) socketRef.current.close(); + const ac = audioCtxRef.current; + if (ac && ac.state !== 'closed') await ac.close(); + processorRef.current = null; sourceRef.current = null; + streamRef.current = null; audioCtxRef.current = null; socketRef.current = null; + setIsRunning(false); + setStatusText('error'); + setStatusKind('error'); + setPartialText(msg); + addMsg('system', msg); + } + }, [handleMsg, stopCall, drawWave, addMsg]); + + const resetSession = useCallback(() => { + setMessages([]); + currentMsgIdRef.current = null; + currentTextRef.current = ''; + currentChunksRef.current = 0; + setPartialText('Контекст очищен.'); + if (socketRef.current?.readyState === WebSocket.OPEN) { + socketRef.current.send(JSON.stringify({ type: 'reset' })); + } + }, []); + + useEffect(() => () => { stopCall(); }, [stopCall]); + + // ── Status dot colour ──────────────────────────────────────────────────────── + const dotColor: Record = { + live: 'bg-emerald-500', + busy: 'bg-amber-500', + error: 'bg-rose-500', + connecting: 'bg-sky-400', + }; + const dot = dotColor[statusKind] || 'bg-slate-400'; + + // ── Render ─────────────────────────────────────────────────────────────────── + return ( +

+ + {/* Header */} +

AI Голос

Голосовой AI-оператор Айнур — QazaqGasAimaq

+ +

+ + {/* ── Left: controls ───────────────────────────────────────────────── */} +

+ + {/* Status pill */} +

+ + {statusText} + +

+ + {/* Waveform canvas */} +

+ + {/* ── Right: transcript ──────────────────────────────────────────────── */} +

+ +

Транскрипт

+ +

+ {/* Partial / status line */} +

+ {partialText} +

+ + {/* Messages */} + {messages.map(m => ( +

+ {m.role === 'system' ? ( + + {m.text} + + ) : ( +

+ {m.role === 'assistant' && ( +

+ Айнур +

+ )} + {m.text || ...} +

+ )} +

+ ))} + +

+ ); +}; diff --git a/src/pages/dashboards/AdminView.tsx b/src/pages/dashboards/AdminView.tsx new file mode 100644 index 0000000..ba489fc --- /dev/null +++ b/src/pages/dashboards/AdminView.tsx @@ -0,0 +1,584 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState } from 'react'; +import { + Users, + UserPlus, + Settings, + Search, + CheckCircle2, + Clock, + Webhook, + Bot, + ChevronRight, + Save, + Loader2, + Database, + Type, + FileText, + Link as LinkIcon, + Globe, + Trash2, + MessageCircle, + Mail, + Zap, + Send, + MoreVertical, +} from 'lucide-react'; +import { UserRole } from '../../types'; +import { cn } from '../../lib/utils'; +import { useToast } from '../../components/ui/Toast'; +import { apiRequest, BackendQueue, BackendUser, roleFromBackend, roleToBackend } from '../../lib/api'; + +type AdminTab = 'users' | 'queues' | 'channels' | 'ai'; + +export const AdminView: React.FC<{ initialTab?: AdminTab }> = ({ initialTab = 'users' }) => { + const [activeTab, setActiveTab] = useState(initialTab); + const [isSaving, setIsSaving] = useState(false); + const [showAddUser, setShowAddUser] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [users, setUsers] = useState([]); + const [queues, setQueues] = useState([]); + const [loadError, setLoadError] = useState(null); + const { showToast } = useToast(); + + const loadAdminData = React.useCallback(async () => { + setIsLoading(true); + setLoadError(null); + const results = await Promise.allSettled([ + apiRequest('auth', 'users'), + apiRequest('routing', 'queues'), + ]); + if (results[0].status === 'fulfilled') setUsers(results[0].value); + if (results[1].status === 'fulfilled') setQueues(results[1].value); + const rejected = results.find((result) => result.status === 'rejected'); + if (rejected) { + setLoadError(rejected.reason instanceof Error ? rejected.reason.message : 'Backend недоступен'); + if (results[0].status === 'rejected') setUsers([]); + } + setIsLoading(false); + }, []); + + React.useEffect(() => { + loadAdminData(); + }, [loadAdminData]); + + React.useEffect(() => { + setActiveTab(initialTab); + }, [initialTab]); + + const handleSave = () => { + setIsSaving(true); + Promise.allSettled([apiRequest('auth', 'health'), apiRequest('routing', 'health'), apiRequest('kb', 'health')]).finally(() => { + setIsSaving(false); + showToast('success', 'Глобальная синхронизация', 'Все системные параметры успешно синхронизированы с ядром.'); + }); + }; + + const [newUser, setNewUser] = useState({ name: '', username: '', password: 'op12345', role: UserRole.OPERATOR }); + const [errors, setErrors] = useState<{name?: string, username?: string, password?: string}>({}); + + const handleCreateUser = async () => { + const newErrors: any = {}; + if (!newUser.name) newErrors.name = 'Требуется имя пользователя'; + if (!newUser.username || newUser.username.length < 3) newErrors.username = 'Логин должен быть не короче 3 символов'; + if (!newUser.password || newUser.password.length < 6) newErrors.password = 'Пароль должен быть не короче 6 символов'; + + if (Object.keys(newErrors).length > 0) { + setErrors(newErrors); + showToast('error', 'Ошибка валидации', 'Пожалуйста, проверьте вводимые данные.'); + return; + } + + setIsLoading(true); + try { + await apiRequest('auth', 'users', { + method: 'POST', + body: JSON.stringify({ + username: newUser.username, + password: newUser.password, + full_name: newUser.name, + role: roleToBackend(newUser.role), + }), + }); + setIsLoading(false); + setShowAddUser(false); + showToast('success', 'Синхронизация завершена', `Учетная запись ${newUser.name} создана в auth-service.`); + setNewUser({ name: '', username: '', password: 'op12345', role: UserRole.OPERATOR }); + setErrors({}); + await loadAdminData(); + } catch (err) { + setIsLoading(false); + showToast('error', 'Auth-service отклонил создание', err instanceof Error ? err.message : 'Backend error'); + } + }; + + return ( +

Панель управления

Системное администрирование и управление ресурсами

+ {isSaving ? ( + + ) : ( + + )} +

+ + {loadError && ( +

+ Часть админ-данных недоступна: {loadError} +

+ )} + +

+ {/* Navigation Sidebar */} +

+ setActiveTab('users')} + /> + setActiveTab('queues')} + /> + setActiveTab('channels')} + /> + setActiveTab('ai')} + /> +

+ + {/* Content Area */} +

+ {activeTab === 'users' && setShowAddUser(true)} onRefresh={loadAdminData} />} + {activeTab === 'ai' && } + {activeTab === 'queues' && } + {activeTab === 'channels' && } + +

+ + {/* Add User Modal Mockup */} + {showAddUser && ( +

setShowAddUser(false)}>

Новый сотрудник

Заполните данные для создания аккаунта нового оператора.

+ Полное имя + setNewUser({...newUser, name: e.target.value})} + className={cn( + "w-full px-4 py-2.5 rounded-xl border text-sm italic transition-all", + errors.name ? "border-rose-300 focus:ring-rose-500/5 focus:border-rose-500" : "border-slate-200 focus:ring-indigo-500/5 focus:border-indigo-500" + )} + placeholder="Введите ФИО..." + /> + {errors.name &&

{errors.name}

} +

+ Логин + setNewUser({...newUser, username: e.target.value})} + className={cn( + "w-full px-4 py-2.5 rounded-xl border text-sm italic transition-all", + errors.username ? "border-rose-300 focus:ring-rose-500/5 focus:border-rose-500" : "border-slate-200 focus:ring-indigo-500/5 focus:border-indigo-500" + )} + placeholder="agent42" + /> + {errors.username &&

{errors.username}

} +

+ Временный пароль + setNewUser({...newUser, password: e.target.value})} + className={cn( + "w-full px-4 py-2.5 rounded-xl border text-sm italic transition-all", + errors.password ? "border-rose-300 focus:ring-rose-500/5 focus:border-rose-500" : "border-slate-200 focus:ring-indigo-500/5 focus:border-indigo-500" + )} + placeholder="минимум 6 символов" + /> + {errors.password &&

{errors.password}

} +

+ Назначить роль + +

+ + +

+ )} +

+ ); +}; + +const UserManagementSection: React.FC<{ users: BackendUser[]; isLoading: boolean; onAddClick: () => void; onRefresh: () => void }> = ({ users, isLoading, onAddClick, onRefresh }) => ( +

+ + +

+ +

+ + + + + + + + + + + + {users.map(user => { + const role = roleFromBackend(user.role); + return ( + + + + + + + + )})} + {!users.length && ( + + + + )} + +

Личность	Уровень доступа	Статус авторизации	Последняя синхронизация	Настройки
+ + {user.full_name} + {user.username} + +	+ + {role === UserRole.ADMIN ? 'АДМИНИСТРАТОР' : role === UserRole.SUPERVISOR ? 'СУПЕРВАЙЗЕР' : role === UserRole.ANALYST ? 'АНАЛИТИК' : 'ОПЕРАТОР'} + +	+ + + + Активен + + +	+ auth-service +	+ +
+ Auth-service пока не вернул пользователей. +

+); + +const AIConfigSection: React.FC = () => { + const [aiHealth, setAiHealth] = React.useState<{ status?: string; service?: string; version?: string } | null>(null); + const [kbHealth, setKbHealth] = React.useState<{ status?: string; service?: string; version?: string } | null>(null); + const [ttsConfig, setTtsConfig] = React.useState<{ config?: { provider?: string }; source?: string } | null>(null); + const [kbArticles, setKbArticles] = React.useState>([]); + + React.useEffect(() => { + Promise.allSettled([ + apiRequest<{ status?: string; service?: string; version?: string }>('ai', 'health'), + apiRequest<{ status?: string; service?: string; version?: string }>('kb', 'health'), + apiRequest<{ config?: { provider?: string }; source?: string }>('ai', 'ai/voice/config/tts'), + apiRequest>('kb', 'knowledge/search?q=&limit=50'), + ]).then(([aiResult, kbResult, ttsResult, articlesResult]) => { + if (aiResult.status === 'fulfilled') setAiHealth(aiResult.value); + if (kbResult.status === 'fulfilled') setKbHealth(kbResult.value); + if (ttsResult.status === 'fulfilled') setTtsConfig(ttsResult.value); + if (articlesResult.status === 'fulfilled') setKbArticles(articlesResult.value); + }); + }, []); + + const provider = ttsConfig?.config?.provider || 'not configured'; + const kbLastSync = kbArticles[0]?.updated_at ? new Date(kbArticles[0].updated_at).toLocaleString('ru-RU') : 'нет статей'; + + return ( +

+ +

Оптимизация ИИ-движка

Конфигурация нейросетевых моделей и алгоритмов автоматизации.

+ +

+ Провайдер голосового AI/TTS + +

+ Статус AI Orchestrator +

+ + {aiHealth?.status || 'down'} +

+ + {/* Knowledge Base Sub-section */} +

+ +

Корпоративная база знаний

+ +

+ + + + +

+ ); +}; + +const KnowledgeSourceItem: React.FC<{ icon: any, title: string, type: string, lastSync: string, items: number }> = ({ icon: Icon, title, type, lastSync, items }) => ( +

+ +

{title}

{type} • {items} записей

Верифицировано

Синхр: {lastSync}

+); + +const QueueSection: React.FC<{ queues: BackendQueue[] }> = ({ queues }) => ( +

+ + Емкость очередей обслуживания +

+ +

+ {queues.length ? queues.map((queue) => { + const maxSla = Math.max(...queue.rules.map((rule) => Number(rule.sla_seconds || 0)), 0); + const priority = maxSla && maxSla <= 20 ? 'URGENT' : maxSla && maxSla <= 45 ? 'HIGH' : 'NORMAL'; + const color = priority === 'URGENT' ? 'rose' : priority === 'HIGH' ? 'indigo' : 'emerald'; + return ( + + ); + }) : ( + + )} +

+); + +const ChannelsSection: React.FC = () => { + const [statusByService, setStatusByService] = React.useState>({}); + + React.useEffect(() => { + const services = ['whatsapp', 'telegram', 'email', 'webchat'] as const; + Promise.allSettled(services.map((service) => apiRequest<{ status?: string }>(service, 'health'))).then((results) => { + setStatusByService( + Object.fromEntries( + services.map((service, index) => [ + service, + results[index].status === 'fulfilled' ? results[index].value.status || 'ok' : 'down', + ]), + ), + ); + }); + }, []); + + return ( +

Подключенные каналы

Интеграции для приема входящих запросов от клиентов.

+ + + + +

+ ); +}; + +const ChannelCard: React.FC<{ provider: string, type: string, icon: any, color: string, active?: boolean }> = ({ provider, type, icon: Icon, color, active }) => ( +

+ +

{provider}

{type}

+ +

+ {active ? "Подключено" : "Неактивен"} +

+ +

+); + +const QueueRow: React.FC<{ name: string, capacity: number, priority: string, color: string }> = ({ name, capacity, priority, color }) => ( +

+ {priority === 'URGENT' ? 'СРОЧНО' : priority === 'HIGH' ? 'ВЫСОКИЙ' : 'НОРМА'} +

{name}

{capacity} слотов доступно

+ +

+); + +const AdminSidebarItem: React.FC<{ icon: any, label: string, description: string, active?: boolean, onClick: () => void }> = ({ icon: Icon, label, description, active, onClick }) => ( + +); diff --git a/src/pages/dashboards/AnalystView.tsx b/src/pages/dashboards/AnalystView.tsx new file mode 100644 index 0000000..0c267d4 --- /dev/null +++ b/src/pages/dashboards/AnalystView.tsx @@ -0,0 +1,616 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState } from 'react'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + LineChart, + Line, + Cell, + PieChart, + Pie, + AreaChart, + Area +} from 'recharts'; +import { + Calendar, + Download, + Filter, + TrendingUp, + Users, + Clock, + MessageSquare, + Award, + ChevronRight, + MoreVertical, + Search, + ArrowUpRight, + ArrowDownRight, + User, + LayoutGrid, + History, + ExternalLink +} from 'lucide-react'; +import { motion } from 'motion/react'; +import { cn } from '../../lib/utils'; +import { ChannelType } from '../../types'; + +import { useToast } from '../../components/ui/Toast'; +import { LoadingState } from '../../components/ui/FeedbackStates'; +import { + apiRequest, + BackendAgentOverview, + BackendDrilldown, + BackendKpi, + BackendOmnichannelInsights, + BackendQueueOverview, + BackendTimeseries, + channelFromBackend, +} from '../../lib/api'; + +const secondsToClock = (seconds?: number | null) => { + const safe = Math.max(0, Math.round(Number(seconds || 0))); + const minutes = Math.floor(safe / 60); + return `${String(minutes).padStart(2, '0')}:${String(safe % 60).padStart(2, '0')}`; +}; + +export const AnalystView: React.FC = () => { + const [dateRange, setDateRange] = useState('7д'); + const [isLoading, setIsLoading] = useState(false); + const [kpi, setKpi] = useState(null); + const [timeseries, setTimeseries] = useState(null); + const [drilldown, setDrilldown] = useState(null); + const [agentOverview, setAgentOverview] = useState(null); + const [queueOverview, setQueueOverview] = useState(null); + const [insights, setInsights] = useState(null); + const [loadError, setLoadError] = useState(null); + const { showToast } = useToast(); + + const windowParams = React.useMemo(() => { + const now = new Date(); + const from = new Date(now); + const days = dateRange === '24ч' ? 1 : dateRange === '30д' ? 30 : dateRange === '90д' ? 90 : 7; + from.setDate(now.getDate() - days); + return { + from_ts: from.toISOString(), + to_ts: now.toISOString(), + }; + }, [dateRange]); + + const loadAnalytics = React.useCallback(async () => { + setIsLoading(true); + setLoadError(null); + const query = new URLSearchParams(windowParams); + const results = await Promise.allSettled([ + apiRequest('reporting', `reports/kpi?${query.toString()}`), + apiRequest('reporting', `reports/timeseries?${query.toString()}&metric=total&interval=day`), + apiRequest('interaction', `interactions/drilldown?${query.toString()}&limit=25`), + apiRequest('reporting', `reports/agents/overview?${query.toString()}&limit=8`), + apiRequest('reporting', `reports/queues/overview?${query.toString()}&limit=8`), + apiRequest('reporting', `reports/omnichannel/insights?${query.toString()}`), + ]); + if (results[0].status === 'fulfilled') setKpi(results[0].value); + if (results[1].status === 'fulfilled') setTimeseries(results[1].value); + if (results[2].status === 'fulfilled') setDrilldown(results[2].value); + if (results[3].status === 'fulfilled') setAgentOverview(results[3].value); + if (results[4].status === 'fulfilled') setQueueOverview(results[4].value); + if (results[5].status === 'fulfilled') setInsights(results[5].value); + const rejected = results.find((result) => result.status === 'rejected'); + if (rejected) { + setLoadError(rejected.reason instanceof Error ? rejected.reason.message : 'Reporting backend недоступен'); + } + setIsLoading(false); + }, [windowParams]); + + React.useEffect(() => { + loadAnalytics(); + }, [loadAnalytics]); + + const kpiData = React.useMemo(() => { + const points = timeseries?.points || []; + return points.map((point) => ({ + name: point.label || new Date(point.ts || point.bucket || Date.now()).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }), + interactions: Number(point.value || point.sample_size || 0), + csat: 0, + aht: Number(kpi?.kpi?.AHT || 0), + })); + }, [kpi, timeseries]); + + const channelData = React.useMemo(() => { + const rawBreakdown = kpi?.breakdowns?.by_channel; + const breakdown = Array.isArray(rawBreakdown) + ? rawBreakdown + : Object.entries(rawBreakdown || {}).map(([channel, value]) => { + const channelValue = value as { total?: number; answered?: number; abandoned?: number }; + return { + channel, + total: Number(channelValue.total || 0), + answered: channelValue.answered, + abandoned: channelValue.abandoned, + }; + }); + const colors: Record = { + voice: '#4f46e5', + webchat: '#10b981', + telegram: '#0ea5e9', + whatsapp: '#16a34a', + email: '#64748b', + }; + const labels: Record = { + voice: 'Голос', + webchat: 'Веб-чат', + telegram: 'Telegram', + whatsapp: 'WhatsApp', + email: 'Email', + }; + return breakdown.filter((item) => Number(item.total || 0) > 0).map((item) => ({ + name: labels[item.channel] || item.channel, + value: Number(item.total || 0), + color: colors[item.channel] || '#64748b', + })); + }, [kpi]); + + const agentData = React.useMemo(() => { + return (agentOverview?.items || []).map((agent) => ({ + name: agent.agent_id, + aht: secondsToClock(agent.avg_handle_seconds), + interactions: Number(agent.interactions_total || 0), + csat: agent.fcr_rate != null ? Number((agent.fcr_rate / 20).toFixed(1)) : 0, + status: agent.current_state || 'OFFLINE', + })); + }, [agentOverview]); + + const queuePerformance = React.useMemo(() => { + return (queueOverview?.items || []).map((queue) => ({ + name: queue.name || queue.queue_id, + value: Math.round(Number(queue.service_level ?? queue.answer_rate ?? 0)), + inQueue: Number(queue.in_queue || 0), + })); + }, [queueOverview]); + + const channelTotal = channelData.reduce((sum, item) => sum + Number(item.value || 0), 0); + const historicalInteractions = React.useMemo(() => { + const items = drilldown?.items || []; + return items.slice(0, 8).map((item) => ({ + id: item.interaction_id, + customer: item.customer_id || item.subject || item.interaction_id, + queue: item.queue_id || 'default', + duration: item.status, + channel: channelFromBackend(item.channel), + csat: item.status === 'closed' ? 5 : 3, + date: new Date(item.updated_at || item.created_at).toLocaleString('ru-RU', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }), + })); + }, [drilldown]); + + const handleExport = () => { + const query = new URLSearchParams(windowParams); + window.open(`/proxy/reporting/reports/export?${query.toString()}`, '_blank'); + showToast('info', 'Экспорт запрошен', 'CSV формируется reporting-service.'); + }; + + const handleRangeChange = (range: string) => { + setDateRange(range); + }; + + return ( +

+ {/* Upper Action Bar */} +

+ Панель аналитики +

Глубокий анализ производительности, качества и операционного здоровья

+ {['24ч', '7д', '30д', '90д'].map(range => ( + + ))} +

+ + +

+ + {isLoading ? ( + + ) : ( + <> + {loadError && ( +

+ Часть аналитики недоступна: {loadError} +

+ )} + {/* KPI Cards Grid */} +

+ + + + +

+ + {/* Main Analytical Section */} +

+ {/* Interaction Trends Chart */} +

Анализ объема и эффективности

Обращения против времени ответа за выбранный период

+ + Объем +

+ + Оценка CSAT +

+ {kpiData.length ? ( + + + + + + + + + + + + + + + + ) : ( +

+ Нет обращений за выбранный период +

+ )} +

+ + {/* Channel Distribution */} +

Рейтинг операторов

+ +

+ {agentData.map((agent) => ( +

{agent.name}

AHT: {agent.aht} • {agent.interactions} обращений

+ +

+ ))} + {!agentData.length && ( +

+ Нет операторской активности +

+ )} +

+ +

+ + {/* Queue Performance */} +

Состояние очередей

+ {queuePerformance.map((queue) => ( + = 90 ? "bg-indigo-600" : queue.value >= 75 ? "bg-emerald-500" : queue.value >= 50 ? "bg-amber-400" : "bg-rose-400"} + /> + ))} + {!queuePerformance.length && ( +

+ Нет данных по очередям +

+ )} +

+ Агрегированный SLA + {Number(kpi?.kpi?.SL || 0).toFixed(1)}% Достигнуто +

+ + {/* Additional Insight / Summary */} +

+ +

Отчет ИИ

+ {insights?.summary_text || 'Reporting-service пока не вернул операционный insight за выбранный период.'} +

{insights?.primary_metric.value || '0%'}

{insights?.primary_metric.label || 'Digital Share'}

{insights?.secondary_metric.value || '0с'}

{insights?.secondary_metric.label || 'ASA'}

+ +

+ + {/* Historical Drilldown Section (Moved to separate row) */} +

Исторические данные

Детальный анализ сессий для оценки качества

+ + +

+ + + + + + + + + + + + {historicalInteractions.map(interaction => ( + + + + + + + + ))} + {!historicalInteractions.length && ( + + + + )} + +

ID Сессии	Клиент	Очередь	Метрики	Действие
+ + {interaction.id} + {interaction.date} + +	+ + + + + {interaction.customer} + +	+ {interaction.queue} +	+ + + {interaction.duration} + + + + {[...Array(5)].map((_, i) => ( + = interaction.csat && "text-slate-200 opacity-50")} /> + ))} + + +	+ +
+ Нет исторических обращений за выбранный период +

+ Показано {historicalInteractions.length} из {drilldown?.total || 0} сессий +

+ + +

+ + )} +

+ ); +}; + +const MetricCard: React.FC<{ label: string, value: string, subLabel: string, trend: 'up' | 'down', icon: any, color: string }> = ({ label, value, subLabel, trend, icon: Icon, color }) => ( +

+ +

+ {trend === 'up' ? : } + {subLabel} +

{value}

+ {label} +

+); + +const PerformanceRow: React.FC<{ name: string, value: number, color: string }> = ({ name, value, color }) => ( +

+ {name} + {value}% +

+ +

+); diff --git a/src/pages/dashboards/OperatorView.tsx b/src/pages/dashboards/OperatorView.tsx new file mode 100644 index 0000000..921a93e --- /dev/null +++ b/src/pages/dashboards/OperatorView.tsx @@ -0,0 +1,806 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { + AlertTriangle, + ArrowRight, + Bot, + CheckCircle2, + Clock, + Loader2, + MessageCircle, + MicOff, + MoreVertical, + Pause, + PhoneCall, + PhoneOff, + Send, + Share2, + ShieldAlert, + User as UserIcon, +} from 'lucide-react'; +import { cn } from '../../lib/utils'; +import { ChannelType, Interaction } from '../../types'; +import { useToast } from '../../components/ui/Toast'; +import { EmptyState, LoadingState } from '../../components/ui/FeedbackStates'; +import { useAuth } from '../../context/AuthContext'; +import { + apiRequest, + BackendInteraction, + BackendLiveCall, + BackendThread, + BackendThreadMessage, + channelFromBackend, +} from '../../lib/api'; + +type SourceKind = 'interaction' | 'telegram' | 'whatsapp' | 'voice'; + +type UnifiedInteraction = Interaction & { + source: SourceKind; + backendId: string; + queueId?: string | null; + assignedTo?: string | null; + createdAt?: string; + updatedAt?: string; + aiState?: string | null; + raw?: BackendInteraction | BackendThread | BackendLiveCall; +}; + +const statusFromBackend = (status?: string): Interaction['status'] => { + if (status === 'closed' || status === 'abandoned' || status === 'ended') return 'CLOSED'; + if (status === 'in_progress' || status === 'escalated' || status === 'claimed' || status === 'connected') return 'ACTIVE'; + return 'PENDING'; +}; + +const formatTime = (value?: string | null) => { + if (!value) return 'сейчас'; + const date = new Date(value); + if (Number.isNaN(date.getTime())) return value; + return new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(date); +}; + +const channelLabel: Record = { + [ChannelType.VOICE]: 'Голос', + [ChannelType.TELEGRAM]: 'Telegram', + [ChannelType.WHATSAPP]: 'WhatsApp', + [ChannelType.WEBCHAT]: 'Веб-чат', + [ChannelType.EMAIL]: 'Email', +}; + +const channelIconClass: Record = { + [ChannelType.VOICE]: 'text-rose-500', + [ChannelType.TELEGRAM]: 'text-sky-500', + [ChannelType.WHATSAPP]: 'text-emerald-500', + [ChannelType.WEBCHAT]: 'text-indigo-500', + [ChannelType.EMAIL]: 'text-slate-500', +}; + +const mapInteraction = (item: BackendInteraction): UnifiedInteraction => ({ + id: `interaction:${item.interaction_id}`, + source: 'interaction', + backendId: item.interaction_id, + channel: channelFromBackend(item.channel), + customerName: item.subject || item.interaction_id, + customerIdentifier: item.customer_id || item.queue_id || item.interaction_id, + lastMessage: item.subject, + timestamp: formatTime(item.updated_at || item.created_at), + status: statusFromBackend(item.status), + queueId: item.queue_id, + assignedTo: item.assigned_to, + createdAt: item.created_at, + updatedAt: item.updated_at, + raw: item, +}); + +const mapThread = (item: BackendThread, source: 'telegram' | 'whatsapp'): UnifiedInteraction => ({ + id: `${source}:${item.thread_id}`, + source, + backendId: item.thread_id, + channel: source === 'telegram' ? ChannelType.TELEGRAM : ChannelType.WHATSAPP, + customerName: item.display_name || item.username || item.phone_number || item.chat_id, + customerIdentifier: item.username ? `@${item.username}` : item.phone_number || item.chat_id, + lastMessage: item.last_message_preview || 'Нет сообщений', + timestamp: formatTime(item.last_message_at), + status: statusFromBackend(item.status), + queueId: item.queue_id, + assignedTo: item.claimed_by_user, + createdAt: item.created_at, + updatedAt: item.updated_at, + aiState: item.ai_state, + raw: item, +}); + +const mapCall = (item: BackendLiveCall): UnifiedInteraction => ({ + id: `voice:${item.call_id}`, + source: 'voice', + backendId: item.call_id, + channel: ChannelType.VOICE, + customerName: item.caller_name || item.caller_number || item.call_id, + customerIdentifier: item.caller_number || item.queue_code || item.queue_id, + lastMessage: item.telephony_status || item.status || 'live', + timestamp: formatTime(item.updated_at || item.started_at), + status: statusFromBackend(item.ended_at ? 'ended' : item.telephony_status || item.status), + queueId: item.queue_id, + assignedTo: item.claimed_by_user, + createdAt: item.started_at, + updatedAt: item.updated_at, + aiState: item.ai_state, + raw: item, +}); + +const threadService = (source: SourceKind) => (source === 'whatsapp' ? 'whatsapp' : 'telegram'); + +export const OperatorView: React.FC<{ channelFilter?: ChannelType; title?: string }> = ({ + channelFilter, + title = 'Рабочее место оператора', +}) => { + const [activeTab, setActiveTab] = React.useState<'all' | 'mine'>('all'); + const [items, setItems] = React.useState([]); + const [selectedInteraction, setSelectedInteraction] = React.useState(null); + const [messages, setMessages] = React.useState([]); + const [replyText, setReplyText] = React.useState(''); + const [isLoading, setIsLoading] = React.useState(true); + const [isWorking, setIsWorking] = React.useState(false); + const [isSending, setIsSending] = React.useState(false); + const [loadError, setLoadError] = React.useState(null); + const { showToast } = useToast(); + const { user } = useAuth(); + + const loadWorkspace = React.useCallback(async () => { + setIsLoading(true); + setLoadError(null); + const results = await Promise.allSettled([ + apiRequest('interaction', 'interactions?limit=50'), + apiRequest('telegram', 'integrations/telegram/threads?limit=50'), + apiRequest('whatsapp', 'integrations/whatsapp/threads?limit=50'), + apiRequest('asterisk-bridge', 'asterisk/live-calls?limit=50'), + ]); + + const nextItems = [ + ...(results[0].status === 'fulfilled' ? results[0].value.map(mapInteraction) : []), + ...(results[1].status === 'fulfilled' ? results[1].value.map((item) => mapThread(item, 'telegram')) : []), + ...(results[2].status === 'fulfilled' ? results[2].value.map((item) => mapThread(item, 'whatsapp')) : []), + ...(results[3].status === 'fulfilled' ? results[3].value.map(mapCall) : []), + ].sort((a, b) => String(b.updatedAt || '').localeCompare(String(a.updatedAt || ''))); + + const rejected = results.find((result) => result.status === 'rejected'); + if (!nextItems.length && rejected) { + setLoadError(rejected.reason instanceof Error ? rejected.reason.message : 'Backend недоступен'); + setItems([]); + } else { + setItems(nextItems); + } + setIsLoading(false); + }, []); + + React.useEffect(() => { + loadWorkspace(); + const timer = window.setInterval(loadWorkspace, 10000); + return () => window.clearInterval(timer); + }, [loadWorkspace]); + + React.useEffect(() => { + if (!selectedInteraction && items.length) { + setSelectedInteraction(items[0]); + } + }, [items, selectedInteraction]); + + React.useEffect(() => { + if (!selectedInteraction || !['telegram', 'whatsapp'].includes(selectedInteraction.source)) { + setMessages([]); + return; + } + const service = threadService(selectedInteraction.source); + apiRequest( + service, + `integrations/${service}/threads/${encodeURIComponent(selectedInteraction.backendId)}/messages?limit=100`, + ) + .then(setMessages) + .catch(() => setMessages([])); + }, [selectedInteraction]); + + const visibleItems = React.useMemo(() => { + const channelItems = channelFilter ? items.filter((item) => item.channel === channelFilter) : items; + if (activeTab === 'mine') { + return channelItems.filter((item) => item.assignedTo === user?.username || item.status === 'ACTIVE'); + } + return channelItems; + }, [activeTab, channelFilter, items, user?.username]); + + const activeCount = items.filter((item) => item.status === 'ACTIVE').length; + const queueCount = items.filter((item) => item.status === 'PENDING').length; + const closedCount = items.filter((item) => item.status === 'CLOSED').length; + + const handleTakeInWork = async (interaction: UnifiedInteraction) => { + setIsWorking(true); + try { + if (interaction.source === 'voice') { + await apiRequest('asterisk-bridge', `asterisk/live-calls/${encodeURIComponent(interaction.backendId)}/claim`, { + method: 'POST', + body: JSON.stringify({ operator_extension: '1001' }), + }); + } else if (interaction.source === 'telegram' || interaction.source === 'whatsapp') { + const service = threadService(interaction.source); + await apiRequest(service, `integrations/${service}/threads/${encodeURIComponent(interaction.backendId)}/claim`, { + method: 'POST', + }); + } else { + await apiRequest( + 'interaction', + `interactions/${encodeURIComponent(interaction.backendId)}/status`, + { + method: 'PATCH', + body: JSON.stringify({ status: 'in_progress' }), + }, + ); + } + showToast('success', 'Обращение принято', `${interaction.customerName} теперь в рабочей зоне.`); + await loadWorkspace(); + setSelectedInteraction((current) => (current ? { ...current, status: 'ACTIVE', assignedTo: user?.username } : current)); + } catch (err) { + showToast('error', 'Backend отклонил действие', err instanceof Error ? err.message : 'Не удалось принять обращение'); + } finally { + setIsWorking(false); + } + }; + + const handleFinish = async () => { + if (!selectedInteraction) return; + setIsWorking(true); + try { + if (selectedInteraction.source === 'voice') { + await apiRequest( + 'asterisk-bridge', + `asterisk/live-calls/${encodeURIComponent(selectedInteraction.backendId)}/hangup`, + { method: 'POST' }, + ); + } else if (selectedInteraction.source === 'telegram' || selectedInteraction.source === 'whatsapp') { + const service = threadService(selectedInteraction.source); + await apiRequest(service, `integrations/${service}/threads/${encodeURIComponent(selectedInteraction.backendId)}/close`, { + method: 'POST', + }); + } else { + await apiRequest( + 'interaction', + `interactions/${encodeURIComponent(selectedInteraction.backendId)}/status`, + { + method: 'PATCH', + body: JSON.stringify({ status: 'closed', resolved_first_contact: true }), + }, + ); + } + showToast('success', 'Обращение завершено', 'Статус сохранен в call-center backend.'); + await loadWorkspace(); + setSelectedInteraction(null); + } catch (err) { + showToast('error', 'Не удалось завершить', err instanceof Error ? err.message : 'Backend error'); + } finally { + setIsWorking(false); + } + }; + + const handleSendReply = async () => { + if (!selectedInteraction || !replyText.trim()) return; + if (!['telegram', 'whatsapp'].includes(selectedInteraction.source)) { + showToast('warning', 'Ответ доступен для мессенджеров', 'Для звонков и generic interactions используйте статусы.'); + return; + } + const service = threadService(selectedInteraction.source); + setIsSending(true); + try { + const message = await apiRequest( + service, + `integrations/${service}/threads/${encodeURIComponent(selectedInteraction.backendId)}/messages`, + { + method: 'POST', + body: JSON.stringify({ text: replyText.trim() }), + }, + ); + setMessages((current) => [...current, message]); + setReplyText(''); + showToast('success', 'Ответ отправлен', `${channelLabel[selectedInteraction.channel]} принял сообщение.`); + await loadWorkspace(); + } catch (err) { + showToast('error', 'Сообщение не отправлено', err instanceof Error ? err.message : 'Backend error'); + } finally { + setIsSending(false); + } + }; + + return ( +

{title}

Данные из call-center backend через API Gateway

+ + + +

+ +

+ + {isLoading && !items.length ? ( + + ) : ( +

+ + +

+ +

+ {visibleItems.length ? ( + visibleItems.map((item) => ( + setSelectedInteraction(item)} + /> + )) + ) : ( + + )} +

+ +

+ {selectedInteraction ? ( + <> +

+ +

+ {selectedInteraction.channel === ChannelType.VOICE ? ( + + ) : ( + + )} +

+ {selectedInteraction.customerName} + {selectedInteraction.status === 'ACTIVE' && } +

+ {channelLabel[selectedInteraction.channel]} · {selectedInteraction.customerIdentifier} +

+ +

+ {selectedInteraction.status === 'PENDING' ? ( + + ) : ( +

+ +

+ + +

+ )} +

+ +

+ {selectedInteraction.channel === ChannelType.VOICE ? ( + handleTakeInWork(selectedInteraction)} onHangup={handleFinish} isWorking={isWorking} /> + ) : ( + <> +

+ + Поток из {selectedInteraction.source === 'interaction' ? 'interaction-service' : `${selectedInteraction.source}-adapter`} + +

+ {messages.length ? ( + messages.map((message) => ) + ) : ( + + )} +

+ +

+ AI state: {selectedInteraction.aiState || 'нет активной сессии'} +

setReplyText(event.target.value)}
+                            onKeyDown={(event) => {
+                              if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+                                handleSendReply();
+                              }
+                            }}
+                            placeholder="Напишите ответ оператором..."
+                            rows={2}
+                            className="w-full pl-4 pr-12 py-3 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-4 focus:ring-indigo-500/5 focus:border-indigo-500 resize-none transition-all"
+                          />
+                          <button
+                            onClick={handleSendReply}
+                            disabled={isSending || !replyText.trim()}
+                            className="absolute right-2 bottom-3 p-2.5 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 transition-all active:scale-95 disabled:bg-slate-300"
+                          >
+                            {isSending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+                          </button>
+                        </div>
+                        <div className="mt-3 flex items-center justify-between">
+                          <div className="flex gap-3">
+                            <button className="text-[10px] font-bold text-slate-400 hover:text-slate-600 uppercase tracking-widest flex items-center gap-1 transition-colors">
+                              <Share2 className="w-3 h-3" />
+                              Файл
+                            </button>
+                            <button className="text-[10px] font-bold text-slate-400 hover:text-slate-600 uppercase tracking-widest flex items-center gap-1 transition-colors">
+                              <Clock className="w-3 h-3" />
+                              Отложить
+                            </button>
+                          </div>
+                          <div className="text-[10px] font-medium text-slate-400 italic">Ctrl+Enter для отправки</div>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </>
+            ) : (
+              <EmptyState title="Готов к работе" description="Выберите клиента из backend-очереди, чтобы начать." className="flex-1" />
+            )}
+          </div>
+
+          <div
+            className={cn(
+              'lg:col-span-3 flex-col gap-4 md:gap-6 lg:flex',
+              selectedInteraction ? 'flex col-span-1 md:col-span-12 lg:col-span-3' : 'hidden',
+            )}
+          >
+            <SmartSummary selectedInteraction={selectedInteraction} />
+            <CustomerPanel selectedInteraction={selectedInteraction} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Stat: React.FC<{ label: string; value: number; tone: string; className?: string }> = ({ label, value, tone, className }) => (
+  <div className={cn('flex flex-col', className)}>
+    <span className="text-[9px] md:text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">{label}</span>
+    <span className={cn('text-xs md:text-sm font-semibold', tone)}>{String(value).padStart(2, '0')}</span>
+  </div>
+);
+
+const InteractionRow: React.FC<{ item: UnifiedInteraction; selected: boolean; onSelect: () => void }> = ({ item, selected, onSelect }) => (
+  <button
+    onClick={onSelect}
+    className={cn(
+      'w-full text-left p-4 border-b border-slate-50 flex gap-3 transition-colors cursor-pointer group',
+      selected ? 'bg-indigo-50/30 border-l-2 border-l-indigo-600' : 'hover:bg-slate-50',
+    )}
+  >
+    <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200">
+      {item.channel === ChannelType.VOICE ? (
+        <PhoneCall className={cn('w-5 h-5', channelIconClass[item.channel], item.status === 'PENDING' && 'animate-bounce')} />
+      ) : (
+        <MessageCircle className={cn('w-5 h-5', channelIconClass[item.channel])} />
+      )}
+    </div>
+    <div className="flex-1 min-w-0">
+      <div className="flex justify-between items-start mb-0.5 gap-2">
+        <span className="font-semibold text-sm text-slate-900 truncate">{item.customerName}</span>
+        <span className="text-[10px] text-slate-400 font-medium shrink-0">{item.timestamp}</span>
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs text-slate-500 truncate italic">{item.lastMessage}</p>
+        {item.status === 'PENDING' && (
+          <span className="text-[8px] font-bold bg-rose-100 text-rose-600 px-1.5 py-0.5 rounded uppercase tracking-tighter shrink-0">Новое</span>
+        )}
+      </div>
+    </div>
+  </button>
+);
+
+const MessageBubble: React.FC<{ message: BackendThreadMessage }> = ({ message }) => {
+  const outbound = message.direction === 'outbound' || message.author_type === 'human';
+  if (message.direction === 'system') {
+    return (
+      <div className="flex flex-col items-center py-2">
+        <span className="px-3 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold rounded-full uppercase tracking-widest">{message.text}</span>
+      </div>
+    );
+  }
+  return (
+    <div className={cn('flex gap-3 max-w-[85%]', outbound && 'ml-auto flex-row-reverse')}>
+      {!outbound && (
+        <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center self-end mb-1 border border-indigo-200 shrink-0">
+          <UserIcon className="w-4 h-4 text-indigo-600" />
+        </div>
+      )}
+      <div
+        className={cn(
+          'p-4 rounded-2xl shadow-sm text-sm leading-relaxed',
+          outbound ? 'bg-slate-900 rounded-br-none text-white shadow-lg' : 'bg-white rounded-bl-none border border-slate-100 text-slate-700 italic',
+        )}
+      >
+        {message.text}
+        <div className={cn('mt-2 text-[9px]', outbound ? 'text-white/50' : 'text-slate-400')}>{formatTime(message.created_at)}</div>
+      </div>
+    </div>
+  );
+};
+
+const VoiceWorkspace: React.FC<{
+  interaction: UnifiedInteraction;
+  onClaim: () => void;
+  onHangup: () => void;
+  isWorking: boolean;
+}> = ({ interaction, onClaim, onHangup, isWorking }) => {
+  if (interaction.status === 'PENDING') {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-12 text-center animate-in fade-in duration-500">
+        <div className="w-24 h-24 bg-rose-50 rounded-full flex items-center justify-center mb-6 relative">
+          <div className="absolute inset-0 bg-rose-500/20 rounded-full animate-ping"></div>
+          <PhoneCall className="w-10 h-10 text-rose-500" />
+        </div>
+        <h4 className="text-xl font-bold text-slate-900 mb-2 italic">Входящий голосовой звонок</h4>
+        <p className="text-sm text-slate-500 mb-8 max-w-xs">
+          {interaction.customerName} ожидает в очереди {interaction.queueId || 'default'}
+        </p>
+        <div className="flex gap-4">
+          <button
+            onClick={onClaim}
+            disabled={isWorking}
+            className="w-16 h-16 bg-emerald-500 text-white rounded-full flex items-center justify-center shadow-lg shadow-emerald-500/30 hover:bg-emerald-600 transition-all active:scale-95 disabled:bg-slate-300"
+          >
+            {isWorking ? <Loader2 className="w-6 h-6 animate-spin" /> : <PhoneCall className="w-6 h-6" />}
+          </button>
+          <button
+            onClick={onHangup}
+            disabled={isWorking}
+            className="w-16 h-16 bg-rose-500 text-white rounded-full flex items-center justify-center shadow-lg shadow-rose-500/30 hover:bg-rose-600 transition-all active:scale-95 disabled:bg-slate-300"
+          >
+            <PhoneOff className="w-6 h-6" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col items-center justify-center p-12">
+        <div className="w-32 h-32 rounded-full border-4 border-indigo-100 flex items-center justify-center relative mb-6">
+          <div className="absolute inset-0 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
+          <UserIcon className="w-16 h-16 text-indigo-500" />
+        </div>
+        <h3 className="text-2xl font-bold text-slate-900 mb-1 leading-tight">{interaction.customerName}</h3>
+        <div className="flex items-center gap-2 text-indigo-600 font-mono text-xl mb-8">
+          <div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></div>
+          {interaction.lastMessage || 'connected'}
+        </div>
+
+        <div className="grid grid-cols-4 gap-6">
+          <CallControlButton icon={MicOff} label="Выкл звук" />
+          <CallControlButton icon={Pause} label="Удержать" />
+          <CallControlButton icon={Share2} label="Передать" />
+          <CallControlButton icon={PhoneOff} label="Сброс" color="rose" onClick={onHangup} />
+        </div>
+      </div>
+
+      <div className="h-48 bg-white border-t border-slate-100 p-4 overflow-y-auto">
+        <div className="flex items-center gap-2 mb-4">
+          <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">AI состояние звонка</span>
+        </div>
+        <div className="space-y-2 text-xs">
+          <p className="text-slate-500 italic">
+            <span className="font-bold text-slate-900 not-italic">Call ID:</span> {interaction.backendId}
+          </p>
+          <p className="text-slate-500 italic">
+            <span className="font-bold text-indigo-600 not-italic">AI:</span> {interaction.aiState || 'нет активной AI-сессии'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SmartSummary: React.FC<{ selectedInteraction: UnifiedInteraction | null }> = ({ selectedInteraction }) => (
+  <div className="bg-indigo-950 rounded-2xl p-4 md:p-5 shadow-xl text-white relative overflow-hidden group">
+    <div className="relative z-10">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Bot className="w-4 h-4 text-indigo-300" />
+          <span className="text-xs font-bold text-indigo-300 uppercase tracking-widest">Интеллект ИИ</span>
+        </div>
+        <span className="w-1 h-1 rounded-full bg-emerald-400 animate-pulse"></span>
+      </div>
+      <div className="space-y-4">
+        <div className="bg-white/5 border border-white/10 rounded-xl p-3">
+          <h4 className="text-[10px] font-bold text-indigo-300 uppercase tracking-widest mb-2">Источник</h4>
+          <p className="text-xs text-white italic font-medium">{selectedInteraction?.source || 'backend'}</p>
+        </div>
+        <div>
+          <h4 className="text-[10px] font-bold text-indigo-300 uppercase tracking-widest mb-2 leading-tight">Краткое содержание</h4>
+          <p className="text-[11px] text-indigo-100/80 leading-relaxed italic">
+            {selectedInteraction?.lastMessage || 'Выберите обращение, чтобы увидеть backend-контекст.'}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <button className="flex-1 py-2 bg-indigo-600 rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-indigo-500 transition-colors">Приоритет +</button>
+          <button className="flex-1 py-2 bg-white/10 rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-white/20 transition-colors">История</button>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const CustomerPanel: React.FC<{ selectedInteraction: UnifiedInteraction | null }> = ({ selectedInteraction }) => (
+  <>
+    <div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest">Профиль клиента</h3>
+        <button className="text-[10px] font-bold text-indigo-600 hover:underline uppercase tracking-widest">Изм.</button>
+      </div>
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center border border-slate-200">
+            <UserIcon className="w-6 h-6 text-slate-400" />
+          </div>
+          <div className="min-w-0">
+            <div className="text-sm font-bold text-slate-900 italic truncate">{selectedInteraction?.customerName || 'Не выбран'}</div>
+            <div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest truncate">ID: {selectedInteraction?.backendId || '-'}</div>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-2 bg-slate-50 rounded-lg border border-slate-100">
+            <div className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-0.5">Статус</div>
+            <div className="text-xs font-bold text-rose-500 italic flex items-center gap-1">
+              {selectedInteraction?.status || '-'}
+              <AlertTriangle className="w-3 h-3" />
+            </div>
+          </div>
+          <div className="p-2 bg-slate-50 rounded-lg border border-slate-100">
+            <div className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-0.5">Очередь</div>
+            <div className="text-xs font-bold text-slate-900 truncate">{selectedInteraction?.queueId || 'default'}</div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <div className="text-[11px] flex justify-between gap-3">
+            <span className="text-slate-500">Контакт</span>
+            <span className="text-slate-900 font-medium truncate">{selectedInteraction?.customerIdentifier || '-'}</span>
+          </div>
+          <div className="text-[11px] flex justify-between gap-3">
+            <span className="text-slate-500">Назначен</span>
+            <span className="text-slate-900 font-medium truncate">{selectedInteraction?.assignedTo || 'не назначен'}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm flex-1 flex flex-col min-h-0">
+      <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">История активности</h3>
+      <div className="flex-1 overflow-y-auto space-y-5 pr-1">
+        <TimelineItem date={selectedInteraction?.timestamp || 'сейчас'} action="Открыто в DigOpsCC" type={selectedInteraction?.source || 'backend'} status="Текущее" icon={PhoneCall} color="indigo" />
+        <TimelineItem date="Gateway" action="/proxy/{service}/{path}" type="Контракт старого UI" status="Завершено" icon={ShieldAlert} color="slate" />
+      </div>
+    </div>
+  </>
+);
+
+const TimelineItem: React.FC<{ date: string; action: string; type: string; status: string; icon: any; color: 'indigo' | 'slate' }> = ({
+  date,
+  action,
+  type,
+  status,
+  icon: Icon,
+  color,
+}) => (
+  <div className="relative pl-6 pb-2">
+    <div className="absolute left-0 top-0 bottom-0 w-px bg-slate-100 ml-2"></div>
+    <div className={cn('absolute left-0 top-1 w-4 h-4 rounded-full border-2 border-white shadow-sm flex items-center justify-center z-10 ml-0', color === 'indigo' ? 'bg-indigo-500' : 'bg-slate-500')}>
+      <Icon className="w-2 h-2 text-white" />
+    </div>
+    <div className="flex flex-col">
+      <div className="flex items-center justify-between mb-0.5">
+        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{date}</span>
+        <span className={cn('text-[8px] font-bold px-1 py-0.5 rounded uppercase tracking-tighter', status === 'Текущее' ? 'bg-indigo-50 text-indigo-600' : 'bg-slate-100 text-slate-600')}>{status}</span>
+      </div>
+      <div className="text-xs font-bold text-slate-900 leading-tight mb-1 italic">{action}</div>
+      <div className="text-[10px] text-slate-500 italic font-medium">{type}</div>
+    </div>
+  </div>
+);
+
+const CallControlButton: React.FC<{ icon: any; label: string; color?: string; onClick?: () => void }> = ({ icon: Icon, label, color = 'slate', onClick }) => (
+  <div className="flex flex-col items-center gap-2">
+    <button
+      onClick={onClick}
+      className={cn(
+        'w-12 h-12 rounded-2xl flex items-center justify-center transition-all active:scale-95 border border-slate-200/50 shadow-sm',
+        color === 'rose' ? 'bg-rose-50 text-rose-600 hover:bg-rose-100' : 'bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-900',
+      )}
+    >
+      <Icon className="w-5 h-5" />
+    </button>
+    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{label}</span>
+  </div>
+);
diff --git a/src/pages/dashboards/SupervisorView.tsx b/src/pages/dashboards/SupervisorView.tsx
new file mode 100644
index 0000000..cfb4092
--- /dev/null
+++ b/src/pages/dashboards/SupervisorView.tsx
@@ -0,0 +1,356 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  Activity,
+  ArrowDownRight,
+  ArrowUpRight,
+  Clock,
+  Loader2,
+  MoreHorizontal,
+  PhoneIncoming,
+  TrendingUp,
+  Users,
+} from 'lucide-react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { cn } from '../../lib/utils';
+import { apiRequest, BackendAgentState, BackendKpi, BackendQueue, BackendRealtime, BackendTimeseries } from '../../lib/api';
+import { LoadingState } from '../../components/ui/FeedbackStates';
+
+const emptyChartData = [
+  { time: '09:00', volume: 0, abandoned: 0 },
+  { time: '10:00', volume: 0, abandoned: 0 },
+  { time: '11:00', volume: 0, abandoned: 0 },
+  { time: '12:00', volume: 0, abandoned: 0 },
+  { time: '13:00', volume: 0, abandoned: 0 },
+  { time: '14:00', volume: 0, abandoned: 0 },
+  { time: '15:00', volume: 0, abandoned: 0 },
+  { time: '16:00', volume: 0, abandoned: 0 },
+];
+
+const secondsToClock = (seconds?: number) => {
+  const safe = Math.max(0, Math.round(Number(seconds || 0)));
+  const minutes = Math.floor(safe / 60);
+  return `${String(minutes).padStart(2, '0')}:${String(safe % 60).padStart(2, '0')}`;
+};
+
+const queueTone = (inQueue: number) => {
+  if (inQueue >= 25) return { status: 'КРИТИЧНО', color: 'rose' };
+  if (inQueue >= 10) return { status: 'ЗАДЕРЖКА', color: 'amber' };
+  if (inQueue > 0) return { status: 'ХОРОШО', color: 'indigo' };
+  return { status: 'ОТЛИЧНО', color: 'emerald' };
+};
+
+export const SupervisorView: React.FC = () => {
+  const [realtime, setRealtime] = React.useState<BackendRealtime | null>(null);
+  const [kpi, setKpi] = React.useState<BackendKpi | null>(null);
+  const [queues, setQueues] = React.useState<BackendQueue[]>([]);
+  const [agents, setAgents] = React.useState<BackendAgentState[]>([]);
+  const [volumeTimeseries, setVolumeTimeseries] = React.useState<BackendTimeseries | null>(null);
+  const [abandonedTimeseries, setAbandonedTimeseries] = React.useState<BackendTimeseries | null>(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const loadSupervisorData = React.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    const now = new Date();
+    const from = new Date(now);
+    from.setHours(now.getHours() - 8);
+    const windowQuery = new URLSearchParams({
+      from_ts: from.toISOString(),
+      to_ts: now.toISOString(),
+      interval: 'hour',
+    });
+    const results = await Promise.allSettled([
+      apiRequest<BackendRealtime>('supervisor', 'supervisor/realtime'),
+      apiRequest<BackendKpi>('reporting', 'reports/kpi'),
+      apiRequest<BackendQueue[]>('routing', 'queues'),
+      apiRequest<BackendAgentState[]>('supervisor', 'supervisor/agents'),
+      apiRequest<BackendTimeseries>('reporting', `reports/timeseries?${windowQuery.toString()}&metric=total`),
+      apiRequest<BackendTimeseries>('reporting', `reports/timeseries?${windowQuery.toString()}&metric=abandoned`),
+    ]);
+
+    if (results[0].status === 'fulfilled') setRealtime(results[0].value);
+    if (results[1].status === 'fulfilled') setKpi(results[1].value);
+    if (results[2].status === 'fulfilled') setQueues(results[2].value);
+    if (results[3].status === 'fulfilled') setAgents(results[3].value);
+    if (results[4].status === 'fulfilled') setVolumeTimeseries(results[4].value);
+    if (results[5].status === 'fulfilled') setAbandonedTimeseries(results[5].value);
+
+    const rejected = results.find((result) => result.status === 'rejected');
+    if (rejected) {
+      setError(rejected.reason instanceof Error ? rejected.reason.message : 'Часть backend данных недоступна');
+    }
+    setIsLoading(false);
+  }, []);
+
+  React.useEffect(() => {
+    loadSupervisorData();
+    const timer = window.setInterval(loadSupervisorData, 10000);
+    return () => window.clearInterval(timer);
+  }, [loadSupervisorData]);
+
+  const byState = realtime?.agents.by_state || {};
+  const queueMap = new Map<string, BackendQueue>(queues.map((queue) => [queue.queue_id, queue] as const));
+  const realtimeQueues = realtime?.queues || [];
+  const busiestQueue = realtimeQueues.reduce((max, queue) => (queue.in_queue > (max?.in_queue || 0) ? queue : max), realtimeQueues[0]);
+  const totalInQueue = realtimeQueues.reduce((sum, queue) => sum + Number(queue.in_queue || 0), 0);
+  const agentRows = agents.length ? agents : realtime?.agents.items || [];
+  const chartData = React.useMemo(() => {
+    const abandonedByTs = new Map(
+      (abandonedTimeseries?.points || []).map((point) => [point.ts || point.bucket || '', Number(point.value || 0)]),
+    );
+    const points = volumeTimeseries?.points || [];
+    if (!points.length) return emptyChartData;
+    return points.map((point) => ({
+      time: new Date(point.ts || point.bucket || Date.now()).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }),
+      volume: Number(point.value || 0),
+      abandoned: abandonedByTs.get(point.ts || point.bucket || '') || 0,
+    }));
+  }, [abandonedTimeseries, volumeTimeseries]);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-slate-900 tracking-tight">Консоль супервайзера</h2>
+          <p className="text-slate-500 text-sm italic">Realtime данные из supervisor-service и KPI из reporting-service</p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={loadSupervisorData}
+            className="px-4 py-2 bg-indigo-600 text-white rounded-xl text-sm font-semibold hover:bg-indigo-700 transition-colors shadow-sm flex items-center gap-2"
+          >
+            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
+            Обновить
+          </button>
+        </div>
+      </div>
+
+      {isLoading && !realtime ? (
+        <LoadingState message="Синхронизация realtime snapshot..." />
+      ) : (
+        <>
+          {error && (
+            <div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-700">
+              Часть данных пока недоступна: {error}
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <KPIItem title="Уровень сервиса" value={`${Number(kpi?.kpi?.SL || 0).toFixed(1)}%`} trend="SL" positive icon={Activity} />
+            <KPIItem title="Ср. время обработки" value={secondsToClock(kpi?.kpi?.AHT)} trend="AHT" positive icon={Clock} />
+            <KPIItem title="Ожидание в очереди" value={String(totalInQueue)} trend="Live" positive={totalInQueue < 10} icon={PhoneIncoming} />
+            <KPIItem title="Операторов в сети" value={String(byState.READY || 0)} trend={`${realtime?.agents.total || 0} всего`} positive icon={Users} />
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2 bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-sm font-bold text-slate-900 uppercase tracking-widest flex items-center gap-2">
+                  <TrendingUp className="w-4 h-4 text-indigo-500" />
+                  Объем обращений
+                </h3>
+                <div className="flex gap-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                  <div className="flex items-center gap-1.5">
+                    <span className="w-2 h-2 rounded-full bg-indigo-500"></span> Обработано
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="w-2 h-2 rounded-full bg-rose-500"></span> Пропущено
+                  </div>
+                </div>
+              </div>
+              <div className="h-[300px]">
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart data={chartData}>
+                    <defs>
+                      <linearGradient id="colorVol" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#4f46e5" stopOpacity={0.1} />
+                        <stop offset="95%" stopColor="#4f46e5" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
+                    <XAxis dataKey="time" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} dy={10} />
+                    <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} />
+                    <Tooltip contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }} />
+                    <Area type="monotone" dataKey="volume" stroke="#4f46e5" fillOpacity={1} fill="url(#colorVol)" strokeWidth={2} />
+                    <Area type="monotone" dataKey="abandoned" stroke="#f43f5e" fill="transparent" strokeWidth={2} strokeDasharray="5 5" />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
+              <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Состояние очередей</h3>
+              <div className="space-y-4">
+                {realtimeQueues.length ? (
+                  realtimeQueues.map((queue) => {
+                    const queueInfo = queueMap.get(queue.queue_id);
+                    const tone = queueTone(queue.in_queue);
+                    return (
+                      <QueueItem
+                        key={queue.queue_id}
+                        name={queueInfo?.name || queue.queue_id}
+                        count={queue.in_queue}
+                        status={tone.status}
+                        color={tone.color}
+                      />
+                    );
+                  })
+                ) : (
+                  <QueueItem name="Очереди не заполнены" count={0} status="НЕТ ДАННЫХ" color="slate" />
+                )}
+              </div>
+
+              <div className="mt-8 p-4 bg-slate-50 rounded-xl border border-slate-100">
+                <div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Макс. ожидание</div>
+                <div className="text-2xl font-mono italic text-slate-900">{secondsToClock(busiestQueue?.avg_wait_seconds)}</div>
+                <div className="text-[10px] text-slate-500 mt-1 uppercase italic tracking-widest">
+                  В {queueMap.get(busiestQueue?.queue_id || '')?.name || busiestQueue?.queue_id || 'очереди'}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+            <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="text-xs font-bold text-slate-900 uppercase tracking-widest">Управление активной командой</h3>
+              <input type="text" placeholder="Фильтр операторов..." className="text-xs border border-slate-200 rounded-lg px-3 py-1.5 focus:outline-none focus:border-indigo-500" />
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="bg-slate-50/50 text-[10px] uppercase font-bold text-slate-500 tracking-wider">
+                    <th className="px-6 py-4">Имя оператора</th>
+                    <th className="px-6 py-4">Статус</th>
+                    <th className="px-6 py-4">Очередь</th>
+                    <th className="px-6 py-4">Загрузка</th>
+                    <th className="px-6 py-4">Обновлено</th>
+                    <th className="px-6 py-4"></th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-50 text-sm">
+                  {agentRows.map((agent) => (
+                    <AgentRow key={agent.agent_id} agent={agent} queueName={queueMap.get(agent.queue_id || '')?.name} />
+                  ))}
+                  {!agentRows.length && (
+                    <tr>
+                      <td colSpan={6} className="px-6 py-10 text-center text-sm text-slate-400">
+                        Supervisor-service пока не вернул агентские состояния.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+const KPIItem: React.FC<{ title: string; value: string; trend: string; positive: boolean; icon: any }> = ({
+  title,
+  value,
+  trend,
+  positive,
+  icon: Icon,
+}) => (
+  <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
+    <div className="flex items-center justify-between mb-4">
+      <div className="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center">
+        <Icon className="w-5 h-5 text-slate-600" />
+      </div>
+      <div className={cn('flex items-center gap-1 text-[11px] font-bold px-2 py-0.5 rounded-full uppercase tracking-widest', positive ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600')}>
+        {positive ? <ArrowUpRight className="w-3 h-3" /> : <ArrowDownRight className="w-3 h-3" />}
+        {trend}
+      </div>
+    </div>
+    <div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{title}</div>
+    <div className="text-2xl font-bold text-slate-900 tracking-tight">{value}</div>
+  </div>
+);
+
+const QueueItem: React.FC<{ name: string; count: number; status: string; color: string }> = ({ name, count, status, color }) => {
+  const tone =
+    color === 'rose'
+      ? 'bg-rose-50 text-rose-600'
+      : color === 'amber'
+        ? 'bg-amber-50 text-amber-600'
+        : color === 'emerald'
+          ? 'bg-emerald-50 text-emerald-600'
+          : color === 'indigo'
+            ? 'bg-indigo-50 text-indigo-600'
+            : 'bg-slate-100 text-slate-600';
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <div className="text-sm font-semibold text-slate-900">{name}</div>
+        <div className={cn('text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded italic', tone)}>{status}</div>
+      </div>
+      <div className="text-xl font-bold text-slate-900 font-mono italic">{count}</div>
+    </div>
+  );
+};
+
+const AgentRow: React.FC<{ agent: BackendAgentState; queueName?: string }> = ({ agent, queueName }) => {
+  const statusTone = {
+    READY: 'bg-emerald-500 shadow-sm shadow-emerald-500/50',
+    BUSY: 'bg-rose-500 shadow-sm shadow-rose-500/50',
+    BREAK: 'bg-amber-500 shadow-sm shadow-amber-500/50',
+    OFFLINE: 'bg-slate-400',
+  }[agent.state];
+  const statusLabel = {
+    READY: 'Готов',
+    BUSY: 'Занят',
+    BREAK: 'Перерыв',
+    OFFLINE: 'Оффлайн',
+  }[agent.state];
+  const load = agent.state === 'BUSY' ? 3 : agent.state === 'READY' ? 1 : 0;
+
+  return (
+    <tr className="hover:bg-slate-50/50 transition-colors group">
+      <td className="px-6 py-4">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center shrink-0">
+            <Users className="w-4 h-4 text-slate-400" />
+          </div>
+          <div className="font-semibold text-slate-900">{agent.agent_id}</div>
+        </div>
+      </td>
+      <td className="px-6 py-4">
+        <div className="flex items-center gap-1.5">
+          <span className={cn('w-1.5 h-1.5 rounded-full', statusTone)}></span>
+          <span className="text-xs font-medium text-slate-600 uppercase tracking-widest">{statusLabel}</span>
+        </div>
+      </td>
+      <td className="px-6 py-4 text-slate-500 font-medium italic">{queueName || agent.queue_id || '-'}</td>
+      <td className="px-6 py-4">
+        <div className="flex gap-1">
+          {[0, 1, 2].map((index) => (
+            <div key={index} className={cn('w-4 h-1.5 rounded-full', index < load ? 'bg-indigo-500' : 'bg-slate-200')}></div>
+          ))}
+        </div>
+      </td>
+      <td className="px-6 py-4 font-mono text-xs text-slate-600">{agent.updated_at ? new Date(agent.updated_at).toLocaleTimeString('ru-RU') : '-'}</td>
+      <td className="px-6 py-4 text-right">
+        <button className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg group-hover:opacity-100 opacity-0 transition-all">
+          <MoreHorizontal className="w-4 h-4" />
+        </button>
+      </td>
+    </tr>
+  );
+};
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..9a74457
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,46 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum UserRole {
+  OPERATOR = 'OPERATOR',
+  SUPERVISOR = 'SUPERVISOR',
+  ADMIN = 'ADMIN',
+  ANALYST = 'ANALYST',
+}
+
+export enum UserStatus {
+  ONLINE = 'ONLINE',
+  AWAY = 'AWAY',
+  BUSY = 'BUSY',
+  OFFLINE = 'OFFLINE',
+}
+
+export interface User {
+  id: string;
+  username?: string;
+  email: string;
+  name: string;
+  role: UserRole;
+  status: UserStatus;
+  avatarUrl?: string;
+}
+
+export enum ChannelType {
+  VOICE = 'VOICE',
+  TELEGRAM = 'TELEGRAM',
+  WHATSAPP = 'WHATSAPP',
+  WEBCHAT = 'WEBCHAT',
+  EMAIL = 'EMAIL',
+}
+
+export interface Interaction {
+  id: string;
+  channel: ChannelType;
+  customerName: string;
+  customerIdentifier: string;
+  lastMessage?: string;
+  timestamp: string;
+  status: 'PENDING' | 'ACTIVE' | 'CLOSED';
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..ed77210
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d88f175
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..9c77cf6
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,36 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, '.', '');
+  const gatewayUrl = env.VITE_CC_GATEWAY_URL || 'http://localhost:8080';
+  return {
+    base: env.VITE_BASE_PATH || (mode === 'production' ? '/omnichannel/' : '/'),
+    plugins: [react(), tailwindcss()],
+    define: {
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modifyâfile watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      proxy: {
+        '/health': {
+          target: gatewayUrl,
+          changeOrigin: true,
+        },
+        '/proxy': {
+          target: gatewayUrl,
+          changeOrigin: true,
+        },
+      },
+    },
+  };
+});

DigOpsCC

{message}

{title}

System Fault Detected

{toast.title}

+ Новый интерфейс + того же call-center ядра. +

Gateway

Backend

Вход через call-center

AI Голос

Транскрипт

Панель управления

Новый сотрудник

Оптимизация ИИ-движка

Корпоративная база знаний

+ + Емкость очередей обслуживания +

Подключенные каналы

{provider}

+ Панель аналитики +

Анализ объема и эффективности

Популярность каналов

Рейтинг операторов

Состояние очередей

Отчет ИИ

Исторические данные

{title}

+ {selectedInteraction.customerName} + {selectedInteraction.status === 'ACTIVE' && } +

+ Новый интерфейс
+ того же call-center ядра. +