init: DigOpsCC UI - React frontend for call-center backend (migrated from /opt untracked source)

2026-08-10 12:44:09 +00:00
commit 82826f8857
31 changed files with 9381 additions and 0 deletions
@@ -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>
+  );
+};