From 08a64b5be4ca9bf5e326fcef66a5c030e49872e2 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 21:28:58 +0700
Subject: [PATCH] refactor(BillingManager): add tab navigation for
 subscriptions and payments, enhancing user experience and data visibility

---
 frontend/src/BillingManager.jsx | 580 +++++++++++++++++---------------
 1 file changed, 306 insertions(+), 274 deletions(-)

diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index f386f82..2a9cbdf 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -54,6 +54,7 @@ function BillingManager() {
   const [filterStatus, setFilterStatus] = useState('');
   const [filterUrgency, setFilterUrgency] = useState('');
   const [viewMode, setViewMode] = useState('cards'); // 'cards' | 'table'
+  const [activeTab, setActiveTab] = useState('subscriptions'); // 'subscriptions' | 'payments'
   const pageSize = 15;
 
   // Модальные окна
@@ -298,6 +299,10 @@ function BillingManager() {
     return sum + convertToRUB(item.monthlyCost || 0, item.monthlyCostCurrency || 'USD');
   }, 0);
 
+  const totalPaymentsCount = billingData.reduce((sum, item) => {
+    return sum + ((item.payments && Array.isArray(item.payments) ? item.payments.length : 0));
+  }, 0);
+
   const urgentPayments = billingData.filter(item => {
     const nextPayment = new Date(item.nextPaymentDate);
     const now = new Date();
@@ -578,15 +583,39 @@ function BillingManager() {
         title="Биллинг"
         icon={<IconCreditCard size={24} />}
         actions={
-          <PageHeaderActions
-            loading={loading}
-            onRefresh={() => { fetchBillingData(); fetchServers(); }}
-            disableRefresh={loading}
-            onExport={exportData}
-            disableExport={loading}
-            onSave={handleSaveChanges}
-            disableSave={loading}
-          />
+          <div className="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
+            <div className="btn-group me-sm-2" role="group">
+              <button
+                className={`btn ${activeTab === 'subscriptions' ? 'btn-primary' : 'btn-outline-primary'}`}
+                onClick={() => setActiveTab('subscriptions')}
+              >
+                <IconServer size={16} className="me-1 d-none d-sm-inline" />
+                Подписки
+                <span className={`badge ms-1 ${activeTab === 'subscriptions' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
+                  {billingData.length}
+                </span>
+              </button>
+              <button
+                className={`btn ${activeTab === 'payments' ? 'btn-primary' : 'btn-outline-primary'}`}
+                onClick={() => setActiveTab('payments')}
+              >
+                <IconHistory size={16} className="me-1 d-none d-sm-inline" />
+                История платежей
+                <span className={`badge ms-1 ${activeTab === 'payments' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
+                  {totalPaymentsCount}
+                </span>
+              </button>
+            </div>
+            <PageHeaderActions
+              loading={loading}
+              onRefresh={() => { fetchBillingData(); fetchServers(); }}
+              disableRefresh={loading}
+              onExport={exportData}
+              disableExport={loading}
+              onSave={handleSaveChanges}
+              disableSave={loading}
+            />
+          </div>
         }
       />
 
@@ -656,279 +685,282 @@ function BillingManager() {
         </div>
       </div>
 
-      {/* Основная секция */}
-      <div className="card">
-        <div className="card-header">
-          <div className="d-flex align-items-center gap-3 flex-grow-1">
-            <h3 className="card-title mb-0">
-              Подписки
-              <span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
-            </h3>
-            
-            {/* Поиск */}
-            <div className="input-icon flex-grow-1" style={{ maxWidth: '280px' }}>
-              <span className="input-icon-addon">
-                <IconSearch size={16} />
-              </span>
-              <input
-                type="text"
-                className="form-control form-control-sm"
-                placeholder="Поиск..."
-                value={searchTerm}
-                onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
-              />
-            </div>
-
-            {/* Быстрые фильтры */}
-            <div className="d-flex gap-1">
-              <button 
-                className={`btn btn-sm ${filterUrgency === '' ? 'btn-primary' : 'btn-outline-secondary'}`}
-                onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
-              >
-                Все
-              </button>
-              <button 
-                className={`btn btn-sm ${filterUrgency === 'overdue' ? 'btn-red' : 'btn-outline-secondary'}`}
-                onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
-              >
-                Просрочено
-              </button>
-              <button 
-                className={`btn btn-sm ${filterUrgency === 'urgent' ? 'btn-yellow' : 'btn-outline-secondary'}`}
-                onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
-              >
-                Срочно
-              </button>
-            </div>
-
-            {/* Переключатель вида */}
-            <div className="btn-group btn-group-sm" role="group">
-              <button
-                className={`btn ${viewMode === 'cards' ? 'btn-primary' : 'btn-outline-secondary'}`}
-                onClick={() => setViewMode('cards')}
-                title="Карточки"
-              >
-                <IconLayoutGrid size={16} />
-              </button>
-              <button
-                className={`btn ${viewMode === 'table' ? 'btn-primary' : 'btn-outline-secondary'}`}
-                onClick={() => setViewMode('table')}
-                title="Таблица"
-              >
-                <IconList size={16} />
-              </button>
-            </div>
-          </div>
-          
-          <div className="card-actions">
-            <button className="btn btn-primary" onClick={handleAddItem}>
-              <IconPlus size={18} className="me-1" />
-              Добавить
-            </button>
-          </div>
-        </div>
-
-        {/* Контент: карточки или таблица */}
-        {paginatedData.length === 0 ? (
-          <div className="card-body text-center text-muted py-5">
-            <IconCreditCard size={48} className="mb-3 text-muted" />
-            <h3>{searchTerm || filterUrgency ? 'Ничего не найдено' : 'Нет подписок'}</h3>
-            <p className="text-muted">Добавьте первую подписку для отслеживания платежей</p>
-            <button className="btn btn-primary" onClick={handleAddItem}>
-              <IconPlus size={18} className="me-1" />
-              Добавить подписку
-            </button>
-          </div>
-        ) : viewMode === 'cards' ? (
-          /* Карточный вид */
-          <div className="card-body">
-            {paginatedData.map(item => {
-              const days = getDaysUntilPayment(item.nextPaymentDate);
-              const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
+      {/* Основная секция: Подписки */}
+      {activeTab === 'subscriptions' && (
+        <div className="card">
+          <div className="card-header">
+            <div className="d-flex align-items-center gap-3 flex-grow-1">
+              <h3 className="card-title mb-0">
+                Подписки
+                <span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
+              </h3>
               
-              return (
-                <BillingCard
-                  key={item.id}
-                  item={item}
-                  linkedServer={linkedServer}
-                  daysUntilPayment={days}
-                  onEdit={handleEditItem}
-                  onDelete={handleDeleteItem}
-                  onAddPayment={(item) => {
-                    setPaymentDraft({
-                      serverId: item.id,
-                      date: new Date().toISOString().slice(0,10),
-                      amount: item.monthlyCost || 0,
-                      currency: item.monthlyCostCurrency || 'USD',
-                      note: ''
-                    });
-                    setShowPaymentModal(true);
-                  }}
-                  formatCurrencyInRUB={formatCurrencyInRUB}
+              {/* Поиск */}
+              <div className="input-icon flex-grow-1" style={{ maxWidth: '280px' }}>
+                <span className="input-icon-addon">
+                  <IconSearch size={16} />
+                </span>
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  placeholder="Поиск..."
+                  value={searchTerm}
+                  onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
                 />
-              );
-            })}
+              </div>
+
+              {/* Быстрые фильтры */}
+              <div className="d-flex gap-1">
+                <button 
+                  className={`btn btn-sm ${filterUrgency === '' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
+                >
+                  Все
+                </button>
+                <button 
+                  className={`btn btn-sm ${filterUrgency === 'overdue' ? 'btn-red' : 'btn-outline-secondary'}`}
+                  onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
+                >
+                  Просрочено
+                </button>
+                <button 
+                  className={`btn btn-sm ${filterUrgency === 'urgent' ? 'btn-yellow' : 'btn-outline-secondary'}`}
+                  onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
+                >
+                  Срочно
+                </button>
+              </div>
+
+              {/* Переключатель вида */}
+              <div className="btn-group btn-group-sm" role="group">
+                <button
+                  className={`btn ${viewMode === 'cards' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  onClick={() => setViewMode('cards')}
+                  title="Карточки"
+                >
+                  <IconLayoutGrid size={16} />
+                </button>
+                <button
+                  className={`btn ${viewMode === 'table' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  onClick={() => setViewMode('table')}
+                  title="Таблица"
+                >
+                  <IconList size={16} />
+                </button>
+              </div>
+            </div>
+            
+            <div className="card-actions">
+              <button className="btn btn-primary" onClick={handleAddItem}>
+                <IconPlus size={18} className="me-1" />
+                Добавить
+              </button>
+            </div>
           </div>
-        ) : (
-          /* Табличный вид */
-          <div className="table-responsive">
-            <table className="table card-table table-vcenter mb-0">
-              <thead>
-                <tr>
-                  <th 
-                    className="cursor-pointer" 
-                    onClick={() => handleSort('hostName')}
-                    style={{ minWidth: '200px' }}
-                  >
-                    Сервис
-                    {sortField === 'hostName' && (
-                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
-                    )}
-                  </th>
-                  <th 
-                    className="cursor-pointer text-end" 
-                    onClick={() => handleSort('monthlyCost')}
-                    style={{ width: '140px' }}
-                  >
-                    Стоимость
-                    {sortField === 'monthlyCost' && (
-                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
-                    )}
-                  </th>
-                  <th 
-                    className="cursor-pointer text-center" 
-                    onClick={() => handleSort('nextPaymentDate')}
-                    style={{ width: '120px' }}
-                  >
-                    Платёж
-                    {sortField === 'nextPaymentDate' && (
-                      <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
-                    )}
-                  </th>
-                  <th className="text-center" style={{ width: '100px' }}>Срок</th>
-                  <th className="text-center" style={{ width: '80px' }}>Статус</th>
-                  <th style={{ width: '140px' }}></th>
-                </tr>
-              </thead>
-              <tbody>
-                {paginatedData.map(item => {
-                  const days = getDaysUntilPayment(item.nextPaymentDate);
-                  const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
-                  
-                  return (
-                    <tr key={item.id}>
-                      <td>
-                        <div className="d-flex align-items-center">
-                          <div>
-                            <div className="fw-semibold">
-                              {item.hostName}
-                              {item._external && (
-                                <span className="badge bg-yellow-lt text-yellow ms-2" title="Импортирован из серверов, требует заполнения">
-                                  не заполнен
-                                </span>
-                              )}
-                            </div>
-                            <div className="text-muted small d-flex align-items-center gap-2">
-                              <span>{item.provider}</span>
-                              {linkedServer && (
-                                <>
-                                  <span>•</span>
-                                  <span className="text-blue">{linkedServer.ip}</span>
-                                </>
-                              )}
-                              {item.loginUrl && (
-                                <a 
-                                  href={item.loginUrl.startsWith('http') ? item.loginUrl : `https://${item.loginUrl}`} 
-                                  target="_blank" 
-                                  rel="noopener noreferrer"
-                                  className="text-muted"
-                                  title="Открыть панель"
-                                >
-                                  <IconExternalLink size={12} />
-                                </a>
-                              )}
+
+          {/* Контент: карточки или таблица */}
+          {paginatedData.length === 0 ? (
+            <div className="card-body text-center text-muted py-5">
+              <IconCreditCard size={48} className="mb-3 text-muted" />
+              <h3>{searchTerm || filterUrgency ? 'Ничего не найдено' : 'Нет подписок'}</h3>
+              <p className="text-muted">Добавьте первую подписку для отслеживания платежей</p>
+              <button className="btn btn-primary" onClick={handleAddItem}>
+                <IconPlus size={18} className="me-1" />
+                Добавить подписку
+              </button>
+            </div>
+          ) : viewMode === 'cards' ? (
+            /* Карточный вид */
+            <div className="card-body">
+              {paginatedData.map(item => {
+                const days = getDaysUntilPayment(item.nextPaymentDate);
+                const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
+                
+                return (
+                  <BillingCard
+                    key={item.id}
+                    item={item}
+                    linkedServer={linkedServer}
+                    daysUntilPayment={days}
+                    onEdit={handleEditItem}
+                    onDelete={handleDeleteItem}
+                    onAddPayment={(item) => {
+                      setPaymentDraft({
+                        serverId: item.id,
+                        date: new Date().toISOString().slice(0,10),
+                        amount: item.monthlyCost || 0,
+                        currency: item.monthlyCostCurrency || 'USD',
+                        note: ''
+                      });
+                      setShowPaymentModal(true);
+                    }}
+                    formatCurrencyInRUB={formatCurrencyInRUB}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            /* Табличный вид */
+            <div className="table-responsive">
+              <table className="table card-table table-vcenter mb-0">
+                <thead>
+                  <tr>
+                    <th 
+                      className="cursor-pointer" 
+                      onClick={() => handleSort('hostName')}
+                      style={{ minWidth: '200px' }}
+                    >
+                      Сервис
+                      {sortField === 'hostName' && (
+                        <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                      )}
+                    </th>
+                    <th 
+                      className="cursor-pointer text-end" 
+                      onClick={() => handleSort('monthlyCost')}
+                      style={{ width: '140px' }}
+                    >
+                      Стоимость
+                      {sortField === 'monthlyCost' && (
+                        <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                      )}
+                    </th>
+                    <th 
+                      className="cursor-pointer text-center" 
+                      onClick={() => handleSort('nextPaymentDate')}
+                      style={{ width: '120px' }}
+                    >
+                      Платёж
+                      {sortField === 'nextPaymentDate' && (
+                        <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                      )}
+                    </th>
+                    <th className="text-center" style={{ width: '100px' }}>Срок</th>
+                    <th className="text-center" style={{ width: '80px' }}>Статус</th>
+                    <th style={{ width: '140px' }}></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {paginatedData.map(item => {
+                    const days = getDaysUntilPayment(item.nextPaymentDate);
+                    const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
+                    
+                    return (
+                      <tr key={item.id}>
+                        <td>
+                          <div className="d-flex align-items-center">
+                            <div>
+                              <div className="fw-semibold">
+                                {item.hostName}
+                                {item._external && (
+                                  <span className="badge bg-yellow-lt text-yellow ms-2" title="Импортирован из серверов, требует заполнения">
+                                    не заполнен
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-muted small d-flex align-items-center gap-2">
+                                <span>{item.provider}</span>
+                                {linkedServer && (
+                                  <>
+                                    <span>•</span>
+                                    <span className="text-blue">{linkedServer.ip}</span>
+                                  </>
+                                )}
+                                {item.loginUrl && (
+                                  <a 
+                                    href={item.loginUrl.startsWith('http') ? item.loginUrl : `https://${item.loginUrl}`} 
+                                    target="_blank" 
+                                    rel="noopener noreferrer"
+                                    className="text-muted"
+                                    title="Открыть панель"
+                                  >
+                                    <IconExternalLink size={12} />
+                                  </a>
+                                )}
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      </td>
-                      <td className="text-end">
-                        <div className="fw-semibold">
-                          {formatCurrency(item.monthlyCost, item.monthlyCostCurrency)}
-                        </div>
-                        {item.monthlyCostCurrency !== 'RUB' && (
-                          <div className="text-muted small">
-                            ≈ {formatCurrencyInRUB(item.monthlyCost, item.monthlyCostCurrency)}
+                        </td>
+                        <td className="text-end">
+                          <div className="fw-semibold">
+                            {formatCurrency(item.monthlyCost, item.monthlyCostCurrency)}
                           </div>
-                        )}
-                      </td>
-                      <td className="text-center">
-                        {formatDate(item.nextPaymentDate)}
-                      </td>
-                      <td className="text-center">
-                        <UrgencyBadge days={days} />
-                      </td>
-                      <td className="text-center">
-                        {item.status === 'active' ? (
-                          <span className="badge bg-green-lt text-green">Активен</span>
-                        ) : (
-                          <span className="badge bg-secondary-lt text-secondary">Неактивен</span>
-                        )}
-                      </td>
-                      <td>
-                        <div className="btn-list gap-1 justify-content-end flex-nowrap">
-                          <button
-                            className="btn btn-outline-success btn-sm"
-                            onClick={() => {
-                              setPaymentDraft({
-                                serverId: item.id,
-                                date: new Date().toISOString().slice(0,10),
-                                amount: item.monthlyCost || 0,
-                                currency: item.monthlyCostCurrency || 'USD',
-                                note: ''
-                              });
-                              setShowPaymentModal(true);
-                            }}
-                            title="Записать платёж"
-                          >
-                            <IconCreditCard size={14} className="me-1" />
-                            Оплата
-                          </button>
-                          <button
-                            className="btn btn-outline-secondary btn-sm"
-                            onClick={() => handleEditItem(item)}
-                            title="Редактировать"
-                          >
-                            <IconEdit size={14} />
-                          </button>
-                          <button
-                            className="btn btn-outline-danger btn-sm"
-                            onClick={() => handleDeleteItem(item)}
-                            title="Удалить"
-                          >
-                            <IconTrash size={14} />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-        
-        {totalPages > 1 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            totalItems={filteredData.length}
-            pageSize={pageSize}
-            onPageChange={setCurrentPage}
-          />
-        )}
-      </div>
+                          {item.monthlyCostCurrency !== 'RUB' && (
+                            <div className="text-muted small">
+                              ≈ {formatCurrencyInRUB(item.monthlyCost, item.monthlyCostCurrency)}
+                            </div>
+                          )}
+                        </td>
+                        <td className="text-center">
+                          {formatDate(item.nextPaymentDate)}
+                        </td>
+                        <td className="text-center">
+                          <UrgencyBadge days={days} />
+                        </td>
+                        <td className="text-center">
+                          {item.status === 'active' ? (
+                            <span className="badge bg-green-lt text-green">Активен</span>
+                          ) : (
+                            <span className="badge bg-secondary-lt text-secondary">Неактивен</span>
+                          )}
+                        </td>
+                        <td>
+                          <div className="btn-list gap-1 justify-content-end flex-nowrap">
+                            <button
+                              className="btn btn-outline-success btn-sm"
+                              onClick={() => {
+                                setPaymentDraft({
+                                  serverId: item.id,
+                                  date: new Date().toISOString().slice(0,10),
+                                  amount: item.monthlyCost || 0,
+                                  currency: item.monthlyCostCurrency || 'USD',
+                                  note: ''
+                                });
+                                setShowPaymentModal(true);
+                              }}
+                              title="Записать платёж"
+                            >
+                              <IconCreditCard size={14} className="me-1" />
+                              Оплата
+                            </button>
+                            <button
+                              className="btn btn-outline-secondary btn-sm"
+                              onClick={() => handleEditItem(item)}
+                              title="Редактировать"
+                            >
+                              <IconEdit size={14} />
+                            </button>
+                            <button
+                              className="btn btn-outline-danger btn-sm"
+                              onClick={() => handleDeleteItem(item)}
+                              title="Удалить"
+                            >
+                              <IconTrash size={14} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+          
+          {totalPages > 1 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              totalItems={filteredData.length}
+              pageSize={pageSize}
+              onPageChange={setCurrentPage}
+            />
+          )}
+        </div>
+      )}
 
       {/* История платежей — компактная версия */}
+      {activeTab === 'payments' && (
       <div className="card mt-4">
         <div className="card-header">
           <h3 className="card-title d-flex align-items-center gap-2">