feat(frontend): add notifications, error handling, and improved UI

frontend/src/App.css

@@ -27,6 +27,46 @@
   margin: 0 auto;
 }
 
+/* Notifications */
+.notifications {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 400px;
+}
+
+.notification {
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: white;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideIn 0.3s ease-out;
+}
+
+.notification-success {
+  background: #22c55e;
+}
+
+.notification-error {
+  background: #ef4444;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 .add-section {
   background: white;
   border-radius: 12px;
@@ -84,14 +124,38 @@
   font-size: 1.25rem;
 }
 
-.empty-message {
+.empty-state {
   background: rgba(255, 255, 255, 0.2);
-  padding: 20px;
+  padding: 40px 20px;
-  border-radius: 8px;
+  border-radius: 12px;
   text-align: center;
   color: white;
 }
 
+.empty-icon {
+  font-size: 3rem;
+  margin: 0 0 16px;
+}
+
+.empty-message {
+  font-size: 1.2rem;
+  margin: 0 0 8px;
+}
+
+.empty-hint {
+  opacity: 0.8;
+  margin: 0;
+}
+
+.loading {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 40px;
+  border-radius: 12px;
+  text-align: center;
+  color: white;
+  font-size: 1.2rem;
+}
+
 .employees-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -103,18 +167,23 @@
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .employee-card:hover {
   transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
 }
 
 .card-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+.employee-info {
+  flex: 1;
 }
 
 .employee-name {
@@ -123,6 +192,12 @@
   color: #1f2937;
 }
 
+.employee-position {
+  margin: 4px 0 0;
+  color: #6b7280;
+  font-size: 0.95rem;
+}
+
 .btn-delete {
   background: #fee2e2;
   color: #ef4444;
@@ -136,22 +211,18 @@
   align-items: center;
   justify-content: center;
   transition: background 0.2s;
+  flex-shrink: 0;
 }
 
 .btn-delete:hover {
   background: #fecaca;
 }
 
-.employee-position {
-  margin: 0 0 16px;
-  color: #6b7280;
-  font-size: 0.95rem;
-}
-
 .status-section {
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 
 .status-badge {
@@ -160,12 +231,12 @@
   color: white;
   font-size: 0.85rem;
   font-weight: 600;
-  min-width: 100px;
+  white-space: nowrap;
-  text-align: center;
 }
 
 .status-select {
   flex: 1;
+  min-width: 150px;
   padding: 8px 12px;
   border: 2px solid #e5e7eb;
   border-radius: 6px;

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import axios from 'axios'
 import './App.css'
 
@@ -6,38 +6,69 @@ const API_URL = 'http://localhost:8000/api'
 
 const STATUS_OPTIONS = ['Online', 'На встрече', 'Offline', 'В отпуске', 'Болеет']
 
+const STATUS_CONFIG = {
+  'Online': { color: '#22c55e', icon: '🟢' },
+  'На встрече': { color: '#f59e0b', icon: '🟡' },
+  'Offline': { color: '#6b7280', icon: '⚫' },
+  'В отпуске': { color: '#3b82f6', icon: '🔵' },
+  'Болеет': { color: '#ef4444', icon: '🔴' }
+}
+
 function App() {
   const [employees, setEmployees] = useState([])
   const [newName, setNewName] = useState('')
   const [newPosition, setNewPosition] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [notifications, setNotifications] = useState([])
 
-  const fetchEmployees = async () => {
+  const addNotification = useCallback((message, type = 'success') => {
+    const id = Date.now()
+    setNotifications(prev => [...prev, { id, message, type }])
+    setTimeout(() => {
+      setNotifications(prev => prev.filter(n => n.id !== id))
+    }, 3000)
+  }, [])
+
+  const showError = useCallback((error, context) => {
+    const message = error.response?.data?.detail || `Ошибка: ${context}`
+    addNotification(message, 'error')
+  }, [addNotification])
+
+  const fetchEmployees = useCallback(async () => {
     try {
       const response = await axios.get(`${API_URL}/employees`)
       setEmployees(response.data)
+      setLoading(false)
     } catch (error) {
       console.error('Error fetching employees:', error)
+      showError(error, 'Не удалось загрузить список сотрудников')
+      setLoading(false)
     }
-  }
+  }, [showError])
 
   useEffect(() => {
     fetchEmployees()
-  }, [])
+  }, [fetchEmployees])
 
   const handleAddEmployee = async (e) => {
     e.preventDefault()
-    if (!newName.trim() || !newPosition.trim()) return
+    if (!newName.trim() || !newPosition.trim()) {
+      addNotification('Заполните все поля', 'error')
+      return
+    }
 
     try {
       await axios.post(`${API_URL}/employees`, {
-        name: newName,
+        name: newName.trim(),
-        position: newPosition
+        position: newPosition.trim()
       })
       setNewName('')
       setNewPosition('')
+      addNotification(`Сотрудник ${newName} добавлен`)
       fetchEmployees()
     } catch (error) {
       console.error('Error adding employee:', error)
+      showError(error, 'Не удалось добавить сотрудника')
     }
   }
 
@@ -46,44 +77,48 @@ function App() {
       await axios.put(`${API_URL}/employees/${employeeId}/status`, {
         status: newStatus
       })
+      const employee = employees.find(e => e.id === employeeId)
+      addNotification(`Статус ${employee?.name} изменен на "${newStatus}"`)
       fetchEmployees()
     } catch (error) {
       console.error('Error updating status:', error)
+      showError(error, 'Не удалось обновить статус')
     }
   }
 
   const handleDeleteEmployee = async (employeeId) => {
-    if (!confirm('Вы уверены, что хотите удалить этого сотрудника?')) return
+    const employee = employees.find(e => e.id === employeeId)
+    if (!confirm(`Вы уверены, что хотите удалить ${employee?.name}?`)) return
 
     try {
       await axios.delete(`${API_URL}/employees/${employeeId}`)
+      addNotification(`Сотрудник ${employee?.name} удален`)
       fetchEmployees()
     } catch (error) {
       console.error('Error deleting employee:', error)
+      showError(error, 'Не удалось удалить сотрудника')
     }
   }
 
-  const getStatusColor = (status) => {
+  const getStatusStyle = (status) => {
-    switch (status) {
+    const config = STATUS_CONFIG[status] || STATUS_CONFIG['Offline']
-      case 'Online': return '#22c55e'
+    return {
-      case 'На встрече': return '#f59e0b'
+      backgroundColor: config.color,
-      case 'Offline': return '#6b7280'
-      case 'В отпуске': return '#3b82f6'
-      case 'Болеет': return '#ef4444'
-      default: return '#6b7280'
     }
   }
 
   return (
     <div className="app">
       <header className="header">
-        <h1>Team Status Board</h1>
+        <h1>👥 Team Status Board</h1>
         <p className="subtitle">Панель управления статусами команды</p>
       </header>
 
+      <Notifications notifications={notifications} />
+
       <main className="main">
         <section className="add-section">
-          <h2>Добавить сотрудника</h2>
+          <h2>➕ Добавить сотрудника</h2>
           <form onSubmit={handleAddEmployee} className="add-form">
             <input
               type="text"
@@ -105,14 +140,23 @@ function App() {
 
         <section className="employees-section">
           <h2>Сотрудники ({employees.length})</h2>
-          {employees.length === 0 ? (
+          {loading ? (
-            <p className="empty-message">Список сотрудников пуст</p>
+            <div className="loading">Загрузка...</div>
+          ) : employees.length === 0 ? (
+            <div className="empty-state">
+              <p className="empty-icon">📋</p>
+              <p className="empty-message">Список сотрудников пуст</p>
+              <p className="empty-hint">Добавьте первого сотрудника через форму выше</p>
+            </div>
           ) : (
             <div className="employees-grid">
               {employees.map((employee) => (
                 <div key={employee.id} className="employee-card">
                   <div className="card-header">
-                    <h3 className="employee-name">{employee.name}</h3>
+                    <div className="employee-info">
+                      <h3 className="employee-name">{employee.name}</h3>
+                      <p className="employee-position">{employee.position}</p>
+                    </div>
                     <button
                       onClick={() => handleDeleteEmployee(employee.id)}
                       className="btn-delete"
@@ -121,13 +165,12 @@ function App() {
                       ✕
                     </button>
                   </div>
-                  <p className="employee-position">{employee.position}</p>
                   <div className="status-section">
                     <span
                       className="status-badge"
-                      style={{ backgroundColor: getStatusColor(employee.status) }}
+                      style={getStatusStyle(employee.status)}
                     >
-                      {employee.status}
+                      {STATUS_CONFIG[employee.status]?.icon || '⚫'} {employee.status}
                     </span>
                     <select
                       value={employee.status}
@@ -136,7 +179,7 @@ function App() {
                     >
                       {STATUS_OPTIONS.map((status) => (
                         <option key={status} value={status}>
-                          {status}
+                          {STATUS_CONFIG[status]?.icon} {status}
                         </option>
                       ))}
                     </select>
@@ -151,4 +194,21 @@ function App() {
   )
 }
 
+function Notifications({ notifications }) {
+  if (notifications.length === 0) return null
+
+  return (
+    <div className="notifications">
+      {notifications.map((notification) => (
+        <div
+          key={notification.id}
+          className={`notification notification-${notification.type}`}
+        >
+          {notification.type === 'success' ? '✅' : '❌'} {notification.message}
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export default App