diff --git a/backend/server.js b/backend/server.js
index 3e193e0..e10050d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -343,8 +343,8 @@ app.post('/api/billing', async (req, res) => {
     // Validate each billing item has required fields
     for (let i = 0; i < billingData.length; i++) {
         const item = billingData[i];
-        if (!item.hostName || !item.nodeName || !item.country || !item.provider) {
-            return res.status(400).send(`Billing item at index ${i} is missing required fields`);
+        if (!item.hostName || !item.country || !item.provider) {
+            return res.status(400).send(`Billing item at index ${i} is missing required fields: hostName, country, provider`);
         }
     }
 
diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index 57e8e53..6cf6718 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -11,7 +11,13 @@ import {
   IconCalendar,
   IconCreditCard,
   IconCurrencyDollar,
-  IconExternalLink
+  IconExternalLink,
+  IconSearch,
+  IconFilter,
+  IconDownload,
+  IconUpload,
+  IconEye,
+  IconEyeOff
 } from '@tabler/icons-react';
 
 const API_URL = '/api';
@@ -28,6 +34,7 @@ function BillingManager() {
   const [filterProvider, setFilterProvider] = useState('');
   const [filterCountry, setFilterCountry] = useState('');
   const [filterStatus, setFilterStatus] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
   const pageSize = 10;
 
   // Модальные окна
@@ -70,7 +77,6 @@ function BillingManager() {
   const fetchExchangeRates = async () => {
     setRatesLoading(true);
     try {
-      // Используем бесплатный API для получения курсов валют
       const response = await axios.get('https://api.exchangerate-api.com/v4/latest/USD');
       const rates = response.data.rates;
       
@@ -81,7 +87,6 @@ function BillingManager() {
       });
     } catch (error) {
       console.error('Ошибка при загрузке курсов валют:', error);
-      // Используем примерные курсы если API недоступен
       setExchangeRates({
         USD: 1,
         EUR: 0.85,
@@ -101,89 +106,7 @@ function BillingManager() {
     } catch (err) {
       console.error('Ошибка при загрузке данных биллинга:', err);
       setError('Ошибка при загрузке данных');
-      // Загружаем тестовые данные если API недоступен
-              setBillingData([
-          {
-            "id": "1",
-            "hostName": "VDSINA",
-            "purpose": "relay",
-            "country": "RU",
-            "provider": "VDSINA",
-            "loginUrl": "cp.vdsina.com",
-            "monthlyCost": 12.00,
-            "monthlyCostCurrency": "USD",
-            "nextPaymentDate": "2026-04-25",
-            "lastPaymentDate": "2025-05-05",
-            "lastPaymentAmount": 12.00,
-            "lastPaymentCurrency": "USD",
-            "status": "active",
-            "notes": ""
-          },
-          {
-            "id": "2",
-            "hostName": "Macloud",
-            "purpose": "bgp",
-            "country": "RU",
-            "provider": "Macloud",
-            "loginUrl": "cp.macloud.ru",
-            "monthlyCost": 7.00,
-            "monthlyCostCurrency": "USD",
-            "nextPaymentDate": "2025-09-02",
-            "lastPaymentDate": "2025-02-03",
-            "lastPaymentAmount": 7.00,
-            "lastPaymentCurrency": "USD",
-            "status": "active",
-            "notes": ""
-          },
-          {
-            "id": "3",
-            "hostName": "Hosting VDS",
-            "purpose": "monitoring",
-            "country": "RU",
-            "provider": "Hosting VDS",
-            "loginUrl": "my.hosting-vds.com/",
-            "monthlyCost": 11.95,
-            "monthlyCostCurrency": "USD",
-            "nextPaymentDate": "2025-12-21",
-            "lastPaymentDate": "2025-06-13",
-            "lastPaymentAmount": 10.00,
-            "lastPaymentCurrency": "USD",
-            "status": "active",
-            "notes": ""
-          },
-          {
-            "id": "4",
-            "hostName": "Waicore",
-            "purpose": "dns",
-            "country": "DE",
-            "provider": "Waicore",
-            "loginUrl": "my.waicore.com/billmgr",
-            "monthlyCost": 9.60,
-            "monthlyCostCurrency": "USD",
-            "nextPaymentDate": "2026-04-25",
-            "lastPaymentDate": "2025-04-25",
-            "lastPaymentAmount": 9.60,
-            "lastPaymentCurrency": "USD",
-            "status": "active",
-            "notes": ""
-          },
-          {
-            "id": "5",
-            "hostName": "IHOR",
-            "purpose": "proxy",
-            "country": "RU",
-            "provider": "IHOR",
-            "loginUrl": "billing.ihor-hosting.ru/billmgr",
-            "monthlyCost": 10.00,
-            "monthlyCostCurrency": "USD",
-            "nextPaymentDate": "2025-09-10",
-            "lastPaymentDate": "2025-06-25",
-            "lastPaymentAmount": 10.00,
-            "lastPaymentCurrency": "USD",
-            "status": "active",
-            "notes": ""
-          }
-        ]);
+      setBillingData([]);
     } finally {
       setLoading(false);
     }
@@ -196,8 +119,9 @@ function BillingManager() {
       setSuccess('Данные успешно сохранены');
       setTimeout(() => setSuccess(''), 3000);
     } catch (err) {
-      setError('Ошибка при сохранении данных');
-      setTimeout(() => setError(''), 3000);
+      console.error('Ошибка при сохранении:', err);
+      setError(`Ошибка при сохранении данных: ${err.response?.data || err.message}`);
+      setTimeout(() => setError(''), 5000);
     } finally {
       setLoading(false);
     }
@@ -206,14 +130,16 @@ function BillingManager() {
   const handleAddItem = () => {
     setNewItem({
       hostName: '',
-      nodeName: '',
+      purpose: '',
       country: '',
       provider: '',
       loginUrl: '',
       monthlyCost: 0,
+      monthlyCostCurrency: 'USD',
       nextPaymentDate: '',
       lastPaymentDate: '',
       lastPaymentAmount: 0,
+      lastPaymentCurrency: 'USD',
       status: 'active',
       notes: ''
     });
@@ -239,17 +165,31 @@ function BillingManager() {
   };
 
   const handleAddSubmit = () => {
-    const newId = Math.max(...billingData.map(item => parseInt(item.id)), 0) + 1;
+    if (!newItem.hostName || !newItem.country || !newItem.provider) {
+      setError('Пожалуйста, заполните обязательные поля: Host Name, Country, Provider');
+      return;
+    }
+    
+    const newId = Math.max(...billingData.map(item => parseInt(item.id) || 0), 0) + 1;
     const itemToAdd = { ...newItem, id: newId.toString() };
     setBillingData(prev => [...prev, itemToAdd]);
     setShowAddModal(false);
+    setSuccess('Элемент успешно добавлен');
+    setTimeout(() => setSuccess(''), 3000);
   };
 
   const handleEditSubmit = () => {
+    if (!editingItem.hostName || !editingItem.country || !editingItem.provider) {
+      setError('Пожалуйста, заполните обязательные поля: Host Name, Country, Provider');
+      return;
+    }
+    
     setBillingData(prev => prev.map(item => 
       item.id === editingItem.id ? editingItem : item
     ));
     setShowEditModal(false);
+    setSuccess('Элемент успешно обновлен');
+    setTimeout(() => setSuccess(''), 3000);
   };
 
   const handleSort = (field) => {
@@ -261,12 +201,24 @@ function BillingManager() {
     }
   };
 
+  // Вычисляем общую сумму последних платежей
+  const totalLastPayments = billingData.reduce((sum, item) => {
+    return sum + (item.lastPaymentAmount || 0);
+  }, 0);
+
+  // Вычисляем общую сумму месячных затрат
+  const totalMonthlyCosts = billingData.reduce((sum, item) => {
+    return sum + (item.monthlyCost || 0);
+  }, 0);
+
+  // Фильтрация данных
   const filteredData = billingData
     .filter(item => {
       const matchesSearch = 
-        item.hostName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        item.nodeName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        item.provider.toLowerCase().includes(searchTerm.toLowerCase());
+        item.hostName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        item.purpose?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        item.provider?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        item.country?.toLowerCase().includes(searchTerm.toLowerCase());
       
       const matchesProvider = !filterProvider || item.provider === filterProvider;
       const matchesCountry = !filterCountry || item.country === filterCountry;
@@ -275,8 +227,8 @@ function BillingManager() {
       return matchesSearch && matchesProvider && matchesCountry && matchesStatus;
     })
     .sort((a, b) => {
-      const aValue = a[sortField];
-      const bValue = b[sortField];
+      const aValue = a[sortField] || '';
+      const bValue = b[sortField] || '';
       
       if (sortOrder === 'asc') {
         return aValue > bValue ? 1 : -1;
@@ -292,23 +244,13 @@ function BillingManager() {
 
   const totalPages = Math.ceil(filteredData.length / pageSize);
 
-  // Статистика
-  const totalMonthlyCost = billingData.reduce((sum, item) => {
-    const currency = item.monthlyCostCurrency || 'USD';
-    return sum + convertToRUB(item.monthlyCost, currency);
-  }, 0);
-  const totalLastPayments = billingData.reduce((sum, item) => {
-    const currency = item.lastPaymentCurrency || 'USD';
-    return sum + convertToRUB(item.lastPaymentAmount, currency);
-  }, 0);
-  const activeProviders = [...new Set(billingData.map(item => item.provider))].length;
-  const activeNodes = billingData.filter(item => item.status === 'active').length;
-
-  // Получение уникальных значений для фильтров
-  const providers = [...new Set(billingData.map(item => item.provider))];
-  const countries = [...new Set(billingData.map(item => item.country))];
+  // Получаем уникальные значения для фильтров
+  const uniqueProviders = [...new Set(billingData.map(item => item.provider).filter(Boolean))];
+  const uniqueCountries = [...new Set(billingData.map(item => item.country).filter(Boolean))];
+  const uniqueStatuses = [...new Set(billingData.map(item => item.status).filter(Boolean))];
 
   function countryToFlag(isoCode) {
+    if (!isoCode) return '🌍';
     const codePoints = isoCode
       .toUpperCase()
       .split('')
@@ -317,16 +259,16 @@ function BillingManager() {
   }
 
   function formatDate(dateString) {
-    if (!dateString) return '—';
-    const date = new Date(dateString);
-    return date.toLocaleDateString('ru-RU', { 
-      day: 'numeric', 
-      month: 'long', 
-      year: 'numeric' 
-    });
+    if (!dateString) return 'Не указано';
+    try {
+      return new Date(dateString).toLocaleDateString('ru-RU');
+    } catch {
+      return dateString;
+    }
   }
 
   function formatCurrency(amount, currency = 'USD') {
+    if (!amount) return '0.00';
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: currency
@@ -334,8 +276,9 @@ function BillingManager() {
   }
 
   function convertToRUB(amount, currency) {
+    if (!amount) return 0;
     const rate = exchangeRates[currency] || 1;
-    return amount * rate;
+    return amount * rate * exchangeRates.RUB;
   }
 
   function formatCurrencyInRUB(amount, currency) {
@@ -359,6 +302,30 @@ function BillingManager() {
     return purposeMap[purpose] || purpose || 'Не указано';
   }
 
+  // Экспорт данных
+  const exportData = () => {
+    const csvContent = [
+      ['Host Name', 'Purpose', 'Country', 'Provider', 'Monthly Cost', 'Next Payment', 'Status'],
+      ...filteredData.map(item => [
+        item.hostName,
+        item.purpose,
+        item.country,
+        item.provider,
+        item.monthlyCost,
+        item.nextPaymentDate,
+        item.status
+      ])
+    ].map(row => row.join(',')).join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `billing-data-${new Date().toISOString().split('T')[0]}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+
   return (
     <div>
       {/* Заголовок страницы */}
@@ -369,27 +336,120 @@ function BillingManager() {
             <div className="page-pretitle">Панель управления / Ноды / Инфра-биллинг</div>
           </div>
           <div className="col-auto ms-auto d-print-none">
-                          <div className="btn-list">
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={fetchBillingData}
-                  disabled={loading}
-                >
-                  <IconRefresh size={16} />
-                  Обновить
-                </button>
-                <button 
-                  className="btn btn-primary"
-                  onClick={handleAddItem}
-                >
-                  <IconPlus size={16} />
-                  Добавить
-                </button>
-              </div>
+            <div className="btn-list">
+              <button 
+                className="btn btn-outline-secondary"
+                onClick={() => setShowFilters(!showFilters)}
+              >
+                <IconFilter size={16} />
+                Фильтры
+              </button>
+              <button 
+                className="btn btn-outline-primary"
+                onClick={exportData}
+                disabled={loading}
+              >
+                <IconDownload size={16} />
+                Экспорт
+              </button>
+              <button 
+                className="btn btn-outline-primary"
+                onClick={fetchBillingData}
+                disabled={loading}
+              >
+                <IconRefresh size={16} />
+                Обновить
+              </button>
+              <button 
+                className="btn btn-primary"
+                onClick={handleAddItem}
+              >
+                <IconPlus size={16} />
+                Добавить
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
+      {/* Уведомления */}
+      {error && (
+        <div className="alert alert-danger alert-dismissible" role="alert">
+          <IconAlertTriangle className="me-2" />
+          {error}
+          <button type="button" className="btn-close" onClick={() => setError('')}></button>
+        </div>
+      )}
+      {success && (
+        <div className="alert alert-success alert-dismissible" role="alert">
+          <IconCheck className="me-2" />
+          {success}
+          <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
+        </div>
+      )}
+
+      {/* Фильтры */}
+      {showFilters && (
+        <div className="card mb-4">
+          <div className="card-header">
+            <h3 className="card-title">Фильтры</h3>
+          </div>
+          <div className="card-body">
+            <div className="row g-3">
+              <div className="col-md-3">
+                <label className="form-label">Поиск</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Поиск по названию, назначению, провайдеру..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+              <div className="col-md-3">
+                <label className="form-label">Провайдер</label>
+                <select
+                  className="form-select"
+                  value={filterProvider}
+                  onChange={(e) => setFilterProvider(e.target.value)}
+                >
+                  <option value="">Все провайдеры</option>
+                  {uniqueProviders.map(provider => (
+                    <option key={provider} value={provider}>{provider}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-3">
+                <label className="form-label">Страна</label>
+                <select
+                  className="form-select"
+                  value={filterCountry}
+                  onChange={(e) => setFilterCountry(e.target.value)}
+                >
+                  <option value="">Все страны</option>
+                  {uniqueCountries.map(country => (
+                    <option key={country} value={country}>{countryToFlag(country)} {country}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-3">
+                <label className="form-label">Статус</label>
+                <select
+                  className="form-select"
+                  value={filterStatus}
+                  onChange={(e) => setFilterStatus(e.target.value)}
+                >
+                  <option value="">Все статусы</option>
+                  {uniqueStatuses.map(status => (
+                    <option key={status} value={status}>{status}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Статистические карточки */}
       <div className="row g-3 mb-4">
         <div className="col-md-3">
@@ -455,274 +515,235 @@ function BillingManager() {
               </span>
               <div>
                 <div className="h3 mb-0 fw-bold">
-                  {formatCurrencyInRUB(totalMonthlyCost, 'USD')}
+                  {formatCurrencyInRUB(totalMonthlyCosts, 'USD')}
                 </div>
-                <div className="text-muted lh-1">суммарных трат</div>
+                <div className="text-muted lh-1">месячные затраты</div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Уведомления */}
-      {error && (
-        <div className="alert alert-danger alert-dismissible" role="alert">
-          <IconAlertTriangle className="icon" />
-          {error}
-          <button type="button" className="btn-close" onClick={() => setError('')}></button>
+      {/* Основная таблица */}
+      <div className="card">
+        <div className="card-header">
+          <h3 className="card-title">Оплачиваемые ноды</h3>
+          <div className="card-actions">
+            <button 
+              className="btn btn-primary btn-sm"
+              onClick={handleSaveChanges}
+              disabled={loading}
+            >
+              <IconDatabase size={16} />
+              Сохранить
+            </button>
+          </div>
         </div>
-      )}
-      {success && (
-        <div className="alert alert-success alert-dismissible" role="alert">
-          <IconCheck className="icon" />
-          {success}
-          <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
-        </div>
-      )}
-
-      <div className="row">
-        {/* Левая панель - Оплачиваемые ноды */}
-        <div className="col-md-6">
-          <div className="card">
-            <div className="card-header">
-              <h3 className="card-title">Оплачиваемые ноды</h3>
-              <div className="card-actions">
-                <button 
-                  className="btn btn-primary btn-sm"
-                  onClick={handleSaveChanges}
-                  disabled={loading}
+        <div className="card-body">
+          <div className="table-responsive">
+            <table className="table table-vcenter">
+              <thead>
+                <tr>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('hostName')}
+                  >
+                    Имя хостера
+                    {sortField === 'hostName' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('purpose')}
+                  >
+                    Назначение
+                    {sortField === 'purpose' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('country')}
+                  >
+                    Страна
+                    {sortField === 'country' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('provider')}
+                  >
+                    Провайдер
+                    {sortField === 'provider' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('monthlyCost')}
+                  >
+                    Месячная стоимость
+                    {sortField === 'monthlyCost' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('nextPaymentDate')}
+                  >
+                    Следующий платеж
+                    {sortField === 'nextPaymentDate' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th 
+                    className="cursor-pointer"
+                    onClick={() => handleSort('status')}
+                  >
+                    Статус
+                    {sortField === 'status' && (
+                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                  <th>Действия</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedData.map(item => (
+                  <tr key={item.id}>
+                    <td>
+                      <div className="d-flex align-items-center">
+                        <span className="avatar avatar-sm me-2">
+                          {countryToFlag(item.country)}
+                        </span>
+                        <div>
+                          <div className="fw-bold">{item.hostName}</div>
+                          {item.loginUrl && (
+                            <div className="text-muted small">
+                              <a href={`https://${item.loginUrl}`} target="_blank" rel="noopener noreferrer">
+                                <IconExternalLink size={12} className="me-1" />
+                                {item.loginUrl}
+                              </a>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      <span className="badge bg-blue-lt text-blue">
+                        {formatPurpose(item.purpose)}
+                      </span>
+                    </td>
+                    <td>
+                      <div className="d-flex align-items-center">
+                        <span className="me-2">{countryToFlag(item.country)}</span>
+                        {item.country}
+                      </div>
+                    </td>
+                    <td>
+                      <span className="badge bg-green-lt text-green">
+                        {item.provider}
+                      </span>
+                    </td>
+                    <td>
+                      <div className="fw-bold">
+                        {formatCurrency(item.monthlyCost, item.monthlyCostCurrency)}
+                      </div>
+                      <div className="text-muted small">
+                        {formatCurrencyInRUB(item.monthlyCost, item.monthlyCostCurrency)}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="fw-bold">
+                        {formatDate(item.nextPaymentDate)}
+                      </div>
+                      {item.nextPaymentDate && (
+                        <div className="text-muted small">
+                          {(() => {
+                            const nextPayment = new Date(item.nextPaymentDate);
+                            const now = new Date();
+                            const diffTime = nextPayment - now;
+                            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                            if (diffDays < 0) {
+                              return <span className="text-danger">Просрочено на {Math.abs(diffDays)} дн.</span>;
+                            } else if (diffDays <= 30) {
+                              return <span className="text-warning">Через {diffDays} дн.</span>;
+                            } else {
+                              return <span className="text-success">Через {diffDays} дн.</span>;
+                            }
+                          })()}
+                        </div>
+                      )}
+                    </td>
+                    <td>
+                      <span className={`badge ${item.status === 'active' ? 'bg-success-lt text-success' : 'bg-danger-lt text-danger'}`}>
+                        {item.status === 'active' ? 'Активен' : 'Неактивен'}
+                      </span>
+                    </td>
+                    <td>
+                      <div className="btn-list">
+                        <button
+                          className="btn btn-sm btn-outline-primary"
+                          onClick={() => handleEditItem(item)}
+                        >
+                          <IconEdit size={14} />
+                        </button>
+                        <button
+                          className="btn btn-sm btn-outline-danger"
+                          onClick={() => handleDeleteItem(item)}
+                        >
+                          <IconTrash size={14} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          
+          {/* Пагинация */}
+          {totalPages > 1 && (
+            <div className="d-flex align-items-center justify-content-between mt-3">
+              <div className="text-muted">
+                Показано {((currentPage - 1) * pageSize) + 1} - {Math.min(currentPage * pageSize, filteredData.length)} из {filteredData.length}
+              </div>
+              <div className="btn-group">
+                <button
+                  className="btn btn-outline-secondary"
+                  onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
+                  disabled={currentPage === 1}
                 >
-                  <IconDatabase size={16} />
-                  Сохранить
+                  Предыдущая
+                </button>
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  const page = i + 1;
+                  return (
+                    <button
+                      key={page}
+                      className={`btn ${currentPage === page ? 'btn-primary' : 'btn-outline-secondary'}`}
+                      onClick={() => setCurrentPage(page)}
+                    >
+                      {page}
+                    </button>
+                  );
+                })}
+                <button
+                  className="btn btn-outline-secondary"
+                  onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
+                  disabled={currentPage === totalPages}
+                >
+                  Следующая
                 </button>
               </div>
             </div>
-            <div className="card-body">
-              <div className="table-responsive">
-                <table className="table table-vcenter">
-                  <thead>
-                    <tr>
-                      <th>Имя хостера</th>
-                      <th>Назначение</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {billingData.map(item => (
-                      <tr key={item.id}>
-                        <td>
-                          <div className="d-flex align-items-center">
-                            <span className="avatar avatar-sm me-2">
-                              {countryToFlag(item.country)}
-                            </span>
-                            {item.hostName}
-                          </div>
-                        </td>
-                        <td>
-                          <div className="d-flex align-items-center">
-                            <span className="badge bg-blue-lt text-blue me-2">
-                              {formatPurpose(item.purpose)}
-                            </span>
-                            {formatPurpose(item.purpose)}
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              <div className="d-flex align-items-center justify-content-between mt-3">
-                <div className="text-muted">
-                  Показано {billingData.length} из {billingData.length}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Провайдеры */}
-          <div className="card mt-4">
-            <div className="card-header">
-              <h3 className="card-title">Провайдеры</h3>
-            </div>
-            <div className="card-body">
-              <div className="table-responsive">
-                <table className="table table-vcenter">
-                  <thead>
-                    <tr>
-                      <th>Имя хостера</th>
-                      <th>Ссылка для входа</th>
-                      <th>Всего, $</th>
-                      <th>Сервера</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {providers.map(provider => {
-                      const providerItems = billingData.filter(item => item.provider === provider);
-                                              const totalCost = providerItems.reduce((sum, item) => {
-                          const currency = item.monthlyCostCurrency || 'USD';
-                          return sum + convertToRUB(item.monthlyCost, currency);
-                        }, 0);
-                      const servers = providerItems.map(item => formatPurpose(item.purpose)).join(', ');
-                      
-                      return (
-                        <tr key={provider}>
-                          <td>{provider}</td>
-                          <td>
-                            <a 
-                              href={`https://${providerItems[0]?.loginUrl}`} 
-                              target="_blank" 
-                              rel="noopener noreferrer"
-                              className="text-decoration-none"
-                            >
-                              {providerItems[0]?.loginUrl}
-                              <IconExternalLink className="icon ms-1" size={14} />
-                            </a>
-                          </td>
-                          <td>{formatCurrencyInRUB(totalCost, 'USD')}</td>
-                          <td>
-                            <div className="d-flex align-items-center">
-                              <span className="avatar avatar-sm me-1">
-                                {countryToFlag(providerItems[0]?.country || 'US')}
-                              </span>
-                              {servers}
-                            </div>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-              <div className="d-flex align-items-center justify-content-between mt-3">
-                <div className="text-muted">
-                  Σ {providers.length} провайдер(а)
-                </div>
-                <div className="text-muted">
-                  Σ {formatCurrency(totalMonthlyCost)}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Правая панель - История платежей */}
-        <div className="col-md-6">
-          <div className="card">
-            <div className="card-header">
-              <h3 className="card-title">История платежей</h3>
-              <div className="card-actions">
-                <button 
-                  className="btn btn-outline-primary btn-sm"
-                  onClick={handleAddItem}
-                >
-                  <IconPlus size={16} />
-                </button>
-              </div>
-            </div>
-            <div className="card-body">
-              <div className="table-responsive">
-                <table className="table table-vcenter">
-                  <thead>
-                    <tr>
-                      <th>Имя хостера</th>
-                      <th>Дата оплаты</th>
-                      <th>Оплачено, $</th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {billingData
-                      .filter(item => item.lastPaymentDate)
-                      .sort((a, b) => new Date(b.lastPaymentDate) - new Date(a.lastPaymentDate))
-                      .map(item => (
-                        <tr key={item.id}>
-                          <td>{item.hostName}</td>
-                          <td>{formatDate(item.lastPaymentDate)}</td>
-                          <td>
-                            <div>
-                              <div>{formatCurrency(item.lastPaymentAmount, item.lastPaymentCurrency || 'USD')}</div>
-                              <small className="text-muted">
-                                {formatCurrencyInRUB(item.lastPaymentAmount, item.lastPaymentCurrency || 'USD')}
-                              </small>
-                            </div>
-                          </td>
-                          <td>
-                            <div className="btn-list">
-                              <button 
-                                className="btn btn-icon btn-sm btn-outline-primary"
-                                onClick={() => handleEditItem(item)}
-                                title="Редактировать"
-                              >
-                                <IconEdit size={16} />
-                              </button>
-                              <button 
-                                className="btn btn-icon btn-sm btn-outline-danger"
-                                onClick={() => handleDeleteItem(item)}
-                                title="Удалить"
-                              >
-                                <IconTrash size={16} />
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-
-          {/* Следующий платеж */}
-          <div className="card mt-4">
-            <div className="card-header">
-              <h3 className="card-title">Следующий платеж</h3>
-            </div>
-            <div className="card-body">
-              <div className="table-responsive">
-                <table className="table table-vcenter">
-                  <thead>
-                    <tr>
-                      <th>Имя хостера</th>
-                      <th>Следующий платеж</th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {billingData
-                      .filter(item => item.nextPaymentDate)
-                      .sort((a, b) => new Date(a.nextPaymentDate) - new Date(b.nextPaymentDate))
-                      .map(item => (
-                        <tr key={item.id}>
-                          <td>{item.hostName}</td>
-                          <td>{formatDate(item.nextPaymentDate)}</td>
-                          <td>
-                            <div className="btn-list">
-                              <button 
-                                className="btn btn-icon btn-sm btn-outline-primary"
-                                onClick={() => handleEditItem(item)}
-                                title="Редактировать"
-                              >
-                                <IconEdit size={16} />
-                              </button>
-                              <button 
-                                className="btn btn-icon btn-sm btn-outline-danger"
-                                onClick={() => handleDeleteItem(item)}
-                                title="Удалить"
-                              >
-                                <IconTrash size={16} />
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
+          )}
         </div>
       </div>
 
-      {/* Модальное окно добавления */}
+      {/* Модальные окна */}
       <AddBillingModal
         show={showAddModal}
         item={newItem}
@@ -731,7 +752,6 @@ function BillingManager() {
         onClose={() => setShowAddModal(false)}
       />
 
-      {/* Модальное окно редактирования */}
       <EditBillingModal
         show={showEditModal}
         item={editingItem}
@@ -740,7 +760,6 @@ function BillingManager() {
         onClose={() => setShowEditModal(false)}
       />
 
-      {/* Модальное окно удаления */}
       <DeleteBillingModal
         show={showDeleteModal}
         item={selectedItem}
@@ -751,398 +770,240 @@ function BillingManager() {
   );
 }
 
-// Модальное окно добавления
+// Компоненты модальных окон
 function AddBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
   if (!show) return null;
 
-  const handleChange = (field, value) => {
-    onItemChange({ ...item, [field]: value });
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit();
-  };
-
   return (
-    <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+    <div className="modal show d-block" tabIndex="-1">
       <div className="modal-dialog modal-lg">
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title">Добавить ноду</h5>
+            <h5 className="modal-title">Добавить новый элемент</h5>
             <button type="button" className="btn-close" onClick={onClose}></button>
           </div>
-          <form onSubmit={handleSubmit}>
-            <div className="modal-body">
-              <div className="row g-3">
-                <div className="col-md-6">
-                  <label className="form-label">Имя хостера</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    value={item.hostName}
-                    onChange={(e) => handleChange('hostName', e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Назначение</label>
-                  <select
-                    className="form-select"
-                    value={item.purpose || ''}
-                    onChange={(e) => handleChange('purpose', e.target.value)}
-                    required
-                  >
-                    <option value="">Выберите назначение</option>
-                    <option value="relay">Relay VPS</option>
-                    <option value="bgp">BGP сервер</option>
-                    <option value="monitoring">Мониторинг</option>
-                    <option value="dns">DNS сервер</option>
-                    <option value="proxy">Прокси сервер</option>
-                    <option value="backup">Backup сервер</option>
-                    <option value="other">Другое</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Страна</label>
-                  <select
-                    className="form-select"
-                    value={item.country}
-                    onChange={(e) => handleChange('country', e.target.value)}
-                    required
-                  >
-                    <option value="">Выберите страну</option>
-                    <option value="RU">Россия</option>
-                    <option value="US">США</option>
-                    <option value="DE">Германия</option>
-                    <option value="NL">Нидерланды</option>
-                    <option value="SG">Сингапур</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Провайдер</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    value={item.provider}
-                    onChange={(e) => handleChange('provider', e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Ссылка для входа</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    value={item.loginUrl}
-                    onChange={(e) => handleChange('loginUrl', e.target.value)}
-                    placeholder="example.com"
-                  />
-                </div>
-                <div className="col-md-4">
-                  <label className="form-label">Ежемесячная стоимость</label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    className="form-control"
-                    value={item.monthlyCost}
-                    onChange={(e) => handleChange('monthlyCost', parseFloat(e.target.value) || 0)}
-                    required
-                  />
-                </div>
-                <div className="col-md-2">
-                  <label className="form-label">Валюта</label>
-                  <select
-                    className="form-select"
-                    value={item.monthlyCostCurrency || 'USD'}
-                    onChange={(e) => handleChange('monthlyCostCurrency', e.target.value)}
-                    required
-                  >
-                    <option value="USD">USD</option>
-                    <option value="EUR">EUR</option>
-                    <option value="RUB">RUB</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Следующий платеж</label>
-                  <input
-                    type="date"
-                    className="form-control"
-                    value={item.nextPaymentDate}
-                    onChange={(e) => handleChange('nextPaymentDate', e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Последний платеж</label>
-                  <input
-                    type="date"
-                    className="form-control"
-                    value={item.lastPaymentDate}
-                    onChange={(e) => handleChange('lastPaymentDate', e.target.value)}
-                  />
-                </div>
-                <div className="col-md-4">
-                  <label className="form-label">Сумма последнего платежа</label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    className="form-control"
-                    value={item.lastPaymentAmount}
-                    onChange={(e) => handleChange('lastPaymentAmount', parseFloat(e.target.value) || 0)}
-                  />
-                </div>
-                <div className="col-md-2">
-                  <label className="form-label">Валюта</label>
-                  <select
-                    className="form-select"
-                    value={item.lastPaymentCurrency || 'USD'}
-                    onChange={(e) => handleChange('lastPaymentCurrency', e.target.value)}
-                  >
-                    <option value="USD">USD</option>
-                    <option value="EUR">EUR</option>
-                    <option value="RUB">RUB</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Статус</label>
-                  <select
-                    className="form-select"
-                    value={item.status}
-                    onChange={(e) => handleChange('status', e.target.value)}
-                    required
-                  >
-                    <option value="active">Активен</option>
-                    <option value="inactive">Неактивен</option>
-                    <option value="suspended">Приостановлен</option>
-                  </select>
-                </div>
-                <div className="col-12">
-                  <label className="form-label">Заметки</label>
-                  <textarea
-                    className="form-control"
-                    rows="3"
-                    value={item.notes}
-                    onChange={(e) => handleChange('notes', e.target.value)}
-                  />
-                </div>
+          <div className="modal-body">
+            <div className="row g-3">
+              <div className="col-md-6">
+                <label className="form-label">Host Name *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.hostName}
+                  onChange={(e) => onItemChange({ ...item, hostName: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Purpose</label>
+                <select
+                  className="form-select"
+                  value={item.purpose}
+                  onChange={(e) => onItemChange({ ...item, purpose: e.target.value })}
+                >
+                  <option value="">Выберите назначение</option>
+                  <option value="relay">Relay VPS</option>
+                  <option value="bgp">BGP сервер</option>
+                  <option value="monitoring">Мониторинг</option>
+                  <option value="dns">DNS сервер</option>
+                  <option value="proxy">Прокси сервер</option>
+                  <option value="backup">Backup сервер</option>
+                  <option value="other">Другое</option>
+                </select>
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Country *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.country}
+                  onChange={(e) => onItemChange({ ...item, country: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Provider *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.provider}
+                  onChange={(e) => onItemChange({ ...item, provider: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Login URL</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.loginUrl}
+                  onChange={(e) => onItemChange({ ...item, loginUrl: e.target.value })}
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Monthly Cost</label>
+                <input
+                  type="number"
+                  className="form-control"
+                  value={item.monthlyCost}
+                  onChange={(e) => onItemChange({ ...item, monthlyCost: parseFloat(e.target.value) || 0 })}
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Next Payment Date</label>
+                <input
+                  type="date"
+                  className="form-control"
+                  value={item.nextPaymentDate}
+                  onChange={(e) => onItemChange({ ...item, nextPaymentDate: e.target.value })}
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Status</label>
+                <select
+                  className="form-select"
+                  value={item.status}
+                  onChange={(e) => onItemChange({ ...item, status: e.target.value })}
+                >
+                  <option value="active">Активен</option>
+                  <option value="inactive">Неактивен</option>
+                </select>
               </div>
             </div>
-            <div className="modal-footer">
-              <button type="button" className="btn btn-secondary" onClick={onClose}>
-                Отмена
-              </button>
-              <button type="submit" className="btn btn-primary">
-                <IconPlus size={16} className="me-1" />
-                Добавить
-              </button>
-            </div>
-          </form>
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" onClick={onClose}>
+              Отмена
+            </button>
+            <button type="button" className="btn btn-primary" onClick={onSubmit}>
+              Добавить
+            </button>
+          </div>
         </div>
       </div>
     </div>
   );
 }
 
-// Модальное окно редактирования
 function EditBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
   if (!show) return null;
 
-  const handleChange = (field, value) => {
-    onItemChange({ ...item, [field]: value });
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit();
-  };
-
   return (
-    <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+    <div className="modal show d-block" tabIndex="-1">
       <div className="modal-dialog modal-lg">
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title">Редактировать ноду</h5>
+            <h5 className="modal-title">Редактировать элемент</h5>
             <button type="button" className="btn-close" onClick={onClose}></button>
           </div>
-          <form onSubmit={handleSubmit}>
-            <div className="modal-body">
-              <div className="row g-3">
-                <div className="col-md-6">
-                  <label className="form-label">Имя хостера</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    value={item.hostName || ''}
-                    onChange={(e) => handleChange('hostName', e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Назначение</label>
-                  <select
-                    className="form-select"
-                    value={item.purpose || ''}
-                    onChange={(e) => handleChange('purpose', e.target.value)}
-                    required
-                  >
-                    <option value="">Выберите назначение</option>
-                    <option value="relay">Relay VPS</option>
-                    <option value="bgp">BGP сервер</option>
-                    <option value="monitoring">Мониторинг</option>
-                    <option value="dns">DNS сервер</option>
-                    <option value="proxy">Прокси сервер</option>
-                    <option value="backup">Backup сервер</option>
-                    <option value="other">Другое</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Страна</label>
-                  <select
-                    className="form-select"
-                    value={item.country || ''}
-                    onChange={(e) => handleChange('country', e.target.value)}
-                    required
-                  >
-                    <option value="">Выберите страну</option>
-                    <option value="RU">Россия</option>
-                    <option value="US">США</option>
-                    <option value="DE">Германия</option>
-                    <option value="NL">Нидерланды</option>
-                    <option value="SG">Сингапур</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Провайдер</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    value={item.provider || ''}
-                    onChange={(e) => handleChange('provider', e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Ссылка для входа</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    value={item.loginUrl || ''}
-                    onChange={(e) => handleChange('loginUrl', e.target.value)}
-                    placeholder="example.com"
-                  />
-                </div>
-                <div className="col-md-4">
-                  <label className="form-label">Ежемесячная стоимость</label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    className="form-control"
-                    value={item.monthlyCost || 0}
-                    onChange={(e) => handleChange('monthlyCost', parseFloat(e.target.value) || 0)}
-                    required
-                  />
-                </div>
-                <div className="col-md-2">
-                  <label className="form-label">Валюта</label>
-                  <select
-                    className="form-select"
-                    value={item.monthlyCostCurrency || 'USD'}
-                    onChange={(e) => handleChange('monthlyCostCurrency', e.target.value)}
-                    required
-                  >
-                    <option value="USD">USD</option>
-                    <option value="EUR">EUR</option>
-                    <option value="RUB">RUB</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Следующий платеж</label>
-                  <input
-                    type="date"
-                    className="form-control"
-                    value={item.nextPaymentDate || ''}
-                    onChange={(e) => handleChange('nextPaymentDate', e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Последний платеж</label>
-                  <input
-                    type="date"
-                    className="form-control"
-                    value={item.lastPaymentDate || ''}
-                    onChange={(e) => handleChange('lastPaymentDate', e.target.value)}
-                  />
-                </div>
-                <div className="col-md-4">
-                  <label className="form-label">Сумма последнего платежа</label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    className="form-control"
-                    value={item.lastPaymentAmount || 0}
-                    onChange={(e) => handleChange('lastPaymentAmount', parseFloat(e.target.value) || 0)}
-                  />
-                </div>
-                <div className="col-md-2">
-                  <label className="form-label">Валюта</label>
-                  <select
-                    className="form-select"
-                    value={item.lastPaymentCurrency || 'USD'}
-                    onChange={(e) => handleChange('lastPaymentCurrency', e.target.value)}
-                  >
-                    <option value="USD">USD</option>
-                    <option value="EUR">EUR</option>
-                    <option value="RUB">RUB</option>
-                  </select>
-                </div>
-                <div className="col-md-6">
-                  <label className="form-label">Статус</label>
-                  <select
-                    className="form-select"
-                    value={item.status || 'active'}
-                    onChange={(e) => handleChange('status', e.target.value)}
-                    required
-                  >
-                    <option value="active">Активен</option>
-                    <option value="inactive">Неактивен</option>
-                    <option value="suspended">Приостановлен</option>
-                  </select>
-                </div>
-                <div className="col-12">
-                  <label className="form-label">Заметки</label>
-                  <textarea
-                    className="form-control"
-                    rows="3"
-                    value={item.notes || ''}
-                    onChange={(e) => handleChange('notes', e.target.value)}
-                  />
-                </div>
+          <div className="modal-body">
+            <div className="row g-3">
+              <div className="col-md-6">
+                <label className="form-label">Host Name *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.hostName || ''}
+                  onChange={(e) => onItemChange({ ...item, hostName: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Purpose</label>
+                <select
+                  className="form-select"
+                  value={item.purpose || ''}
+                  onChange={(e) => onItemChange({ ...item, purpose: e.target.value })}
+                >
+                  <option value="">Выберите назначение</option>
+                  <option value="relay">Relay VPS</option>
+                  <option value="bgp">BGP сервер</option>
+                  <option value="monitoring">Мониторинг</option>
+                  <option value="dns">DNS сервер</option>
+                  <option value="proxy">Прокси сервер</option>
+                  <option value="backup">Backup сервер</option>
+                  <option value="other">Другое</option>
+                </select>
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Country *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.country || ''}
+                  onChange={(e) => onItemChange({ ...item, country: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Provider *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.provider || ''}
+                  onChange={(e) => onItemChange({ ...item, provider: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Login URL</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={item.loginUrl || ''}
+                  onChange={(e) => onItemChange({ ...item, loginUrl: e.target.value })}
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Monthly Cost</label>
+                <input
+                  type="number"
+                  className="form-control"
+                  value={item.monthlyCost || 0}
+                  onChange={(e) => onItemChange({ ...item, monthlyCost: parseFloat(e.target.value) || 0 })}
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Next Payment Date</label>
+                <input
+                  type="date"
+                  className="form-control"
+                  value={item.nextPaymentDate || ''}
+                  onChange={(e) => onItemChange({ ...item, nextPaymentDate: e.target.value })}
+                />
+              </div>
+              <div className="col-md-6">
+                <label className="form-label">Status</label>
+                <select
+                  className="form-select"
+                  value={item.status || 'active'}
+                  onChange={(e) => onItemChange({ ...item, status: e.target.value })}
+                >
+                  <option value="active">Активен</option>
+                  <option value="inactive">Неактивен</option>
+                </select>
               </div>
             </div>
-            <div className="modal-footer">
-              <button type="button" className="btn btn-secondary" onClick={onClose}>
-                Отмена
-              </button>
-              <button type="submit" className="btn btn-primary">
-                <IconCheck size={16} className="me-1" />
-                Сохранить
-              </button>
-            </div>
-          </form>
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" onClick={onClose}>
+              Отмена
+            </button>
+            <button type="button" className="btn btn-primary" onClick={onSubmit}>
+              Сохранить
+            </button>
+          </div>
         </div>
       </div>
     </div>
   );
 }
 
-// Модальное окно удаления
 function DeleteBillingModal({ show, item, onDelete, onClose }) {
   if (!show) return null;
 
   return (
-    <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+    <div className="modal show d-block" tabIndex="-1">
       <div className="modal-dialog">
         <div className="modal-content">
           <div className="modal-header">
@@ -1150,18 +1011,17 @@ function DeleteBillingModal({ show, item, onDelete, onClose }) {
             <button type="button" className="btn-close" onClick={onClose}></button>
           </div>
           <div className="modal-body">
-            <p>Вы уверены, что хотите удалить ноду <strong>{item?.hostName}</strong>?</p>
+            <p>Вы уверены, что хотите удалить элемент <strong>{item?.hostName}</strong>?</p>
             <p className="text-muted">Это действие нельзя отменить.</p>
           </div>
-                      <div className="modal-footer">
-              <button type="button" className="btn btn-secondary" onClick={onClose}>
-                Отмена
-              </button>
-              <button type="button" className="btn btn-danger" onClick={onDelete}>
-                <IconTrash size={16} className="me-1" />
-                Удалить
-              </button>
-            </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" onClick={onClose}>
+              Отмена
+            </button>
+            <button type="button" className="btn btn-danger" onClick={onDelete}>
+              Удалить
+            </button>
+          </div>
         </div>
       </div>
     </div>