etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #279 from BEDOLAGA-DEV/dev

Browse Source 
Dev
This commit is contained in:
Egor
2026-03-11 03:55:39 +03:00
committed by GitHub
parent bd4500ab52 753a33955c
commit 8b96008cb0
10 changed files with 610 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/adminUsers.ts
View File

@@ -351,6 +351,36 @@ export interface SyncToPanelRequest {
update_squads?: boolean;
}
export interface AdminUserGiftItem {
id: number;
token: string;
status: string;
tariff_name: string | null;
period_days: number;
device_limit: number;
amount_kopeks: number;
payment_method: string | null;
gift_recipient_type: string | null;
gift_recipient_value: string | null;
gift_message: string | null;
buyer_user_id: number | null;
buyer_username: string | null;
buyer_full_name: string | null;
receiver_user_id: number | null;
receiver_username: string | null;
receiver_full_name: string | null;
created_at: string | null;
paid_at: string | null;
delivered_at: string | null;
}
export interface AdminUserGiftsResponse {
sent: AdminUserGiftItem[];
received: AdminUserGiftItem[];
sent_total: number;
received_total: number;
}
// ============ API ============
export const adminUsersApi = {
@@ -614,4 +644,10 @@ export const adminUsersApi = {
const response = await apiClient.delete(`/cabinet/admin/users/${userId}/devices`);
return response.data;
},
// Get user gifts
getUserGifts: async (userId: number): Promise<AdminUserGiftsResponse> => {
const response = await apiClient.get(`/cabinet/admin/users/${userId}/gifts`);
return response.data;
},
};

3
src/api/gift.ts
View File

@@ -40,6 +40,9 @@ export interface GiftConfig {
payment_methods: GiftPaymentMethod[];
balance_kopeks: number;
currency_symbol: string;
promo_group_name: string | null;
active_discount_percent: number | null;
active_discount_expires_at: string | null;
}
export interface GiftPurchaseRequest {

172
src/components/layout/AppShell/AppShell.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { useEffect, useState } from 'react';
import { useLocation, Link } from 'react-router';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
@@ -269,31 +269,6 @@ export function AppShell({ children }: AppShellProps) {
haptic.impact('light');
};
// Desktop nav scroll fade indicators
const navRef = useRef<HTMLElement>(null);
const [navCanScrollLeft, setNavCanScrollLeft] = useState(false);
const [navCanScrollRight, setNavCanScrollRight] = useState(false);
const updateNavScroll = useCallback(() => {
const el = navRef.current;
if (!el) return;
setNavCanScrollLeft(el.scrollLeft > 2);
setNavCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 2);
}, []);
useEffect(() => {
const el = navRef.current;
if (!el) return;
updateNavScroll();
el.addEventListener('scroll', updateNavScroll, { passive: true });
const ro = new ResizeObserver(updateNavScroll);
ro.observe(el);
return () => {
el.removeEventListener('scroll', updateNavScroll);
ro.disconnect();
};
}, [updateNavScroll]);
// Calculate header height based on fullscreen mode (only on mobile Telegram)
// On iOS: contentSafeAreaInset.top includes status bar + dynamic island + Telegram header
// On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~48px)
@@ -342,89 +317,80 @@ export function AppShell({ children }: AppShellProps) {
</Link>
{/* Center Navigation */}
<div className="relative min-w-0">
{/* Left fade */}
<div
className={cn(
'pointer-events-none absolute bottom-0 left-0 top-0 z-10 w-6 bg-gradient-to-r from-dark-950/95 to-transparent transition-opacity duration-200',
navCanScrollLeft ? 'opacity-100' : 'opacity-0',
)}
/>
{/* Right fade */}
<div
className={cn(
'pointer-events-none absolute bottom-0 right-0 top-0 z-10 w-6 bg-gradient-to-l from-dark-950/95 to-transparent transition-opacity duration-200',
navCanScrollRight ? 'opacity-100' : 'opacity-0',
)}
/>
<nav ref={navRef} className="scrollbar-hide flex items-center gap-1 overflow-x-auto">
{desktopNavItems.map((item) => (
<nav className="flex min-w-0 items-center gap-1">
{desktopNavItems.map((item) => (
<Link
key={item.path}
to={item.path}
onClick={handleNavClick}
className={cn(
'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
isActive(item.path)
? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)}
>
<item.icon className="h-[18px] w-[18px] shrink-0" />
<span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{item.label}
</span>
</Link>
))}
{referralEnabled && (
<Link
to="/referral"
onClick={handleNavClick}
className={cn(
'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
isActive('/referral')
? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)}
>
<UsersIcon className="h-[18px] w-[18px] shrink-0" />
<span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{t('nav.referral')}
</span>
</Link>
)}
{giftEnabled && (
<Link
to="/gift"
onClick={handleNavClick}
className={cn(
'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
isActive('/gift')
? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)}
>
<GiftIcon className="h-[18px] w-[18px] shrink-0" />
<span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{t('nav.gift')}
</span>
</Link>
)}
{isAdmin && (
<>
<div className="mx-1 h-5 w-px shrink-0 bg-dark-700" />
<Link
key={item.path}
to={item.path}
to="/admin"
onClick={handleNavClick}
className={cn(
'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
isActive(item.path)
? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
location.pathname.startsWith('/admin')
? 'bg-warning-500/10 text-warning-400'
: 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400',
)}
>
<item.icon className="h-4 w-4" />
<span>{item.label}</span>
<ShieldIcon className="h-[18px] w-[18px] shrink-0" />
<span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{t('admin.nav.title')}
</span>
</Link>
))}
{referralEnabled && (
<Link
to="/referral"
onClick={handleNavClick}
className={cn(
'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
isActive('/referral')
? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)}
>
<UsersIcon className="h-4 w-4" />
<span>{t('nav.referral')}</span>
</Link>
)}
{giftEnabled && (
<Link
to="/gift"
onClick={handleNavClick}
className={cn(
'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
isActive('/gift')
? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)}
>
<GiftIcon className="h-4 w-4" />
<span>{t('nav.gift')}</span>
</Link>
)}
{isAdmin && (
<>
{/* Separator before admin */}
<div className="mx-2 h-5 w-px shrink-0 bg-dark-700" />
<Link
to="/admin"
onClick={handleNavClick}
className={cn(
'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
location.pathname.startsWith('/admin')
? 'bg-warning-500/10 text-warning-400'
: 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400',
)}
>
<ShieldIcon className="h-4 w-4" />
<span>{t('admin.nav.title')}</span>
</Link>
</>
)}
</nav>
</div>
</>
)}
</nav>
{/* Right side actions */}
<div className="flex items-center justify-end gap-2">

38
src/locales/en.json
View File

@@ -2662,7 +2662,8 @@
"subscription": "Subscription",
"balance": "Balance",
"sync": "Synchronization",
"tickets": "Tickets"
"tickets": "Tickets",
"gifts": "Gifts"
},
"noTickets": "No tickets from this user",
"ticketsCount": "tickets",
@@ -2786,6 +2787,41 @@
"notLinked": "Not linked",
"fromPanel": "From panel to bot",
"toPanel": "From bot to panel"
},
"gifts": {
"title": "User Gifts",
"sentTitle": "Sent Gifts",
"receivedTitle": "Received Gifts",
"noSent": "No gifts sent by this user",
"noReceived": "No gifts received by this user",
"noGifts": "No gifts",
"token": "Code",
"tariff": "Tariff",
"period": "Period",
"devices": "Devices",
"amount": "Amount",
"paymentMethod": "Payment method",
"recipient": "Recipient",
"sender": "Sender",
"message": "Message",
"createdAt": "Created",
"paidAt": "Paid",
"deliveredAt": "Activated",
"status": {
"pending": "Pending",
"paid": "Paid",
"delivered": "Delivered",
"pending_activation": "Pending activation",
"failed": "Failed",
"expired": "Expired"
},
"days": "d",
"codeOnly": "Code only",
"via": "via",
"balance": "balance",
"unknownUser": "Unknown",
"totalSent": "Total sent",
"totalReceived": "Total received"
}
}
},

38
src/locales/fa.json
View File

@@ -2300,7 +2300,8 @@
"subscription": "اشتراک",
"balance": "موجودی",
"sync": "همگام‌سازی",
"tickets": "تیکت‌ها"
"tickets": "تیکت‌ها",
"gifts": "هدایا"
},
"noTickets": "این کاربر تیکتی ندارد",
"ticketsCount": "تیکت",
@@ -2420,6 +2421,41 @@
"notLinked": "متصل نشده",
"fromPanel": "از پنل به ربات",
"toPanel": "از ربات به پنل"
},
"gifts": {
"title": "هدایای کاربر",
"sentTitle": "هدایای ارسال شده",
"receivedTitle": "هدایای دریافت شده",
"noSent": "این کاربر هدیه‌ای ارسال نکرده است",
"noReceived": "این کاربر هدیه‌ای دریافت نکرده است",
"noGifts": "بدون هدیه",
"token": "کد",
"tariff": "تعرفه",
"period": "دوره",
"devices": "دستگاه‌ها",
"amount": "مبلغ",
"paymentMethod": "روش پرداخت",
"recipient": "گیرنده",
"sender": "فرستنده",
"message": "پیام",
"createdAt": "ایجاد شده",
"paidAt": "پرداخت شده",
"deliveredAt": "فعال شده",
"status": {
"pending": "در انتظار",
"paid": "پرداخت شده",
"delivered": "تحویل داده شده",
"pending_activation": "در انتظار فعال‌سازی",
"failed": "ناموفق",
"expired": "منقضی شده"
},
"days": "روز",
"codeOnly": "فقط کد",
"via": "از طریق",
"balance": "موجودی",
"unknownUser": "ناشناس",
"totalSent": "کل ارسال شده",
"totalReceived": "کل دریافت شده"
}
}
},

38
src/locales/ru.json
View File

@@ -3184,7 +3184,8 @@
"subscription": "Подписка",
"balance": "Баланс",
"sync": "Синхронизация",
"tickets": "Тикеты"
"tickets": "Тикеты",
"gifts": "Подарки"
},
"noTickets": "У пользователя нет тикетов",
"ticketsCount": "тикетов",
@@ -3307,6 +3308,41 @@
"notLinked": "Не привязан",
"fromPanel": "Из панели в бота",
"toPanel": "Из бота в панель"
},
"gifts": {
"title": "Подарки пользователя",
"sentTitle": "Отправленные подарки",
"receivedTitle": "Полученные подарки",
"noSent": "Пользователь не отправлял подарков",
"noReceived": "Пользователь не получал подарков",
"noGifts": "Нет подарков",
"token": "Код",
"tariff": "Тариф",
"period": "Период",
"devices": "Устройств",
"amount": "Сумма",
"paymentMethod": "Способ оплаты",
"recipient": "Получатель",
"sender": "Отправитель",
"message": "Сообщение",
"createdAt": "Создан",
"paidAt": "Оплачен",
"deliveredAt": "Активирован",
"status": {
"pending": "Ожидание",
"paid": "Оплачен",
"delivered": "Доставлен",
"pending_activation": "Ожидает активации",
"failed": "Ошибка",
"expired": "Истёк"
},
"days": "дн.",
"codeOnly": "Только код",
"via": "через",
"balance": "баланс",
"unknownUser": "Неизвестный",
"totalSent": "Всего отправлено",
"totalReceived": "Всего получено"
}
}
},

38
src/locales/zh.json
View File

@@ -2299,7 +2299,8 @@
"subscription": "订阅",
"balance": "余额",
"sync": "同步",
"tickets": "工单"
"tickets": "工单",
"gifts": "礼物"
},
"noTickets": "该用户没有工单",
"ticketsCount": "个工单",
@@ -2419,6 +2420,41 @@
"notLinked": "未绑定",
"fromPanel": "从面板同步到机器人",
"toPanel": "从机器人同步到面板"
},
"gifts": {
"title": "用户礼物",
"sentTitle": "已发送的礼物",
"receivedTitle": "已收到的礼物",
"noSent": "该用户未发送过礼物",
"noReceived": "该用户未收到过礼物",
"noGifts": "没有礼物",
"token": "代码",
"tariff": "套餐",
"period": "期限",
"devices": "设备数",
"amount": "金额",
"paymentMethod": "支付方式",
"recipient": "收件人",
"sender": "发送人",
"message": "留言",
"createdAt": "创建时间",
"paidAt": "支付时间",
"deliveredAt": "激活时间",
"status": {
"pending": "待处理",
"paid": "已支付",
"delivered": "已送达",
"pending_activation": "待激活",
"failed": "失败",
"expired": "已过期"
},
"days": "天",
"codeOnly": "仅代码",
"via": "通过",
"balance": "余额",
"unknownUser": "未知",
"totalSent": "已发送总数",
"totalReceived": "已收到总数"
}
}
},

299
src/pages/AdminUserDetail.tsx
View File

@@ -13,6 +13,7 @@ import {
type UserNodeUsageResponse,
type PanelSyncStatusResponse,
type UpdateSubscriptionRequest,
type AdminUserGiftsResponse,
} from '../api/adminUsers';
import { adminApi, type AdminTicket, type AdminTicketDetail } from '../api/admin';
import { promocodesApi, type PromoGroup } from '../api/promocodes';
@@ -128,6 +129,156 @@ function StatusBadge({ status }: { status: string }) {
);
}
function GiftStatusBadge({ status }: { status: string }) {
const { t } = useTranslation();
const styles: Record<string, string> = {
pending: 'bg-warning-500/20 text-warning-400 border-warning-500/30',
paid: 'bg-accent-500/20 text-accent-400 border-accent-500/30',
delivered: 'bg-success-500/20 text-success-400 border-success-500/30',
pending_activation: 'bg-accent-500/20 text-accent-400 border-accent-500/30',
failed: 'bg-error-500/20 text-error-400 border-error-500/30',
expired: 'bg-dark-600 text-dark-400 border-dark-500',
};
const fallback = 'bg-dark-600 text-dark-400 border-dark-500';
const label = t(`admin.users.detail.gifts.status.${status}`, { defaultValue: '' }) || status;
return (
<span
className={`rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider ${styles[status] || fallback}`}
>
{label}
</span>
);
}
function GiftCard({
gift,
direction,
locale,
onNavigateToUser,
}: {
gift: import('../api/adminUsers').AdminUserGiftItem;
direction: 'sent' | 'received';
locale: string;
onNavigateToUser: (userId: number) => void;
}) {
const { t } = useTranslation();
const { formatWithCurrency } = useCurrency();
const isSent = direction === 'sent';
const otherPartyLabel = isSent
? t('admin.users.detail.gifts.recipient')
: t('admin.users.detail.gifts.sender');
const otherPartyName = isSent
? gift.receiver_username
? `@${gift.receiver_username}`
: gift.gift_recipient_value || t('admin.users.detail.gifts.codeOnly')
: gift.buyer_username
? `@${gift.buyer_username}`
: gift.buyer_full_name || t('admin.users.detail.gifts.unknownUser');
const otherPartyId = isSent ? gift.receiver_user_id : gift.buyer_user_id;
const dateOpts: Intl.DateTimeFormatOptions = {
day: '2-digit',
month: '2-digit',
year: '2-digit',
hour: '2-digit',
minute: '2-digit',
};
return (
<div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-4 transition-colors hover:bg-dark-800/70">
{/* Header */}
<div className="mb-3 flex items-start justify-between">
<div className="flex items-center gap-2">
<div
className={`flex h-8 w-8 items-center justify-center rounded-lg ${isSent ? 'bg-accent-500/15' : 'bg-success-500/15'}`}
>
<svg
className={`h-4 w-4 ${isSent ? 'text-accent-400' : 'text-success-400'}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
</div>
<div>
<div className="text-sm font-medium text-dark-100">{gift.tariff_name || '—'}</div>
<div className="text-xs text-dark-500">
{gift.period_days} {t('admin.users.detail.gifts.days')} · {gift.device_limit}{' '}
{t('admin.users.detail.gifts.devices')}
</div>
</div>
</div>
<GiftStatusBadge status={gift.status} />
</div>
{/* Details grid */}
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
<div>
<span className="text-dark-500">{otherPartyLabel}:</span>{' '}
<span className="text-dark-300">{otherPartyName}</span>
{otherPartyId && (
<button
onClick={() => onNavigateToUser(otherPartyId)}
className="ml-1 text-accent-400 hover:text-accent-300"
>
#{otherPartyId}
</button>
)}
</div>
<div>
<span className="text-dark-500">{t('admin.users.detail.gifts.amount')}:</span>{' '}
<span className="text-dark-300">{formatWithCurrency(gift.amount_kopeks / 100)}</span>
</div>
<div>
<span className="text-dark-500">{t('admin.users.detail.gifts.paymentMethod')}:</span>{' '}
<span className="text-dark-300">{gift.payment_method || '—'}</span>
</div>
<div>
<span className="text-dark-500">{t('admin.users.detail.gifts.createdAt')}:</span>{' '}
<span className="text-dark-300">
{gift.created_at ? new Date(gift.created_at).toLocaleString(locale, dateOpts) : '—'}
</span>
</div>
{gift.paid_at && (
<div>
<span className="text-dark-500">{t('admin.users.detail.gifts.paidAt')}:</span>{' '}
<span className="text-dark-300">
{new Date(gift.paid_at).toLocaleString(locale, dateOpts)}
</span>
</div>
)}
{gift.delivered_at && (
<div>
<span className="text-dark-500">{t('admin.users.detail.gifts.deliveredAt')}:</span>{' '}
<span className="text-success-400">
{new Date(gift.delivered_at).toLocaleString(locale, dateOpts)}
</span>
</div>
)}
</div>
{/* Gift message */}
{gift.gift_message && (
<div className="mt-3 rounded-lg bg-dark-900/50 p-2.5 text-xs italic text-dark-400">
&ldquo;{gift.gift_message}&rdquo;
</div>
)}
{/* Token */}
<div className="mt-2 font-mono text-[10px] text-dark-600">GIFT-{gift.token}</div>
</div>
);
}
// ============ Main Page ============
export default function AdminUserDetail() {
@@ -144,7 +295,7 @@ export default function AdminUserDetail() {
const [user, setUser] = useState<UserDetailResponse | null>(null);
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState<
'info' | 'subscription' | 'balance' | 'sync' | 'tickets'
'info' | 'subscription' | 'balance' | 'sync' | 'tickets' | 'gifts'
>('info');
const [syncStatus, setSyncStatus] = useState<PanelSyncStatusResponse | null>(null);
const [tariffs, setTariffs] = useState<UserAvailableTariff[]>([]);
@@ -208,6 +359,10 @@ export default function AdminUserDetail() {
const [deviceLimit, setDeviceLimit] = useState(0);
const [devicesLoading, setDevicesLoading] = useState(false);
// Gifts
const [giftsData, setGiftsData] = useState<AdminUserGiftsResponse | null>(null);
const [giftsLoading, setGiftsLoading] = useState(false);
const userId = id ? parseInt(id, 10) : null;
const loadUser = useCallback(async () => {
@@ -325,6 +480,19 @@ export default function AdminUserDetail() {
await Promise.all([loadPanelInfo(), loadNodeUsage(), loadDevices()]);
}, [loadPanelInfo, loadNodeUsage, loadDevices]);
const loadGifts = useCallback(async () => {
if (!userId) return;
try {
setGiftsLoading(true);
const data = await adminUsersApi.getUserGifts(userId);
setGiftsData(data);
} catch {
// ignore
} finally {
setGiftsLoading(false);
}
}, [userId]);
const loadPromoGroups = useCallback(async () => {
try {
const data = await promocodesApi.getPromoGroups({ limit: 100 });
@@ -394,6 +562,7 @@ export default function AdminUserDetail() {
loadSubscriptionData();
}
if (activeTab === 'tickets') loadTickets();
if (activeTab === 'gifts') loadGifts();
}, [
activeTab,
loadSyncStatus,
@@ -402,6 +571,7 @@ export default function AdminUserDetail() {
loadReferrals,
loadSubscriptionData,
loadPromoGroups,
loadGifts,
hasPermission,
]);
@@ -838,7 +1008,7 @@ export default function AdminUserDetail() {
className="scrollbar-hide -mx-4 mb-6 flex gap-2 overflow-x-auto px-4 py-1"
style={{ WebkitOverflowScrolling: 'touch' }}
>
{(['info', 'subscription', 'balance', 'sync', 'tickets'] as const)
{(['info', 'subscription', 'balance', 'sync', 'tickets', 'gifts'] as const)
.filter((tab) => tab !== 'sync' || hasPermission('users:sync'))
.map((tab) => (
<button
@@ -855,6 +1025,7 @@ export default function AdminUserDetail() {
{tab === 'balance' && t('admin.users.detail.tabs.balance')}
{tab === 'sync' && t('admin.users.detail.tabs.sync')}
{tab === 'tickets' && t('admin.users.detail.tabs.tickets')}
{tab === 'gifts' && t('admin.users.detail.tabs.gifts')}
</button>
))}
</div>
@@ -2357,6 +2528,130 @@ export default function AdminUserDetail() {
)}
</div>
)}
{/* Gifts Tab */}
{activeTab === 'gifts' && (
<div className="space-y-6">
{giftsLoading ? (
<div className="flex items-center justify-center py-12">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
</div>
) : !giftsData || (giftsData.sent.length === 0 && giftsData.received.length === 0) ? (
<div className="flex flex-col items-center justify-center rounded-xl bg-dark-800/50 py-16">
<svg
className="mb-3 h-12 w-12 text-dark-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
<p className="text-sm text-dark-500">{t('admin.users.detail.gifts.noGifts')}</p>
</div>
) : (
<>
{/* Summary counters */}
<div className="grid grid-cols-2 gap-3">
<div className="rounded-xl bg-dark-800/50 p-4">
<div className="mb-1 text-xs text-dark-500">
{t('admin.users.detail.gifts.totalSent')}
</div>
<div className="text-2xl font-bold text-accent-400">{giftsData.sent_total}</div>
</div>
<div className="rounded-xl bg-dark-800/50 p-4">
<div className="mb-1 text-xs text-dark-500">
{t('admin.users.detail.gifts.totalReceived')}
</div>
<div className="text-2xl font-bold text-success-400">
{giftsData.received_total}
</div>
</div>
</div>
{/* Sent Gifts */}
<div>
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-dark-200">
<svg
className="h-4 w-4 text-accent-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
/>
</svg>
{t('admin.users.detail.gifts.sentTitle')}
<span className="text-dark-500">({giftsData.sent_total})</span>
</h3>
{giftsData.sent.length === 0 ? (
<div className="rounded-xl bg-dark-800/30 py-6 text-center text-sm text-dark-500">
{t('admin.users.detail.gifts.noSent')}
</div>
) : (
<div className="space-y-2">
{giftsData.sent.map((gift) => (
<GiftCard
key={gift.id}
gift={gift}
direction="sent"
locale={locale}
onNavigateToUser={(id) => navigate(`/admin/users/${id}`)}
/>
))}
</div>
)}
</div>
{/* Received Gifts */}
<div>
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-dark-200">
<svg
className="h-4 w-4 text-success-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859"
/>
</svg>
{t('admin.users.detail.gifts.receivedTitle')}
<span className="text-dark-500">({giftsData.received_total})</span>
</h3>
{giftsData.received.length === 0 ? (
<div className="rounded-xl bg-dark-800/30 py-6 text-center text-sm text-dark-500">
{t('admin.users.detail.gifts.noReceived')}
</div>
) : (
<div className="space-y-2">
{giftsData.received.map((gift) => (
<GiftCard
key={gift.id}
gift={gift}
direction="received"
locale={locale}
onNavigateToUser={(id) => navigate(`/admin/users/${id}`)}
/>
))}
</div>
)}
</div>
</>
)}
</div>
)}
</div>
</div>
);

11
src/pages/Balance.tsx
View File

@@ -334,10 +334,15 @@ export default function Balance() {
animate="animate"
>
{transactions.items.map((tx) => {
const isPositive = tx.amount_rubles >= 0;
const isZero = tx.amount_rubles === 0;
const isPositive = tx.amount_rubles > 0;
const displayAmount = Math.abs(tx.amount_rubles);
const sign = isPositive ? '+' : '-';
const colorClass = isPositive ? 'text-success-400' : 'text-error-400';
const sign = isZero ? '' : isPositive ? '+' : '-';
const colorClass = isZero
? 'text-dark-400'
: isPositive
? 'text-success-400'
: 'text-error-400';
return (
<motion.div

49
src/pages/GiftSubscription.tsx
View File

@@ -695,6 +695,55 @@ function BuyTabContent({
</div>
)}
{/* Promo group banner */}
{config.promo_group_name && (
<div className="flex items-center gap-3 rounded-xl border border-success-500/30 bg-success-500/10 p-3">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-success-500/20">
<svg
className="h-4 w-4 text-success-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
</svg>
</div>
<div>
<div className="text-sm font-medium text-success-400">
{t('subscription.promoGroup.yourGroup', { name: config.promo_group_name })}
</div>
<div className="text-xs text-dark-400">
{t('subscription.promoGroup.personalDiscountsApplied')}
</div>
</div>
</div>
)}
{/* Active discount banner */}
{config.active_discount_percent != null && config.active_discount_percent > 0 && (
<div className="flex items-center gap-3 rounded-xl border border-orange-500/30 bg-orange-500/10 p-3">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-500/20">
<svg
className="h-4 w-4 text-orange-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
</svg>
</div>
<div className="text-sm font-medium text-orange-400">
{t('promo.discountApplied')} -{config.active_discount_percent}%
</div>
</div>
)}
{/* Period selection */}
{periodsForDisplay.length > 0 && (
<div>