+
+ )}
+ actions={[
+ { label: 'Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ', icon: IconEdit, onClick: handleEdit },
+ { label: 'Π£Π΄Π°Π»ΠΈΡΡ', icon: IconTrash, onClick: handleDelete, variant: 'danger' }
+ ]}
+/>
+```
+
+### 7. ProgressBar - ΠΏΠΎΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ
+
+```jsx
+import ProgressBar from './components/ProgressBar.jsx'
+
+{item.name}
+ {item.description}
+ ...
+
+// Semantic colors
+ΠΠ½Π»Π°ΠΉΠ½
+ΠΡΡΠ»Π°ΠΉΠ½
+
+// Touch targets (Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
)
+
+```
+
+## ΠΠΎΠ»Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
+
+π **ΠΠ΅ΡΠ°Π»ΠΈ:** `frontend/UX_IMPROVEMENTS.md`
+π **Summary:** `UX_IMPROVEMENTS_SUMMARY.md`
+
+## ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°
+
+ΠΠΎΠΏΡΠΎΡΡ? ΠΡΠΎΠ±Π»Π΅ΠΌΡ? Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²:
+- `Dashboard.jsx` - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ TrendIndicator, LastSaved, Tooltip
+- ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π²ΡΡΠ΅
+
diff --git a/frontend/UX_IMPROVEMENTS.md b/frontend/UX_IMPROVEMENTS.md
new file mode 100644
index 0000000..ef95401
--- /dev/null
+++ b/frontend/UX_IMPROVEMENTS.md
@@ -0,0 +1,554 @@
+# π¨ UX/UI Π£Π»ΡΡΡΠ΅Π½ΠΈΡ - ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
+
+ΠΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Π²ΡΠ΅ Π²Π½Π΅Π΄ΡΠ΅Π½Π½ΡΠ΅ UX/UI ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΠ΅ΠΊΡ S3 Lists Manager.
+
+## π Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
+
+1. [CSS Π£Π»ΡΡΡΠ΅Π½ΠΈΡ](#css-ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ)
+2. [ΠΠΎΠ²ΡΠ΅ ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ](#Π½ΠΎΠ²ΡΠ΅-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ)
+3. [Π£Π»ΡΡΡΠ΅Π½Π½ΡΠ΅ ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ](#ΡΠ»ΡΡΡΠ΅Π½Π½ΡΠ΅-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ)
+4. [ΠΡΠΈΠΌΠ΅ΡΡ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ](#ΠΏΡΠΈΠΌΠ΅ΡΡ-ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ)
+
+---
+
+## CSS Π£Π»ΡΡΡΠ΅Π½ΠΈΡ
+
+### Semantic Colors
+
+ΠΠΎΠ±Π°Π²Π»Π΅Π½Π° ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ²Π΅ΡΠΎΠ² Π΄Π»Ρ ΡΡΠ°ΡΡΡΠΎΠ² ΠΈ Π°ΠΊΡΠ΅Π½ΡΠΎΠ²:
+
+```css
+--status-online: #2fb344;
+--status-offline: #d63939;
+--status-warning: #f59f00;
+--status-unknown: #868e96;
+
+--accent-primary: #206bc4;
+--accent-danger: #d63939;
+--accent-success: #2fb344;
+```
+
+### Π£Π»ΡΡΡΠ΅Π½Π½Π°Ρ Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
+
+- Π£Π²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡΡ
+- ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°
+- Letter-spacing Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²
+
+### Enhanced Spacing
+
+- ΠΠ΄ΠΈΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΎΡΡΡΡΠΏΠΎΠ² ΡΠ΅ΡΠ΅Π· CSS ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅
+- Π£Π²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠ΅ padding Π² ΡΠ°Π±Π»ΠΈΡΠ°Ρ
Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ
+- Consistent spacing ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠ°ΠΌΠΈ
+
+### ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ
+
+- **Hover states**: ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡΡΡ Π½Π° 1px Ρ ΡΠ΅Π½ΡΡ
+- **Active states**: Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ feedback ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ
+- **Focus states**: ΡΠ»ΡΡΡΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ accessibility
+- **Touch targets**: ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 44x44px Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
+
+---
+
+## ΠΠΎΠ²ΡΠ΅ ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
+
+### 1. Tooltip
+
+ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ keyboard shortcuts.
+
+**ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅:**
+
+```jsx
+import Tooltip from './components/Tooltip.jsx'
+
+
+
+ )}
+ actions={[
+ { label: 'Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ', icon: IconEdit, onClick: handleEdit },
+ { label: 'Π£Π΄Π°Π»ΠΈΡΡ', icon: IconTrash, onClick: handleDelete, variant: 'danger' }
+ ]}
+/>
+```
+
+---
+
+### 8. KeyboardShortcutHint
+
+ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΠΎΡΡΡΠΈΡ
ΠΊΠ»Π°Π²ΠΈΡ.
+
+**ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅:**
+
+```jsx
+import KeyboardShortcutHint, { ShortcutsList } from './components/KeyboardShortcutHint.jsx'
+
+// ΠΠ½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
+
+
+// Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΡΡΠΈΡ
ΠΊΠ»Π°Π²ΠΈΡ:
+{item.domain}
+ {item.community}
+
+
+
+ {domains.map(domain => (
+
+
+
+ {/* Mobile view */}
+ | {domain.name} | +{domain.community} | +
+ |
+
+
+ )}
+ actions={[
+ { label: 'Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ', icon: IconEdit, onClick: onEdit },
+ { label: 'Π£Π΄Π°Π»ΠΈΡΡ', icon: IconTrash, onClick: onDelete, variant: 'danger' }
+ ]}
+ />
+
+ )
+}
+```
+
+### ΠΡΠΈΠΌΠ΅Ρ 3: Dashboard Ρ ΡΡΠ΅Π½Π΄Π°ΠΌΠΈ
+
+```jsx
+function Dashboard() {
+ const [stats, setStats] = useState({})
+ const [previousStats, setPreviousStats] = useState(null)
+ const [lastFetchTime, setLastFetchTime] = useState(null)
+
+ return (
+ {domain.name}
+ {domain.community}
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+ )
+}
+```
+
+---
+
+## Best Practices
+
+### 1. Accessibility
+
+- ΠΡΠ΅Π³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ `aria-label` Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ
+- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ semantic HTML
+- ΠΠ±Π΅ΡΠΏΠ΅ΡΡΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 44x44px Π΄Π»Ρ touch targets Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
+- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ keyboard shortcuts Π΄Π»Ρ ΡΠ°ΡΡΡΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
+
+### 2. Performance
+
+- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ `useMemo` Π΄Π»Ρ ΡΡΠΆΠ΅Π»ΡΡ
Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ
+- Debounce Π΄Π»Ρ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ ΡΠΎΡΠΌ
+- Lazy loading Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΏΠΈΡΠΊΠΎΠ²
+- Virtualization Π΄Π»Ρ ΡΠ°Π±Π»ΠΈΡ > 1000 Π·Π°ΠΏΠΈΡΠ΅ΠΉ
+
+### 3. User Experience
+
+- ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ loading states Π΄Π»Ρ Π²ΡΠ΅Ρ
async ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ
+- ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠΉΡΠ΅ clear error messages Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ
+- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ optimistic updates Π³Π΄Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ
+- Π‘ΠΎΡ
ΡΠ°Π½ΡΠΉΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΡΠΌ ΠΏΡΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
+
+### 4. Mobile First
+
+- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ MobileCardView Π΄Π»Ρ ΡΠ°Π±Π»ΠΈΡ
+- Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ ΡΡΠΎ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Ρ Π½Π° touch screens
+- Π’Π΅ΡΡΠΈΡΡΠΉΡΠ΅ swipe gestures
+- ΠΠ΄Π°ΠΏΡΠΈΡΡΠΉΡΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
+
+---
+
+## Roadmap
+
+ΠΠ»Π°Π½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ:
+
+- [ ] ΠΠΈΡΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠ°Π±Π»ΠΈΡ
+- [ ] Drag & Drop Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠ°
+- [ ] Π‘ΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
Π½Π°ΡΡΡΠΎΠ΅ΠΊ
+- [ ] Dark mode improvements
+- [ ] ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ transitions ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ
+- [ ] PWA support
+- [ ] Offline mode
+
+---
+
+## ΠΠΊΠ»Π°Π΄
+
+ΠΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½ΠΎΠ²ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²:
+
+1. Π‘Π»Π΅Π΄ΡΠΉΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΠΏΠ°ΡΡΠ΅ΡΠ½Π°ΠΌ
+2. ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ JSDoc ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
+3. ΠΠ±Π΅ΡΠΏΠ΅ΡΡΡΠ΅ accessibility
+4. Π’Π΅ΡΡΠΈΡΡΠΉΡΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
+5. ΠΠ±Π½ΠΎΠ²Π»ΡΠΉΡΠ΅ ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
+
+---
+
+**ΠΠ΅ΡΡΠΈΡ:** 1.0.0
+**ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅:** 2025-01-15
+
diff --git a/frontend/src/Dashboard.jsx b/frontend/src/Dashboard.jsx
index 8ccde43..5aca56f 100644
--- a/frontend/src/Dashboard.jsx
+++ b/frontend/src/Dashboard.jsx
@@ -19,21 +19,36 @@ import {
import PageHeader from './components/PageHeader.jsx';
import Breadcrumbs from './components/Breadcrumbs.jsx';
import TopNStats from './components/TopNStats.jsx';
+import TrendIndicator from './components/TrendIndicator.jsx';
+import LastSaved from './components/LastSaved.jsx';
+import Tooltip from './components/Tooltip.jsx';
-function StatCard({ icon: Icon, color, value, title, subtitle, to }) {
+function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previousValue }) {
return (
-
+
+
+
@@ -209,6 +249,8 @@ function Dashboard() {
title="IP-Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠ²"
subtitle="ΠΡΠ΅Π³ΠΎ IP Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠ²"
to="/ip-ranges"
+ trend={!loading && previousStats}
+ previousValue={previousStats?.ipRangesCount}
/>
@@ -221,6 +263,8 @@ function Dashboard() {
title="AS"
subtitle="ΠΡΠ΅Π³ΠΎ Autonomous Systems"
to="/asns"
+ trend={!loading && previousStats}
+ previousValue={previousStats?.asnsCount}
/>
@@ -233,6 +277,8 @@ function Dashboard() {
title="Π‘Π΅ΡΠ²Π΅ΡΠΎΠ²"
subtitle="ΠΡΠ΅Π³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠΎΠ²"
to="/servers"
+ trend={!loading && previousStats}
+ previousValue={previousStats?.serversCount}
/>
diff --git a/frontend/src/components/ContextMenu.jsx b/frontend/src/components/ContextMenu.jsx
new file mode 100644
index 0000000..1354593
--- /dev/null
+++ b/frontend/src/components/ContextMenu.jsx
@@ -0,0 +1,141 @@
+import { useState, useEffect, useRef } from 'react'
+import { IconDotsVertical } from '@tabler/icons-react'
+
+/**
+ * ContextMenu - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
+ * ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠ°Π²ΡΠΉ ΠΊΠ»ΠΈΠΊ ΠΈ dropdown ΠΌΠ΅Π½Ρ
+ */
+function ContextMenu({
+ items, // Array of { label, icon, onClick, variant, divider }
+ children, // Trigger element
+ align = 'right' // 'left' | 'right'
+}) {
+ const [isOpen, setIsOpen] = useState(false)
+ const [position, setPosition] = useState({ x: 0, y: 0 })
+ const [useContextPosition, setUseContextPosition] = useState(false)
+ const menuRef = useRef(null)
+ const triggerRef = useRef(null)
+
+ const handleContextMenu = (e) => {
+ e.preventDefault()
+ setPosition({ x: e.clientX, y: e.clientY })
+ setUseContextPosition(true)
+ setIsOpen(true)
+ }
+
+ const handleClick = () => {
+ if (triggerRef.current) {
+ const rect = triggerRef.current.getBoundingClientRect()
+ setPosition({
+ x: align === 'right' ? rect.right : rect.left,
+ y: rect.bottom
+ })
+ setUseContextPosition(false)
+ setIsOpen(!isOpen)
+ }
+ }
+
+ const handleItemClick = (onClick) => {
+ setIsOpen(false)
+ if (onClick) {
+ onClick()
+ }
+ }
+
+ // ΠΠ°ΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π²Π½Π΅ ΠΌΠ΅Π½Ρ
+ useEffect(() => {
+ const handleClickOutside = (e) => {
+ if (menuRef.current && !menuRef.current.contains(e.target) &&
+ triggerRef.current && !triggerRef.current.contains(e.target)) {
+ setIsOpen(false)
+ }
+ }
+
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [isOpen])
+
+ return (
+
-
{value} {title}
- {subtitle}
+
+
+ {value}
+ {trend && previousValue !== undefined && (
+ {title}
+ {subtitle && (
+ {subtitle}
+ )}
+ {lastFetchTime && (
+
+
+
+
+ )}
/>
{/* ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠ΅ΡΡΠΈΠΊΠΈ */}
@@ -197,6 +235,8 @@ function Dashboard() {
title="ΠΠΎΠΌΠ΅Π½ΠΎΠ²"
subtitle="ΠΡΠ΅Π³ΠΎ Π΄ΠΎΠΌΠ΅Π½ΠΎΠ² Π² ΡΠΈΡΡΠ΅ΠΌΠ΅"
to="/domains"
+ trend={!loading && previousStats}
+ previousValue={previousStats?.domainsCount}
/>
+ {children ? (
+
+ )
+}
+
+export default ContextMenu
+
diff --git a/frontend/src/components/EmptyState.jsx b/frontend/src/components/EmptyState.jsx
index 8d0212b..7ca3055 100644
--- a/frontend/src/components/EmptyState.jsx
+++ b/frontend/src/components/EmptyState.jsx
@@ -1,6 +1,6 @@
/**
- * EmptyState - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- * ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½: ΡΠ±ΡΠ°Π½ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ ΠΈΠΌΠΏΠΎΡΡ React
+ * EmptyState - ΡΠ»ΡΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
+ * ΠΠΎΠ±Π°Π²Π»Π΅Π½Ρ: ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ, ΡΠ»ΡΡΡΠ΅Π½Π½ΡΠ΅ CTA, Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
*/
function EmptyState({
icon: Icon,
@@ -8,11 +8,41 @@ function EmptyState({
description,
action,
secondaryAction,
+ size = 'default', // 'small', 'default', 'large'
+ illustration, // URL ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ
+ variant = 'default' // 'default', 'success', 'info', 'warning'
}) {
+ const sizeClasses = {
+ small: 'empty-sm',
+ default: '',
+ large: 'empty-lg'
+ }
+
+ const variantColors = {
+ default: 'text-muted',
+ success: 'text-success',
+ info: 'text-info',
+ warning: 'text-warning'
+ }
+
return (
-
+ {children}
+
+ ) : (
+
+ )}
+
+ {isOpen && (
+ <>
+
+ {items.map((item, index) => {
+ if (item.divider) {
+ return
+ }
+
+ const Icon = item.icon
+ const variantClass = item.variant === 'danger' ? 'text-danger' : ''
+
+ return (
+
+ )
+ })}
+
+
+ {/* Backdrop Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
*/}
+ setIsOpen(false)}
+ >
+
+ )}
+
+
)}
+
+
)
}
diff --git a/frontend/src/components/ErrorAlert.jsx b/frontend/src/components/ErrorAlert.jsx
index c81bf98..235af00 100644
--- a/frontend/src/components/ErrorAlert.jsx
+++ b/frontend/src/components/ErrorAlert.jsx
@@ -1,27 +1,103 @@
-import { IconAlertTriangle } from '@tabler/icons-react';
+import { IconAlertTriangle, IconCopy, IconRefresh, IconChevronDown, IconChevronUp } from '@tabler/icons-react'
+import { useState } from 'react'
/**
- * ErrorAlert - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ
- * ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½: ΡΠ±ΡΠ°Π½ΠΎ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°
+ * ErrorAlert - ΡΠ»ΡΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ
+ * ΠΠΎΠ±Π°Π²Π»Π΅Π½Ρ: Copy error, Retry, Show details
*/
-function ErrorAlert({ message, details, onClose }) {
- if (!message) return null;
-
+function ErrorAlert({
+ message,
+ details,
+ error, // Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ - ΠΎΠ±ΡΠ΅ΠΊΡ error
+ onClose,
+ onRetry,
+ className = '',
+ showDetails = true
+}) {
+ const [isExpanded, setIsExpanded] = useState(false)
+ const [copied, setCopied] = useState(false)
+
+ // ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΎΠ±ΠΎΠΈΡ
ΡΠΎΡΠΌΠ°ΡΠΎΠ²: { message, details } ΠΈΠ»ΠΈ { error }
+ const errorMessage = message || (typeof error === 'string' ? error : error?.message) || 'ΠΡΠΎΠΈΠ·ΠΎΡΠ»Π° Π½Π΅ΠΈΠ·Π²Π΅ΡΡΠ½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ°'
+ const errorDetails = details || error?.details || error?.stack || null
+ const errorCode = error?.code || error?.status || null
+
+ if (!errorMessage) return null
+
+ const handleCopy = () => {
+ const errorText = `
+ΠΡΠΈΠ±ΠΊΠ°: ${errorMessage}
+${errorCode ? `ΠΠΎΠ΄: ${errorCode}` : ''}
+${errorDetails ? `ΠΠ΅ΡΠ°Π»ΠΈ:\n${typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}` : ''}
+ΠΡΠ΅ΠΌΡ: ${new Date().toLocaleString('ru-RU')}
+ `.trim()
+
+ navigator.clipboard.writeText(errorText).then(() => {
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ }).catch(err => {
+ console.error('ΠΠ΅ ΡΠ΄Π°Π»ΠΎΡΡ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ:', err)
+ })
+ }
+
return (
-
- {Icon ? 
+ ) : Icon ? (
+
{title}
{description && ( @@ -28,6 +58,42 @@ function EmptyState({ )}
+
-
- );
+ )
}
-export default ErrorAlert;
+export default ErrorAlert
diff --git a/frontend/src/components/KeyboardShortcutHint.jsx b/frontend/src/components/KeyboardShortcutHint.jsx
new file mode 100644
index 0000000..eedbfb7
--- /dev/null
+++ b/frontend/src/components/KeyboardShortcutHint.jsx
@@ -0,0 +1,110 @@
+/**
+ * KeyboardShortcutHint - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΡΡΠΈΠΌ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌ
+ * ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
+ */
+function KeyboardShortcutHint({ shortcut, className = '' }) {
+ if (!shortcut) return null
+
+ // Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ Π½Π° ΡΠ°ΡΡΠΈ
+ const keys = shortcut.split('+').map(k => k.trim())
+
+ return (
+
+ {keys.map((key, index) => (
+
+ {key}
+
+ ))}
+
+
+
+ )
+}
+
+/**
+ * ShortcutsList - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΡΡΠΈΡ
ΠΊΠ»Π°Π²ΠΈΡ
+ * ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ
ΠΎΠΊΠ½Π°Ρ
ΠΏΠΎΠΌΠΎΡΠΈ
+ */
+function ShortcutsList({ shortcuts }) {
+ return (
+
+
@@ -29,12 +105,12 @@ function ErrorAlert({ message, details, onClose }) {
)}
- {String(message)}
- {details && (
-
-
+ ΠΠΎΠΊΠ°Π·Π°ΡΡ Π΄Π΅ΡΠ°Π»ΠΈ
-
- {typeof details === 'string' ? details : JSON.stringify(details, null, 2)}
-
- + ΠΡΠΈΠ±ΠΊΠ° + {errorCode && ( + {errorCode} + )} +
+{errorMessage}
+
+ {/* ΠΠ΅ΡΠ°Π»ΠΈ ΠΎΡΠΈΠ±ΠΊΠΈ (ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ Π±Π»ΠΎΠΊ) */}
+ {errorDetails && showDetails && (
+
+
+
+ {isExpanded && (
+
+ )}
+
+ {/* ΠΠ΅ΠΉΡΡΠ²ΠΈΡ */}
+ {(onRetry || handleCopy) && (
+
+ {typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}
+
+ )}
+
+ {onRetry && (
+
+ )}
+
+
)}
+ {shortcuts.map((shortcut, index) => (
+
+ )
+}
+
+export { KeyboardShortcutHint, ShortcutsList }
+export default KeyboardShortcutHint
+
diff --git a/frontend/src/components/LastSaved.jsx b/frontend/src/components/LastSaved.jsx
new file mode 100644
index 0000000..0434c7d
--- /dev/null
+++ b/frontend/src/components/LastSaved.jsx
@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react'
+import { IconClock, IconCheck } from '@tabler/icons-react'
+
+/**
+ * LastSaved - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ
+ * ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ("2 ΠΌΠΈΠ½ΡΡΡ Π½Π°Π·Π°Π΄") Ρ Π°Π²ΡΠΎΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ
+ */
+function LastSaved({ timestamp, variant = 'default' }) {
+ const [relativeTime, setRelativeTime] = useState('')
+
+ useEffect(() => {
+ const updateRelativeTime = () => {
+ if (!timestamp) {
+ setRelativeTime('')
+ return
+ }
+
+ const now = Date.now()
+ const time = new Date(timestamp).getTime()
+ const diffMs = now - time
+ const diffSec = Math.floor(diffMs / 1000)
+ const diffMin = Math.floor(diffSec / 60)
+ const diffHour = Math.floor(diffMin / 60)
+ const diffDay = Math.floor(diffHour / 24)
+
+ if (diffSec < 10) {
+ setRelativeTime('ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ')
+ } else if (diffSec < 60) {
+ setRelativeTime(`${diffSec} ΡΠ΅ΠΊ Π½Π°Π·Π°Π΄`)
+ } else if (diffMin < 60) {
+ setRelativeTime(`${diffMin} ΠΌΠΈΠ½ Π½Π°Π·Π°Π΄`)
+ } else if (diffHour < 24) {
+ setRelativeTime(`${diffHour} Ρ Π½Π°Π·Π°Π΄`)
+ } else {
+ setRelativeTime(`${diffDay} Π΄Π½ Π½Π°Π·Π°Π΄`)
+ }
+ }
+
+ updateRelativeTime()
+ const interval = setInterval(updateRelativeTime, 10000) // ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠ΅ 10 ΡΠ΅ΠΊΡΠ½Π΄
+
+ return () => clearInterval(interval)
+ }, [timestamp])
+
+ if (!timestamp) return null
+
+ const absoluteTime = new Date(timestamp).toLocaleString('ru-RU', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+
+ // ΠΠ°ΡΠΈΠ°Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
+ if (variant === 'badge') {
+ return (
+
+
+ {shortcut.description}
+
+ ))}
+
+
+
+
+ )
+}
+
+export default LastSaved
+
diff --git a/frontend/src/components/MobileCardView.jsx b/frontend/src/components/MobileCardView.jsx
new file mode 100644
index 0000000..d8b9f7e
--- /dev/null
+++ b/frontend/src/components/MobileCardView.jsx
@@ -0,0 +1,175 @@
+import { useState } from 'react'
+import { IconChevronRight, IconDotsVertical } from '@tabler/icons-react'
+import ContextMenu from './ContextMenu.jsx'
+
+/**
+ * MobileCardView - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ
Π΄Π°Π½Π½ΡΡ
Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
+ * ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ swipe gestures Π΄Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
+ */
+function MobileCardView({
+ items,
+ onItemClick,
+ renderContent, // ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ
+ actions // ΠΌΠ°ΡΡΠΈΠ² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ { label, icon, onClick, variant }
+}) {
+ const [swipedItem, setSwipedItem] = useState(null)
+ const [touchStart, setTouchStart] = useState(null)
+ const [touchEnd, setTouchEnd] = useState(null)
+
+ // ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π΄ΠΈΡΡΠ°Π½ΡΠΈΡ ΡΠ²Π°ΠΉΠΏΠ° Π² px
+ const minSwipeDistance = 50
+
+ const onTouchStart = (e, item) => {
+ setTouchEnd(null)
+ setTouchStart(e.targetTouches[0].clientX)
+ }
+
+ const onTouchMove = (e, item) => {
+ setTouchEnd(e.targetTouches[0].clientX)
+ }
+
+ const onTouchEnd = (item) => {
+ if (!touchStart || !touchEnd) return
+
+ const distance = touchStart - touchEnd
+ const isLeftSwipe = distance > minSwipeDistance
+ const isRightSwipe = distance < -minSwipeDistance
+
+ if (isLeftSwipe) {
+ setSwipedItem(item)
+ } else if (isRightSwipe) {
+ setSwipedItem(null)
+ }
+ }
+
+ return (
+
+ {items.map((item, index) => {
+ const isSwiped = swipedItem === item
+
+ return (
+
+ )
+}
+
+export default MobileCardView
+
diff --git a/frontend/src/components/Pagination.jsx b/frontend/src/components/Pagination.jsx
index da641fd..c5c138f 100644
--- a/frontend/src/components/Pagination.jsx
+++ b/frontend/src/components/Pagination.jsx
@@ -1,10 +1,13 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react';
/**
- * Π£Π½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΈΠΈ
- * ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½: useMemo Π΄Π»Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ
+ * Π£Π»ΡΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΈΠΈ
+ * ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ: Jump to Page, ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΡΠ»ΡΡΡΠ΅Π½Π½Π°Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
*/
function Pagination({ currentPage, totalPages, totalItems, pageSize, onPageChange }) {
+ const [jumpToPage, setJumpToPage] = useState('');
+
if (totalPages <= 1) return null;
const pages = useMemo(() => {
@@ -31,74 +34,112 @@ function Pagination({ currentPage, totalPages, totalItems, pageSize, onPageChang
const startItem = (currentPage - 1) * pageSize + 1;
const endItem = Math.min(currentPage * pageSize, totalItems);
+ const handleJumpToPage = (e) => {
+ e.preventDefault();
+ const pageNum = parseInt(jumpToPage, 10);
+ if (pageNum >= 1 && pageNum <= totalPages) {
+ onPageChange(pageNum);
+ setJumpToPage('');
+ }
+ };
+
return (
- onTouchStart(e, item)}
+ onTouchMove={(e) => onTouchMove(e, item)}
+ onTouchEnd={() => onTouchEnd(item)}
+ onClick={() => !isSwiped && onItemClick && onItemClick(item)}
+ >
+
+ )
+ })}
+
+
+
+ {renderContent(item)}
+
+
+
+ {/* ΠΠ΅Π½Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ */}
+
+
+
+ ({
+ ...action,
+ onClick: () => action.onClick(item)
+ }))}>
+
+
+
+
+ {/* Swipe actions */}
+ {isSwiped && (
+
+ {actions.slice(0, 2).map((action, idx) => {
+ const Icon = action.icon
+ return (
+
+ )
+ })}
+
+ )}
+
+
);
}
diff --git a/frontend/src/components/ProgressBar.jsx b/frontend/src/components/ProgressBar.jsx
new file mode 100644
index 0000000..edccdfd
--- /dev/null
+++ b/frontend/src/components/ProgressBar.jsx
@@ -0,0 +1,195 @@
+import { IconCheck, IconX } from '@tabler/icons-react'
+
+/**
+ * ProgressBar - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°ΡΠ° Ρ estimated time
+ * @param {number} progress - ΠΏΡΠΎΠ³ΡΠ΅ΡΡ ΠΎΡ 0 Π΄ΠΎ 100
+ * @param {string} status - ΡΡΠ°ΡΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ
+ * @param {number} estimatedTime - ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ Π²ΡΠ΅ΠΌΡ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ
+ * @param {string} variant - ΡΠ²Π΅Ρ: 'primary', 'success', 'danger', 'warning'
+ */
+function ProgressBar({
+ progress = 0,
+ status = '',
+ estimatedTime = null,
+ variant = 'primary',
+ showPercentage = true,
+ striped = false,
+ animated = false,
+ size = 'default' // 'sm', 'default', 'lg'
+}) {
+ const sizeClass = size === 'sm' ? 'progress-sm' : size === 'lg' ? 'progress-lg' : ''
+ const stripedClass = striped ? 'progress-bar-striped' : ''
+ const animatedClass = animated ? 'progress-bar-animated' : ''
+
+ const formatTime = (seconds) => {
+ if (seconds < 60) {
+ return `${Math.round(seconds)} ΡΠ΅ΠΊ`
+ } else if (seconds < 3600) {
+ const minutes = Math.floor(seconds / 60)
+ const secs = Math.round(seconds % 60)
+ return `${minutes} ΠΌΠΈΠ½ ${secs} ΡΠ΅ΠΊ`
+ } else {
+ const hours = Math.floor(seconds / 3600)
+ const minutes = Math.floor((seconds % 3600) / 60)
+ return `${hours} Ρ ${minutes} ΠΌΠΈΠ½`
+ }
+ }
+
+ return (
+
- ΠΠΎΠΊΠ°Π·Π°Π½ΠΎ {startItem} - {endItem} ΠΈΠ· {totalItems}
+ ΠΠΎΠΊΠ°Π·Π°Π½ΠΎ {startItem} - {endItem} ΠΈΠ· {totalItems}
- -
-
- - - -
- - - - {pages.map((item) => { - if (item.type === 'ellipsis') { + +
- + + +
- + + + {pages.map((item) => { + if (item.type === 'ellipsis') { + return ( +
- + β¦ + + ); + } return ( -
- - β¦ +
- + ); - } - return ( -
- - - - ); - })} -
- - - -
- - - -
- + + +
- + + + +
+ {/* Jump to page */}
+ {totalPages > 10 && (
+
+ )}
+
+ {/* Pagination controls */}
+
-
+
+
+ )
+}
+
+/**
+ * MultiStepProgress - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°
+ */
+function MultiStepProgress({ steps, currentStep, variant = 'primary' }) {
+ const progress = ((currentStep) / steps.length) * 100
+
+ return (
+
+ {status && (
+
+
+ {status}
+ )}
+
+ {estimatedTime !== null && estimatedTime > 0 && (
+
+ ΠΡΡΠ°Π»ΠΎΡΡ ~{formatTime(estimatedTime)}
+
+ )}
+ {showPercentage && (
+
+ {Math.round(progress)}%
+
+ )}
+
+
+
+
+
+
+ {size === 'lg' && showPercentage && (
+ {Math.round(progress)}%
+ )}
+
+
+ {/* ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ ΡΠ°Π³ΠΎΠ² */}
+
+ )
+}
+
+export { ProgressBar, MultiStepProgress }
+export default ProgressBar
+
diff --git a/frontend/src/components/Tooltip.jsx b/frontend/src/components/Tooltip.jsx
new file mode 100644
index 0000000..f12c64c
--- /dev/null
+++ b/frontend/src/components/Tooltip.jsx
@@ -0,0 +1,169 @@
+import { useState, useRef, useEffect } from 'react'
+
+/**
+ * Tooltip ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ
+ * ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ keyboard shortcuts ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
+ */
+function Tooltip({
+ children,
+ content,
+ position = 'top', // top, bottom, left, right
+ shortcut, // keyboard shortcut to display
+ delay = 200,
+ className = ''
+}) {
+ const [isVisible, setIsVisible] = useState(false)
+ const [coords, setCoords] = useState({ x: 0, y: 0 })
+ const timeoutRef = useRef(null)
+ const triggerRef = useRef(null)
+
+ const showTooltip = (e) => {
+ if (timeoutRef.current) clearTimeout(timeoutRef.current)
+
+ timeoutRef.current = setTimeout(() => {
+ if (triggerRef.current) {
+ const rect = triggerRef.current.getBoundingClientRect()
+ let x = 0, y = 0
+
+ switch (position) {
+ case 'top':
+ x = rect.left + rect.width / 2
+ y = rect.top
+ break
+ case 'bottom':
+ x = rect.left + rect.width / 2
+ y = rect.bottom
+ break
+ case 'left':
+ x = rect.left
+ y = rect.top + rect.height / 2
+ break
+ case 'right':
+ x = rect.right
+ y = rect.top + rect.height / 2
+ break
+ default:
+ x = rect.left + rect.width / 2
+ y = rect.top
+ }
+
+ setCoords({ x, y })
+ setIsVisible(true)
+ }
+ }, delay)
+ }
+
+ const hideTooltip = () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ setIsVisible(false)
+ }
+
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ }
+ }, [])
+
+ return (
+ <>
+
+ {children}
+
+
+ {isVisible && (
+
+ {steps.map((step, index) => {
+ const isPast = index < currentStep
+ const isCurrent = index === currentStep
+ const status = isPast ? 'completed' : isCurrent ? 'current' : 'pending'
+
+ return (
+
+
+ {/* ΠΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ */}
+
+
+ )
+ })}
+
+ {isPast ? (
+
+ {step}
+ {index < steps.length - 1 && (
+
+ )}
+
+
+ )}
+
+
+
+ )
+}
+
+export default Tooltip
+
diff --git a/frontend/src/components/TrendIndicator.jsx b/frontend/src/components/TrendIndicator.jsx
new file mode 100644
index 0000000..90b0eb9
--- /dev/null
+++ b/frontend/src/components/TrendIndicator.jsx
@@ -0,0 +1,54 @@
+import { IconTrendingUp, IconTrendingDown, IconMinus } from '@tabler/icons-react'
+
+/**
+ * TrendIndicator - ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ΅Π½Π΄Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠ΅ΡΡΠΈΠΊ
+ * @param {number} value - ΡΠ΅ΠΊΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
+ * @param {number} previousValue - ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
+ * @param {string} format - ΡΠΎΡΠΌΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: 'number', 'percent'
+ * @param {boolean} inverse - Π΅ΡΠ»ΠΈ true, ΡΠΎΡΡ = ΠΏΠ»ΠΎΡ
ΠΎ (ΠΊΡΠ°ΡΠ½ΡΠΉ), ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ = Ρ
ΠΎΡΠΎΡΠΎ (Π·Π΅Π»Π΅Π½ΡΠΉ)
+ */
+function TrendIndicator({ value, previousValue, format = 'number', inverse = false }) {
+ if (previousValue === null || previousValue === undefined || value === previousValue) {
+ return (
+
+
+
+ {content}
+ {shortcut && (
+ {shortcut}
+ )}
+
+ {label && (
+
+ )}
+
+
+ )
+}
+
+export default ValidatedInput
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 233c0f4..6248b3c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,6 +10,64 @@
--app-gap-sm: .5rem;
--app-gap-md: .75rem;
--app-gap-lg: 1rem;
+
+ /* Semantic colors for statuses */
+ --status-online: #2fb344;
+ --status-offline: #d63939;
+ --status-warning: #f59f00;
+ --status-unknown: #868e96;
+
+ /* Accent colors for important actions */
+ --accent-primary: #206bc4;
+ --accent-danger: #d63939;
+ --accent-success: #2fb344;
+ --accent-info: #4299e1;
+ --accent-warning: #f59f00;
+
+ /* Enhanced spacing scale */
+ --space-xs: 0.25rem;
+ --space-sm: 0.5rem;
+ --space-md: 1rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2rem;
+ --space-xxl: 3rem;
+
+ /* Shadow scale */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+ --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+/* ===== Improved Typography ===== */
+.page-title {
+ font-size: 1.75rem;
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ line-height: 1.2;
+}
+
+.card-title {
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.4;
+}
+
+.table td {
+ line-height: 1.6;
+}
+
+/* ===== Improved Spacing ===== */
+.page-header {
+ margin-bottom: var(--space-xl);
+}
+
+.card + .card {
+ margin-top: var(--space-lg);
+}
+
+.table td, .table th {
+ padding: 0.75rem 1rem;
}
/* Header actions under page header */
@@ -53,4 +111,109 @@
/* ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π΅ΠΉΠ΄ΠΆΠ°ΠΌΠΈ ΠΈ Π² empty-action */
.badge + .badge { margin-left: .25rem; }
-.empty .empty-action .btn + .btn { margin-left: .5rem; }
\ No newline at end of file
+.empty .empty-action .btn + .btn { margin-left: .5rem; }
+
+/* ===== Enhanced Interactive Elements ===== */
+/* Better hover states */
+.btn:not(:disabled):hover {
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
+ transition: all 0.2s ease;
+}
+
+.btn:not(:disabled):active {
+ transform: translateY(0);
+ transition: all 0.1s ease;
+}
+
+/* Card hover effects */
+.card.card-hover {
+ transition: all 0.2s ease;
+ cursor: pointer;
+}
+
+.card.card-hover:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+}
+
+/* Better focus states for accessibility */
+*:focus-visible {
+ outline: 3px solid var(--accent-primary);
+ outline-offset: 3px;
+ border-radius: 3px;
+}
+
+button:focus-visible,
+.btn:focus-visible {
+ box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.3);
+}
+
+/* Badge animations */
+.badge {
+ transition: all 0.2s ease;
+}
+
+.badge:hover {
+ transform: scale(1.05);
+}
+
+/* Minimum touch target size for mobile */
+@media (max-width: 768px) {
+ .btn, .page-link, .dropdown-item {
+ min-height: 44px;
+ min-width: 44px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .btn-icon {
+ width: 44px;
+ height: 44px;
+ }
+}
+
+/* Enhanced table row interactions */
+.table tbody tr {
+ transition: background-color 0.15s ease;
+}
+
+.table tbody tr:hover {
+ background-color: rgba(32, 107, 196, 0.04);
+}
+
+.table tbody tr:focus-within {
+ background-color: rgba(32, 107, 196, 0.08);
+ box-shadow: inset 3px 0 0 var(--accent-primary);
+}
+
+/* Loading state improvements */
+.btn.loading {
+ position: relative;
+ pointer-events: none;
+}
+
+.btn.loading::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ border-radius: inherit;
+ background: rgba(255, 255, 255, 0.2);
+ transform: translate(-50%, -50%);
+ animation: pulse-button 1.5s infinite;
+}
+
+@keyframes pulse-button {
+ 0%, 100% {
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1.05);
+ }
+}
\ No newline at end of file
+
+
+ {/* ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ */}
+ {showValidIcon && isTouched && !validationState.isValidating && (
+
+ {validationState.valid === true && (
+
+
+ {/* ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° */}
+ {hint && !validationState.message && (
+
+ {hint}
+
+ )}
+
+ {/* Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅ */}
+ {isTouched && validationState.message && (
+
+
+ )}
+