init: DigOpsCC UI - React frontend for call-center backend (migrated from /opt untracked source)
This commit is contained in:
konturai-ops
@@ -0,0 +1,8 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.env*
|
||||||
|
*.log
|
||||||
|
coverage
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
# GEMINI_API_KEY: Required for Gemini AI API calls.
|
||||||
|
# AI Studio automatically injects this at runtime from user secrets.
|
||||||
|
# Users configure this via the Secrets panel in the AI Studio UI.
|
||||||
|
GEMINI_API_KEY="MY_GEMINI_API_KEY"
|
||||||
|
|
||||||
|
# APP_URL: The URL where this applet is hosted.
|
||||||
|
# AI Studio automatically injects this at runtime with the Cloud Run service URL.
|
||||||
|
# Used for self-referential links, OAuth callbacks, and API endpoints.
|
||||||
|
APP_URL="MY_APP_URL"
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
node_modules/
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
coverage/
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.env*
|
||||||
|
!.env.example
|
||||||
+18
@@ -0,0 +1,18 @@
|
|||||||
|
FROM node:20-alpine AS build
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
ARG VITE_BASE_PATH=/
|
||||||
|
ENV VITE_BASE_PATH=${VITE_BASE_PATH}
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:1.29-alpine
|
||||||
|
|
||||||
|
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
# DigOpsCC UI
|
||||||
|
|
||||||
|
Новый React UI для существующего `call-center` backend.
|
||||||
|
|
||||||
|
## Backend contract
|
||||||
|
|
||||||
|
UI использует тот же API Gateway, что и `call-center/ui`:
|
||||||
|
|
||||||
|
- gateway health: `/health`
|
||||||
|
- service proxy: `/proxy/{service}/{path}`
|
||||||
|
- auth header: `Authorization: Bearer <token>`
|
||||||
|
- actor headers: `X-User`, `X-Role`
|
||||||
|
|
||||||
|
По умолчанию Vite proxy отправляет `/health` и `/proxy` на `http://localhost:8080`.
|
||||||
|
|
||||||
|
## Local development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Откройте [http://localhost:3000](http://localhost:3000). Перед этим поднимите backend gateway:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ../call-center
|
||||||
|
uvicorn gateway.app:app --reload --port 8080
|
||||||
|
```
|
||||||
|
|
||||||
|
Можно переопределить адрес gateway:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
VITE_CC_GATEWAY_URL=http://localhost:8080 npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Gateway deployment
|
||||||
|
|
||||||
|
Production build по умолчанию собирается с base path `/omnichannel/`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
`call-center/gateway/app.py` подхватывает build из `../omnichannel-contact-center/dist` и раздает его на:
|
||||||
|
|
||||||
|
- [http://localhost:8080/omnichannel/](http://localhost:8080/omnichannel/)
|
||||||
|
|
||||||
|
При необходимости путь можно поменять через `OMNICHANNEL_UI_DIR`.
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
resolver 127.0.0.11 valid=30s ipv6=off;
|
||||||
|
resolver_timeout 5s;
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
client_max_body_size 50m;
|
||||||
|
|
||||||
|
location = /health {
|
||||||
|
set $api_gateway http://api-gateway:8000;
|
||||||
|
proxy_pass $api_gateway/health;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /proxy/ {
|
||||||
|
set $api_gateway http://api-gateway:8000;
|
||||||
|
proxy_pass $api_gateway;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_read_timeout 600s;
|
||||||
|
proxy_send_timeout 600s;
|
||||||
|
proxy_connect_timeout 60s;
|
||||||
|
proxy_set_header Connection "upgrade";
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header Origin $http_origin;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>DigOpsCC</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "OmniChannel Contact Center",
|
||||||
|
"description": "A modern enterprise SaaS platform for contact center operators, supervisors, and admins, featuring omnichannel support and real-time monitoring.",
|
||||||
|
"requestFramePermissions": [],
|
||||||
|
"majorCapabilities": []
|
||||||
|
}
|
||||||
Generated
+4797
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "digopscc",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"clean": "rm -rf dist",
|
||||||
|
"lint": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@google/genai": "^1.29.0",
|
||||||
|
"@tailwindcss/vite": "^4.1.14",
|
||||||
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"dotenv": "^17.2.3",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"lucide-react": "^0.546.0",
|
||||||
|
"motion": "^12.23.24",
|
||||||
|
"react": "^19.0.1",
|
||||||
|
"react-dom": "^19.0.1",
|
||||||
|
"react-router-dom": "^7.14.2",
|
||||||
|
"recharts": "^3.8.1",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"tailwindcss": "^4.1.14",
|
||||||
|
"tsx": "^4.21.0",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
+87
@@ -0,0 +1,87 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import { AuthProvider, useAuth } from './context/AuthContext';
|
||||||
|
import { ToastProvider } from './components/ui/Toast';
|
||||||
|
import { MainLayout } from './components/Layout/MainLayout';
|
||||||
|
import { Login } from './pages/Login';
|
||||||
|
import { OperatorView } from './pages/dashboards/OperatorView';
|
||||||
|
import { SupervisorView } from './pages/dashboards/SupervisorView';
|
||||||
|
import { AdminView } from './pages/dashboards/AdminView';
|
||||||
|
import { AnalystView } from './pages/dashboards/AnalystView';
|
||||||
|
import { ChannelType, UserRole } from './types';
|
||||||
|
import { VoiceAIPage } from './pages/VoiceAIPage';
|
||||||
|
|
||||||
|
const routerBasename = import.meta.env.BASE_URL === './' ? '/' : import.meta.env.BASE_URL;
|
||||||
|
|
||||||
|
const DashboardRouter = () => {
|
||||||
|
const { user, isAuthenticated, isLoading } = useAuth();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-slate-50">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-indigo-600"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<Login />} />
|
||||||
|
<Route path="*" element={<Navigate to="/login" replace />} />
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDashboardByRole = () => {
|
||||||
|
switch (user?.role) {
|
||||||
|
case UserRole.OPERATOR:
|
||||||
|
return <OperatorView />;
|
||||||
|
case UserRole.SUPERVISOR:
|
||||||
|
return <SupervisorView />;
|
||||||
|
case UserRole.ADMIN:
|
||||||
|
return <AdminView />;
|
||||||
|
case UserRole.ANALYST:
|
||||||
|
return <AnalystView />;
|
||||||
|
default:
|
||||||
|
return <OperatorView />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainLayout>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/dashboard" element={getDashboardByRole()} />
|
||||||
|
<Route path="/interactions" element={<OperatorView />} />
|
||||||
|
<Route path="/calls" element={<OperatorView channelFilter={ChannelType.VOICE} title="Голосовые звонки" />} />
|
||||||
|
<Route path="/monitoring" element={<SupervisorView />} />
|
||||||
|
<Route path="/reports" element={<AnalystView />} />
|
||||||
|
<Route path="/users" element={<AdminView initialTab="users" />} />
|
||||||
|
<Route path="/settings" element={<AdminView initialTab="queues" />} />
|
||||||
|
<Route path="/security" element={<AdminView initialTab="users" />} />
|
||||||
|
<Route path="/channels" element={<AdminView initialTab="channels" />} />
|
||||||
|
<Route path="/ai" element={<AdminView initialTab="ai" />} />
|
||||||
|
<Route path="/voice-ai" element={<VoiceAIPage />} />
|
||||||
|
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||||
|
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</MainLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<ToastProvider>
|
||||||
|
<Router basename={routerBasename}>
|
||||||
|
<DashboardRouter />
|
||||||
|
</Router>
|
||||||
|
</ToastProvider>
|
||||||
|
</AuthProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Sidebar } from './Sidebar';
|
||||||
|
import { TopBar } from './TopBar';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
|
||||||
|
export const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 flex">
|
||||||
|
<Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
|
||||||
|
<div className="flex-1 flex flex-col min-w-0 lg:pl-64">
|
||||||
|
<TopBar onMenuClick={() => setIsSidebarOpen(true)} />
|
||||||
|
<motion.main
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex-1 p-4 md:p-6 overflow-auto"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import { useAuth } from '../../context/AuthContext';
|
||||||
|
import {
|
||||||
|
BarChart3,
|
||||||
|
MessageSquare,
|
||||||
|
Mic,
|
||||||
|
Phone,
|
||||||
|
Settings,
|
||||||
|
Users,
|
||||||
|
LayoutDashboard,
|
||||||
|
LogOut,
|
||||||
|
Zap
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { UserRole } from '../../types';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ id: 'dashboard', path: '/dashboard', label: 'Рабочий стол', icon: LayoutDashboard, roles: [UserRole.OPERATOR, UserRole.SUPERVISOR, UserRole.ADMIN, UserRole.ANALYST] },
|
||||||
|
{ id: 'interactions', path: '/interactions', label: 'Обращения', icon: MessageSquare, roles: [UserRole.OPERATOR, UserRole.SUPERVISOR] },
|
||||||
|
{ id: 'calls', path: '/calls', label: 'Звонки', icon: Phone, roles: [UserRole.OPERATOR, UserRole.SUPERVISOR] },
|
||||||
|
{ id: 'voice-ai', path: '/voice-ai', label: 'AI Голос', icon: Mic, roles: [UserRole.OPERATOR, UserRole.SUPERVISOR, UserRole.ADMIN, UserRole.ANALYST] },
|
||||||
|
{ id: 'monitoring', path: '/monitoring', label: 'Мониторинг', icon: Zap, roles: [UserRole.SUPERVISOR, UserRole.ADMIN] },
|
||||||
|
{ id: 'reports', path: '/reports', label: 'Отчеты', icon: BarChart3, roles: [UserRole.SUPERVISOR, UserRole.ANALYST, UserRole.ADMIN] },
|
||||||
|
{ id: 'users', path: '/users', label: 'Пользователи', icon: Users, roles: [UserRole.ADMIN] },
|
||||||
|
{ id: 'settings', path: '/settings', label: 'Настройки', icon: Settings, roles: [UserRole.ADMIN] },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Sidebar: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
|
||||||
|
const filteredItems = navItems.filter(item => user && item.roles.includes(user.role));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Mobile Overlay */}
|
||||||
|
{isOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40 lg:hidden"
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={cn(
|
||||||
|
"w-64 h-screen bg-white border-r border-slate-200 flex flex-col fixed left-0 top-0 z-50 transition-transform duration-300 transform lg:translate-x-0",
|
||||||
|
isOpen ? "translate-x-0" : "-translate-x-full"
|
||||||
|
)}>
|
||||||
|
<div className="p-6 flex items-center justify-between gap-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
|
||||||
|
<Zap className="text-white w-5 h-5 fill-current" />
|
||||||
|
</div>
|
||||||
|
<h1 className="font-bold text-slate-900 text-lg tracking-tight">DigOpsCC</h1>
|
||||||
|
</div>
|
||||||
|
<button onClick={onClose} className="lg:hidden p-2 text-slate-400 hover:text-slate-600">
|
||||||
|
<LogOut className="w-5 h-5 rotate-180" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
|
||||||
|
{filteredItems.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
key={item.id}
|
||||||
|
to={item.path}
|
||||||
|
onClick={onClose}
|
||||||
|
className={({ isActive }) => 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 }) => (
|
||||||
|
<>
|
||||||
|
<Icon className={cn("w-5 h-5", isActive ? "text-indigo-600" : "text-slate-400")} />
|
||||||
|
{item.label}
|
||||||
|
{isActive && (
|
||||||
|
<motion.div
|
||||||
|
layoutId="active-pill"
|
||||||
|
className="ml-auto w-1.5 h-1.5 rounded-full bg-indigo-500"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-slate-100 italic text-[10px] text-slate-400 text-center">
|
||||||
|
v2.4.0 Высокопроизводительное ядро
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-slate-100">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
onClose();
|
||||||
|
logout();
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-rose-600 hover:bg-rose-50 transition-colors"
|
||||||
|
>
|
||||||
|
<LogOut className="w-5 h-5" />
|
||||||
|
Выйти
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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, string> = {
|
||||||
|
[UserRole.OPERATOR]: 'Оператор',
|
||||||
|
[UserRole.SUPERVISOR]: 'Супервайзер',
|
||||||
|
[UserRole.ADMIN]: 'Администратор',
|
||||||
|
[UserRole.ANALYST]: 'Аналитик',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!user) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 md:px-6 sticky top-0 z-30 w-full transition-all">
|
||||||
|
<div className="flex items-center gap-3 flex-1 max-w-md">
|
||||||
|
<button
|
||||||
|
onClick={onMenuClick}
|
||||||
|
className="lg:hidden p-2 text-slate-500 hover:bg-slate-50 rounded-lg transition-colors shrink-0"
|
||||||
|
>
|
||||||
|
<Menu className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
<div className="relative w-full hidden sm:block">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Поиск обращений, клиентов..."
|
||||||
|
className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button className="p-2 text-slate-500 hover:bg-slate-50 rounded-lg relative transition-colors">
|
||||||
|
<Bell className="w-5 h-5" />
|
||||||
|
<span className="absolute top-2 right-2 w-2 h-2 bg-rose-500 border-2 border-white rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="h-8 w-px bg-slate-200 mx-2"></div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 pl-2 group relative">
|
||||||
|
<div className="text-right flex flex-col" onClick={() => setShowStatusMenu(!showStatusMenu)}>
|
||||||
|
<span className="text-sm font-semibold text-slate-900 leading-tight group-hover:text-indigo-600 transition-colors cursor-pointer">{user.name}</span>
|
||||||
|
<span className="text-[11px] font-medium text-slate-500 uppercase tracking-wider">{roleLabels[user.role]}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative cursor-pointer" onClick={() => setShowStatusMenu(!showStatusMenu)}>
|
||||||
|
<div className="w-9 h-9 rounded-full bg-slate-100 border border-slate-200 overflow-hidden">
|
||||||
|
{user.avatarUrl ? (
|
||||||
|
<img src={user.avatarUrl} alt={user.name} className="w-full h-full object-cover" referrerPolicy="no-referrer" />
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center text-slate-400">
|
||||||
|
<UserIcon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={cn(
|
||||||
|
"absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white",
|
||||||
|
statusColors[user.status]
|
||||||
|
)}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ChevronDown
|
||||||
|
className={cn("w-4 h-4 text-slate-400 group-hover:text-slate-600 transition-all cursor-pointer", showStatusMenu && "rotate-180")}
|
||||||
|
onClick={() => setShowStatusMenu(!showStatusMenu)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{showStatusMenu && (
|
||||||
|
<div className="absolute top-full right-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-slate-100 py-2 z-50 animate-in fade-in zoom-in duration-200">
|
||||||
|
<div className="px-4 py-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Изменить статус</div>
|
||||||
|
{Object.values(UserStatus).map((status) => {
|
||||||
|
const labels: Record<string, string> = {
|
||||||
|
[UserStatus.ONLINE]: 'В сети',
|
||||||
|
[UserStatus.AWAY]: 'Отошел',
|
||||||
|
[UserStatus.BUSY]: 'Занят',
|
||||||
|
[UserStatus.OFFLINE]: 'Не в сети'
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={status}
|
||||||
|
onClick={() => {
|
||||||
|
setStatus(status);
|
||||||
|
setShowStatusMenu(false);
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors"
|
||||||
|
>
|
||||||
|
<div className={cn("w-2 h-2 rounded-full", statusColors[status])}></div>
|
||||||
|
<span className="capitalize">{labels[status]}</span>
|
||||||
|
{user.status === status && <div className="ml-auto w-1 h-1 rounded-full bg-indigo-500"></div>}
|
||||||
|
</button>
|
||||||
|
)})}
|
||||||
|
<div className="border-t border-slate-100 my-1"></div>
|
||||||
|
<button
|
||||||
|
onClick={logout}
|
||||||
|
className="w-full flex items-center gap-3 px-4 py-2 text-sm text-rose-600 hover:bg-rose-50 transition-colors"
|
||||||
|
>
|
||||||
|
Выйти
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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 }) => (
|
||||||
|
<div className={cn("flex flex-col items-center justify-center p-12 text-center", className)}>
|
||||||
|
<div className="w-16 h-16 bg-slate-50 rounded-3xl flex items-center justify-center mb-4 border border-slate-100 shadow-sm">
|
||||||
|
<Loader2 className="w-8 h-8 text-indigo-600 animate-spin" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-bold text-slate-900 italic tracking-tight">{message}</h3>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">Please wait while the quantum cores stabilize.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const EmptyState: React.FC<{ title: string; description: string; icon?: any; action?: React.ReactNode; className?: string }> = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon: Icon = Inbox,
|
||||||
|
action,
|
||||||
|
className
|
||||||
|
}) => (
|
||||||
|
<div className={cn("flex flex-col items-center justify-center p-12 text-center", className)}>
|
||||||
|
<div className="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center mb-6 border border-slate-100/50 shadow-sm group">
|
||||||
|
<Icon className="w-10 h-10 text-slate-300 group-hover:text-indigo-400 transition-colors duration-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-slate-900 italic tracking-tight mb-2">{title}</h3>
|
||||||
|
<p className="text-sm text-slate-500 max-w-xs mx-auto italic mb-8">{description}</p>
|
||||||
|
{action}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ErrorState: React.FC<{ message: string; onRetry?: () => void; className?: string }> = ({ message, onRetry, className }) => (
|
||||||
|
<div className={cn("flex flex-col items-center justify-center p-12 text-center bg-rose-50/30 rounded-3xl border border-rose-100", className)}>
|
||||||
|
<div className="w-16 h-16 bg-rose-100 rounded-3xl flex items-center justify-center mb-4 border border-rose-200 shadow-sm">
|
||||||
|
<AlertCircle className="w-8 h-8 text-rose-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-bold text-rose-900 italic tracking-tight">System Fault Detected</h3>
|
||||||
|
<p className="text-xs text-rose-600/70 mt-1 mb-6 max-w-xs">{message}</p>
|
||||||
|
{onRetry && (
|
||||||
|
<button
|
||||||
|
onClick={onRetry}
|
||||||
|
className="px-6 py-2 bg-rose-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-rose-700 transition-all shadow-md active:scale-95"
|
||||||
|
>
|
||||||
|
Re-sync Module
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -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<ToastContextType | undefined>(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<Toast[]>([]);
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<ToastContext.Provider value={{ showToast, removeToast }}>
|
||||||
|
{children}
|
||||||
|
<div className="fixed bottom-6 right-6 z-[100] flex flex-col gap-3 w-full max-w-sm pointer-events-none">
|
||||||
|
<AnimatePresence>
|
||||||
|
{toasts.map((toast) => (
|
||||||
|
<ToastItem key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</ToastContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ToastItem: React.FC<{ toast: Toast; onClose: () => void }> = ({ toast, onClose }) => {
|
||||||
|
const icons = {
|
||||||
|
success: <CheckCircle2 className="w-5 h-5 text-emerald-500" />,
|
||||||
|
error: <XCircle className="w-5 h-5 text-rose-500" />,
|
||||||
|
warning: <AlertCircle className="w-5 h-5 text-amber-500" />,
|
||||||
|
info: <Info className="w-5 h-5 text-indigo-500" />,
|
||||||
|
};
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||||
|
className={cn(
|
||||||
|
"pointer-events-auto p-4 rounded-2xl border shadow-xl flex items-start gap-3",
|
||||||
|
bgColors[toast.type]
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="shrink-0 mt-0.5">{icons[toast.type]}</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-sm font-bold text-slate-900 leading-tight italic">{toast.title}</h4>
|
||||||
|
{toast.message && <p className="text-xs text-slate-600 mt-1">{toast.message}</p>}
|
||||||
|
</div>
|
||||||
|
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-600 transition-colors">
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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<void>;
|
||||||
|
applySession: (session: AuthSession) => void;
|
||||||
|
logout: () => void;
|
||||||
|
setStatus: (status: UserStatus) => void;
|
||||||
|
isLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const [session, setSession] = useState<AuthSession | null>(null);
|
||||||
|
const [user, setUser] = useState<User | null>(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 <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const context = useContext(AuthContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
+387
@@ -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<string, number>;
|
||||||
|
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<string, number>;
|
||||||
|
breakdowns?: {
|
||||||
|
by_channel?:
|
||||||
|
| Array<{ channel: string; total: number; answered?: number; abandoned?: number }>
|
||||||
|
| Record<string, { total: number; answered?: number; abandoned?: number }>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
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<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||||
|
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<T>(
|
||||||
|
service: string,
|
||||||
|
path: string,
|
||||||
|
options: RequestInit & { session?: AuthSession | null } = {},
|
||||||
|
): Promise<T> {
|
||||||
|
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<AuthSession> => {
|
||||||
|
const data = await apiRequest<LoginResponse>('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<OidcConfig>('/proxy/auth/auth/oidc/config');
|
||||||
|
|
||||||
|
export const health = () => gatewayRequest<{ status: string; service: string; version?: string }>('/health');
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { type ClassValue, clsx } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
@@ -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(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
@@ -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, { label: string; description: string; username: string; password: string }> = {
|
||||||
|
[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>(UserRole.OPERATOR);
|
||||||
|
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||||
|
const [error, setError] = React.useState<string | null>(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 (
|
||||||
|
<div className="min-h-screen grid lg:grid-cols-2">
|
||||||
|
<div className="hidden lg:flex bg-indigo-600 relative overflow-hidden flex-col justify-between p-12 text-white">
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-3 mb-12">
|
||||||
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center">
|
||||||
|
<Zap className="text-white w-6 h-6 fill-current" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold text-2xl tracking-tight">DigOpsCC</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-5xl font-bold leading-[1.1] mb-6">
|
||||||
|
Новый интерфейс <br />
|
||||||
|
<span className="text-indigo-200 text-6xl">того же call-center ядра.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-indigo-100 text-lg max-w-md">
|
||||||
|
DigOpsCC работает через существующий API Gateway, auth-service, routing, supervisor,
|
||||||
|
reporting и канальные адаптеры.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 grid grid-cols-2 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-indigo-200 text-xs font-semibold uppercase tracking-widest mb-1">Gateway</h3>
|
||||||
|
<span className="text-2xl font-mono">:8080</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-indigo-200 text-xs font-semibold uppercase tracking-widest mb-1">Backend</h3>
|
||||||
|
<span className="text-2xl font-mono">/proxy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col justify-center px-8 sm:px-16 lg:px-24 bg-white">
|
||||||
|
<div className="max-w-md w-full mx-auto">
|
||||||
|
<div className="lg:hidden flex items-center gap-2 mb-12">
|
||||||
|
<Zap className="text-indigo-600 w-8 h-8 fill-current" />
|
||||||
|
<span className="font-bold text-2xl">DigOpsCC</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8 font-sans">
|
||||||
|
<h2 className="text-3xl font-bold text-slate-900 mb-2">Вход через call-center</h2>
|
||||||
|
<p className="text-slate-500">Используются учетные записи auth-service, как в старом UI.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-sm font-semibold text-slate-700">Быстрый профиль</label>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{Object.values(UserRole).map((item) => (
|
||||||
|
<button
|
||||||
|
key={item}
|
||||||
|
type="button"
|
||||||
|
onClick={() => selectRole(item)}
|
||||||
|
className={cn(
|
||||||
|
'px-3 py-3 rounded-xl border text-sm font-medium transition-all text-left flex flex-col gap-1',
|
||||||
|
role === item
|
||||||
|
? 'border-indigo-600 bg-indigo-50 text-indigo-700 ring-4 ring-indigo-500/10'
|
||||||
|
: 'border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-50',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span>{rolePresets[item].label}</span>
|
||||||
|
<span className="text-[10px] opacity-70 font-normal">{rolePresets[item].description}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-semibold text-slate-700" htmlFor="username">
|
||||||
|
Логин
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
value={username}
|
||||||
|
onChange={(event) => 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
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-semibold text-slate-700" htmlFor="password">
|
||||||
|
Пароль
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(event) => 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
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-start gap-2 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
||||||
|
<AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
|
||||||
|
<span className="break-words">{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
disabled={isSubmitting}
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-slate-900 text-white rounded-xl py-4 font-semibold hover:bg-slate-800 focus:ring-4 focus:ring-slate-900/20 transition-all flex items-center justify-center gap-2 group disabled:bg-slate-400"
|
||||||
|
>
|
||||||
|
{isSubmitting ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
Проверка в auth-service...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
Войти в консоль
|
||||||
|
<motion.span animate={{ x: [0, 4, 0] }} transition={{ repeat: Infinity, duration: 1.5 }}>
|
||||||
|
→
|
||||||
|
</motion.span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-8 pt-8 border-t border-slate-100 flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={startCorporateLogin}
|
||||||
|
className="text-sm text-slate-500 hover:text-indigo-600 flex items-center gap-2 transition-colors disabled:text-slate-300"
|
||||||
|
disabled={!oidc.enabled}
|
||||||
|
>
|
||||||
|
<Shield className="w-4 h-4" />
|
||||||
|
{oidc.enabled ? `SSO ${oidc.providerLabel}` : 'SSO недоступен'}
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="/health"
|
||||||
|
className="text-sm text-slate-500 hover:text-indigo-600 flex items-center gap-2 transition-colors"
|
||||||
|
>
|
||||||
|
<HelpCircle className="w-4 h-4" />
|
||||||
|
Health
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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<ChatMessage[]>([]);
|
||||||
|
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<WebSocket | null>(null);
|
||||||
|
const audioCtxRef = useRef<AudioContext | null>(null);
|
||||||
|
const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
|
||||||
|
const processorRef = useRef<ScriptProcessorNode | null>(null);
|
||||||
|
const streamRef = useRef<MediaStream | null>(null);
|
||||||
|
|
||||||
|
const playbackCursorRef = useRef(0);
|
||||||
|
const chainRef = useRef<Promise<void>>(Promise.resolve());
|
||||||
|
const pendingEncodedRef = useRef(0);
|
||||||
|
const activeAudiosRef = useRef<Set<HTMLAudioElement>>(new Set());
|
||||||
|
const unmuteTimerRef = useRef<number | null>(null);
|
||||||
|
|
||||||
|
const currentMsgIdRef = useRef<number | null>(null);
|
||||||
|
const currentTextRef = useRef('');
|
||||||
|
const currentChunksRef = useRef(0);
|
||||||
|
const currentTtsFailedRef = useRef(false);
|
||||||
|
const currentTtsMsgRef = useRef('');
|
||||||
|
|
||||||
|
const msgCounterRef = useRef(0);
|
||||||
|
const bottomRef = useRef<HTMLDivElement>(null);
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(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<void>(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<void>((res, rej) => {
|
||||||
|
ws.addEventListener('open', () => res(), { once: true });
|
||||||
|
ws.addEventListener('error', () => rej(new Error('Нет подключения к серверу.')), { once: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wait for server "ready"
|
||||||
|
await new Promise<void>((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<string, string> = {
|
||||||
|
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 (
|
||||||
|
<div className="flex flex-col gap-6 h-full">
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 tracking-tight">AI Голос</h2>
|
||||||
|
<p className="text-slate-500 text-sm italic">Голосовой AI-оператор Айнур — QazaqGasAimaq</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0">
|
||||||
|
|
||||||
|
{/* ── Left: controls ───────────────────────────────────────────────── */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
|
||||||
|
{/* Status pill */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm flex items-center gap-3">
|
||||||
|
<div className={cn('w-2.5 h-2.5 rounded-full', statusKind === 'live' && 'animate-pulse', dot)} />
|
||||||
|
<span className="text-sm font-bold text-slate-700 uppercase tracking-widest truncate">
|
||||||
|
{statusText}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Waveform canvas */}
|
||||||
|
<div className="bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 shadow-xl">
|
||||||
|
<canvas ref={canvasRef} width={600} height={100} className="w-full h-auto block" />
|
||||||
|
<div className="px-4 pb-3 pt-2 flex items-center gap-3">
|
||||||
|
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest shrink-0">Mic</span>
|
||||||
|
<div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full transition-all duration-75"
|
||||||
|
style={{
|
||||||
|
width: `${levelPct}%`,
|
||||||
|
backgroundColor: isMuted ? '#ef4444' : '#22c55e',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest shrink-0">
|
||||||
|
{isMuted ? 'muted' : 'open'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={startCall}
|
||||||
|
disabled={isRunning}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-bold transition-all active:scale-95',
|
||||||
|
isRunning
|
||||||
|
? 'bg-slate-100 text-slate-400 cursor-not-allowed'
|
||||||
|
: 'bg-emerald-600 text-white hover:bg-emerald-700 shadow-md',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<PhoneCall className="w-4 h-4" />
|
||||||
|
Начать
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => stopCall()}
|
||||||
|
disabled={!isRunning}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-bold transition-all active:scale-95',
|
||||||
|
!isRunning
|
||||||
|
? 'bg-slate-100 text-slate-400 cursor-not-allowed'
|
||||||
|
: 'bg-rose-600 text-white hover:bg-rose-700 shadow-md',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<PhoneOff className="w-4 h-4" />
|
||||||
|
Стоп
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={resetSession}
|
||||||
|
disabled={!isRunning}
|
||||||
|
title="Очистить контекст"
|
||||||
|
className={cn(
|
||||||
|
'px-4 py-3 rounded-xl text-sm font-bold transition-all active:scale-95',
|
||||||
|
!isRunning
|
||||||
|
? 'bg-slate-100 text-slate-400 cursor-not-allowed'
|
||||||
|
: 'bg-slate-700 text-white hover:bg-slate-800 shadow-md',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<RotateCcw className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info card */}
|
||||||
|
<div className="bg-indigo-50 border border-indigo-100 rounded-2xl p-4 text-xs text-indigo-700 space-y-1">
|
||||||
|
<div className="font-bold uppercase tracking-widest text-[10px] text-indigo-400 mb-2">Инструкция</div>
|
||||||
|
<p>Нажмите <b>Начать</b> — Айнур поздоровается и попросит выбрать язык.</p>
|
||||||
|
<p>Говорите в микрофон. Пока Айнур отвечает, микрофон заглушается автоматически.</p>
|
||||||
|
<p><b>Reset</b> сбрасывает контекст разговора, не прерывая сессию.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Right: transcript ──────────────────────────────────────────────── */}
|
||||||
|
<div className="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm flex flex-col overflow-hidden min-h-[400px]">
|
||||||
|
<div className="p-4 border-b border-slate-100 flex items-center gap-2 shrink-0">
|
||||||
|
<Mic className="w-4 h-4 text-indigo-500" />
|
||||||
|
<h3 className="font-bold text-slate-900 text-sm tracking-tight">Транскрипт</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||||
|
{/* Partial / status line */}
|
||||||
|
<div className="text-xs text-slate-400 italic text-center sticky top-0 bg-white/90 py-1 rounded-lg">
|
||||||
|
{partialText}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
{messages.map(m => (
|
||||||
|
<div
|
||||||
|
key={m.id}
|
||||||
|
className={cn(
|
||||||
|
'flex',
|
||||||
|
m.role === 'user' ? 'justify-end' : m.role === 'system' ? 'justify-center' : 'justify-start',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{m.role === 'system' ? (
|
||||||
|
<span className="text-[11px] text-slate-400 italic px-3 py-1 bg-slate-50 rounded-full border border-slate-100">
|
||||||
|
{m.text}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'max-w-[80%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed',
|
||||||
|
m.role === 'user'
|
||||||
|
? 'bg-indigo-600 text-white rounded-br-md'
|
||||||
|
: 'bg-slate-100 text-slate-800 rounded-bl-md',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{m.role === 'assistant' && (
|
||||||
|
<div className="text-[10px] font-bold text-indigo-500 uppercase tracking-widest mb-1">
|
||||||
|
Айнур
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{m.text || <span className="opacity-40 italic">...</span>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div ref={bottomRef} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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<AdminTab>(initialTab);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
const [showAddUser, setShowAddUser] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [users, setUsers] = useState<BackendUser[]>([]);
|
||||||
|
const [queues, setQueues] = useState<BackendQueue[]>([]);
|
||||||
|
const [loadError, setLoadError] = useState<string | null>(null);
|
||||||
|
const { showToast } = useToast();
|
||||||
|
|
||||||
|
const loadAdminData = React.useCallback(async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setLoadError(null);
|
||||||
|
const results = await Promise.allSettled([
|
||||||
|
apiRequest<BackendUser[]>('auth', 'users'),
|
||||||
|
apiRequest<BackendQueue[]>('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<BackendUser>('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 (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 tracking-tight">Панель управления</h2>
|
||||||
|
<p className="text-slate-500 text-sm italic">Системное администрирование и управление ресурсами</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 w-full sm:w-auto">
|
||||||
|
{isSaving ? (
|
||||||
|
<button disabled className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 bg-slate-100 text-slate-400 rounded-xl text-sm font-bold border border-slate-200">
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
Синхронизация...
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button onClick={handleSave} className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-bold hover:bg-indigo-700 transition-all shadow-md active:scale-95">
|
||||||
|
<Save className="w-4 h-4" />
|
||||||
|
Сохранить конфигурацию
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loadError && (
|
||||||
|
<div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-700">
|
||||||
|
Часть админ-данных недоступна: {loadError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||||
|
{/* Navigation Sidebar */}
|
||||||
|
<div className="lg:col-span-3 space-y-2">
|
||||||
|
<AdminSidebarItem
|
||||||
|
icon={Users}
|
||||||
|
label="Пользователи"
|
||||||
|
description="Управление аккаунтами и ролями"
|
||||||
|
active={activeTab === 'users'}
|
||||||
|
onClick={() => setActiveTab('users')}
|
||||||
|
/>
|
||||||
|
<AdminSidebarItem
|
||||||
|
icon={Settings}
|
||||||
|
label="Очереди обслуживания"
|
||||||
|
description="Время ожидания и емкость"
|
||||||
|
active={activeTab === 'queues'}
|
||||||
|
onClick={() => setActiveTab('queues')}
|
||||||
|
/>
|
||||||
|
<AdminSidebarItem
|
||||||
|
icon={Webhook}
|
||||||
|
label="Омни-каналы"
|
||||||
|
description="WhatsApp, TG, Email"
|
||||||
|
active={activeTab === 'channels'}
|
||||||
|
onClick={() => setActiveTab('channels')}
|
||||||
|
/>
|
||||||
|
<AdminSidebarItem
|
||||||
|
icon={Bot}
|
||||||
|
label="ИИ и автоматизация"
|
||||||
|
description="Настройка LLM и ботов"
|
||||||
|
active={activeTab === 'ai'}
|
||||||
|
onClick={() => setActiveTab('ai')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content Area */}
|
||||||
|
<div className="lg:col-span-9">
|
||||||
|
{activeTab === 'users' && <UserManagementSection users={users} isLoading={isLoading} onAddClick={() => setShowAddUser(true)} onRefresh={loadAdminData} />}
|
||||||
|
{activeTab === 'ai' && <AIConfigSection />}
|
||||||
|
{activeTab === 'queues' && <QueueSection queues={queues} />}
|
||||||
|
{activeTab === 'channels' && <ChannelsSection />}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add User Modal Mockup */}
|
||||||
|
{showAddUser && (
|
||||||
|
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
|
||||||
|
<div className="absolute inset-0 bg-slate-900/60 backdrop-blur-md" onClick={() => setShowAddUser(false)}></div>
|
||||||
|
<div className="bg-white rounded-3xl w-full max-w-xl relative z-10 shadow-2xl overflow-hidden border border-white/20">
|
||||||
|
<div className="p-8 border-b border-slate-100">
|
||||||
|
<h3 className="text-2xl font-bold text-slate-900 italic tracking-tight">Новый сотрудник</h3>
|
||||||
|
<p className="text-slate-500 text-sm">Заполните данные для создания аккаунта нового оператора.</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-8 space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className={cn("text-[10px] font-bold uppercase tracking-widest", errors.name ? "text-rose-500" : "text-slate-400")}>Полное имя</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newUser.name}
|
||||||
|
onChange={(e) => 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 && <p className="text-[10px] text-rose-500 font-bold italic">{errors.name}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className={cn("text-[10px] font-bold uppercase tracking-widest", errors.username ? "text-rose-500" : "text-slate-400")}>Логин</label>
|
||||||
|
<input
|
||||||
|
value={newUser.username}
|
||||||
|
onChange={(e) => 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 && <p className="text-[10px] text-rose-500 font-bold italic">{errors.username}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className={cn("text-[10px] font-bold uppercase tracking-widest", errors.password ? "text-rose-500" : "text-slate-400")}>Временный пароль</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={newUser.password}
|
||||||
|
onChange={(e) => 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 && <p className="text-[10px] text-rose-500 font-bold italic">{errors.password}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Назначить роль</label>
|
||||||
|
<select
|
||||||
|
value={newUser.role}
|
||||||
|
onChange={(e) => setNewUser({...newUser, role: e.target.value as UserRole})}
|
||||||
|
className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/5 focus:border-indigo-500 text-sm bg-white"
|
||||||
|
>
|
||||||
|
<option value={UserRole.OPERATOR}>Оператор</option>
|
||||||
|
<option value={UserRole.SUPERVISOR}>Супервайзер</option>
|
||||||
|
<option value={UserRole.ADMIN}>Администратор</option>
|
||||||
|
<option value={UserRole.ANALYST}>Аналитик</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-8 bg-slate-50 flex gap-4">
|
||||||
|
<button onClick={() => setShowAddUser(false)} disabled={isLoading} className="flex-1 py-3 text-sm font-bold text-slate-500 hover:text-slate-700 transition-colors disabled:opacity-50">Отмена</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCreateUser}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="flex-1 py-3 bg-slate-900 text-white rounded-xl text-sm font-bold hover:bg-slate-800 shadow-lg active:scale-95 transition-all flex items-center justify-center gap-2 disabled:bg-slate-400"
|
||||||
|
>
|
||||||
|
{isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Создать аккаунт"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const UserManagementSection: React.FC<{ users: BackendUser[]; isLoading: boolean; onAddClick: () => void; onRefresh: () => void }> = ({ users, isLoading, onAddClick, onRefresh }) => (
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||||
|
<div className="p-4 md:p-6 border-b border-slate-100 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 bg-slate-50/30">
|
||||||
|
<div className="relative flex-1 w-full max-w-sm">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<input type="text" placeholder="Поиск по аккаунтам..." className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-xs focus:ring-4 focus:ring-indigo-500/5 focus:border-indigo-500 transition-all shadow-sm" />
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onRefresh}
|
||||||
|
className="flex items-center gap-2 px-4 py-2.5 border border-slate-200 bg-white text-slate-600 rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-slate-50 transition-all shadow-sm"
|
||||||
|
>
|
||||||
|
{isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Clock className="w-4 h-4" />}
|
||||||
|
Обновить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onAddClick}
|
||||||
|
className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-md active:scale-95"
|
||||||
|
>
|
||||||
|
<UserPlus className="w-4 h-4" />
|
||||||
|
Добавить аккаунт
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto text-sm">
|
||||||
|
<table className="w-full text-left">
|
||||||
|
<thead>
|
||||||
|
<tr className="text-[10px] uppercase font-bold text-slate-400 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 text-right">Настройки</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-50">
|
||||||
|
{users.map(user => {
|
||||||
|
const role = roleFromBackend(user.role);
|
||||||
|
return (
|
||||||
|
<tr key={user.user_id} className="hover:bg-slate-50/50 group transition-colors italic">
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-bold text-slate-900">{user.full_name}</span>
|
||||||
|
<span className="text-[10px] text-slate-500 lowercase tracking-tight">{user.username}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className={cn(
|
||||||
|
"px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest",
|
||||||
|
role === UserRole.ADMIN ? "bg-indigo-50 text-indigo-700" : "bg-slate-100 text-slate-600"
|
||||||
|
)}>
|
||||||
|
{role === UserRole.ADMIN ? 'АДМИНИСТРАТОР' : role === UserRole.SUPERVISOR ? 'СУПЕРВАЙЗЕР' : role === UserRole.ANALYST ? 'АНАЛИТИК' : 'ОПЕРАТОР'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<div className="flex items-center gap-1 text-emerald-600 font-bold text-[10px] uppercase tracking-widest">
|
||||||
|
<CheckCircle2 className="w-3.5 h-3.5" />
|
||||||
|
Активен
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-slate-400 font-mono text-[10px] italic">
|
||||||
|
auth-service
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-right">
|
||||||
|
<button className="text-[10px] font-bold text-slate-400 hover:text-indigo-600 transition-colors uppercase tracking-widest opacity-0 group-hover:opacity-100">
|
||||||
|
Изменить
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)})}
|
||||||
|
{!users.length && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="px-6 py-10 text-center text-sm text-slate-400">
|
||||||
|
Auth-service пока не вернул пользователей.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
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<Array<{ article_id: string; title: string; updated_at: string }>>([]);
|
||||||
|
|
||||||
|
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<Array<{ article_id: string; title: string; updated_at: string }>>('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 (
|
||||||
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-400">
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<div className="flex items-center gap-4 mb-8">
|
||||||
|
<div className="w-12 h-12 bg-indigo-900 rounded-2xl flex items-center justify-center text-white">
|
||||||
|
<Bot className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-slate-900 tracking-tight">Оптимизация ИИ-движка</h3>
|
||||||
|
<p className="text-slate-500 text-xs italic">Конфигурация нейросетевых моделей и алгоритмов автоматизации.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">Провайдер голосового AI/TTS</label>
|
||||||
|
<select className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium">
|
||||||
|
<option>{provider}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">Статус AI Orchestrator</label>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<input type="range" value={aiHealth?.status === 'ok' ? 100 : 0} readOnly className="flex-1 h-1.5 bg-slate-200 rounded-full appearance-none accent-indigo-600" />
|
||||||
|
<span className="text-sm font-mono font-bold text-indigo-600">{aiHealth?.status || 'down'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Knowledge Base Sub-section */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
||||||
|
<div className="p-6 border-b border-slate-100 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Database className="w-5 h-5 text-indigo-500" />
|
||||||
|
<h3 className="font-bold text-slate-900 italic tracking-tight">Корпоративная база знаний</h3>
|
||||||
|
</div>
|
||||||
|
<button className="text-[10px] font-bold text-indigo-600 uppercase tracking-widest px-3 py-1.5 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors">Синхронизировать</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<KnowledgeSourceItem icon={Globe} title={kbHealth?.service || 'kb-service'} type="Service Health" lastSync={kbHealth?.status || 'down'} items={kbArticles.length} />
|
||||||
|
<KnowledgeSourceItem icon={FileText} title="Статьи базы знаний" type="Database" lastSync={kbLastSync} items={kbArticles.length} />
|
||||||
|
<KnowledgeSourceItem icon={LinkIcon} title={aiHealth?.service || 'ai-orchestrator-service'} type="Service Health" lastSync={aiHealth?.status || 'down'} items={aiHealth?.status === 'ok' ? 1 : 0} />
|
||||||
|
<KnowledgeSourceItem icon={Type} title="Voice TTS config" type={ttsConfig?.source || 'config'} lastSync={provider} items={ttsConfig ? 1 : 0} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const KnowledgeSourceItem: React.FC<{ icon: any, title: string, type: string, lastSync: string, items: number }> = ({ icon: Icon, title, type, lastSync, items }) => (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-slate-50/50 rounded-2xl border border-slate-100 group hover:border-indigo-200 hover:bg-white transition-all cursor-pointer">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-400 group-hover:text-indigo-600 group-hover:border-indigo-100 transition-colors">
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-bold text-slate-900 italic leading-tight">{title}</div>
|
||||||
|
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">{type} • {items} записей</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-[10px] font-bold text-emerald-600 uppercase tracking-widest mb-0.5">Верифицировано</div>
|
||||||
|
<div className="text-[9px] text-slate-400 italic">Синхр: {lastSync}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const QueueSection: React.FC<{ queues: BackendQueue[] }> = ({ queues }) => (
|
||||||
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<h3 className="font-bold text-slate-900 tracking-tight flex items-center gap-2 text-lg">
|
||||||
|
<Settings className="w-5 h-5 text-indigo-500" />
|
||||||
|
Емкость очередей обслуживания
|
||||||
|
</h3>
|
||||||
|
<button className="text-[10px] font-bold text-indigo-600 uppercase tracking-widest border border-indigo-100 px-3 py-1.5 rounded-lg hover:bg-indigo-50 transition-colors">Создать очередь</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{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 (
|
||||||
|
<QueueRow
|
||||||
|
key={queue.queue_id}
|
||||||
|
name={queue.name}
|
||||||
|
capacity={queue.rules.length || 0}
|
||||||
|
priority={priority}
|
||||||
|
color={color}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}) : (
|
||||||
|
<QueueRow name="Очереди не созданы" capacity={0} priority="NORMAL" color="emerald" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ChannelsSection: React.FC = () => {
|
||||||
|
const [statusByService, setStatusByService] = React.useState<Record<string, string>>({});
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
||||||
|
<div className="p-6 border-b border-slate-100">
|
||||||
|
<h3 className="font-bold text-slate-900 italic tracking-tight text-lg">Подключенные каналы</h3>
|
||||||
|
<p className="text-xs text-slate-500">Интеграции для приема входящих запросов от клиентов.</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<ChannelCard provider="WhatsApp" type={`whatsapp-service: ${statusByService.whatsapp || 'checking'}`} icon={MessageCircle} color="emerald" active={statusByService.whatsapp === 'ok'} />
|
||||||
|
<ChannelCard provider="Telegram" type={`telegram-service: ${statusByService.telegram || 'checking'}`} icon={Send} color="sky" active={statusByService.telegram === 'ok'} />
|
||||||
|
<ChannelCard provider="Корпоративная почта" type={`email-service: ${statusByService.email || 'checking'}`} icon={Mail} color="slate" active={statusByService.email === 'ok'} />
|
||||||
|
<ChannelCard provider="Онлайн чат" type={`webchat-service: ${statusByService.webchat || 'checking'}`} icon={Zap} color="indigo" active={statusByService.webchat === 'ok'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChannelCard: React.FC<{ provider: string, type: string, icon: any, color: string, active?: boolean }> = ({ provider, type, icon: Icon, color, active }) => (
|
||||||
|
<div className="p-5 bg-white border border-slate-200 rounded-3xl group hover:border-indigo-200 transition-all relative overflow-hidden shadow-sm hover:shadow-lg hover:shadow-indigo-500/5">
|
||||||
|
<div className="flex items-start justify-between relative z-10">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className={cn("w-12 h-12 rounded-2xl flex items-center justify-center transition-colors shadow-inner", `bg-${color}-50 text-${color}-600 border border-${color}-100`)}>
|
||||||
|
<Icon className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold text-slate-900 tracking-tight">{provider}</h4>
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">{type}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="p-2 text-slate-300 hover:text-slate-600 bg-slate-50 rounded-xl">
|
||||||
|
<MoreVertical className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 flex items-center justify-between relative z-10">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<div className={cn("w-1.5 h-1.5 rounded-full", active ? "bg-emerald-500 animate-pulse" : "bg-slate-300")}></div>
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{active ? "Подключено" : "Неактивен"}</span>
|
||||||
|
</div>
|
||||||
|
<button className="text-[10px] font-bold text-indigo-600 uppercase tracking-widest hover:underline transition-all">Настроить</button>
|
||||||
|
</div>
|
||||||
|
<div className={cn("absolute bottom-0 right-0 -mb-8 -mr-8 w-24 h-24 rounded-full blur-[40px] opacity-10 group-hover:opacity-20 transition-opacity", `bg-${color}-500`)}></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const QueueRow: React.FC<{ name: string, capacity: number, priority: string, color: string }> = ({ name, capacity, priority, color }) => (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-slate-50/50 rounded-2xl border border-slate-100 group hover:border-indigo-200 hover:bg-white transition-all cursor-pointer shadow-sm shadow-transparent hover:shadow-indigo-500/5">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className={cn("px-2 py-1 rounded-lg text-[9px] font-bold uppercase tracking-widest", `bg-${color}-50 text-${color}-700 border border-${color}-100`)}>
|
||||||
|
{priority === 'URGENT' ? 'СРОЧНО' : priority === 'HIGH' ? 'ВЫСОКИЙ' : 'НОРМА'}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-bold text-slate-900 italic leading-tight">{name}</div>
|
||||||
|
<div className="text-[10px] text-slate-500 font-medium">{capacity} слотов доступно</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="w-4 h-4 text-slate-300 group-hover:text-indigo-400 group-hover:translate-x-1 transition-all" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const AdminSidebarItem: React.FC<{ icon: any, label: string, description: string, active?: boolean, onClick: () => void }> = ({ icon: Icon, label, description, active, onClick }) => (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className={cn(
|
||||||
|
"w-full flex items-center gap-4 px-4 py-4 rounded-2xl text-left transition-all border",
|
||||||
|
active
|
||||||
|
? "bg-white border-slate-200 text-indigo-700 shadow-md shadow-slate-200/50 scale-[1.02] z-10"
|
||||||
|
: "bg-transparent border-transparent text-slate-500 hover:bg-white/50 hover:border-slate-100 hover:text-slate-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className={cn(
|
||||||
|
"w-10 h-10 rounded-xl flex items-center justify-center shrink-0 border transition-colors duration-300",
|
||||||
|
active ? "bg-indigo-600 border-indigo-700 text-white" : "bg-slate-100 border-slate-200 text-slate-400"
|
||||||
|
)}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col min-w-0">
|
||||||
|
<span className="text-sm font-bold truncate leading-tight">{label}</span>
|
||||||
|
<span className="text-[10px] text-slate-400 font-medium truncate uppercase tracking-widest transition-opacity group-hover:opacity-100">{description}</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
@@ -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<BackendKpi | null>(null);
|
||||||
|
const [timeseries, setTimeseries] = useState<BackendTimeseries | null>(null);
|
||||||
|
const [drilldown, setDrilldown] = useState<BackendDrilldown | null>(null);
|
||||||
|
const [agentOverview, setAgentOverview] = useState<BackendAgentOverview | null>(null);
|
||||||
|
const [queueOverview, setQueueOverview] = useState<BackendQueueOverview | null>(null);
|
||||||
|
const [insights, setInsights] = useState<BackendOmnichannelInsights | null>(null);
|
||||||
|
const [loadError, setLoadError] = useState<string | null>(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<BackendKpi>('reporting', `reports/kpi?${query.toString()}`),
|
||||||
|
apiRequest<BackendTimeseries>('reporting', `reports/timeseries?${query.toString()}&metric=total&interval=day`),
|
||||||
|
apiRequest<BackendDrilldown>('interaction', `interactions/drilldown?${query.toString()}&limit=25`),
|
||||||
|
apiRequest<BackendAgentOverview>('reporting', `reports/agents/overview?${query.toString()}&limit=8`),
|
||||||
|
apiRequest<BackendQueueOverview>('reporting', `reports/queues/overview?${query.toString()}&limit=8`),
|
||||||
|
apiRequest<BackendOmnichannelInsights>('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<string, string> = {
|
||||||
|
voice: '#4f46e5',
|
||||||
|
webchat: '#10b981',
|
||||||
|
telegram: '#0ea5e9',
|
||||||
|
whatsapp: '#16a34a',
|
||||||
|
email: '#64748b',
|
||||||
|
};
|
||||||
|
const labels: Record<string, string> = {
|
||||||
|
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 (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Upper Action Bar */}
|
||||||
|
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2 italic">
|
||||||
|
Панель аналитики
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-500 text-sm">Глубокий анализ производительности, качества и операционного здоровья</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 w-full lg:w-auto">
|
||||||
|
<div className="flex bg-white rounded-xl border border-slate-200 p-1 shadow-sm">
|
||||||
|
{['24ч', '7д', '30д', '90д'].map(range => (
|
||||||
|
<button
|
||||||
|
key={range}
|
||||||
|
onClick={() => handleRangeChange(range)}
|
||||||
|
className={cn(
|
||||||
|
"px-4 py-1.5 rounded-lg text-xs font-bold transition-all uppercase tracking-widest",
|
||||||
|
dateRange === range ? "bg-slate-900 text-white shadow-md" : "text-slate-400 hover:text-slate-600"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{range}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button className="flex items-center gap-2 px-4 py-2 border border-slate-200 bg-white rounded-xl text-xs font-bold uppercase tracking-widest text-slate-600 hover:bg-slate-50 transition-all shadow-sm">
|
||||||
|
<Filter className="w-4 h-4 text-indigo-500" />
|
||||||
|
Фильтры
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleExport}
|
||||||
|
className="flex items-center gap-2 px-6 py-2 bg-indigo-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-md active:scale-95"
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4" />
|
||||||
|
Экспорт
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<LoadingState message="Пересчет глобальных индексов KPI..." />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{loadError && (
|
||||||
|
<div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-700">
|
||||||
|
Часть аналитики недоступна: {loadError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* KPI Cards Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<MetricCard
|
||||||
|
label="Общий поток"
|
||||||
|
value={String(kpi?.volume?.total || 0)}
|
||||||
|
subLabel="backend"
|
||||||
|
trend="up"
|
||||||
|
icon={MessageSquare}
|
||||||
|
color="indigo"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
label="Answer Rate"
|
||||||
|
value={`${Number(kpi?.kpi?.AnswerRate || 0).toFixed(1)}%`}
|
||||||
|
subLabel="voice"
|
||||||
|
trend="up"
|
||||||
|
icon={Award}
|
||||||
|
color="emerald"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
label="Процент FCR"
|
||||||
|
value={`${Number(kpi?.kpi?.FCR || 0).toFixed(1)}%`}
|
||||||
|
subLabel="exact"
|
||||||
|
trend="up"
|
||||||
|
icon={Users}
|
||||||
|
color="rose"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
label="Глобальное AHT"
|
||||||
|
value={`${Math.round(Number(kpi?.kpi?.AHT || 0))}с`}
|
||||||
|
subLabel="seconds"
|
||||||
|
trend="up"
|
||||||
|
icon={Clock}
|
||||||
|
color="amber"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Analytical Section */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||||
|
{/* Interaction Trends Chart */}
|
||||||
|
<div className="lg:col-span-8 bg-white rounded-3xl border border-slate-200 p-6 shadow-sm flex flex-col min-h-[400px]">
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Анализ объема и эффективности</h3>
|
||||||
|
<p className="text-[10px] text-slate-500 italic">Обращения против времени ответа за выбранный период</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="w-2.5 h-2.5 rounded-full bg-indigo-600"></span>
|
||||||
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Объем</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
|
||||||
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Оценка CSAT</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
{kpiData.length ? (
|
||||||
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
|
<AreaChart data={kpiData}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorInter" 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>
|
||||||
|
<XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fontSize: 10, fill: '#94a3b8'}} dy={10} />
|
||||||
|
<YAxis axisLine={false} tickLine={false} tick={{fontSize: 10, fill: '#94a3b8'}} />
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{borderRadius: '16px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)', background: '#fff'}}
|
||||||
|
labelStyle={{fontWeight: 'bold', fontSize: '12px'}}
|
||||||
|
/>
|
||||||
|
<Area type="monotone" dataKey="interactions" stroke="#4f46e5" strokeWidth={3} fillOpacity={1} fill="url(#colorInter)" />
|
||||||
|
<Area type="monotone" dataKey="csat" stroke="#10b981" strokeWidth={2} strokeDasharray="5 5" fill="transparent" />
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
) : (
|
||||||
|
<div className="h-full min-h-[260px] flex items-center justify-center text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||||
|
Нет обращений за выбранный период
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Channel Distribution */}
|
||||||
|
<div className="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-sm flex flex-col">
|
||||||
|
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Популярность каналов</h3>
|
||||||
|
<div className="flex-1 relative min-h-[240px]">
|
||||||
|
{channelData.length ? (
|
||||||
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={channelData}
|
||||||
|
innerRadius={70}
|
||||||
|
outerRadius={95}
|
||||||
|
paddingAngle={8}
|
||||||
|
dataKey="value"
|
||||||
|
stroke="none"
|
||||||
|
>
|
||||||
|
{channelData.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip />
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
) : (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||||
|
Нет каналов
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||||||
|
<span className="text-3xl font-black text-slate-900 tracking-tighter italic">{Number(kpi?.kpi?.DigitalShare || 0).toFixed(0)}%</span>
|
||||||
|
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Цифровой охват</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3 pt-6 border-t border-slate-50">
|
||||||
|
{channelData.map(c => (
|
||||||
|
<div key={c.name} className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: c.color }}></span>
|
||||||
|
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{c.name}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-bold text-slate-900 ml-3.5 leading-none">{channelTotal ? Math.round((c.value / channelTotal) * 100) : 0}%</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||||
|
{/* Agent Rankings */}
|
||||||
|
<div className="lg:col-span-4 bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
|
||||||
|
<div className="p-6 border-b border-slate-100 flex items-center justify-between">
|
||||||
|
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest">Рейтинг операторов</h3>
|
||||||
|
<LayoutGrid className="w-4 h-4 text-slate-300" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-y-auto min-h-[300px]">
|
||||||
|
{agentData.map((agent) => (
|
||||||
|
<div key={agent.name} className="group p-4 border-b border-slate-50 flex items-center justify-between hover:bg-slate-50 transition-colors">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center border border-slate-200 overflow-hidden">
|
||||||
|
<img src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${agent.name}`} alt={agent.name} className="w-8 h-8" />
|
||||||
|
</div>
|
||||||
|
<div className={cn(
|
||||||
|
"absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-white",
|
||||||
|
agent.status === 'READY' ? "bg-emerald-500" : agent.status === 'BREAK' ? "bg-amber-500" : agent.status === 'BUSY' ? "bg-rose-500" : "bg-slate-400"
|
||||||
|
)}></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-bold text-slate-900 leading-tight italic">{agent.name}</div>
|
||||||
|
<p className="text-[10px] text-slate-500 font-medium">AHT: {agent.aht} • {agent.interactions} обращений</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 text-right">
|
||||||
|
<button className="p-2 text-slate-300 hover:text-indigo-600 transition-colors">
|
||||||
|
<ExternalLink className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{!agentData.length && (
|
||||||
|
<div className="h-full min-h-[240px] flex items-center justify-center px-6 text-center text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||||
|
Нет операторской активности
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-slate-50 text-center">
|
||||||
|
<button className="text-[10px] font-bold text-slate-400 uppercase tracking-widest hover:text-indigo-600 transition-colors">
|
||||||
|
Всего операторов: {agentOverview?.totals?.agents_total || 0}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Queue Performance */}
|
||||||
|
<div className="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-sm flex flex-col">
|
||||||
|
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Состояние очередей</h3>
|
||||||
|
<div className="space-y-6 flex-1">
|
||||||
|
{queuePerformance.map((queue) => (
|
||||||
|
<PerformanceRow
|
||||||
|
key={queue.name}
|
||||||
|
name={`${queue.name}${queue.inQueue ? ` • ${queue.inQueue} в очереди` : ''}`}
|
||||||
|
value={queue.value}
|
||||||
|
color={queue.value >= 90 ? "bg-indigo-600" : queue.value >= 75 ? "bg-emerald-500" : queue.value >= 50 ? "bg-amber-400" : "bg-rose-400"}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{!queuePerformance.length && (
|
||||||
|
<div className="h-full min-h-[220px] flex items-center justify-center text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||||
|
Нет данных по очередям
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 pt-4 border-t border-slate-50">
|
||||||
|
<div className="flex justify-between items-center text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
||||||
|
<span>Агрегированный SLA</span>
|
||||||
|
<span className="text-emerald-500 italic">{Number(kpi?.kpi?.SL || 0).toFixed(1)}% Достигнуто</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Insight / Summary */}
|
||||||
|
<div className="lg:col-span-4 bg-indigo-950 rounded-3xl p-6 shadow-xl text-white relative overflow-hidden group">
|
||||||
|
<div className="relative z-10 h-full flex flex-col">
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<TrendingUp className="w-5 h-5 text-indigo-300" />
|
||||||
|
<h3 className="text-xs font-bold text-indigo-300 uppercase tracking-widest">Отчет ИИ</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 space-y-4">
|
||||||
|
<div className="glass-morphism p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||||
|
<p className="text-xs text-indigo-100 leading-relaxed italic">
|
||||||
|
{insights?.summary_text || 'Reporting-service пока не вернул операционный insight за выбранный период.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="text-center p-3 bg-white/5 rounded-2xl border border-white/10">
|
||||||
|
<div className="text-2xl font-bold text-indigo-200">{insights?.primary_metric.value || '0%'}</div>
|
||||||
|
<div className="text-[9px] font-bold uppercase tracking-widest text-indigo-400">{insights?.primary_metric.label || 'Digital Share'}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-white/5 rounded-2xl border border-white/10">
|
||||||
|
<div className="text-2xl font-bold text-indigo-200">{insights?.secondary_metric.value || '0с'}</div>
|
||||||
|
<div className="text-[9px] font-bold uppercase tracking-widest text-indigo-400">{insights?.secondary_metric.label || 'ASA'}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="w-full py-3 bg-indigo-600 rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-indigo-500 transition-all shadow-lg active:scale-95 mt-4">
|
||||||
|
Сгенерировать отчет
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-0 right-0 -mr-16 -mt-16 w-48 h-48 bg-indigo-500 rounded-full blur-[80px] opacity-20"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Historical Drilldown Section (Moved to separate row) */}
|
||||||
|
<div className="grid grid-cols-1 gap-6">
|
||||||
|
<div className="bg-white rounded-3xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
|
||||||
|
<div className="p-6 border-b border-slate-100 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest">Исторические данные</h3>
|
||||||
|
<p className="text-[10px] text-slate-500 italic">Детальный анализ сессий для оценки качества</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative w-full sm:w-auto">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
|
||||||
|
<input type="text" placeholder="Поиск обращений..." className="w-full sm:w-64 pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-[11px] focus:ring-4 focus:ring-indigo-500/5 focus:border-indigo-500 transition-all outline-none" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-x-auto min-h-[300px]">
|
||||||
|
<table className="w-full text-left">
|
||||||
|
<thead>
|
||||||
|
<tr className="text-[10px] font-bold text-slate-400 uppercase tracking-widest border-b border-slate-50">
|
||||||
|
<th className="px-6 py-4">ID Сессии</th>
|
||||||
|
<th className="px-6 py-4">Клиент</th>
|
||||||
|
<th className="px-6 py-4 hidden md:table-cell">Очередь</th>
|
||||||
|
<th className="px-6 py-4">Метрики</th>
|
||||||
|
<th className="px-6 py-4 text-right">Действие</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-50">
|
||||||
|
{historicalInteractions.map(interaction => (
|
||||||
|
<tr key={interaction.id} className="hover:bg-slate-50/50 transition-colors italic cursor-pointer group">
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xs font-bold text-slate-900 leading-tight">{interaction.id}</span>
|
||||||
|
<span className="text-[9px] text-slate-400 not-italic uppercase tracking-wider">{interaction.date}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center shrink-0">
|
||||||
|
<User className="w-3 h-3 text-slate-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-bold text-slate-700 truncate max-w-[100px]">{interaction.customer}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 hidden md:table-cell">
|
||||||
|
<span className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded-md text-[10px] font-bold uppercase tracking-widest border border-slate-200">{interaction.queue}</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="flex items-center gap-1.5 font-bold mb-0.5">
|
||||||
|
<span className="text-xs text-slate-900">{interaction.duration}</span>
|
||||||
|
<Clock className="w-3 h-3 text-slate-300" />
|
||||||
|
</div>
|
||||||
|
<div className="flex text-emerald-500">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Award key={i} className={cn("w-2.5 h-2.5", i >= interaction.csat && "text-slate-200 opacity-50")} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-right">
|
||||||
|
<button className="p-2 text-slate-300 hover:text-indigo-600 hover:bg-white rounded-lg transition-all opacity-0 group-hover:opacity-100 shadow-sm border border-transparent hover:border-slate-100">
|
||||||
|
<MoreVertical className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{!historicalInteractions.length && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="px-6 py-12 text-center text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||||
|
Нет исторических обращений за выбранный период
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 border-t border-slate-50 flex items-center justify-between font-bold text-slate-400 uppercase tracking-widest text-[9px]">
|
||||||
|
<span>Показано {historicalInteractions.length} из {drilldown?.total || 0} сессий</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button className="px-3 py-1 hover:text-indigo-600">Пред.</button>
|
||||||
|
<button className="px-3 py-1 hover:text-indigo-600">След.</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MetricCard: React.FC<{ label: string, value: string, subLabel: string, trend: 'up' | 'down', icon: any, color: string }> = ({ label, value, subLabel, trend, icon: Icon, color }) => (
|
||||||
|
<div className="bg-white p-5 rounded-3xl border border-slate-200 shadow-sm hover:shadow-xl hover:border-indigo-100 transition-all cursor-default group relative overflow-hidden">
|
||||||
|
<div className="flex items-center justify-between mb-4 relative z-10">
|
||||||
|
<div className={cn(
|
||||||
|
"w-10 h-10 rounded-2xl flex items-center justify-center transition-colors shadow-inner",
|
||||||
|
`bg-${color}-50 text-${color}-600 border border-${color}-100`
|
||||||
|
)}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div className={cn(
|
||||||
|
"flex items-center gap-1 text-[10px] font-black uppercase tracking-tighter italic",
|
||||||
|
trend === 'up' ? "text-emerald-500" : "text-rose-500"
|
||||||
|
)}>
|
||||||
|
{trend === 'up' ? <ArrowUpRight className="w-3.5 h-3.5" /> : <ArrowDownRight className="w-3.5 h-3.5" />}
|
||||||
|
{subLabel}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="text-3xl font-black text-slate-900 tracking-tighter mb-0.5 italic">{value}</div>
|
||||||
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">{label}</span>
|
||||||
|
</div>
|
||||||
|
<div className={cn(
|
||||||
|
"absolute bottom-0 right-0 -mb-6 -mr-6 w-24 h-24 rounded-full blur-[40px] opacity-10 transition-opacity",
|
||||||
|
`bg-${color}-500`
|
||||||
|
)}></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PerformanceRow: React.FC<{ name: string, value: number, color: string }> = ({ name, value, color }) => (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<div className="flex justify-between items-center text-[11px]">
|
||||||
|
<span className="font-bold text-slate-700 italic">{name}</span>
|
||||||
|
<span className="font-mono font-bold text-slate-900">{value}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden flex">
|
||||||
|
<motion.div
|
||||||
|
initial={{ width: 0 }}
|
||||||
|
animate={{ width: `${value}%` }}
|
||||||
|
transition={{ duration: 1, ease: "easeOut" }}
|
||||||
|
className={cn("h-full rounded-full", color)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -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, string> = {
|
||||||
|
[ChannelType.VOICE]: 'Голос',
|
||||||
|
[ChannelType.TELEGRAM]: 'Telegram',
|
||||||
|
[ChannelType.WHATSAPP]: 'WhatsApp',
|
||||||
|
[ChannelType.WEBCHAT]: 'Веб-чат',
|
||||||
|
[ChannelType.EMAIL]: 'Email',
|
||||||
|
};
|
||||||
|
|
||||||
|
const channelIconClass: Record<ChannelType, string> = {
|
||||||
|
[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<UnifiedInteraction[]>([]);
|
||||||
|
const [selectedInteraction, setSelectedInteraction] = React.useState<UnifiedInteraction | null>(null);
|
||||||
|
const [messages, setMessages] = React.useState<BackendThreadMessage[]>([]);
|
||||||
|
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<string | null>(null);
|
||||||
|
const { showToast } = useToast();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const loadWorkspace = React.useCallback(async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setLoadError(null);
|
||||||
|
const results = await Promise.allSettled([
|
||||||
|
apiRequest<BackendInteraction[]>('interaction', 'interactions?limit=50'),
|
||||||
|
apiRequest<BackendThread[]>('telegram', 'integrations/telegram/threads?limit=50'),
|
||||||
|
apiRequest<BackendThread[]>('whatsapp', 'integrations/whatsapp/threads?limit=50'),
|
||||||
|
apiRequest<BackendLiveCall[]>('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<BackendThreadMessage[]>(
|
||||||
|
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<BackendLiveCall>('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<BackendThread>(service, `integrations/${service}/threads/${encodeURIComponent(interaction.backendId)}/claim`, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await apiRequest<BackendInteraction>(
|
||||||
|
'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<BackendLiveCall>(
|
||||||
|
'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<BackendThread>(service, `integrations/${service}/threads/${encodeURIComponent(selectedInteraction.backendId)}/close`, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await apiRequest<BackendInteraction>(
|
||||||
|
'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<BackendThreadMessage>(
|
||||||
|
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 (
|
||||||
|
<div className="h-full flex flex-col gap-4 md:gap-6 pb-20 md:pb-0">
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||||
|
<div className="flex gap-4 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight">{title}</h2>
|
||||||
|
<p className="text-slate-500 text-sm hidden lg:block">Данные из call-center backend через API Gateway</p>
|
||||||
|
</div>
|
||||||
|
<div className="h-8 w-px bg-slate-200 hidden md:block"></div>
|
||||||
|
<div className="flex gap-4 md:gap-6">
|
||||||
|
<Stat label="Активно" value={activeCount} tone="text-indigo-600" />
|
||||||
|
<Stat label="Очередь" value={queueCount} tone="text-rose-500" />
|
||||||
|
<Stat label="Закрыто" value={closedCount} tone="text-slate-700" className="hidden sm:flex" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 w-full sm:w-auto">
|
||||||
|
<button
|
||||||
|
onClick={loadWorkspace}
|
||||||
|
className="px-3 py-1.5 md:px-4 md:py-2 bg-emerald-50 text-emerald-700 rounded-lg border border-emerald-100 flex items-center gap-2 text-[10px] md:text-sm font-medium w-full sm:w-auto justify-center"
|
||||||
|
>
|
||||||
|
{isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse" />}
|
||||||
|
<span className="truncate">{loadError ? 'Backend недоступен' : 'Backend подключен'}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isLoading && !items.length ? (
|
||||||
|
<LoadingState message="Загрузка очередей из call-center backend..." />
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6 flex-1 min-h-0 relative">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'md:col-span-4 lg:col-span-3 flex flex-col bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm',
|
||||||
|
selectedInteraction ? 'hidden md:flex' : 'flex h-full',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="p-4 border-b border-slate-100 flex gap-1 bg-slate-50/50">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('all')}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 py-1.5 text-xs font-semibold rounded-md transition-all',
|
||||||
|
activeTab === 'all' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-500 hover:text-slate-700',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Входящие
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('mine')}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 py-1.5 text-xs font-semibold rounded-md transition-all',
|
||||||
|
activeTab === 'mine' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-500 hover:text-slate-700',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
В работе
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{visibleItems.length ? (
|
||||||
|
visibleItems.map((item) => (
|
||||||
|
<InteractionRow
|
||||||
|
key={item.id}
|
||||||
|
item={item}
|
||||||
|
selected={selectedInteraction?.id === item.id}
|
||||||
|
onSelect={() => setSelectedInteraction(item)}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<EmptyState title="Нет обращений" description="Backend вернул пустую очередь для выбранного фильтра." className="h-full" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm relative h-full transition-all duration-300',
|
||||||
|
selectedInteraction ? 'col-span-1 md:col-span-8 lg:col-span-6' : 'hidden md:flex md:col-span-8 lg:col-span-9',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{selectedInteraction ? (
|
||||||
|
<>
|
||||||
|
<div className="p-4 border-b border-slate-100 flex items-center justify-between bg-white z-10 sticky top-0">
|
||||||
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
|
<button onClick={() => setSelectedInteraction(null)} className="md:hidden p-2 -ml-2 text-slate-400 hover:text-slate-600">
|
||||||
|
<ArrowRight className="w-5 h-5 rotate-180" />
|
||||||
|
</button>
|
||||||
|
<div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center border border-indigo-200 group relative hidden sm:flex">
|
||||||
|
{selectedInteraction.channel === ChannelType.VOICE ? (
|
||||||
|
<PhoneCall className={cn('w-5 h-5', channelIconClass[selectedInteraction.channel])} />
|
||||||
|
) : (
|
||||||
|
<MessageCircle className={cn('w-5 h-5', channelIconClass[selectedInteraction.channel])} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<h3 className="font-bold text-slate-900 text-sm leading-tight flex items-center gap-2 truncate">
|
||||||
|
{selectedInteraction.customerName}
|
||||||
|
{selectedInteraction.status === 'ACTIVE' && <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0"></span>}
|
||||||
|
</h3>
|
||||||
|
<p className="text-[11px] text-slate-500 font-medium tracking-wide truncate">
|
||||||
|
{channelLabel[selectedInteraction.channel]} · {selectedInteraction.customerIdentifier}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{selectedInteraction.status === 'PENDING' ? (
|
||||||
|
<button
|
||||||
|
onClick={() => handleTakeInWork(selectedInteraction)}
|
||||||
|
disabled={isWorking}
|
||||||
|
className="px-4 md:px-6 py-2 bg-indigo-600 text-white rounded-xl text-xs font-bold hover:bg-indigo-700 transition-all shadow-md active:scale-95 whitespace-nowrap disabled:bg-slate-400"
|
||||||
|
>
|
||||||
|
{isWorking ? '...' : 'В работу'}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-1 sm:gap-2">
|
||||||
|
<button className="flex lg:hidden items-center justify-center p-2 border border-slate-200 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||||
|
<MoreVertical className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<div className="hidden lg:flex items-center gap-2">
|
||||||
|
<button className="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-[10px] font-bold uppercase tracking-widest text-slate-600 hover:bg-slate-50 transition-colors">
|
||||||
|
<Share2 className="w-3 h-3" />
|
||||||
|
Передать
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleFinish}
|
||||||
|
disabled={isWorking}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 border border-rose-200 text-rose-600 rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-rose-50 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isWorking ? <Loader2 className="w-3 h-3 animate-spin" /> : <CheckCircle2 className="w-3 h-3" />}
|
||||||
|
Завершить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto bg-slate-50/50 flex flex-col relative pb-32 md:pb-0">
|
||||||
|
{selectedInteraction.channel === ChannelType.VOICE ? (
|
||||||
|
<VoiceWorkspace interaction={selectedInteraction} onClaim={() => handleTakeInWork(selectedInteraction)} onHangup={handleFinish} isWorking={isWorking} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex-1 p-6 space-y-6">
|
||||||
|
<div className="flex flex-col items-center py-4">
|
||||||
|
<span className="px-3 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold rounded-full uppercase tracking-widest">
|
||||||
|
Поток из {selectedInteraction.source === 'interaction' ? 'interaction-service' : `${selectedInteraction.source}-adapter`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{messages.length ? (
|
||||||
|
messages.map((message) => <MessageBubble key={message.message_id} message={message} />)
|
||||||
|
) : (
|
||||||
|
<MessageBubble
|
||||||
|
message={{
|
||||||
|
message_id: 'preview',
|
||||||
|
thread_id: selectedInteraction.backendId,
|
||||||
|
interaction_id: selectedInteraction.backendId,
|
||||||
|
chat_id: selectedInteraction.customerIdentifier,
|
||||||
|
direction: 'inbound',
|
||||||
|
text: selectedInteraction.lastMessage || selectedInteraction.customerName,
|
||||||
|
created_at: selectedInteraction.createdAt || new Date().toISOString(),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-slate-100 bg-white">
|
||||||
|
<div className="bg-slate-50 rounded-2xl border border-slate-200 p-3 mb-2 flex items-center gap-3">
|
||||||
|
<Bot className="w-4 h-4 text-indigo-500" />
|
||||||
|
<p className="text-[11px] text-indigo-800 font-medium">
|
||||||
|
AI state: <span className="font-bold">{selectedInteraction.aiState || 'нет активной сессии'}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<textarea
|
||||||
|
value={replyText}
|
||||||
|
onChange={(event) => 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>
|
||||||
|
);
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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';
|
||||||
|
}
|
||||||
Vendored
+2
@@ -0,0 +1,2 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user