refactor: migrate to eslint flat config and format codebase with prettier

- Remove legacy .eslintrc.cjs and .eslintignore
- Add eslint.config.js with flat config, security rules (no-eval, no-implied-eval, no-new-func, no-script-url)
- Add .prettierrc and .prettierignore
- Format entire codebase with prettier

src/pages/AdminWheel.tsx

@@ -1,45 +1,67 @@
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
-import { adminWheelApi, type WheelPrizeAdmin, type CreateWheelPrizeData } from '../api/wheel'
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { adminWheelApi, type WheelPrizeAdmin, type CreateWheelPrizeData } from '../api/wheel';
 
 // Icons
 const BackIcon = () => (
-  <svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg
+    className="h-5 w-5 text-dark-400"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
     <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
   </svg>
-)
+);
 
 const CogIcon = () => (
-  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+    />
   </svg>
-)
+);
 
 const GiftIcon = () => (
-  <svg className="w-5 h-5" 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 className="h-5 w-5" 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>
-)
+);
 
 const ChartIcon = () => (
-  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+    />
   </svg>
-)
+);
 
 const PlusIcon = () => (
-  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
   </svg>
-)
+);
 
 const TrashIcon = () => (
-  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
   </svg>
-)
+);
 
 const PRIZE_TYPE_KEYS = [
   { value: 'subscription_days', key: 'subscription_days', emoji: '📅' },
@@ -47,73 +69,73 @@ const PRIZE_TYPE_KEYS = [
   { value: 'traffic_gb', key: 'traffic_gb', emoji: '📊' },
   { value: 'promocode', key: 'promocode', emoji: '🎟️' },
   { value: 'nothing', key: 'nothing', emoji: '😔' },
-]
+];
 
-type Tab = 'settings' | 'prizes' | 'statistics'
+type Tab = 'settings' | 'prizes' | 'statistics';
 
 export default function AdminWheel() {
-  const { t } = useTranslation()
-  const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState<Tab>('settings')
-  const [editingPrize, setEditingPrize] = useState<WheelPrizeAdmin | null>(null)
-  const [isCreating, setIsCreating] = useState(false)
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState<Tab>('settings');
+  const [editingPrize, setEditingPrize] = useState<WheelPrizeAdmin | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
 
   // Fetch config
   const { data: config, isLoading } = useQuery({
     queryKey: ['admin-wheel-config'],
     queryFn: adminWheelApi.getConfig,
-  })
+  });
 
   // Fetch statistics
   const { data: stats } = useQuery({
     queryKey: ['admin-wheel-stats'],
     queryFn: () => adminWheelApi.getStatistics(),
     enabled: activeTab === 'statistics',
-  })
+  });
 
   // Update config mutation
   const updateConfigMutation = useMutation({
     mutationFn: adminWheelApi.updateConfig,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] })
+      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] });
     },
-  })
+  });
 
   // Prize mutations
   const createPrizeMutation = useMutation({
     mutationFn: adminWheelApi.createPrize,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] })
-      setIsCreating(false)
+      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] });
+      setIsCreating(false);
     },
-  })
+  });
 
   const updatePrizeMutation = useMutation({
     mutationFn: ({ id, data }: { id: number; data: Partial<WheelPrizeAdmin> }) =>
       adminWheelApi.updatePrize(id, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] })
-      setEditingPrize(null)
+      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] });
+      setEditingPrize(null);
     },
-  })
+  });
 
   const deletePrizeMutation = useMutation({
     mutationFn: adminWheelApi.deletePrize,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] })
+      queryClient.invalidateQueries({ queryKey: ['admin-wheel-config'] });
     },
-  })
+  });
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <div className="w-10 h-10 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
       </div>
-    )
+    );
   }
 
   if (!config) {
-    return <div className="text-center py-12 text-dark-400">{t('wheel.errors.loadFailed')}</div>
+    return <div className="py-12 text-center text-dark-400">{t('wheel.errors.loadFailed')}</div>;
   }
 
   return (
@@ -123,18 +145,18 @@ export default function AdminWheel() {
         <div className="flex items-center gap-3">
           <Link
             to="/admin"
-            className="w-10 h-10 flex items-center justify-center rounded-xl bg-dark-800 border border-dark-700 hover:border-dark-600 transition-colors"
+            className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
           >
             <BackIcon />
           </Link>
-          <h1 className="text-2xl sm:text-3xl font-bold text-dark-50">
-            {t('admin.wheel.title')}
-          </h1>
+          <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('admin.wheel.title')}</h1>
         </div>
         <div className="flex items-center gap-2">
-          <span className={`px-3 py-1 rounded-full text-sm ${
-            config.is_enabled ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-          }`}>
+          <span
+            className={`rounded-full px-3 py-1 text-sm ${
+              config.is_enabled ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
+            }`}
+          >
             {config.is_enabled ? t('admin.wheel.enabled') : t('admin.wheel.disabled')}
           </span>
         </div>
@@ -144,9 +166,9 @@ export default function AdminWheel() {
       <div className="flex gap-2 border-b border-dark-700 pb-2">
         <button
           onClick={() => setActiveTab('settings')}
-          className={`flex items-center gap-2 px-4 py-2 rounded-t-lg transition-colors ${
+          className={`flex items-center gap-2 rounded-t-lg px-4 py-2 transition-colors ${
             activeTab === 'settings'
-              ? 'bg-dark-800 text-accent-400 border-b-2 border-accent-500'
+              ? 'border-b-2 border-accent-500 bg-dark-800 text-accent-400'
               : 'text-dark-400 hover:text-dark-200'
           }`}
         >
@@ -155,9 +177,9 @@ export default function AdminWheel() {
         </button>
         <button
           onClick={() => setActiveTab('prizes')}
-          className={`flex items-center gap-2 px-4 py-2 rounded-t-lg transition-colors ${
+          className={`flex items-center gap-2 rounded-t-lg px-4 py-2 transition-colors ${
             activeTab === 'prizes'
-              ? 'bg-dark-800 text-accent-400 border-b-2 border-accent-500'
+              ? 'border-b-2 border-accent-500 bg-dark-800 text-accent-400'
               : 'text-dark-400 hover:text-dark-200'
           }`}
         >
@@ -166,9 +188,9 @@ export default function AdminWheel() {
         </button>
         <button
           onClick={() => setActiveTab('statistics')}
-          className={`flex items-center gap-2 px-4 py-2 rounded-t-lg transition-colors ${
+          className={`flex items-center gap-2 rounded-t-lg px-4 py-2 transition-colors ${
             activeTab === 'statistics'
-              ? 'bg-dark-800 text-accent-400 border-b-2 border-accent-500'
+              ? 'border-b-2 border-accent-500 bg-dark-800 text-accent-400'
               : 'text-dark-400 hover:text-dark-200'
           }`}
         >
@@ -179,37 +201,41 @@ export default function AdminWheel() {
 
       {/* Settings Tab */}
       {activeTab === 'settings' && (
-        <div className="card p-6 space-y-6">
+        <div className="card space-y-6 p-6">
           {/* Enable toggle */}
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="font-semibold text-dark-100">{t('admin.wheel.settings.enableWheel')}</h3>
+              <h3 className="font-semibold text-dark-100">
+                {t('admin.wheel.settings.enableWheel')}
+              </h3>
               <p className="text-sm text-dark-400">{t('admin.wheel.settings.allowSpins')}</p>
             </div>
-            <label className="relative inline-flex items-center cursor-pointer">
+            <label className="relative inline-flex cursor-pointer items-center">
               <input
                 type="checkbox"
                 checked={config.is_enabled}
                 onChange={(e) => updateConfigMutation.mutate({ is_enabled: e.target.checked })}
-                className="sr-only peer"
+                className="peer sr-only"
               />
-              <div className="w-11 h-6 bg-dark-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-500"></div>
+              <div className="peer h-6 w-11 rounded-full bg-dark-700 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-accent-500 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>
             </label>
           </div>
 
           <hr className="border-dark-700" />
 
           {/* Spin costs */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
+              <label className="mb-1 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.settings.costInStars')}
               </label>
               <div className="flex gap-2">
                 <input
                   type="number"
                   value={config.spin_cost_stars}
-                  onChange={(e) => updateConfigMutation.mutate({ spin_cost_stars: parseInt(e.target.value) || 1 })}
+                  onChange={(e) =>
+                    updateConfigMutation.mutate({ spin_cost_stars: parseInt(e.target.value) || 1 })
+                  }
                   min={1}
                   max={1000}
                   className="input flex-1"
@@ -218,7 +244,9 @@ export default function AdminWheel() {
                   <input
                     type="checkbox"
                     checked={config.spin_cost_stars_enabled}
-                    onChange={(e) => updateConfigMutation.mutate({ spin_cost_stars_enabled: e.target.checked })}
+                    onChange={(e) =>
+                      updateConfigMutation.mutate({ spin_cost_stars_enabled: e.target.checked })
+                    }
                     className="rounded border-dark-600"
                   />
                   <span className="text-sm text-dark-400">{t('admin.wheel.enabled')}</span>
@@ -227,14 +255,16 @@ export default function AdminWheel() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
+              <label className="mb-1 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.settings.costInDays')}
               </label>
               <div className="flex gap-2">
                 <input
                   type="number"
                   value={config.spin_cost_days}
-                  onChange={(e) => updateConfigMutation.mutate({ spin_cost_days: parseInt(e.target.value) || 1 })}
+                  onChange={(e) =>
+                    updateConfigMutation.mutate({ spin_cost_days: parseInt(e.target.value) || 1 })
+                  }
                   min={1}
                   max={30}
                   className="input flex-1"
@@ -243,7 +273,9 @@ export default function AdminWheel() {
                   <input
                     type="checkbox"
                     checked={config.spin_cost_days_enabled}
-                    onChange={(e) => updateConfigMutation.mutate({ spin_cost_days_enabled: e.target.checked })}
+                    onChange={(e) =>
+                      updateConfigMutation.mutate({ spin_cost_days_enabled: e.target.checked })
+                    }
                     className="rounded border-dark-600"
                   />
                   <span className="text-sm text-dark-400">{t('admin.wheel.enabled')}</span>
@@ -255,9 +287,9 @@ export default function AdminWheel() {
           <hr className="border-dark-700" />
 
           {/* RTP and limits */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
+              <label className="mb-1 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.settings.rtpPercent')}
               </label>
               <input
@@ -265,7 +297,9 @@ export default function AdminWheel() {
                 min={0}
                 max={100}
                 value={config.rtp_percent}
-                onChange={(e) => updateConfigMutation.mutate({ rtp_percent: parseInt(e.target.value) })}
+                onChange={(e) =>
+                  updateConfigMutation.mutate({ rtp_percent: parseInt(e.target.value) })
+                }
                 className="w-full"
               />
               <div className="flex justify-between text-sm text-dark-400">
@@ -276,13 +310,15 @@ export default function AdminWheel() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
+              <label className="mb-1 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.settings.dailyLimit')}
               </label>
               <input
                 type="number"
                 value={config.daily_spin_limit}
-                onChange={(e) => updateConfigMutation.mutate({ daily_spin_limit: parseInt(e.target.value) || 0 })}
+                onChange={(e) =>
+                  updateConfigMutation.mutate({ daily_spin_limit: parseInt(e.target.value) || 0 })
+                }
                 min={0}
                 max={100}
                 className="input w-full"
@@ -290,15 +326,19 @@ export default function AdminWheel() {
             </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
+              <label className="mb-1 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.settings.minSubDays')}
               </label>
               <input
                 type="number"
                 value={config.min_subscription_days_for_day_payment}
-                onChange={(e) => updateConfigMutation.mutate({ min_subscription_days_for_day_payment: parseInt(e.target.value) || 1 })}
+                onChange={(e) =>
+                  updateConfigMutation.mutate({
+                    min_subscription_days_for_day_payment: parseInt(e.target.value) || 1,
+                  })
+                }
                 min={1}
                 max={30}
                 className="input w-full"
@@ -306,7 +346,7 @@ export default function AdminWheel() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
+              <label className="mb-1 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.settings.promoPrefix')}
               </label>
               <input
@@ -337,13 +377,10 @@ export default function AdminWheel() {
           {/* Prize list */}
           <div className="space-y-3">
             {config.prizes.map((prize) => (
-              <div
-                key={prize.id}
-                className={`card p-4 ${!prize.is_active ? 'opacity-50' : ''}`}
-              >
+              <div key={prize.id} className={`card p-4 ${!prize.is_active ? 'opacity-50' : ''}`}>
                 <div className="flex items-center gap-4">
                   <div
-                    className="w-12 h-12 rounded-lg flex items-center justify-center text-2xl"
+                    className="flex h-12 w-12 items-center justify-center rounded-lg text-2xl"
                     style={{ backgroundColor: prize.color + '30' }}
                   >
                     {prize.emoji}
@@ -353,20 +390,18 @@ export default function AdminWheel() {
                     <div className="text-sm text-dark-400">
                       {t(`admin.wheel.prizes.types.${prize.prize_type}`)} •
                       {t('admin.wheel.prizes.fields.value')}: {prize.prize_value} •
-                      {t('admin.wheel.prizes.fields.worth')}: {(prize.prize_value_kopeks / 100).toFixed(2)}₽
+                      {t('admin.wheel.prizes.fields.worth')}:{' '}
+                      {(prize.prize_value_kopeks / 100).toFixed(2)}₽
                     </div>
                   </div>
                   <div className="flex items-center gap-2">
-                    <button
-                      onClick={() => setEditingPrize(prize)}
-                      className="btn-ghost text-sm"
-                    >
+                    <button onClick={() => setEditingPrize(prize)} className="btn-ghost text-sm">
                       {t('common.edit')}
                     </button>
                     <button
                       onClick={() => {
                         if (confirm(t('admin.wheel.prizes.deletePrize'))) {
-                          deletePrizeMutation.mutate(prize.id)
+                          deletePrizeMutation.mutate(prize.id);
                         }
                       }}
                       className="btn-ghost text-red-400"
@@ -380,7 +415,7 @@ export default function AdminWheel() {
           </div>
 
           {config.prizes.length === 0 && (
-            <div className="text-center py-12 text-dark-400">
+            <div className="py-12 text-center text-dark-400">
               {t('admin.wheel.prizes.noPrizes')}
             </div>
           )}
@@ -391,7 +426,7 @@ export default function AdminWheel() {
       {activeTab === 'statistics' && stats && (
         <div className="space-y-4">
           {/* Stats cards */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
             <div className="card p-4 text-center">
               <div className="text-3xl font-bold text-accent-400">{stats.total_spins}</div>
               <div className="text-sm text-dark-400">{t('admin.wheel.statistics.totalSpins')}</div>
@@ -409,13 +444,18 @@ export default function AdminWheel() {
               <div className="text-sm text-dark-400">{t('admin.wheel.statistics.payouts')}</div>
             </div>
             <div className="card p-4 text-center">
-              <div className={`text-3xl font-bold ${
-                stats.actual_rtp_percent <= stats.configured_rtp_percent ? 'text-green-400' : 'text-red-400'
-              }`}>
+              <div
+                className={`text-3xl font-bold ${
+                  stats.actual_rtp_percent <= stats.configured_rtp_percent
+                    ? 'text-green-400'
+                    : 'text-red-400'
+                }`}
+              >
                 {stats.actual_rtp_percent.toFixed(1)}%
               </div>
               <div className="text-sm text-dark-400">
-                {t('admin.wheel.statistics.actualRtp')} ({t('admin.wheel.statistics.targetRtp')}: {stats.configured_rtp_percent}%)
+                {t('admin.wheel.statistics.actualRtp')} ({t('admin.wheel.statistics.targetRtp')}:{' '}
+                {stats.configured_rtp_percent}%)
               </div>
             </div>
           </div>
@@ -423,12 +463,16 @@ export default function AdminWheel() {
           {/* Prize distribution */}
           {stats.prizes_distribution.length > 0 && (
             <div className="card p-4">
-              <h3 className="font-semibold text-dark-100 mb-3">{t('admin.wheel.statistics.prizeDistribution')}</h3>
+              <h3 className="mb-3 font-semibold text-dark-100">
+                {t('admin.wheel.statistics.prizeDistribution')}
+              </h3>
               <div className="space-y-2">
                 {stats.prizes_distribution.map((prize, i) => (
                   <div key={i} className="flex items-center justify-between">
                     <span className="text-dark-300">{prize.display_name}</span>
-                    <span className="text-dark-100">{prize.count} {t('admin.wheel.statistics.times')}</span>
+                    <span className="text-dark-100">
+                      {prize.count} {t('admin.wheel.statistics.times')}
+                    </span>
                   </div>
                 ))}
               </div>
@@ -438,13 +482,13 @@ export default function AdminWheel() {
           {/* Top wins */}
           {stats.top_wins.length > 0 && (
             <div className="card p-4">
-              <h3 className="font-semibold text-dark-100 mb-3">{t('admin.wheel.statistics.topWins')}</h3>
+              <h3 className="mb-3 font-semibold text-dark-100">
+                {t('admin.wheel.statistics.topWins')}
+              </h3>
               <div className="space-y-2">
                 {stats.top_wins.slice(0, 5).map((win, i) => (
                   <div key={i} className="flex items-center justify-between">
-                    <span className="text-dark-300">
-                      {win.username || `User #${win.user_id}`}
-                    </span>
+                    <span className="text-dark-300">{win.username || `User #${win.user_id}`}</span>
                     <span className="text-dark-100">
                       {win.prize_display_name} ({(win.prize_value_kopeks / 100).toFixed(0)}₽)
                     </span>
@@ -461,20 +505,20 @@ export default function AdminWheel() {
         <PrizeModal
           prize={editingPrize}
           onClose={() => {
-            setIsCreating(false)
-            setEditingPrize(null)
+            setIsCreating(false);
+            setEditingPrize(null);
           }}
           onSave={(data) => {
             if (editingPrize) {
-              updatePrizeMutation.mutate({ id: editingPrize.id, data })
+              updatePrizeMutation.mutate({ id: editingPrize.id, data });
             } else {
-              createPrizeMutation.mutate(data as CreateWheelPrizeData)
+              createPrizeMutation.mutate(data as CreateWheelPrizeData);
             }
           }}
         />
       )}
     </div>
-  )
+  );
 }
 
 // Prize Modal Component
@@ -483,11 +527,11 @@ function PrizeModal({
   onClose,
   onSave,
 }: {
-  prize: WheelPrizeAdmin | null
-  onClose: () => void
-  onSave: (data: Partial<WheelPrizeAdmin>) => void
+  prize: WheelPrizeAdmin | null;
+  onClose: () => void;
+  onSave: (data: Partial<WheelPrizeAdmin>) => void;
 }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const [formData, setFormData] = useState({
     prize_type: prize?.prize_type || 'balance_bonus',
     prize_value: prize?.prize_value || 0,
@@ -500,24 +544,26 @@ function PrizeModal({
     promo_balance_bonus_kopeks: prize?.promo_balance_bonus_kopeks || 0,
     promo_subscription_days: prize?.promo_subscription_days || 0,
     promo_traffic_gb: prize?.promo_traffic_gb || 0,
-  })
+  });
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    onSave(formData)
-  }
+    e.preventDefault();
+    onSave(formData);
+  };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
-      <div className="card p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <h2 className="text-xl font-bold text-dark-50 mb-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
+      <div className="card max-h-[90vh] w-full max-w-md overflow-y-auto p-6">
+        <h2 className="mb-4 text-xl font-bold text-dark-50">
           {prize ? t('admin.wheel.prizes.editPrize') : t('admin.wheel.prizes.addPrize')}
         </h2>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Prize type */}
           <div>
-            <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.wheel.prizes.fields.type')}</label>
+            <label className="mb-1 block text-sm font-medium text-dark-300">
+              {t('admin.wheel.prizes.fields.type')}
+            </label>
             <select
               value={formData.prize_type}
               onChange={(e) => setFormData({ ...formData, prize_type: e.target.value })}
@@ -533,7 +579,9 @@ function PrizeModal({
 
           {/* Display name */}
           <div>
-            <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.wheel.prizes.fields.displayName')}</label>
+            <label className="mb-1 block text-sm font-medium text-dark-300">
+              {t('admin.wheel.prizes.fields.displayName')}
+            </label>
             <input
               type="text"
               value={formData.display_name}
@@ -548,13 +596,21 @@ function PrizeModal({
           {/* Prize value */}
           {formData.prize_type !== 'nothing' && (
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">
-                {t('admin.wheel.prizes.fields.value')} ({formData.prize_type === 'balance_bonus' ? 'kopeks' : formData.prize_type === 'subscription_days' ? 'days' : 'GB'})
+              <label className="mb-1 block text-sm font-medium text-dark-300">
+                {t('admin.wheel.prizes.fields.value')} (
+                {formData.prize_type === 'balance_bonus'
+                  ? 'kopeks'
+                  : formData.prize_type === 'subscription_days'
+                    ? 'days'
+                    : 'GB'}
+                )
               </label>
               <input
                 type="number"
                 value={formData.prize_value}
-                onChange={(e) => setFormData({ ...formData, prize_value: parseInt(e.target.value) || 0 })}
+                onChange={(e) =>
+                  setFormData({ ...formData, prize_value: parseInt(e.target.value) || 0 })
+                }
                 min={0}
                 className="input w-full"
               />
@@ -563,17 +619,19 @@ function PrizeModal({
 
           {/* Prize value in kopeks (for RTP calculation) */}
           <div>
-            <label className="block text-sm font-medium text-dark-300 mb-1">
+            <label className="mb-1 block text-sm font-medium text-dark-300">
               {t('admin.wheel.prizes.fields.valueKopeks')}
             </label>
             <input
               type="number"
               value={formData.prize_value_kopeks}
-              onChange={(e) => setFormData({ ...formData, prize_value_kopeks: parseInt(e.target.value) || 0 })}
+              onChange={(e) =>
+                setFormData({ ...formData, prize_value_kopeks: parseInt(e.target.value) || 0 })
+              }
               min={0}
               className="input w-full"
             />
-            <p className="text-xs text-dark-500 mt-1">
+            <p className="mt-1 text-xs text-dark-500">
               = {(formData.prize_value_kopeks / 100).toFixed(2)} RUB
             </p>
           </div>
@@ -581,7 +639,9 @@ function PrizeModal({
           {/* Emoji and color */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.wheel.prizes.fields.emoji')}</label>
+              <label className="mb-1 block text-sm font-medium text-dark-300">
+                {t('admin.wheel.prizes.fields.emoji')}
+              </label>
               <input
                 type="text"
                 value={formData.emoji}
@@ -591,13 +651,15 @@ function PrizeModal({
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.wheel.prizes.fields.color')}</label>
+              <label className="mb-1 block text-sm font-medium text-dark-300">
+                {t('admin.wheel.prizes.fields.color')}
+              </label>
               <div className="flex gap-2">
                 <input
                   type="color"
                   value={formData.color}
                   onChange={(e) => setFormData({ ...formData, color: e.target.value })}
-                  className="w-12 h-10 rounded cursor-pointer"
+                  className="h-10 w-12 cursor-pointer rounded"
                 />
                 <input
                   type="text"
@@ -619,29 +681,45 @@ function PrizeModal({
               onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
               className="rounded border-dark-600"
             />
-            <label htmlFor="is_active" className="text-sm text-dark-300">{t('admin.wheel.prizes.fields.active')}</label>
+            <label htmlFor="is_active" className="text-sm text-dark-300">
+              {t('admin.wheel.prizes.fields.active')}
+            </label>
           </div>
 
           {/* Promocode settings */}
           {formData.prize_type === 'promocode' && (
-            <div className="p-3 bg-dark-800 rounded-lg space-y-3">
+            <div className="space-y-3 rounded-lg bg-dark-800 p-3">
               <h4 className="font-medium text-dark-200">{t('admin.wheel.prizes.promo.title')}</h4>
               <div>
-                <label className="block text-sm text-dark-400 mb-1">{t('admin.wheel.prizes.promo.balanceBonus')}</label>
+                <label className="mb-1 block text-sm text-dark-400">
+                  {t('admin.wheel.prizes.promo.balanceBonus')}
+                </label>
                 <input
                   type="number"
                   value={formData.promo_balance_bonus_kopeks}
-                  onChange={(e) => setFormData({ ...formData, promo_balance_bonus_kopeks: parseInt(e.target.value) || 0 })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      promo_balance_bonus_kopeks: parseInt(e.target.value) || 0,
+                    })
+                  }
                   min={0}
                   className="input w-full"
                 />
               </div>
               <div>
-                <label className="block text-sm text-dark-400 mb-1">{t('admin.wheel.prizes.promo.subscriptionDays')}</label>
+                <label className="mb-1 block text-sm text-dark-400">
+                  {t('admin.wheel.prizes.promo.subscriptionDays')}
+                </label>
                 <input
                   type="number"
                   value={formData.promo_subscription_days}
-                  onChange={(e) => setFormData({ ...formData, promo_subscription_days: parseInt(e.target.value) || 0 })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      promo_subscription_days: parseInt(e.target.value) || 0,
+                    })
+                  }
                   min={0}
                   className="input w-full"
                 />
@@ -661,5 +739,5 @@ function PrizeModal({
         </form>
       </div>
     </div>
-  )
+  );
 }