FIX PR Problems

src/components/PaymentMethodIcon.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 interface PaymentMethodIconProps {
   method: string;
   className?: string;
@@ -7,6 +9,8 @@ export default function PaymentMethodIcon({
   method,
   className = 'h-8 w-8',
 }: PaymentMethodIconProps) {
+  const uid = useId();
+
   switch (method) {
     case 'telegram_stars':
       return (
@@ -171,16 +175,17 @@ export default function PaymentMethodIcon({
         </svg>
       );
 
-    case 'kassa_ai':
+    case 'kassa_ai': {
+      const kassaGradId = `${uid}-kassaAi`;
       return (
         <svg className={className} viewBox="0 0 40 40">
           <defs>
-            <linearGradient id="kassaAiGrad" x1="0" y1="0" x2="1" y2="1">
+            <linearGradient id={kassaGradId} x1="0" y1="0" x2="1" y2="1">
               <stop offset="0%" stopColor="#6366F1" />
               <stop offset="100%" stopColor="#8B5CF6" />
             </linearGradient>
           </defs>
-          <circle cx="20" cy="20" r="20" fill="url(#kassaAiGrad)" />
+          <circle cx="20" cy="20" r="20" fill={`url(#${kassaGradId})`} />
           <g fill="#fff" fontFamily="Arial,sans-serif" fontWeight="700">
             <text x="20" y="26" textAnchor="middle" fontSize="15">
               AI
@@ -188,17 +193,19 @@ export default function PaymentMethodIcon({
           </g>
         </svg>
       );
+    }
 
-    case 'riopay':
+    case 'riopay': {
+      const riopayGradId = `${uid}-riopay`;
       return (
         <svg className={className} viewBox="0 0 40 40">
           <defs>
-            <linearGradient id="riopayGrad" x1="0" y1="0" x2="1" y2="1">
+            <linearGradient id={riopayGradId} x1="0" y1="0" x2="1" y2="1">
               <stop offset="0%" stopColor="#10B981" />
               <stop offset="100%" stopColor="#059669" />
             </linearGradient>
           </defs>
-          <circle cx="20" cy="20" r="20" fill="url(#riopayGrad)" />
+          <circle cx="20" cy="20" r="20" fill={`url(#${riopayGradId})`} />
           <g fill="#fff" fontFamily="Arial,sans-serif" fontWeight="700">
             <text x="20" y="26" textAnchor="middle" fontSize="14">
               RP
@@ -206,6 +213,7 @@ export default function PaymentMethodIcon({
           </g>
         </svg>
       );
+    }
 
     default:
       return (

src/components/sales-stats/DepositsTab.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { SalesStatsParams } from '../../api/adminSalesStats';
 import { salesStatsApi } from '../../api/adminSalesStats';
+import { METHOD_LABELS } from '../../constants/paymentMethods';
 import { SALES_STATS } from '../../constants/salesStats';
 import { useCurrency } from '../../hooks/useCurrency';
 import { StatCard } from '../stats';
@@ -16,22 +17,6 @@ interface DepositsTabProps {
   params: SalesStatsParams;
 }
 
-const METHOD_LABELS: Record<string, string> = {
-  telegram_stars: 'Telegram Stars',
-  tribute: 'Tribute',
-  yookassa: 'YooKassa',
-  cryptobot: 'CryptoBot',
-  heleket: 'Heleket',
-  mulenpay: 'Mulenpay',
-  pal24: 'Pal24',
-  wata: 'Wata',
-  platega: 'Platega',
-  cloudpayments: 'CloudPayments',
-  freekassa: 'FreeKassa',
-  kassa_ai: 'Kassa AI',
-  riopay: 'RioPay',
-};
-
 export function DepositsTab({ params }: DepositsTabProps) {
   const { t } = useTranslation();
   const { formatWithCurrency } = useCurrency();

src/constants/paymentMethods.ts

@@ -0,0 +1,17 @@
+export const METHOD_LABELS: Record<string, string> = {
+  telegram_stars: 'Telegram Stars',
+  tribute: 'Tribute',
+  cryptobot: 'CryptoBot',
+  heleket: 'Heleket',
+  yookassa: 'YooKassa',
+  mulenpay: 'MulenPay',
+  pal24: 'PayPalych',
+  platega: 'Platega',
+  wata: 'WATA',
+  freekassa: 'Freekassa',
+  freekassa_sbp: 'Freekassa СБП',
+  freekassa_card: 'Freekassa Карта',
+  cloudpayments: 'CloudPayments',
+  kassa_ai: 'Kassa AI',
+  riopay: 'RioPay',
+};

src/pages/AdminPaymentMethodEdit.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
+import { METHOD_LABELS } from '../constants/paymentMethods';
 import type { PromoGroupSimple } from '../types';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
@@ -18,24 +19,6 @@ const BackIcon = () => (
   </svg>
 );
 
-const METHOD_LABELS: Record<string, string> = {
-  telegram_stars: 'Telegram Stars',
-  tribute: 'Tribute',
-  cryptobot: 'CryptoBot',
-  heleket: 'Heleket',
-  yookassa: 'YooKassa',
-  mulenpay: 'MulenPay',
-  pal24: 'PayPalych',
-  platega: 'Platega',
-  wata: 'WATA',
-  freekassa: 'Freekassa',
-  freekassa_sbp: 'Freekassa СБП',
-  freekassa_card: 'Freekassa Карта',
-  cloudpayments: 'CloudPayments',
-  kassa_ai: 'Kassa AI',
-  riopay: 'RioPay',
-};
-
 const CheckIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />