feat: Add Tabler UI support and enhance frontend with new features

frontend/src/DataManager.jsx

@@ -1,6 +1,20 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Table, Button, Form, Row, Col, Card, Alert } from 'react-bootstrap';
+import { 
+  IconPlus, 
+  IconSearch, 
+  IconEdit, 
+  IconTrash, 
+  IconCheck, 
+  IconX, 
+  IconDatabase,
+  IconRefresh,
+  IconArrowsExchange,
+  IconDownload,
+  IconUpload,
+  IconAlertTriangle
+} from '@tabler/icons-react';
 
 const API_URL = '/api';
 
@@ -14,18 +28,25 @@ function DataManager({ entityName, entityKey, placeholder }) {
   const [editingValue, setEditingValue] = useState('');
   const [bulkFrom, setBulkFrom] = useState('SharkFIN');
   const [bulkTo, setBulkTo] = useState('SharkAM');
+  const [loading, setLoading] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState(null);
 
   useEffect(() => {
     fetchItems();
   }, []);
 
   const fetchItems = async () => {
+    setLoading(true);
     try {
       const response = await axios.get(`${API_URL}/${entityKey}`);
       setItems(response.data);
+      setError('');
     } catch (error) {
       console.error(`Error fetching ${entityKey}:`, error);
       setError(`Не удалось загрузить ${entityName}. Проверьте, запущен ли бэкенд.`);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -60,15 +81,30 @@ function DataManager({ entityName, entityKey, placeholder }) {
     setItems(items.filter(i => i.domain !== domainNameToDelete));
   };
 
+  const confirmDelete = (item) => {
+    setItemToDelete(item);
+    setShowDeleteModal(true);
+  };
+
+  const executeDelete = () => {
+    if (itemToDelete) {
+      handleDeleteItem(itemToDelete.domain);
+      setShowDeleteModal(false);
+      setItemToDelete(null);
+    }
+  };
+
   const handleSaveChanges = async () => {
+    setLoading(true);
     try {
-      // The backend expects a payload with a 'domains' key for both endpoints.
       await axios.post(`${API_URL}/${entityKey}`, { domains: items });
       setSuccess('Изменения успешно сохранены!');
       setTimeout(() => setSuccess(''), 3000);
     } catch (error) {
       console.error('Error saving changes:', error);
       setError('Не удалось сохранить изменения.');
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -93,130 +129,367 @@ function DataManager({ entityName, entityKey, placeholder }) {
 
   return (
     <>
-      {error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
-      {success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
+      {error && (
+        <div className="alert alert-danger alert-dismissible" role="alert">
+          <div className="d-flex">
+            <div>
+              <IconX className="icon alert-icon" />
+            </div>
+            <div>
+              {error}
+            </div>
+          </div>
+          <a className="btn-close" onClick={() => setError('')}></a>
+        </div>
+      )}
+      
+      {success && (
+        <div className="alert alert-success alert-dismissible" role="alert">
+          <div className="d-flex">
+            <div>
+              <IconCheck className="icon alert-icon" />
+            </div>
+            <div>
+              {success}
+            </div>
+          </div>
+          <a className="btn-close" onClick={() => setSuccess('')}></a>
+        </div>
+      )}
 
-      <Row>
-        <Col lg={4}>
-          <Card className="mb-4">
-            <Card.Header as="h5">Добавить новый {entityName}</Card.Header>
-            <Card.Body>
-              <Form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
-                <Form.Group className="mb-3">
-                  <Form.Label>Имя {entityName}</Form.Label>
-                  <Form.Control
+      <div className="row">
+        <div className="col-lg-4">
+          {/* Add New Item Card */}
+          <div className="card card-md">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconPlus className="icon me-2" />
+                Добавить новый {entityName}
+              </h3>
+            </div>
+            <div className="card-body">
+              <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
+                <div className="mb-3">
+                  <label className="form-label">Имя {entityName}</label>
+                  <input
                     type="text"
+                    className="form-control"
                     placeholder={placeholder}
                     value={newItem.domain}
                     onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
                   />
-                </Form.Group>
-                <Form.Group className="mb-3">
-                  <Form.Label>Шлюз</Form.Label>
-                  <Form.Control
+                </div>
+                <div className="mb-3">
+                  <label className="form-label">Шлюз</label>
+                  <input
                     type="text"
+                    className="form-control"
                     value={newItem.type}
                     onChange={(e) => setNewItem({ ...newItem, type: e.target.value })}
                   />
-                </Form.Group>
-                <Button variant="primary" type="submit" className="w-100">Добавить</Button>
-              </Form>
-            </Card.Body>
-          </Card>
+                </div>
+                <div className="form-footer">
+                  <button type="submit" className="btn btn-primary w-100">
+                    <IconPlus className="icon me-2" />
+                    Добавить
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
 
-          <Card className="mb-4">
-            <Card.Header as="h5">Массовое обновление</Card.Header>
-            <Card.Body>
-              <Form.Group className="mb-2">
-                <Form.Label>Заменить с</Form.Label>
-                <Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
-              </Form.Group>
-              <Form.Group className="mb-3">
-                <Form.Label>Заменить на</Form.Label>
-                <Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
-              </Form.Group>
-              <Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
-            </Card.Body>
-          </Card>
-        </Col>
-
-        <Col lg={8}>
-          <Card>
-            <Card.Header>
-              <div className="d-flex justify-content-between align-items-center">
-                <h5 className="mb-0">Список: {entityName}</h5>
-                <Button variant="success" onClick={handleSaveChanges} disabled={items.length === 0}>
-                  Сохранить все изменения в S3
-                </Button>
+          {/* Bulk Update Card */}
+          <div className="card card-md mt-3">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconArrowsExchange className="icon me-2" />
+                Массовое обновление
+              </h3>
+            </div>
+            <div className="card-body">
+              <div className="mb-2">
+                <label className="form-label">Заменить с</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={bulkFrom} 
+                  onChange={e => setBulkFrom(e.target.value)} 
+                />
               </div>
-            </Card.Header>
-            <Card.Body>
-              <Form.Control
-                type="text"
-                placeholder={`Поиск по ${entityName}...`}
-                className="mb-3"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-              />
-              <Table striped bordered hover responsive>
-                <thead>
-                  <tr>
-                    <th>#</th>
-                    <th>{entityName}</th>
-                    <th>Шлюз</th>
-                    <th className="text-center">Действия</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {filteredItems.map((item, index) => (
-                    <tr key={item.domain}>
-                      <td>{index + 1}</td>
-                      <td>{item.domain}</td>
-                      <td>
-                        {editingDomain === item.domain ? (
-                          <Form.Control
-                            type="text"
-                            value={editingValue}
-                            onChange={(e) => setEditingValue(e.target.value)}
-                            autoFocus
-                          />
-                        ) : (
-                          item.type
-                        )}
-                      </td>
-                      <td className="text-center">
-                        {editingDomain === item.domain ? (
-                          <>
-                            <Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(item.domain)}>
-                              Сохранить
-                            </Button>
-                            <Button variant="secondary" size="sm" onClick={handleCancelEdit}>
-                              Отмена
-                            </Button>
-                          </>
-                        ) : (
-                          <>
-                            <Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(item)}>
-                              Изменить
-                            </Button>
-                            <Button variant="danger" size="sm" onClick={() => handleDeleteItem(item.domain)}>
-                              Удалить
-                            </Button>
-                          </>
-                        )}
-                      </td>
+              <div className="mb-3">
+                <label className="form-label">Заменить на</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={bulkTo} 
+                  onChange={e => setBulkTo(e.target.value)} 
+                />
+              </div>
+              <div className="form-footer">
+                <button 
+                  type="button" 
+                  className="btn btn-warning w-100" 
+                  onClick={handleBulkUpdate}
+                >
+                  <IconArrowsExchange className="icon me-2" />
+                  Выполнить замену
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Stats Card */}
+          <div className="card card-md mt-3">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconDatabase className="icon me-2" />
+                Статистика
+              </h3>
+            </div>
+            <div className="card-body">
+              <div className="row text-center">
+                <div className="col">
+                  <div className="text-muted mb-1">Всего</div>
+                  <div className="h3 mb-0">{items.length}</div>
+                </div>
+                <div className="col">
+                  <div className="text-muted mb-1">Найдено</div>
+                  <div className="h3 mb-0">{filteredItems.length}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-lg-8">
+          {/* Main Data Card */}
+          <div className="card">
+            <div className="card-header">
+              <div className="d-flex justify-content-between align-items-center">
+                <h3 className="card-title">
+                  <IconDatabase className="icon me-2" />
+                  Список: {entityName}
+                </h3>
+                <div className="card-actions">
+                  <button 
+                    className="btn btn-outline-secondary me-2" 
+                    onClick={fetchItems}
+                    disabled={loading}
+                  >
+                    <IconRefresh className="icon me-2" />
+                    Обновить
+                  </button>
+                  <button 
+                    className="btn btn-success" 
+                    onClick={handleSaveChanges} 
+                    disabled={items.length === 0 || loading}
+                  >
+                    <IconUpload className="icon me-2" />
+                    Сохранить в S3
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="card-body">
+              {/* Search */}
+              <div className="mb-3">
+                <div className="input-icon">
+                  <IconSearch className="icon" />
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder={`Поиск по ${entityName}...`}
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              {/* Table */}
+              <div className="table-responsive">
+                <table className="table table-vcenter card-table">
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>{entityName}</th>
+                      <th>Шлюз</th>
+                      <th className="w-1"></th>
                     </tr>
-                  ))}
-                </tbody>
-              </Table>
+                  </thead>
+                  <tbody>
+                    {filteredItems.map((item, index) => (
+                      <tr key={item.domain}>
+                        <td className="text-muted">{index + 1}</td>
+                        <td>
+                          <div className="font-weight-medium">{item.domain}</div>
+                        </td>
+                        <td>
+                          {editingDomain === item.domain ? (
+                            <input
+                              type="text"
+                              className="form-control form-control-sm"
+                              value={editingValue}
+                              onChange={(e) => setEditingValue(e.target.value)}
+                              autoFocus
+                            />
+                          ) : (
+                            <span className="badge bg-blue-lt">{item.type}</span>
+                          )}
+                        </td>
+                        <td>
+                          {editingDomain === item.domain ? (
+                            <div className="btn-list">
+                              <button 
+                                className="btn btn-sm btn-success" 
+                                onClick={() => handleSaveEdit(item.domain)}
+                              >
+                                <IconCheck className="icon" />
+                              </button>
+                              <button 
+                                className="btn btn-sm btn-secondary" 
+                                onClick={handleCancelEdit}
+                              >
+                                <IconX className="icon" />
+                              </button>
+                            </div>
+                          ) : (
+                            <div className="btn-list">
+                              <button 
+                                className="btn btn-sm btn-outline-primary" 
+                                onClick={() => handleEdit(item)}
+                              >
+                                <IconEdit className="icon" />
+                              </button>
+                              <button 
+                                className="btn btn-sm btn-outline-danger" 
+                                onClick={() => confirmDelete(item)}
+                              >
+                                <IconTrash className="icon" />
+                              </button>
+                            </div>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Empty States */}
               {items.length > 0 && filteredItems.length === 0 && (
-                <p className="text-center text-muted">По вашему запросу ничего не найдено.</p>
+                <div className="empty">
+                  <div className="empty-icon">
+                    <IconSearch className="icon" />
+                  </div>
+                  <p className="empty-title">Ничего не найдено</p>
+                  <p className="empty-subtitle text-muted">
+                    По вашему запросу ничего не найдено.
+                  </p>
+                </div>
               )}
-              {items.length === 0 && <p className="text-center text-muted">Список пуст. Добавьте новый элемент.</p>}
-            </Card.Body>
-          </Card>
-        </Col>
-      </Row>
+              
+              {items.length === 0 && !loading && (
+                <div className="empty">
+                  <div className="empty-icon">
+                    <IconDatabase className="icon" />
+                  </div>
+                  <p className="empty-title">Список пуст</p>
+                  <p className="empty-subtitle text-muted">
+                    Добавьте новый элемент, чтобы начать работу.
+                  </p>
+                </div>
+              )}
+
+              {loading && (
+                <div className="text-center py-4">
+                  <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Загрузка...</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <div className="modal-backdrop" style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 1050,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          <div className="modal-dialog" style={{
+            maxWidth: '500px',
+            width: '90%',
+            margin: '1.75rem auto'
+          }}>
+            <div className="modal-content" style={{
+              backgroundColor: '#fff',
+              borderRadius: '0.5rem',
+              boxShadow: '0 0.5rem 1rem rgba(0, 0, 0, 0.15)'
+            }}>
+              <div className="modal-header" style={{
+                padding: '1rem 1.5rem',
+                borderBottom: '1px solid var(--tblr-border-color)',
+                display: 'flex',
+                alignItems: 'center'
+              }}>
+                <IconAlertTriangle className="icon me-2" style={{ color: 'var(--tblr-danger)' }} />
+                <h5 className="modal-title" style={{ margin: 0 }}>Подтверждение удаления</h5>
+                <button 
+                  type="button" 
+                  className="btn-close" 
+                  onClick={() => setShowDeleteModal(false)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    fontSize: '1.5rem',
+                    cursor: 'pointer',
+                    marginLeft: 'auto'
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+              <div className="modal-body" style={{ padding: '1.5rem' }}>
+                <p>Вы уверены, что хотите удалить <strong>{itemToDelete?.domain}</strong>?</p>
+                <p className="text-muted mb-0">Это действие нельзя отменить.</p>
+              </div>
+              <div className="modal-footer" style={{
+                padding: '1rem 1.5rem',
+                borderTop: '1px solid var(--tblr-border-color)',
+                display: 'flex',
+                gap: '0.5rem',
+                justifyContent: 'flex-end'
+              }}>
+                <button 
+                  type="button" 
+                  className="btn btn-secondary" 
+                  onClick={() => setShowDeleteModal(false)}
+                >
+                  Отмена
+                </button>
+                <button 
+                  type="button" 
+                  className="btn btn-danger" 
+                  onClick={executeDelete}
+                >
+                  <IconTrash className="icon me-2" />
+                  Удалить
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }