diff --git a/backend/server.js b/backend/server.js
index 9861921..b42aef3 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -295,6 +295,75 @@ app.post('/api/servers', async (req, res) => {
     }
 });
 
+// --- Billing Routes ---
+
+// Get billing data from S3
+app.get('/api/billing', async (req, res) => {
+    const params = {
+        Bucket: BUCKET_NAME,
+        Key: 'servers-billing.json',
+    };
+
+    try {
+        const data = await s3.getObject(params).promise();
+        const fileContent = data.Body.toString('utf-8');
+        let billingData = [];
+        
+        try {
+            billingData = JSON.parse(fileContent);
+            // Ensure it's an array
+            if (!Array.isArray(billingData)) {
+                billingData = [];
+            }
+        } catch (parseError) {
+            console.error('Error parsing servers-billing.json:', parseError);
+            billingData = [];
+        }
+        
+        res.json(billingData);
+    } catch (error) {
+        if (error.code === 'NoSuchKey') {
+            res.json([]); // Return empty array if file does not exist
+        } else {
+            console.error(error);
+            res.status(500).send('Error reading from S3');
+        }
+    }
+});
+
+// Update billing data in S3
+app.post('/api/billing', async (req, res) => {
+    const { domains: billingData } = req.body; // Keep name 'domains' for consistency
+    
+    // Validate billing data structure
+    if (!Array.isArray(billingData)) {
+        return res.status(400).send('Billing data must be an array');
+    }
+    
+    // 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`);
+        }
+    }
+
+    const params = {
+        Bucket: BUCKET_NAME,
+        Key: 'servers-billing.json',
+        Body: JSON.stringify(billingData, null, 2), // Pretty print JSON
+        ContentType: 'application/json',
+    };
+
+    try {
+        await s3.putObject(params).promise();
+        res.send('File updated successfully');
+    } catch (error) {
+        console.error(error);
+        res.status(500).send('Error writing to S3');
+    }
+});
+
 // --- Filters Routes (JSON format) ---
 
 // Get filters from S3
diff --git a/example-servers-billing.json b/example-servers-billing.json
new file mode 100644
index 0000000..fa84e66
--- /dev/null
+++ b/example-servers-billing.json
@@ -0,0 +1,72 @@
+[
+  {
+    "id": "1",
+    "hostName": "VDSINA",
+    "nodeName": "VDSINA",
+    "country": "RU",
+    "provider": "VDSINA",
+    "loginUrl": "cp.vdsina.com",
+    "monthlyCost": 12.00,
+    "nextPaymentDate": "2026-04-25",
+    "lastPaymentDate": "2025-05-05",
+    "lastPaymentAmount": 12.00,
+    "status": "active",
+    "notes": ""
+  },
+  {
+    "id": "2",
+    "hostName": "Macloud",
+    "nodeName": "Macloud",
+    "country": "RU",
+    "provider": "Macloud",
+    "loginUrl": "cp.macloud.ru",
+    "monthlyCost": 7.00,
+    "nextPaymentDate": "2025-09-02",
+    "lastPaymentDate": "2025-02-03",
+    "lastPaymentAmount": 7.00,
+    "status": "active",
+    "notes": ""
+  },
+  {
+    "id": "3",
+    "hostName": "Hosting VDS",
+    "nodeName": "Steal",
+    "country": "RU",
+    "provider": "Hosting VDS",
+    "loginUrl": "my.hosting-vds.com/",
+    "monthlyCost": 11.95,
+    "nextPaymentDate": "2025-12-21",
+    "lastPaymentDate": "2025-06-13",
+    "lastPaymentAmount": 10.00,
+    "status": "active",
+    "notes": ""
+  },
+  {
+    "id": "4",
+    "hostName": "Waicore",
+    "nodeName": "Waicore",
+    "country": "DE",
+    "provider": "Waicore",
+    "loginUrl": "my.waicore.com/billmgr",
+    "monthlyCost": 9.60,
+    "nextPaymentDate": "2026-04-25",
+    "lastPaymentDate": "2025-04-25",
+    "lastPaymentAmount": 9.60,
+    "status": "active",
+    "notes": ""
+  },
+  {
+    "id": "5",
+    "hostName": "IHOR",
+    "nodeName": "Ihore",
+    "country": "RU",
+    "provider": "IHOR",
+    "loginUrl": "billing.ihor-hosting.ru/billmgr",
+    "monthlyCost": 10.00,
+    "nextPaymentDate": "2025-09-10",
+    "lastPaymentDate": "2025-06-25",
+    "lastPaymentAmount": 10.00,
+    "status": "active",
+    "notes": ""
+  }
+] 
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d523323..8051d89 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -27,6 +27,7 @@ import DomainsNewManager from './DomainsNewManager';
 import IPRangesManager from './IPRangesManager';
 import ASNsNewManager from './ASNsNewManager';
 import AutoUrlManager from './AutoUrlManager';
+import BillingManager from './BillingManager';
 import './App.css';
 import axios from 'axios';
 import {
@@ -60,6 +61,7 @@ function MainLayout() {
     { id: 'asns', title: 'AS', icon: IconNetwork, path: '/asns' },
     { id: 'auto-urls', title: 'Авто URL', icon: IconDownload, path: '/auto-urls' },
     { id: 'servers', title: 'Серверы', icon: IconServer, path: '/servers' },
+    { id: 'billing', title: 'Биллинг', icon: IconCreditCard, path: '/billing' },
     { id: 'filters', title: 'Фильтры', icon: IconFilter, path: '/filters' },
     { id: 'files', title: 'Файлы', icon: IconFileText, path: '/files' },
     { id: 'cloud', title: 'Облако', icon: IconCloud, path: '/cloud' },
@@ -108,6 +110,7 @@ function MainLayout() {
           <Route path="/asns" element={<ASNsNewManager />} />
           <Route path="/auto-urls" element={<AutoUrlManager />} />
           <Route path="/servers" element={<ServerManager />} />
+          <Route path="/billing" element={<BillingManager />} />
           <Route path="/filters" element={<FilterManager />} />
           <Route path="/" element={<Navigate to="/domains" replace />} />
         </Routes>
diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
new file mode 100644
index 0000000..f14b34f
--- /dev/null
+++ b/frontend/src/BillingManager.jsx
@@ -0,0 +1,1025 @@
+import { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import { 
+  IconPlus, 
+  IconSearch, 
+  IconEdit, 
+  IconTrash, 
+  IconCheck, 
+  IconX, 
+  IconDatabase,
+  IconRefresh,
+  IconDownload,
+  IconUpload,
+  IconAlertTriangle,
+  IconServer,
+  IconChevronDown,
+  IconLink,
+  IconCalendar,
+  IconCreditCard,
+  IconDollarSign,
+  IconBuilding,
+  IconFlag,
+  IconExternalLink,
+  IconEye,
+  IconSettings
+} from '@tabler/icons-react';
+
+const API_URL = '/api';
+
+function BillingManager() {
+  const [billingData, setBillingData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortField, setSortField] = useState('hostName');
+  const [sortOrder, setSortOrder] = useState('asc');
+  const [filterProvider, setFilterProvider] = useState('');
+  const [filterCountry, setFilterCountry] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const pageSize = 10;
+
+  // Модальные окна
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [editingItem, setEditingItem] = useState({});
+
+  // Новый элемент для добавления
+  const [newItem, setNewItem] = useState({
+    hostName: '',
+    nodeName: '',
+    country: '',
+    provider: '',
+    loginUrl: '',
+    monthlyCost: 0,
+    nextPaymentDate: '',
+    lastPaymentDate: '',
+    lastPaymentAmount: 0,
+    status: 'active',
+    notes: ''
+  });
+
+  useEffect(() => {
+    fetchBillingData();
+  }, []);
+
+  const fetchBillingData = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`${API_URL}/billing`);
+      setBillingData(response.data);
+      setError('');
+    } catch (err) {
+      console.error('Ошибка при загрузке данных биллинга:', err);
+      setError('Ошибка при загрузке данных');
+      // Загружаем тестовые данные если API недоступен
+      setBillingData([
+        {
+          "id": "1",
+          "hostName": "VDSINA",
+          "nodeName": "VDSINA",
+          "country": "RU",
+          "provider": "VDSINA",
+          "loginUrl": "cp.vdsina.com",
+          "monthlyCost": 12.00,
+          "nextPaymentDate": "2026-04-25",
+          "lastPaymentDate": "2025-05-05",
+          "lastPaymentAmount": 12.00,
+          "status": "active",
+          "notes": ""
+        },
+        {
+          "id": "2",
+          "hostName": "Macloud",
+          "nodeName": "Macloud",
+          "country": "RU",
+          "provider": "Macloud",
+          "loginUrl": "cp.macloud.ru",
+          "monthlyCost": 7.00,
+          "nextPaymentDate": "2025-09-02",
+          "lastPaymentDate": "2025-02-03",
+          "lastPaymentAmount": 7.00,
+          "status": "active",
+          "notes": ""
+        },
+        {
+          "id": "3",
+          "hostName": "Hosting VDS",
+          "nodeName": "Steal",
+          "country": "RU",
+          "provider": "Hosting VDS",
+          "loginUrl": "my.hosting-vds.com/",
+          "monthlyCost": 11.95,
+          "nextPaymentDate": "2025-12-21",
+          "lastPaymentDate": "2025-06-13",
+          "lastPaymentAmount": 10.00,
+          "status": "active",
+          "notes": ""
+        },
+        {
+          "id": "4",
+          "hostName": "Waicore",
+          "nodeName": "Waicore",
+          "country": "DE",
+          "provider": "Waicore",
+          "loginUrl": "my.waicore.com/billmgr",
+          "monthlyCost": 9.60,
+          "nextPaymentDate": "2026-04-25",
+          "lastPaymentDate": "2025-04-25",
+          "lastPaymentAmount": 9.60,
+          "status": "active",
+          "notes": ""
+        },
+        {
+          "id": "5",
+          "hostName": "IHOR",
+          "nodeName": "Ihore",
+          "country": "RU",
+          "provider": "IHOR",
+          "loginUrl": "billing.ihor-hosting.ru/billmgr",
+          "monthlyCost": 10.00,
+          "nextPaymentDate": "2025-09-10",
+          "lastPaymentDate": "2025-06-25",
+          "lastPaymentAmount": 10.00,
+          "status": "active",
+          "notes": ""
+        }
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSaveChanges = async () => {
+    setLoading(true);
+    try {
+      await axios.post(`${API_URL}/billing`, { domains: billingData });
+      setSuccess('Данные успешно сохранены');
+      setTimeout(() => setSuccess(''), 3000);
+    } catch (err) {
+      setError('Ошибка при сохранении данных');
+      setTimeout(() => setError(''), 3000);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddItem = () => {
+    setNewItem({
+      hostName: '',
+      nodeName: '',
+      country: '',
+      provider: '',
+      loginUrl: '',
+      monthlyCost: 0,
+      nextPaymentDate: '',
+      lastPaymentDate: '',
+      lastPaymentAmount: 0,
+      status: 'active',
+      notes: ''
+    });
+    setShowAddModal(true);
+  };
+
+  const handleEditItem = (item) => {
+    setEditingItem({ ...item });
+    setShowEditModal(true);
+  };
+
+  const handleDeleteItem = (item) => {
+    setSelectedItem(item);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDelete = () => {
+    if (selectedItem) {
+      setBillingData(prev => prev.filter(item => item.id !== selectedItem.id));
+      setShowDeleteModal(false);
+      setSelectedItem(null);
+    }
+  };
+
+  const handleAddSubmit = () => {
+    const newId = Math.max(...billingData.map(item => parseInt(item.id)), 0) + 1;
+    const itemToAdd = { ...newItem, id: newId.toString() };
+    setBillingData(prev => [...prev, itemToAdd]);
+    setShowAddModal(false);
+  };
+
+  const handleEditSubmit = () => {
+    setBillingData(prev => prev.map(item => 
+      item.id === editingItem.id ? editingItem : item
+    ));
+    setShowEditModal(false);
+  };
+
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortOrder('asc');
+    }
+  };
+
+  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());
+      
+      const matchesProvider = !filterProvider || item.provider === filterProvider;
+      const matchesCountry = !filterCountry || item.country === filterCountry;
+      const matchesStatus = !filterStatus || item.status === filterStatus;
+
+      return matchesSearch && matchesProvider && matchesCountry && matchesStatus;
+    })
+    .sort((a, b) => {
+      const aValue = a[sortField];
+      const bValue = b[sortField];
+      
+      if (sortOrder === 'asc') {
+        return aValue > bValue ? 1 : -1;
+      } else {
+        return aValue < bValue ? 1 : -1;
+      }
+    });
+
+  const paginatedData = filteredData.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
+  const totalPages = Math.ceil(filteredData.length / pageSize);
+
+  // Статистика
+  const totalMonthlyCost = billingData.reduce((sum, item) => sum + item.monthlyCost, 0);
+  const totalLastPayments = billingData.reduce((sum, item) => sum + item.lastPaymentAmount, 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))];
+
+  function countryToFlag(isoCode) {
+    const codePoints = isoCode
+      .toUpperCase()
+      .split('')
+      .map(char => 127397 + char.charCodeAt());
+    return String.fromCodePoint(...codePoints);
+  }
+
+  function formatDate(dateString) {
+    if (!dateString) return '—';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('ru-RU', { 
+      day: 'numeric', 
+      month: 'long', 
+      year: 'numeric' 
+    });
+  }
+
+  function formatCurrency(amount) {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount);
+  }
+
+  return (
+    <div>
+      {/* Заголовок страницы */}
+      <div className="page-header d-print-none mb-4">
+        <div className="row align-items-center">
+          <div className="col">
+            <h2 className="page-title">Инфра-биллинг</h2>
+            <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 className="icon" />
+                Обновить
+              </button>
+              <button 
+                className="btn btn-primary"
+                onClick={handleAddItem}
+              >
+                <IconPlus className="icon" />
+                Добавить
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Статистические карточки */}
+      <div className="row g-3 mb-4">
+        <div className="col-md-3">
+          <div className="card h-100">
+            <div className="card-body d-flex align-items-center">
+              <span className="avatar avatar-lg me-3 bg-blue-lt text-blue border-0">
+                <IconCalendar size={32} />
+              </span>
+              <div>
+                <div className="h3 mb-0 fw-bold">
+                  {new Date().toLocaleDateString('ru-RU', { 
+                    day: 'numeric', 
+                    month: 'long', 
+                    year: 'numeric' 
+                  })}
+                </div>
+                <div className="text-muted lh-1">Текущая дата</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-3">
+          <div className="card h-100">
+            <div className="card-body d-flex align-items-center">
+              <span className="avatar avatar-lg me-3 bg-orange-lt text-orange border-0">
+                <IconAlertTriangle size={32} />
+              </span>
+              <div>
+                <div className="h3 mb-0 fw-bold">
+                  {billingData.filter(item => {
+                    const nextPayment = new Date(item.nextPaymentDate);
+                    const now = new Date();
+                    const diffTime = nextPayment - now;
+                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                    return diffDays <= 30 && diffDays > 0;
+                  }).length}
+                </div>
+                <div className="text-muted lh-1">нод, ожидающих оплаты</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-3">
+          <div className="card h-100">
+            <div className="card-body d-flex align-items-center">
+              <span className="avatar avatar-lg me-3 bg-green-lt text-green border-0">
+                <IconCreditCard size={32} />
+              </span>
+              <div>
+                <div className="h3 mb-0 fw-bold">
+                  {formatCurrency(totalLastPayments)}
+                </div>
+                <div className="text-muted lh-1">всего платежей</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-3">
+          <div className="card h-100">
+            <div className="card-body d-flex align-items-center">
+              <span className="avatar avatar-lg me-3 bg-purple-lt text-purple border-0">
+                <IconDollarSign size={32} />
+              </span>
+              <div>
+                <div className="h3 mb-0 fw-bold">
+                  {formatCurrency(totalMonthlyCost)}
+                </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>
+      )}
+      {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}
+                >
+                  <IconDatabase className="icon" />
+                  Сохранить
+                </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="avatar avatar-sm me-2">
+                              {countryToFlag(item.country)}
+                            </span>
+                            {item.nodeName}
+                          </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) => sum + item.monthlyCost, 0);
+                      const servers = providerItems.map(item => item.nodeName).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>{formatCurrency(totalCost)}</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 className="icon" />
+                </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>{formatCurrency(item.lastPaymentAmount)}</td>
+                          <td>
+                            <div className="btn-list">
+                              <button 
+                                className="btn btn-icon btn-sm"
+                                onClick={() => handleEditItem(item)}
+                                title="Редактировать"
+                              >
+                                <IconEdit className="icon" />
+                              </button>
+                              <button 
+                                className="btn btn-icon btn-sm"
+                                onClick={() => handleDeleteItem(item)}
+                                title="Удалить"
+                              >
+                                <IconTrash className="icon" />
+                              </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"
+                                onClick={() => handleEditItem(item)}
+                                title="Редактировать"
+                              >
+                                <IconEdit className="icon" />
+                              </button>
+                              <button 
+                                className="btn btn-icon btn-sm"
+                                onClick={() => handleDeleteItem(item)}
+                                title="Удалить"
+                              >
+                                <IconTrash className="icon" />
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Модальное окно добавления */}
+      <AddBillingModal
+        show={showAddModal}
+        item={newItem}
+        onItemChange={setNewItem}
+        onSubmit={handleAddSubmit}
+        onClose={() => setShowAddModal(false)}
+      />
+
+      {/* Модальное окно редактирования */}
+      <EditBillingModal
+        show={showEditModal}
+        item={editingItem}
+        onItemChange={setEditingItem}
+        onSubmit={handleEditSubmit}
+        onClose={() => setShowEditModal(false)}
+      />
+
+      {/* Модальное окно удаления */}
+      <DeleteBillingModal
+        show={showDeleteModal}
+        item={selectedItem}
+        onDelete={confirmDelete}
+        onClose={() => setShowDeleteModal(false)}
+      />
+    </div>
+  );
+}
+
+// Модальное окно добавления
+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-dialog modal-lg">
+        <div className="modal-content">
+          <div className="modal-header">
+            <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>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={item.nodeName}
+                    onChange={(e) => handleChange('nodeName', e.target.value)}
+                    required
+                  />
+                </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-6">
+                  <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-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-6">
+                  <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-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>
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-secondary" onClick={onClose}>
+                Отмена
+              </button>
+              <button type="submit" className="btn btn-primary">
+                Добавить
+              </button>
+            </div>
+          </form>
+        </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-dialog modal-lg">
+        <div className="modal-content">
+          <div className="modal-header">
+            <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>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={item.nodeName || ''}
+                    onChange={(e) => handleChange('nodeName', e.target.value)}
+                    required
+                  />
+                </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-6">
+                  <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-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-6">
+                  <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-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>
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-secondary" onClick={onClose}>
+                Отмена
+              </button>
+              <button type="submit" className="btn btn-primary">
+                Сохранить
+              </button>
+            </div>
+          </form>
+        </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-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Подтверждение удаления</h5>
+            <button type="button" className="btn-close" onClick={onClose}></button>
+          </div>
+          <div className="modal-body">
+            <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}>
+              Удалить
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BillingManager; 
\ No newline at end of file