fix(admin-wheel): unify statistics rendering + fill config UI gaps

Statistics tab now uses the shared StatCard + BreakdownList (ranked bars +
share %) and the currency-aware formatter — matching the rest of the admin
stats instead of ad-hoc 'card p-4 text-center' / text-3xl tiles — and gains
proper loading, error and empty states.

Also surface backend-supported config the form couldn't reach (forcing DB edits):
- promo_validity_days (model + schema-bounded 1-365) is now editable in Settings.
- per-prize manual_probability override (0-1) now has an input in the prize form.

src/pages/AdminWheel.tsx

@@ -40,8 +40,13 @@ import {
   StarIcon,
   TicketIcon,
   TrashIcon,
+  WalletIcon,
+  WheelIcon,
   XMarkIcon,
 } from '@/components/icons';
+import { StatCard } from '@/components/stats';
+import { BreakdownList } from '@/components/sales-stats/BreakdownList';
+import { useCurrency } from '@/hooks/useCurrency';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { toNumber } from '../utils/inputHelpers';
 
@@ -166,6 +171,7 @@ export default function AdminWheel() {
   const confirmDelete = useDestructiveConfirm();
   const { capabilities } = usePlatform();
   const notify = useNotify();
+  const { formatWithCurrency } = useCurrency();
 
   const [activeTab, setActiveTab] = useState<Tab>('settings');
   const [expandedPrizeId, setExpandedPrizeId] = useState<number | null>(null);
@@ -184,6 +190,7 @@ export default function AdminWheel() {
     daily_spin_limit: number | '';
     min_subscription_days_for_day_payment: number | '';
     promo_prefix: string;
+    promo_validity_days: number | '';
   } | null>(null);
 
   // Fetch config
@@ -193,7 +200,11 @@ export default function AdminWheel() {
   });
 
   // Fetch statistics
-  const { data: stats } = useQuery({
+  const {
+    data: stats,
+    isLoading: statsLoading,
+    error: statsError,
+  } = useQuery({
     queryKey: ['admin-wheel-stats'],
     queryFn: () => adminWheelApi.getStatistics(),
     enabled: activeTab === 'statistics',
@@ -214,6 +225,7 @@ export default function AdminWheel() {
           daily_spin_limit: config.daily_spin_limit,
           min_subscription_days_for_day_payment: config.min_subscription_days_for_day_payment,
           promo_prefix: config.promo_prefix,
+          promo_validity_days: config.promo_validity_days,
         };
       });
     }
@@ -232,7 +244,8 @@ export default function AdminWheel() {
       settingsForm.daily_spin_limit !== config.daily_spin_limit ||
       settingsForm.min_subscription_days_for_day_payment !==
         config.min_subscription_days_for_day_payment ||
-      settingsForm.promo_prefix !== config.promo_prefix);
+      settingsForm.promo_prefix !== config.promo_prefix ||
+      settingsForm.promo_validity_days !== config.promo_validity_days);
 
   // Update config mutation
   const updateConfigMutation = useMutation({
@@ -669,6 +682,26 @@ export default function AdminWheel() {
                   className="input w-full"
                 />
               </div>
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.wheel.settings.promoValidityDays')}
+                </label>
+                <input
+                  type="number"
+                  value={settingsForm?.promo_validity_days ?? config.promo_validity_days}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    setSettingsForm((prev) =>
+                      prev
+                        ? { ...prev, promo_validity_days: val === '' ? '' : parseInt(val) || 0 }
+                        : null,
+                    );
+                  }}
+                  min={1}
+                  max={365}
+                  className="input w-full"
+                />
+              </div>
             </div>
           </div>
 
@@ -702,6 +735,10 @@ export default function AdminWheel() {
                       settingsForm.min_subscription_days_for_day_payment,
                       config.min_subscription_days_for_day_payment,
                     ),
+                    promo_validity_days: toNumber(
+                      settingsForm.promo_validity_days,
+                      config.promo_validity_days,
+                    ),
                   });
                 }}
                 disabled={updateConfigMutation.isPending}
@@ -833,79 +870,82 @@ export default function AdminWheel() {
       )}
 
       {/* Statistics Tab */}
-      {activeTab === 'statistics' && stats && (
+      {activeTab === 'statistics' && statsLoading && (
+        <div className="flex justify-center py-12">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        </div>
+      )}
+
+      {activeTab === 'statistics' && !statsLoading && statsError && (
+        <div className="bento-card py-8 text-center text-error-400">
+          {t('admin.wheel.statistics.loadError')}
+        </div>
+      )}
+
+      {activeTab === 'statistics' &&
+        !statsLoading &&
+        !statsError &&
+        stats &&
+        stats.total_spins === 0 && (
+          <div className="bento-card py-12 text-center text-dark-400">
+            {t('admin.wheel.statistics.empty')}
+          </div>
+        )}
+
+      {activeTab === 'statistics' && stats && stats.total_spins > 0 && (
         <div className="space-y-4">
-          {/* Stats cards */}
-          <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>
-            </div>
-            <div className="card p-4 text-center">
-              <div className="text-3xl font-bold text-success-400">
-                {(stats.total_revenue_kopeks / 100).toFixed(0)}₽
-              </div>
-              <div className="text-sm text-dark-400">{t('admin.wheel.statistics.revenue')}</div>
-            </div>
-            <div className="card p-4 text-center">
-              <div className="text-3xl font-bold text-warning-400">
-                {(stats.total_payout_kopeks / 100).toFixed(0)}₽
-              </div>
-              <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-success-400'
-                    : 'text-error-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}%)
-              </div>
-            </div>
+          {/* Headline metrics — shared StatCard, like the rest of the admin stats */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <StatCard
+              label={t('admin.wheel.statistics.totalSpins')}
+              value={stats.total_spins}
+              icon={<WheelIcon className="h-5 w-5" />}
+              tone="accent"
+            />
+            <StatCard
+              label={t('admin.wheel.statistics.revenue')}
+              value={formatWithCurrency(stats.total_revenue_kopeks / 100, 0)}
+              icon={<WalletIcon className="h-5 w-5" />}
+              tone="success"
+            />
+            <StatCard
+              label={t('admin.wheel.statistics.payouts')}
+              value={formatWithCurrency(stats.total_payout_kopeks / 100, 0)}
+              icon={<GiftIcon className="h-5 w-5" />}
+              tone="warning"
+            />
+            <StatCard
+              label={`${t('admin.wheel.statistics.actualRtp')} · ${t('admin.wheel.statistics.targetRtp')} ${stats.configured_rtp_percent}%`}
+              value={`${stats.actual_rtp_percent.toFixed(1)}%`}
+              icon={<ChartIcon className="h-5 w-5" />}
+              tone={stats.actual_rtp_percent <= stats.configured_rtp_percent ? 'success' : 'error'}
+            />
           </div>
 
-          {/* Prize distribution */}
+          {/* Prize distribution — shared BreakdownList (ranked bars + share %) */}
           {stats.prizes_distribution.length > 0 && (
-            <div className="card p-4">
-              <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">
-                      {t('admin.wheel.statistics.times', { count: prize.count })}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <BreakdownList
+              title={t('admin.wheel.statistics.prizeDistribution')}
+              items={stats.prizes_distribution.map((prize) => ({
+                key: prize.display_name,
+                label: prize.display_name,
+                value: prize.count,
+              }))}
+              valueFormatter={(v) => t('admin.wheel.statistics.times', { count: v })}
+            />
           )}
 
-          {/* Top wins */}
+          {/* Top wins — same BreakdownList, ranked by win value */}
           {stats.top_wins.length > 0 && (
-            <div className="card p-4">
-              <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-100">
-                      {win.prize_display_name} ({(win.prize_value_kopeks / 100).toFixed(0)}₽)
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <BreakdownList
+              title={t('admin.wheel.statistics.topWins')}
+              items={stats.top_wins.slice(0, 8).map((win, i) => ({
+                key: `${win.user_id}-${i}`,
+                label: `${win.username || `#${win.user_id}`} · ${win.prize_display_name}`,
+                value: win.prize_value_kopeks / 100,
+              }))}
+              valueFormatter={(v) => formatWithCurrency(v, 0)}
+            />
           )}
         </div>
       )}
@@ -1097,6 +1137,33 @@ function InlinePrizeForm({
         </label>
       </div>
 
+      {/* Manual probability override (optional; empty = auto by RTP) */}
+      <div>
+        <label className="mb-2 block text-sm font-medium text-dark-300">
+          {t('admin.wheel.prizes.fields.probability')}
+        </label>
+        <input
+          type="number"
+          value={formData.manual_probability ?? ''}
+          onChange={(e) => {
+            const val = e.target.value;
+            setFormData({
+              ...formData,
+              manual_probability:
+                val === '' ? null : Math.min(1, Math.max(0, parseFloat(val) || 0)),
+            });
+          }}
+          min={0}
+          max={1}
+          step={0.01}
+          placeholder="0.00 – 1.00"
+          className="input w-full sm:w-1/2"
+        />
+        <p className="mt-1 text-xs text-dark-500">
+          {t('admin.wheel.prizes.fields.probabilityHint')}
+        </p>
+      </div>
+
       {/* Promocode settings */}
       {formData.prize_type === 'promocode' && (
         <div className="space-y-3 rounded-lg bg-dark-700/50 p-3">