diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index f9fb7ae..b5510cd 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -1,5 +1,13 @@
 import { useState, useEffect, useRef } from 'react';
 import api from './lib/api.js';
+import axios from 'axios';
+import FormModal from './components/FormModal.jsx';
+import ConfirmModal from './components/ConfirmModal.jsx';
+import Pagination from './components/Pagination.jsx';
+import PageHeader from './components/PageHeader.jsx';
+import PageHeaderActions from './components/PageHeaderActions.jsx';
+import FormField from './components/FormField.jsx';
+import ErrorAlert from './components/ErrorAlert.jsx';
 import { 
   IconPlus, 
   IconEdit, 
@@ -21,8 +29,6 @@ import {
   IconHistory
 } from '@tabler/icons-react';
 
-const API_URL = '/api';
-
 function BillingManager() {
   const [billingData, setBillingData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -468,59 +474,51 @@ function BillingManager() {
   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-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>
+      <PageHeader
+        title="Инфра-биллинг"
+        pretitle="Панель управления / Ноды / Инфра-биллинг"
+        actions={
+          <PageHeaderActions
+            loading={loading}
+            onRefresh={fetchBillingData}
+            disableRefresh={loading}
+            onExport={exportData}
+            disableExport={loading}
+          />
+        }
+      />
+
+      {/* Дополнительные действия */}
+      <div className="mb-4 d-print-none">
+        <div className="btn-list">
+          <button 
+            className="btn btn-outline-secondary"
+            onClick={() => setShowFilters(!showFilters)}
+          >
+            <IconFilter size={16} className="me-1" />
+            Фильтры
+          </button>
+          <button 
+            className="btn btn-primary"
+            onClick={handleAddItem}
+          >
+            <IconPlus size={16} className="me-1" />
+            Добавить
+          </button>
         </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>
+        <ErrorAlert
+          message={error}
+          onClose={() => setError('')}
+          onRetry={fetchBillingData}
+          className="mb-4"
+        />
       )}
       {success && (
-        <div className="alert alert-success alert-dismissible" role="alert">
+        <div className="alert alert-success alert-dismissible mb-4" role="alert">
           <IconCheck className="me-2" />
           {success}
           <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
@@ -850,49 +848,14 @@ function BillingManager() {
               </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>
-              <ul className="pagination m-0">
-                <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
-                  <button className="page-link" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>Первая</button>
-                </li>
-                <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
-                  <button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>Назад</button>
-                </li>
-                {(() => {
-                  const pages = [];
-                  let start = Math.max(1, currentPage - 2);
-                  let end = Math.min(totalPages, currentPage + 2);
-                  if (currentPage <= 3) end = Math.min(totalPages, 5);
-                  if (currentPage >= totalPages - 2) start = Math.max(1, totalPages - 4);
-                  if (start > 1) pages.push('start-ellipsis');
-                  for (let p = start; p <= end; p++) pages.push(p);
-                  if (end < totalPages) pages.push('end-ellipsis');
-                  return pages.map((p) => (
-                    p === 'start-ellipsis' || p === 'end-ellipsis' ? (
-                      <li key={p} className="page-item disabled"><span className="page-link">…</span></li>
-                    ) : (
-                      <li key={p} className={`page-item${currentPage === p ? ' active' : ''}`}>
-                        <button className="page-link" onClick={() => setCurrentPage(p)}>{p}</button>
-                      </li>
-                    )
-                  ));
-                })()}
-                <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
-                  <button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages}>Вперед</button>
-                </li>
-                <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
-                  <button className="page-link" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>Последняя</button>
-                </li>
-              </ul>
-            </div>
-          )}
         </div>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalItems={filteredData.length}
+          pageSize={pageSize}
+          onPageChange={setCurrentPage}
+        />
       </div>
 
       {/* История платежей */}
@@ -1034,103 +997,135 @@ function BillingManager() {
       </div>
 
       {/* Модальные окна */}
-      <AddBillingModal
+      <FormModal
         show={showAddModal}
-        item={newItem}
-        onItemChange={setNewItem}
-        onSubmit={handleAddSubmit}
+        title="Добавить новый элемент"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleAddSubmit();
+        }}
         onClose={() => setShowAddModal(false)}
-      />
+        submitLabel="Добавить"
+        submitIcon={IconPlus}
+        size="lg"
+      >
+        <AddBillingForm
+          item={newItem}
+          onItemChange={setNewItem}
+        />
+      </FormModal>
 
-      <EditBillingModal
+      <FormModal
         show={showEditModal}
-        item={editingItem}
-        onItemChange={setEditingItem}
-        onSubmit={handleEditSubmit}
+        title="Редактировать элемент"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleEditSubmit();
+        }}
         onClose={() => setShowEditModal(false)}
-      />
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="lg"
+      >
+        <EditBillingForm
+          item={editingItem}
+          onItemChange={setEditingItem}
+        />
+      </FormModal>
 
-      <DeleteBillingModal
+      <ConfirmModal
         show={showDeleteModal}
-        item={selectedItem}
-        onDelete={confirmDelete}
-        onClose={() => setShowDeleteModal(false)}
-      />
-  {/* Модалка добавления платежа */}
-  {showPaymentModal && (
-    <AddPaymentModal
-      show={showPaymentModal}
-      servers={billingData}
-      payment={paymentDraft}
-      onChange={setPaymentDraft}
-      onClose={() => setShowPaymentModal(false)}
-      onSubmit={() => {
-        if (!paymentDraft.serverId || !paymentDraft.date || !paymentDraft.amount) {
-          setError('Заполните сервер, дату и сумму.');
-          setTimeout(() => setError(''), 3000);
-          return;
+        title="Подтверждение удаления"
+        message={
+          <>
+            <p>Вы уверены, что хотите удалить элемент <strong>{selectedItem?.hostName}</strong>?</p>
+            <p className="text-muted">Это действие нельзя отменить.</p>
+          </>
         }
-        // Режим редактирования платежа
-        if (editingPayment && editingPayment.serverId) {
-          setBillingData(prev => prev.map(s => {
-            if (s.id !== editingPayment.serverId) return s;
-            const payments = Array.isArray(s.payments) ? [...s.payments] : [];
-            if (editingPayment.index != null && payments[editingPayment.index]) {
-              payments[editingPayment.index] = {
-                date: paymentDraft.date,
-                amount: paymentDraft.amount,
-                currency: paymentDraft.currency || 'USD',
-                note: paymentDraft.note || ''
+        onConfirm={confirmDelete}
+        onClose={() => setShowDeleteModal(false)}
+        confirmLabel="Удалить"
+        variant="danger"
+      />
+      {/* Модалка добавления платежа */}
+      <FormModal
+        show={showPaymentModal}
+        title={editingPayment ? "Редактировать платеж" : "Добавить платеж"}
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!paymentDraft.serverId || !paymentDraft.date || !paymentDraft.amount) {
+            setError('Заполните сервер, дату и сумму.');
+            setTimeout(() => setError(''), 3000);
+            return;
+          }
+          // Режим редактирования платежа
+          if (editingPayment && editingPayment.serverId) {
+            setBillingData(prev => prev.map(s => {
+              if (s.id !== editingPayment.serverId) return s;
+              const payments = Array.isArray(s.payments) ? [...s.payments] : [];
+              if (editingPayment.index != null && payments[editingPayment.index]) {
+                payments[editingPayment.index] = {
+                  date: paymentDraft.date,
+                  amount: paymentDraft.amount,
+                  currency: paymentDraft.currency || 'USD',
+                  note: paymentDraft.note || ''
+                };
+              }
+              // обновляем lastPayment* по последней дате
+              const last = payments
+                .slice()
+                .sort((a,b) => new Date(b.date) - new Date(a.date))[0];
+              return {
+                ...s,
+                payments,
+                lastPaymentDate: last?.date || '',
+                lastPaymentAmount: last?.amount || 0,
+                lastPaymentCurrency: last?.currency || s.monthlyCostCurrency || 'USD'
               };
-            }
-            // обновляем lastPayment* по последней дате
+            }));
+            setEditingPayment(null);
+            setShowPaymentModal(false);
+            setSuccess('Платеж обновлен');
+            setTimeout(() => setSuccess(''), 3000);
+            return;
+          }
+          // Режим добавления платежа
+          setBillingData(prev => prev.map(s => {
+            if (s.id !== paymentDraft.serverId) return s;
+            const payments = Array.isArray(s.payments) ? [...s.payments] : [];
+            payments.push({ date: paymentDraft.date, amount: paymentDraft.amount, currency: paymentDraft.currency || 'USD', note: paymentDraft.note || '' });
             const last = payments
               .slice()
               .sort((a,b) => new Date(b.date) - new Date(a.date))[0];
-            return {
-              ...s,
-              payments,
-              lastPaymentDate: last?.date || '',
-              lastPaymentAmount: last?.amount || 0,
-              lastPaymentCurrency: last?.currency || s.monthlyCostCurrency || 'USD'
-            };
+            return { ...s, payments, lastPaymentDate: last?.date || '', lastPaymentAmount: last?.amount || 0, lastPaymentCurrency: last?.currency || s.monthlyCostCurrency || 'USD' };
           }));
-          setEditingPayment(null);
           setShowPaymentModal(false);
-          setSuccess('Платеж обновлен');
+          setSuccess('Платеж добавлен');
           setTimeout(() => setSuccess(''), 3000);
-          return;
-        }
-        // Режим добавления платежа
-        setBillingData(prev => prev.map(s => {
-          if (s.id !== paymentDraft.serverId) return s;
-          const payments = Array.isArray(s.payments) ? [...s.payments] : [];
-          payments.push({ date: paymentDraft.date, amount: paymentDraft.amount, currency: paymentDraft.currency || 'USD', note: paymentDraft.note || '' });
-          const last = payments
-            .slice()
-            .sort((a,b) => new Date(b.date) - new Date(a.date))[0];
-          return { ...s, payments, lastPaymentDate: last?.date || '', lastPaymentAmount: last?.amount || 0, lastPaymentCurrency: last?.currency || s.monthlyCostCurrency || 'USD' };
-        }));
-        setShowPaymentModal(false);
-        setSuccess('Платеж добавлен');
-        setTimeout(() => setSuccess(''), 3000);
-      }}
-    />
-  )}
+        }}
+        onClose={() => {
+          setShowPaymentModal(false);
+          setEditingPayment(null);
+        }}
+        submitLabel={editingPayment ? "Сохранить" : "Добавить"}
+        submitIcon={editingPayment ? IconCheck : IconPlus}
+      >
+        <AddPaymentForm
+          servers={billingData}
+          payment={paymentDraft}
+          onChange={setPaymentDraft}
+        />
+      </FormModal>
 
-  {/* Модалка удаления платежа */}
-  {showDeletePaymentModal && (
-    <div className="modal show d-block" tabIndex="-1" 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={() => setShowDeletePaymentModal(false)}></button>
-          </div>
-          <div className="modal-body">
+      {/* Модалка удаления платежа */}
+      <ConfirmModal
+        show={showDeletePaymentModal}
+        title="Удалить платеж"
+        message={
+          <>
             <p>Вы уверены, что хотите удалить выбранный платеж?</p>
             {paymentToDelete && (
-              <div className="alert alert-warning">
+              <div className="alert alert-warning mt-3">
                 <div><strong>Сервер:</strong> {paymentToDelete.data?.server?.hostName}</div>
                 <div><strong>Дата:</strong> {formatDate(paymentToDelete.data?.date)}</div>
                 <div><strong>Сумма:</strong> {formatCurrency(paymentToDelete.data?.amount, paymentToDelete.data?.currency)}</div>
@@ -1139,406 +1134,350 @@ function BillingManager() {
                 )}
               </div>
             )}
-          </div>
-          <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" onClick={() => setShowDeletePaymentModal(false)}>
-              Отмена
-            </button>
-            <button type="button" className="btn btn-danger" onClick={handleDeletePayment}>
-              Удалить
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )}
+          </>
+        }
+        onConfirm={handleDeletePayment}
+        onClose={() => setShowDeletePaymentModal(false)}
+        confirmLabel="Удалить"
+        variant="danger"
+      />
     </div>
   );
 }
 
-// Компоненты модальных окон
-function AddBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
-  if (!show) return null;
+// Компоненты форм для модальных окон
+function AddBillingForm({ item, onItemChange }) {
+  const purposeOptions = [
+    { value: '', label: 'Выберите назначение' },
+    { value: 'relay', label: 'Relay VPS' },
+    { value: 'bgp', label: 'BGP сервер' },
+    { value: 'monitoring', label: 'Мониторинг' },
+    { value: 'dns', label: 'DNS сервер' },
+    { value: 'proxy', label: 'Прокси сервер' },
+    { value: 'backup', label: 'Backup сервер' },
+    { value: 'other', label: 'Другое' }
+  ];
 
-  const modalTitle = 'Добавить новый элемент';
+  const statusOptions = [
+    { value: 'active', label: 'Активен' },
+    { value: 'inactive', label: 'Неактивен' }
+  ];
+
+  const currencyOptions = [
+    { value: 'USD', label: 'USD' },
+    { value: 'EUR', label: 'EUR' },
+    { value: 'RUB', label: 'RUB' }
+  ];
 
   return (
-    <div className="modal show d-block" tabIndex="-1" 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">{modalTitle}</h5>
-            <button type="button" className="btn-close" onClick={onClose}></button>
-          </div>
-          <div className="modal-body">
-            <div className="row g-3">
-              {/* Основная информация */}
-              <div className="col-12">
-                <h6 className="text-muted mb-3">Основная информация</h6>
-              </div>
-              <div className="col-md-6">
-                <label className="form-label">Имя хоста *</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">Назначение</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">Страна *</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">Провайдер *</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">Ссылка для входа</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={item.loginUrl}
-                  onChange={(e) => onItemChange({ ...item, loginUrl: e.target.value })}
-                  placeholder="example.com"
-                />
-              </div>
-              <div className="col-md-6">
-                <label className="form-label">Статус</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 className="row g-3">
+      {/* Основная информация */}
+      <div className="col-12">
+        <h6 className="text-muted mb-3">Основная информация</h6>
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Имя хоста"
+          name="hostName"
+          value={item.hostName}
+          onChange={(value) => onItemChange({ ...item, hostName: value })}
+          required
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Назначение"
+          name="purpose"
+          type="select"
+          value={item.purpose}
+          onChange={(value) => onItemChange({ ...item, purpose: value })}
+          options={purposeOptions}
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Страна"
+          name="country"
+          value={item.country}
+          onChange={(value) => onItemChange({ ...item, country: value })}
+          required
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Провайдер"
+          name="provider"
+          value={item.provider}
+          onChange={(value) => onItemChange({ ...item, provider: value })}
+          required
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Ссылка для входа"
+          name="loginUrl"
+          value={item.loginUrl}
+          onChange={(value) => onItemChange({ ...item, loginUrl: value })}
+          placeholder="example.com"
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Статус"
+          name="status"
+          type="select"
+          value={item.status}
+          onChange={(value) => onItemChange({ ...item, status: value })}
+          options={statusOptions}
+        />
+      </div>
 
-              {/* Текущие платежи */}
-              <div className="col-12">
-                <h6 className="text-muted mb-3 mt-4">Текущие платежи</h6>
-              </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) => onItemChange({ ...item, monthlyCost: parseFloat(e.target.value) || 0 })}
-                />
-              </div>
-              <div className="col-md-6">
-                <label className="form-label">Валюта месячной стоимости</label>
-                <select
-                  className="form-select"
-                  value={item.monthlyCostCurrency}
-                  onChange={(e) => onItemChange({ ...item, monthlyCostCurrency: 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>
-                <input
-                  type="date"
-                  className="form-control"
-                  value={item.nextPaymentDate}
-                  onChange={(e) => onItemChange({ ...item, nextPaymentDate: e.target.value })}
-                />
-              </div>
+      {/* Текущие платежи */}
+      <div className="col-12">
+        <h6 className="text-muted mb-3 mt-4">Текущие платежи</h6>
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Месячная стоимость"
+          name="monthlyCost"
+          type="number"
+          value={item.monthlyCost}
+          onChange={(value) => onItemChange({ ...item, monthlyCost: parseFloat(value) || 0 })}
+          step="0.01"
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Валюта месячной стоимости"
+          name="monthlyCostCurrency"
+          type="select"
+          value={item.monthlyCostCurrency}
+          onChange={(value) => onItemChange({ ...item, monthlyCostCurrency: value })}
+          options={currencyOptions}
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Дата следующего платежа"
+          name="nextPaymentDate"
+          type="date"
+          value={item.nextPaymentDate}
+          onChange={(value) => onItemChange({ ...item, nextPaymentDate: value })}
+        />
+      </div>
 
-              {/* Дополнительно */}
-              <div className="col-md-12">
-                <label className="form-label">Заметки</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={item.notes}
-                  onChange={(e) => onItemChange({ ...item, notes: e.target.value })}
-                  placeholder="Дополнительная информация"
-                />
-              </div>
-            </div>
-          </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 className="col-md-12">
+        <FormField
+          label="Заметки"
+          name="notes"
+          value={item.notes}
+          onChange={(value) => onItemChange({ ...item, notes: value })}
+          placeholder="Дополнительная информация"
+        />
       </div>
     </div>
   );
 }
 
-function EditBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
-  if (!show) return null;
+function EditBillingForm({ item, onItemChange }) {
+  const purposeOptions = [
+    { value: '', label: 'Выберите назначение' },
+    { value: 'relay', label: 'Relay VPS' },
+    { value: 'bgp', label: 'BGP сервер' },
+    { value: 'monitoring', label: 'Мониторинг' },
+    { value: 'dns', label: 'DNS сервер' },
+    { value: 'proxy', label: 'Прокси сервер' },
+    { value: 'backup', label: 'Backup сервер' },
+    { value: 'other', label: 'Другое' }
+  ];
+
+  const statusOptions = [
+    { value: 'active', label: 'Активен' },
+    { value: 'inactive', label: 'Неактивен' }
+  ];
+
+  const currencyOptions = [
+    { value: 'USD', label: 'USD' },
+    { value: 'EUR', label: 'EUR' },
+    { value: 'RUB', label: 'RUB' }
+  ];
 
   return (
-    <div className="modal show d-block" tabIndex="-1" 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>
-          <div className="modal-body">
-            <div className="row g-3">
-              {/* Основная информация */}
-              <div className="col-12">
-                <h6 className="text-muted mb-3">Основная информация</h6>
-              </div>
-              <div className="col-md-6">
-                <label className="form-label">Имя хоста *</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">Назначение</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">Страна *</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">Провайдер *</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">Ссылка для входа</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={item.loginUrl || ''}
-                  onChange={(e) => onItemChange({ ...item, loginUrl: e.target.value })}
-                  placeholder="example.com"
-                />
-              </div>
-              <div className="col-md-6">
-                <label className="form-label">Статус</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 className="row g-3">
+      {/* Основная информация */}
+      <div className="col-12">
+        <h6 className="text-muted mb-3">Основная информация</h6>
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Имя хоста"
+          name="hostName"
+          value={item.hostName || ''}
+          onChange={(value) => onItemChange({ ...item, hostName: value })}
+          required
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Назначение"
+          name="purpose"
+          type="select"
+          value={item.purpose || ''}
+          onChange={(value) => onItemChange({ ...item, purpose: value })}
+          options={purposeOptions}
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Страна"
+          name="country"
+          value={item.country || ''}
+          onChange={(value) => onItemChange({ ...item, country: value })}
+          required
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Провайдер"
+          name="provider"
+          value={item.provider || ''}
+          onChange={(value) => onItemChange({ ...item, provider: value })}
+          required
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Ссылка для входа"
+          name="loginUrl"
+          value={item.loginUrl || ''}
+          onChange={(value) => onItemChange({ ...item, loginUrl: value })}
+          placeholder="example.com"
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Статус"
+          name="status"
+          type="select"
+          value={item.status || 'active'}
+          onChange={(value) => onItemChange({ ...item, status: value })}
+          options={statusOptions}
+        />
+      </div>
 
-              {/* Текущие платежи */}
-              <div className="col-12">
-                <h6 className="text-muted mb-3 mt-4">Текущие платежи</h6>
-              </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) => onItemChange({ ...item, monthlyCost: parseFloat(e.target.value) || 0 })}
-                />
-              </div>
-              <div className="col-md-6">
-                <label className="form-label">Валюта месячной стоимости</label>
-                <select
-                  className="form-select"
-                  value={item.monthlyCostCurrency || 'USD'}
-                  onChange={(e) => onItemChange({ ...item, monthlyCostCurrency: 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>
-                <input
-                  type="date"
-                  className="form-control"
-                  value={item.nextPaymentDate || ''}
-                  onChange={(e) => onItemChange({ ...item, nextPaymentDate: e.target.value })}
-                />
-              </div>
+      {/* Текущие платежи */}
+      <div className="col-12">
+        <h6 className="text-muted mb-3 mt-4">Текущие платежи</h6>
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Месячная стоимость"
+          name="monthlyCost"
+          type="number"
+          value={item.monthlyCost || 0}
+          onChange={(value) => onItemChange({ ...item, monthlyCost: parseFloat(value) || 0 })}
+          step="0.01"
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Валюта месячной стоимости"
+          name="monthlyCostCurrency"
+          type="select"
+          value={item.monthlyCostCurrency || 'USD'}
+          onChange={(value) => onItemChange({ ...item, monthlyCostCurrency: value })}
+          options={currencyOptions}
+        />
+      </div>
+      <div className="col-md-6">
+        <FormField
+          label="Дата следующего платежа"
+          name="nextPaymentDate"
+          type="date"
+          value={item.nextPaymentDate || ''}
+          onChange={(value) => onItemChange({ ...item, nextPaymentDate: value })}
+        />
+      </div>
 
-              {/* Дополнительно */}
-              <div className="col-md-12">
-                <label className="form-label">Заметки</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={item.notes || ''}
-                  onChange={(e) => onItemChange({ ...item, notes: e.target.value })}
-                  placeholder="Дополнительная информация"
-                />
-              </div>
-            </div>
-          </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 className="col-md-12">
+        <FormField
+          label="Заметки"
+          name="notes"
+          value={item.notes || ''}
+          onChange={(value) => onItemChange({ ...item, notes: value })}
+          placeholder="Дополнительная информация"
+        />
       </div>
     </div>
   );
 }
 
-function DeleteBillingModal({ show, item, onDelete, onClose }) {
-  if (!show) return null;
+// Форма добавления платежа
+function AddPaymentForm({ servers, payment, onChange }) {
+  const serverOptions = [
+    { value: '', label: 'Выберите сервер' },
+    ...servers.map(s => ({ value: s.id, label: `${s.hostName} (${s.provider})` }))
+  ];
+
+  const currencyOptions = [
+    { value: 'USD', label: 'USD' },
+    { value: 'EUR', label: 'EUR' },
+    { value: 'RUB', label: 'RUB' }
+  ];
 
   return (
-    <div className="modal show d-block" tabIndex="-1" 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>
+    <>
+      <FormField
+        label="Сервер"
+        name="serverId"
+        type="select"
+        value={payment.serverId}
+        onChange={(value) => onChange({ ...payment, serverId: value })}
+        options={serverOptions}
+        required
+      />
+      <FormField
+        label="Дата"
+        name="date"
+        type="date"
+        value={payment.date}
+        onChange={(value) => onChange({ ...payment, date: value })}
+        required
+      />
+      <div className="row g-2">
+        <div className="col-8">
+          <FormField
+            label="Сумма"
+            name="amount"
+            type="number"
+            value={payment.amount}
+            onChange={(value) => onChange({ ...payment, amount: parseFloat(value) || 0 })}
+            step="0.01"
+            required
+          />
+        </div>
+        <div className="col-4">
+          <FormField
+            label="Валюта"
+            name="currency"
+            type="select"
+            value={payment.currency}
+            onChange={(value) => onChange({ ...payment, currency: value })}
+            options={currencyOptions}
+          />
         </div>
       </div>
-    </div>
+      <FormField
+        label="Комментарий"
+        name="note"
+        value={payment.note}
+        onChange={(value) => onChange({ ...payment, note: value })}
+        placeholder="Необязательно"
+      />
+    </>
   );
 }
 
-export default BillingManager; 
-
-// Модалка добавления платежа
-function AddPaymentModal({ show, servers, payment, onChange, onSubmit, onClose }) {
-  if (!show) return null;
-  const serverOptions = servers.map(s => ({ id: s.id, label: `${s.hostName} (${s.provider})` }));
-  return (
-    <div className="modal show d-block" tabIndex="-1" 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">
-            <div className="mb-3">
-              <label className="form-label">Сервер *</label>
-              <select className="form-select" value={payment.serverId} onChange={e => onChange({ ...payment, serverId: e.target.value })}>
-                <option value="">Выберите сервер</option>
-                {serverOptions.map(o => (
-                  <option key={o.id} value={o.id}>{o.label}</option>
-                ))}
-              </select>
-            </div>
-            <div className="mb-3">
-              <label className="form-label">Дата *</label>
-              <input type="date" className="form-control" value={payment.date} onChange={e => onChange({ ...payment, date: e.target.value })} />
-            </div>
-            <div className="row g-2">
-              <div className="col-8">
-                <label className="form-label">Сумма *</label>
-                <input type="number" step="0.01" className="form-control" value={payment.amount} onChange={e => onChange({ ...payment, amount: parseFloat(e.target.value) || 0 })} />
-              </div>
-              <div className="col-4">
-                <label className="form-label">Валюта</label>
-                <select className="form-select" value={payment.currency} onChange={e => onChange({ ...payment, currency: e.target.value })}>
-                  <option value="USD">USD</option>
-                  <option value="EUR">EUR</option>
-                  <option value="RUB">RUB</option>
-                </select>
-              </div>
-            </div>
-            <div className="mt-3">
-              <label className="form-label">Комментарий</label>
-              <input type="text" className="form-control" value={payment.note} onChange={e => onChange({ ...payment, note: e.target.value })} placeholder="Необязательно" />
-            </div>
-          </div>
-          <div className="modal-footer">
-            <button className="btn btn-secondary" onClick={onClose}>Отмена</button>
-            <button className="btn btn-primary" onClick={onSubmit}>Добавить</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+export default BillingManager;
\ No newline at end of file