From 13767d7b3f63e75c0c09dfb14f81c94ff1ee7a16 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Wed, 30 Jul 2025 04:47:17 +0700
Subject: [PATCH] feat: Update BillingManager to replace 'nodeName' with
 'purpose', add purpose formatting function, and enhance UI elements with
 consistent icon sizes

---
 example-servers-billing.json    |  10 +-
 frontend/src/BillingManager.jsx | 286 ++++++++++++++++++--------------
 2 files changed, 164 insertions(+), 132 deletions(-)

diff --git a/example-servers-billing.json b/example-servers-billing.json
index fa84e66..90887e2 100644
--- a/example-servers-billing.json
+++ b/example-servers-billing.json
@@ -2,7 +2,7 @@
   {
     "id": "1",
     "hostName": "VDSINA",
-    "nodeName": "VDSINA",
+    "purpose": "relay",
     "country": "RU",
     "provider": "VDSINA",
     "loginUrl": "cp.vdsina.com",
@@ -16,7 +16,7 @@
   {
     "id": "2",
     "hostName": "Macloud",
-    "nodeName": "Macloud",
+    "purpose": "bgp",
     "country": "RU",
     "provider": "Macloud",
     "loginUrl": "cp.macloud.ru",
@@ -30,7 +30,7 @@
   {
     "id": "3",
     "hostName": "Hosting VDS",
-    "nodeName": "Steal",
+    "purpose": "monitoring",
     "country": "RU",
     "provider": "Hosting VDS",
     "loginUrl": "my.hosting-vds.com/",
@@ -44,7 +44,7 @@
   {
     "id": "4",
     "hostName": "Waicore",
-    "nodeName": "Waicore",
+    "purpose": "dns",
     "country": "DE",
     "provider": "Waicore",
     "loginUrl": "my.waicore.com/billmgr",
@@ -58,7 +58,7 @@
   {
     "id": "5",
     "hostName": "IHOR",
-    "nodeName": "Ihore",
+    "purpose": "proxy",
     "country": "RU",
     "provider": "IHOR",
     "loginUrl": "billing.ihor-hosting.ru/billmgr",
diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index 43a9af2..9df2168 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -40,7 +40,7 @@ function BillingManager() {
   // Новый элемент для добавления
   const [newItem, setNewItem] = useState({
     hostName: '',
-    nodeName: '',
+    purpose: '',
     country: '',
     provider: '',
     loginUrl: '',
@@ -66,78 +66,78 @@ function BillingManager() {
       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": ""
-        }
-      ]);
+              setBillingData([
+          {
+            "id": "1",
+            "hostName": "VDSINA",
+            "purpose": "relay",
+            "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",
+            "purpose": "bgp",
+            "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",
+            "purpose": "monitoring",
+            "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",
+            "purpose": "dns",
+            "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",
+            "purpose": "proxy",
+            "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);
     }
@@ -281,6 +281,19 @@ function BillingManager() {
     }).format(amount);
   }
 
+  function formatPurpose(purpose) {
+    const purposeMap = {
+      'relay': 'Relay VPS',
+      'bgp': 'BGP сервер',
+      'monitoring': 'Мониторинг',
+      'dns': 'DNS сервер',
+      'proxy': 'Прокси сервер',
+      'backup': 'Backup сервер',
+      'other': 'Другое'
+    };
+    return purposeMap[purpose] || purpose || 'Не указано';
+  }
+
   return (
     <div>
       {/* Заголовок страницы */}
@@ -291,23 +304,23 @@ 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 className="icon" />
-                Обновить
-              </button>
-              <button 
-                className="btn btn-primary"
-                onClick={handleAddItem}
-              >
-                <IconPlus className="icon" />
-                Добавить
-              </button>
-            </div>
+                          <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>
         </div>
       </div>
@@ -414,7 +427,7 @@ function BillingManager() {
                   onClick={handleSaveChanges}
                   disabled={loading}
                 >
-                  <IconDatabase className="icon" />
+                  <IconDatabase size={16} />
                   Сохранить
                 </button>
               </div>
@@ -425,7 +438,7 @@ function BillingManager() {
                   <thead>
                     <tr>
                       <th>Имя хостера</th>
-                      <th>Нода</th>
+                      <th>Назначение</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -441,10 +454,10 @@ function BillingManager() {
                         </td>
                         <td>
                           <div className="d-flex align-items-center">
-                            <span className="avatar avatar-sm me-2">
-                              {countryToFlag(item.country)}
+                            <span className="badge bg-blue-lt text-blue me-2">
+                              {formatPurpose(item.purpose)}
                             </span>
-                            {item.nodeName}
+                            {formatPurpose(item.purpose)}
                           </div>
                         </td>
                       </tr>
@@ -480,7 +493,7 @@ function BillingManager() {
                     {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(', ');
+                      const servers = providerItems.map(item => formatPurpose(item.purpose)).join(', ');
                       
                       return (
                         <tr key={provider}>
@@ -533,7 +546,7 @@ function BillingManager() {
                   className="btn btn-outline-primary btn-sm"
                   onClick={handleAddItem}
                 >
-                  <IconPlus className="icon" />
+                  <IconPlus size={16} />
                 </button>
               </div>
             </div>
@@ -560,18 +573,18 @@ function BillingManager() {
                           <td>
                             <div className="btn-list">
                               <button 
-                                className="btn btn-icon btn-sm"
+                                className="btn btn-icon btn-sm btn-outline-primary"
                                 onClick={() => handleEditItem(item)}
                                 title="Редактировать"
                               >
-                                <IconEdit className="icon" />
+                                <IconEdit size={16} />
                               </button>
                               <button 
-                                className="btn btn-icon btn-sm"
+                                className="btn btn-icon btn-sm btn-outline-danger"
                                 onClick={() => handleDeleteItem(item)}
                                 title="Удалить"
                               >
-                                <IconTrash className="icon" />
+                                <IconTrash size={16} />
                               </button>
                             </div>
                           </td>
@@ -609,18 +622,18 @@ function BillingManager() {
                           <td>
                             <div className="btn-list">
                               <button 
-                                className="btn btn-icon btn-sm"
+                                className="btn btn-icon btn-sm btn-outline-primary"
                                 onClick={() => handleEditItem(item)}
                                 title="Редактировать"
                               >
-                                <IconEdit className="icon" />
+                                <IconEdit size={16} />
                               </button>
                               <button 
-                                className="btn btn-icon btn-sm"
+                                className="btn btn-icon btn-sm btn-outline-danger"
                                 onClick={() => handleDeleteItem(item)}
                                 title="Удалить"
                               >
-                                <IconTrash className="icon" />
+                                <IconTrash size={16} />
                               </button>
                             </div>
                           </td>
@@ -698,14 +711,22 @@ function AddBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
                   />
                 </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)}
+                  <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>
@@ -812,6 +833,7 @@ function AddBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
                 Отмена
               </button>
               <button type="submit" className="btn btn-primary">
+                <IconPlus size={16} className="me-1" />
                 Добавить
               </button>
             </div>
@@ -857,14 +879,22 @@ function EditBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
                   />
                 </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)}
+                  <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>
@@ -971,6 +1001,7 @@ function EditBillingModal({ show, item, onItemChange, onSubmit, onClose }) {
                 Отмена
               </button>
               <button type="submit" className="btn btn-primary">
+                <IconCheck size={16} className="me-1" />
                 Сохранить
               </button>
             </div>
@@ -997,14 +1028,15 @@ function DeleteBillingModal({ show, item, onDelete, onClose }) {
             <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 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>
       </div>
     </div>