From 450ad1ea1f1a949108462b48eb9ae265873be658 Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Sun, 19 Jul 2026 02:31:52 +0300
Subject: [PATCH] Enhance user management and billing integration

- Updated the `UserSummaryDto` to include `BillingEnabled` and `BillingPaidUntil` properties, allowing for better tracking of user billing status.
- Refactored the `IdentityService` to populate the new billing fields when retrieving user summaries.
- Modified the dashboard and admin user management components to display billing information, including a link to the billing page and a badge for billing status.
- Added internationalization support for new billing-related labels in both English and Russian.
- Ensured frontend components reflect the updated user data structure, enhancing user experience with billing visibility.
---
 .../Common/Interfaces/IIdentityService.cs     |  4 ++-
 .../Identity/IdentityService.cs               |  8 +++--
 .../src/features/billing/PaidUntilBadge.tsx   | 32 +++++++++++++++++++
 frontend/src/routes/admin/users.tsx           |  9 ++++++
 frontend/src/routes/dashboard.tsx             | 11 ++++++-
 frontend/src/shared/api/types.ts              |  2 ++
 frontend/src/shared/lib/i18n.ts               | 10 ++++++
 7 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/features/billing/PaidUntilBadge.tsx

diff --git a/backend/src/PnvPanel.Application/Common/Interfaces/IIdentityService.cs b/backend/src/PnvPanel.Application/Common/Interfaces/IIdentityService.cs
index a571406..2c7c068 100644
--- a/backend/src/PnvPanel.Application/Common/Interfaces/IIdentityService.cs
+++ b/backend/src/PnvPanel.Application/Common/Interfaces/IIdentityService.cs
@@ -34,7 +34,9 @@ public sealed record UserSummaryDto(
     string Role,
     bool IsActivated,
     bool IsBlocked,
-    DateTimeOffset? ActivatedAt
+    DateTimeOffset? ActivatedAt,
+    bool BillingEnabled,
+    DateTimeOffset? BillingPaidUntil
 );
 
 public sealed record UserStatsDto(int Total, int Activated);
diff --git a/backend/src/PnvPanel.Infrastructure/Identity/IdentityService.cs b/backend/src/PnvPanel.Infrastructure/Identity/IdentityService.cs
index 3cec77e..abfbdfe 100644
--- a/backend/src/PnvPanel.Infrastructure/Identity/IdentityService.cs
+++ b/backend/src/PnvPanel.Infrastructure/Identity/IdentityService.cs
@@ -269,15 +269,17 @@ internal sealed class IdentityService(
         var items = new List<UserSummaryDto>(users.Count);
         foreach (var user in users)
         {
-            var roleName = await GetPrimaryRoleNameAsync(user);
+            var role = await GetPrimaryRoleAsync(user);
             items.Add(
                 new UserSummaryDto(
                     user.Id,
                     user.UserName!,
-                    roleName,
+                    role.Name!,
                     user.IsActivated,
                     user.IsBlocked,
-                    user.ActivatedAt
+                    user.ActivatedAt,
+                    role.BillingEnabled,
+                    user.BillingPaidUntil
                 )
             );
         }
diff --git a/frontend/src/features/billing/PaidUntilBadge.tsx b/frontend/src/features/billing/PaidUntilBadge.tsx
new file mode 100644
index 0000000..87a0a53
--- /dev/null
+++ b/frontend/src/features/billing/PaidUntilBadge.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next'
+import { Badge } from '@/shared/ui/badge'
+
+const RED_THRESHOLD_DAYS = 3
+const YELLOW_THRESHOLD_DAYS = 7
+
+/** Дней до paidUntil, округление вверх — «меньше суток» всё равно считается как 1 день, а не 0. */
+function daysRemaining(paidUntil: string): number {
+  const diffMs = new Date(paidUntil).getTime() - Date.now()
+  return Math.ceil(diffMs / (24 * 60 * 60 * 1000))
+}
+
+/** Цветовая индикация оплаченного периода: зелёный — обычный запас, жёлтый — ≤7 дней, красный —
+ * ≤3 дней или уже истекло. Общий компонент для дашборда пользователя и списка пользователей в админке. */
+export function PaidUntilBadge({ paidUntil }: { paidUntil: string | null }) {
+  const { t } = useTranslation()
+
+  if (!paidUntil) return <Badge variant="destructive">{t('billing.neverPaidShort')}</Badge>
+
+  const days = daysRemaining(paidUntil)
+  const variant = days <= RED_THRESHOLD_DAYS ? 'destructive' : days <= YELLOW_THRESHOLD_DAYS ? 'warning' : 'success'
+  const label =
+    days <= 0
+      ? t('billing.expiredShort')
+      : t('billing.daysRemaining', { count: days })
+
+  return (
+    <Badge variant={variant} title={new Date(paidUntil).toLocaleDateString()}>
+      {label}
+    </Badge>
+  )
+}
diff --git a/frontend/src/routes/admin/users.tsx b/frontend/src/routes/admin/users.tsx
index 9041dee..0cc02b7 100644
--- a/frontend/src/routes/admin/users.tsx
+++ b/frontend/src/routes/admin/users.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Input } from '@/shared/ui/input'
 import { Button } from '@/shared/ui/button'
 import { Badge } from '@/shared/ui/badge'
+import { PaidUntilBadge } from '@/features/billing/PaidUntilBadge'
 import { listUsers } from '@/features/admin/users/api'
 import { UserManageDialog } from '@/features/admin/users/UserManageDialog'
 import type { UserSummaryDto } from '@/shared/api/types'
@@ -56,6 +57,7 @@ function AdminUsersPage() {
                 <th className="py-2 font-medium">{t('admin.users.userName')}</th>
                 <th className="py-2 font-medium">{t('admin.users.role')}</th>
                 <th className="py-2 font-medium">{t('admin.users.statusLabel')}</th>
+                <th className="py-2 font-medium">{t('admin.users.billingLabel')}</th>
                 <th className="py-2" />
               </tr>
             </thead>
@@ -73,6 +75,13 @@ function AdminUsersPage() {
                           : t('admin.users.status.pending')}
                     </Badge>
                   </td>
+                  <td className="py-2">
+                    {user.billingEnabled ? (
+                      <PaidUntilBadge paidUntil={user.billingPaidUntil} />
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
                   <td className="py-2 text-right">
                     <Button size="sm" variant="outline" onClick={() => setManaging(user)}>
                       {t('admin.users.manage')}
diff --git a/frontend/src/routes/dashboard.tsx b/frontend/src/routes/dashboard.tsx
index 982932c..75b717a 100644
--- a/frontend/src/routes/dashboard.tsx
+++ b/frontend/src/routes/dashboard.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useRequireAuth } from '@/features/auth/guards'
@@ -6,6 +6,8 @@ import { ActivationGate } from '@/features/activation/ActivationGate'
 import { ConfigCard } from '@/features/configs/ConfigCard'
 import { CreateConfigDialog } from '@/features/configs/CreateConfigDialog'
 import { SubscriptionCard } from '@/features/configs/SubscriptionCard'
+import { PaidUntilBadge } from '@/features/billing/PaidUntilBadge'
+import { getMyBillingStatus } from '@/features/billing/api'
 import { getMyConfigs, listAvailableInbounds } from '@/features/configs/api'
 
 export const Route = createFileRoute('/dashboard')({ component: DashboardPage })
@@ -26,6 +28,7 @@ function ConfigsList() {
   const { t } = useTranslation()
   const { data, isLoading } = useQuery({ queryKey: ['my-configs'], queryFn: getMyConfigs })
   const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds })
+  const billingStatusQuery = useQuery({ queryKey: ['my-billing-status'], queryFn: getMyBillingStatus })
 
   return (
     <div className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-10">
@@ -39,6 +42,12 @@ function ConfigsList() {
                 : t('configs.quota', { used: data.configs.length, max: data.maxConfigs })}
             </p>
           )}
+          {billingStatusQuery.data?.billingEnabled && (
+            <Link to="/billing" className="mt-1 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
+              {t('billing.paidUntilLabel')}
+              <PaidUntilBadge paidUntil={billingStatusQuery.data.paidUntil} />
+            </Link>
+          )}
         </div>
         {inboundsQuery.data?.length === 0 ? (
           <p className="max-w-xs text-right text-sm text-muted-foreground">{t('configs.noInboundsNotice')}</p>
diff --git a/frontend/src/shared/api/types.ts b/frontend/src/shared/api/types.ts
index 1cb447d..c23c419 100644
--- a/frontend/src/shared/api/types.ts
+++ b/frontend/src/shared/api/types.ts
@@ -165,6 +165,8 @@ export type UserSummaryDto = {
   isActivated: boolean
   isBlocked: boolean
   activatedAt: string | null
+  billingEnabled: boolean
+  billingPaidUntil: string | null
 }
 
 export type RoleDto = {
diff --git a/frontend/src/shared/lib/i18n.ts b/frontend/src/shared/lib/i18n.ts
index 1844516..ec58697 100644
--- a/frontend/src/shared/lib/i18n.ts
+++ b/frontend/src/shared/lib/i18n.ts
@@ -107,7 +107,11 @@ const resources = {
         status: 'Статус оплаты',
         suspended: 'Приостановлено',
         paidUntil: 'Оплачено до {{date}}',
+        paidUntilLabel: 'Оплата:',
         neverPaid: 'Оплата ещё не производилась.',
+        neverPaidShort: 'Не оплачено',
+        expiredShort: 'Истекло',
+        daysRemaining: '{{count}} дн.',
         newRequest: 'Оформить оплату',
         period: 'Период',
         periods: {
@@ -246,6 +250,7 @@ const resources = {
           userName: 'Имя пользователя',
           role: 'Роль',
           statusLabel: 'Статус',
+          billingLabel: 'Оплачено до',
           manage: 'Управление',
           empty: 'Пользователи не найдены.',
           total: 'Всего: {{count}}',
@@ -616,7 +621,11 @@ const resources = {
         status: 'Payment status',
         suspended: 'Suspended',
         paidUntil: 'Paid until {{date}}',
+        paidUntilLabel: 'Payment:',
         neverPaid: 'No payment has been made yet.',
+        neverPaidShort: 'Not paid',
+        expiredShort: 'Expired',
+        daysRemaining: '{{count}}d',
         newRequest: 'Set up payment',
         period: 'Period',
         periods: {
@@ -755,6 +764,7 @@ const resources = {
           userName: 'Username',
           role: 'Role',
           statusLabel: 'Status',
+          billingLabel: 'Paid until',
           manage: 'Manage',
           empty: 'No users found.',
           total: 'Total: {{count}}',