feat: Update BillingManager to replace 'nodeName' with 'purpose', add purpose formatting function, and enhance UI elements with consistent icon sizes
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m56s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m56s
This commit is contained in:
@@ -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",
|
||||
|
||||
+159
-127
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user