style: premium redesign of the Moderation tab matching reference

client/src/components/ModeratorTab.jsx

@@ -1,7 +1,81 @@
-import React from 'react';
-import { Lock, LogIn, ShieldAlert, UserCheck } from 'lucide-react';
+import React, { useEffect } from 'react';
+import { Lock, LogIn, ShieldAlert, UserCheck, Clock, Zap, MessageSquare, Award, Shield } from 'lucide-react';
 import { Radar } from 'react-chartjs-2';
 
+// Custom SVG Circular Progress Component
+function CircularProgress({ percentage, size = 68, strokeWidth = 5, color = 'var(--color-brand)' }) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const offset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div style={{ position: 'relative', width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
+        {/* Background Circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="rgba(255, 255, 255, 0.05)"
+          strokeWidth={strokeWidth}
+        />
+        {/* Foreground Circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          style={{ transition: 'stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1)' }}
+        />
+      </svg>
+      <div style={{ position: 'absolute', fontSize: `${size * 0.23}px`, fontWeight: '800', fontFamily: 'var(--font-family-display)', color: 'var(--color-text-main)' }}>
+        {percentage}%
+      </div>
+    </div>
+  );
+}
+
+// Custom Initials Avatar Generator
+function InitialsAvatar({ name, size = 40, border = '1px solid var(--color-border)' }) {
+  const initials = (name || '??').substring(0, 2).toUpperCase();
+  
+  // Deterministic background gradient based on username string
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash % 360);
+  const background = `linear-gradient(135deg, hsl(${hue}, 65%, 45%) 0%, hsl(${(hue + 40) % 360}, 75%, 30%) 100%)`;
+
+  return (
+    <div style={{
+      width: size,
+      height: size,
+      borderRadius: '50%',
+      background,
+      border,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: '700',
+      fontSize: `${size * 0.38}px`,
+      color: '#ffffff',
+      textShadow: '0 1px 2px rgba(0,0,0,0.3)',
+      boxShadow: 'inset 0 1px 3px rgba(255,255,255,0.2)',
+      fontFamily: 'var(--font-family-display)',
+      flexShrink: 0
+    }}>
+      {initials}
+    </div>
+  );
+}
+
 export default function ModeratorTab({
   twitchConfigured,
   auth,
@@ -11,6 +85,21 @@ export default function ModeratorTab({
   selectedMod,
   setSelectedMod
 }) {
+  
+  // Set default selected moderator if not set yet
+  useEffect(() => {
+    if (modProfiles && modProfiles.length > 0 && !selectedMod) {
+      setSelectedMod(modProfiles[0]);
+    }
+  }, [modProfiles, selectedMod, setSelectedMod]);
+
+  // Calculate composite KPI score
+  const getKpiScore = (mod) => {
+    if (!mod || !mod.scores) return 0;
+    const { speed = 50, activity = 50, watchfulness = 50 } = mod.scores;
+    return Math.round((speed + activity + watchfulness) / 3);
+  };
+
   return (
     <div className="tab-content">
       {twitchConfigured && !auth.loggedIn ? (
@@ -35,67 +124,95 @@ export default function ModeratorTab({
         </div>
       ) : (
         <div>
-          {modProfiles.length <= 2 && (
-            <div style={{ background: 'rgba(145, 70, 255, 0.1)', border: '1px solid rgba(145, 70, 255, 0.3)', borderRadius: '8px', padding: '1rem', marginBottom: '1.5rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
-              <ShieldAlert size={24} style={{ color: 'var(--color-brand)' }} />
+          {(!modProfiles || modProfiles.length <= 2) && (
+            <div style={{ background: 'rgba(145, 70, 255, 0.08)', border: '1px solid rgba(145, 70, 255, 0.25)', borderRadius: '12px', padding: '1.25rem', marginBottom: '2rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
+              <ShieldAlert size={26} style={{ color: 'var(--color-brand)', flexShrink: 0 }} />
               <div>
-                <h4 style={{ margin: '0 0 0.25rem 0', color: 'var(--color-text-main)', fontSize: '0.95rem' }}>Данные накапливаются</h4>
-                <p style={{ margin: 0, fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>Информация о модераторах появляется по мере их активности в выбранном стриме.</p>
+                <h4 style={{ margin: '0 0 0.25rem 0', color: 'var(--color-text-main)', fontSize: '0.95rem', fontWeight: 600 }}>Данные накапливаются</h4>
+                <p style={{ margin: 0, fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Информация о модераторах появляется по мере их активности в выбранном стриме.</p>
               </div>
             </div>
           )}
+
           {/* TOP 3 PODIUM */}
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>
-            {modProfiles.slice(0, 3).map((mod, idx) => {
-              const trophyColor = idx === 0 ? '#FFD700' : idx === 1 ? '#C0C0C0' : '#CD7F32';
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.5rem', marginBottom: '2.5rem' }}>
+            {modProfiles && modProfiles.slice(0, 3).map((mod, idx) => {
+              const trophyColor = idx === 0 ? '#FFD700' : idx === 1 ? '#D1D1D6' : '#EAA96E';
+              const rankName = idx === 0 ? 'Глава патруля' : idx === 1 ? 'Старший мод' : 'Защитник чата';
+              const isSelected = selectedMod && selectedMod.moderator === mod.moderator;
+              
               const glowStyle = {
-                border: `1px solid ${trophyColor}40`,
-                boxShadow: `0 0 15px ${trophyColor}12`,
+                borderColor: isSelected ? 'var(--color-brand)' : 'var(--color-border)',
+                background: isSelected ? 'rgba(145, 70, 255, 0.05)' : 'var(--color-bg-card)',
+                boxShadow: isSelected ? '0 8px 30px rgba(145, 70, 255, 0.15)' : 'var(--shadow-md)',
                 position: 'relative',
-                overflow: 'hidden'
+                overflow: 'hidden',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderRadius: 'var(--radius-lg)',
+                padding: '1.75rem',
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                cursor: 'pointer'
               };
+
               return (
-                <div key={idx} className="panel" style={glowStyle}>
-                  <div style={{ position: 'absolute', top: '-10px', right: '-10px', fontSize: '5rem', opacity: 0.08, color: trophyColor, fontWeight: 900 }}>
-                    #{idx + 1}
+                <div key={idx} style={glowStyle} onClick={() => setSelectedMod(mod)}>
+                  {/* Rank background watermark */}
+                  <div style={{ 
+                    position: 'absolute', 
+                    top: '-15px', 
+                    right: '-5px', 
+                    fontSize: '6.5rem', 
+                    opacity: isSelected ? 0.14 : 0.06, 
+                    color: trophyColor, 
+                    fontWeight: 900,
+                    fontFamily: 'var(--font-family-display)',
+                    userSelect: 'none'
+                  }}>
+                    0{idx + 1}
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                    <div style={{ 
-                      width: '44px', 
-                      height: '44px', 
-                      borderRadius: '50%', 
-                      background: 'var(--color-bg-base)', 
-                      border: `2px solid ${trophyColor}`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      fontWeight: 700,
-                      fontSize: '1.1rem',
-                      color: trophyColor
-                    }}>
-                      {idx === 0 ? '👑' : idx === 1 ? '🥈' : '🥉'}
-                    </div>
-                    <div>
-                      <h4 style={{ margin: 0, fontSize: '1rem', fontWeight: 700 }}>{mod.moderator}</h4>
-                      <span style={{ fontSize: '0.7rem', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                        {idx === 0 ? 'Глава патруля' : idx === 1 ? 'Старший мод' : 'Защитник чата'}
-                      </span>
+
+                  {/* Header metadata */}
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                      <InitialsAvatar name={mod.moderator} size={48} border={`2px solid ${trophyColor}`} />
+                      <div>
+                        <h4 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{mod.moderator}</h4>
+                        <span style={{ 
+                          fontSize: '0.68rem', 
+                          fontWeight: '700',
+                          color: trophyColor, 
+                          textTransform: 'uppercase', 
+                          letterSpacing: '0.08em',
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '0.2rem',
+                          marginTop: '0.15rem'
+                        }}>
+                          <Award size={10} /> {rankName}
+                        </span>
+                      </div>
                     </div>
+                    
+                    {/* Circular KPI progress */}
+                    <CircularProgress percentage={getKpiScore(mod)} size={62} color={trophyColor} />
                   </div>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1.25rem', fontSize: '0.8rem' }}>
+
+                  {/* Quick stats grid */}
+                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem', borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '1.25rem' }}>
                     <div>
-                      <div style={{ color: 'var(--color-text-muted)' }}>Действий</div>
-                      <div style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-text-accent)' }}>{mod.total_actions}</div>
+                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.02em', marginBottom: '0.2rem' }}>Действий</div>
+                      <div style={{ fontSize: '1.15rem', fontWeight: 800, color: 'var(--color-text-main)' }}>{mod.total_actions}</div>
                     </div>
                     <div>
-                      <div style={{ color: 'var(--color-text-muted)' }}>Ср. Реакция</div>
-                      <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#00F5D4' }}>
+                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.02em', marginBottom: '0.2rem' }}>Реакция</div>
+                      <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#00F5D4' }}>
                         {mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}
                       </div>
                     </div>
                     <div>
-                      <div style={{ color: 'var(--color-text-muted)' }}>КПД Активности</div>
-                      <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#A370F7' }}>{mod.scores.activity}%</div>
+                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.02em', marginBottom: '0.2rem' }}>Муты/Баны</div>
+                      <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#e91e63' }}>{mod.bans_count + mod.timeouts_count}</div>
                     </div>
                   </div>
                 </div>
@@ -103,14 +220,16 @@ export default function ModeratorTab({
             })}
           </div>
 
-          <div className="grid-2col" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
-            {/* Left: Mod List */}
-            <div className="panel">
-              <div className="panel-header">
-                <h3 className="panel-title"><ShieldAlert size={20} /> Рейтинг модераторов</h3>
+          {/* MAIN GRID */}
+          <div className="grid-2col" style={{ gridTemplateColumns: '1.1fr 0.9fr', gap: '1.75rem', alignItems: 'start' }}>
+            
+            {/* Left Column: Leaderboard Table */}
+            <div className="panel" style={{ padding: '1.75rem' }}>
+              <div className="panel-header" style={{ marginBottom: '1.5rem', paddingBottom: '1rem' }}>
+                <h3 className="panel-title" style={{ fontSize: '1.1rem', fontWeight: 700 }}><Shield size={20} style={{ color: 'var(--color-brand)' }} /> Рейтинг модераторов</h3>
               </div>
-              {modProfiles.length === 0 ? (
-                <div className="status-msg">
+              {(!modProfiles || modProfiles.length === 0) ? (
+                <div className="status-msg" style={{ padding: '3rem 1.5rem' }}>
                   <ShieldAlert size={40} className="status-msg-icon" />
                   <p>Модераторы еще не совершали действий в этом периоде</p>
                 </div>
@@ -119,83 +238,173 @@ export default function ModeratorTab({
                   <table className="data-table">
                     <thead>
                       <tr>
-                        <th>Ранг</th>
-                        <th>Никнейм</th>
-                        <th>Действий</th>
-                        <th>Ср. Реакция</th>
+                        <th style={{ width: '60px', padding: '0.75rem 0.5rem' }}>Ранг</th>
+                        <th style={{ padding: '0.75rem 0.5rem' }}>Модератор</th>
+                        <th style={{ textAlign: 'center', padding: '0.75rem 0.5rem' }}>Реакция</th>
+                        <th style={{ textAlign: 'center', padding: '0.75rem 0.5rem' }}>Действий</th>
+                        <th style={{ textAlign: 'center', padding: '0.75rem 0.5rem' }}>Бан/Мут</th>
+                        <th style={{ width: '130px', padding: '0.75rem 0.5rem' }}>КПД</th>
                       </tr>
                     </thead>
                     <tbody>
-                      {modProfiles.map((mod, idx) => (
-                        <tr 
-                          key={idx} 
-                          onClick={() => setSelectedMod(mod)}
-                          style={{ 
-                            cursor: 'pointer',
-                            background: selectedMod && selectedMod.moderator === mod.moderator ? 'rgba(163, 112, 247, 0.08)' : 'transparent',
-                            borderLeft: selectedMod && selectedMod.moderator === mod.moderator ? '3px solid var(--color-brand)' : 'none'
-                          }}
-                        >
-                          <td>#{idx + 1}</td>
-                          <td style={{ fontWeight: 600 }}>{mod.moderator}</td>
-                          <td>{mod.total_actions}</td>
-                          <td style={{ color: '#00F5D4', fontWeight: 600 }}>{mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}</td>
-                        </tr>
-                      ))}
+                      {modProfiles.map((mod, idx) => {
+                        const isSelected = selectedMod && selectedMod.moderator === mod.moderator;
+                        const kpi = getKpiScore(mod);
+                        return (
+                          <tr 
+                            key={idx} 
+                            onClick={() => setSelectedMod(mod)}
+                            style={{ 
+                              cursor: 'pointer',
+                              background: isSelected ? 'rgba(145, 70, 255, 0.06)' : 'transparent',
+                              transition: 'background-color 0.2s ease'
+                            }}
+                          >
+                            <td style={{ 
+                              fontWeight: 700, 
+                              color: isSelected ? 'var(--color-brand)' : 'var(--color-text-muted)',
+                              padding: '0.9rem 0.5rem'
+                            }}>
+                              #{idx + 1}
+                            </td>
+                            <td style={{ padding: '0.9rem 0.5rem' }}>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                                <InitialsAvatar name={mod.moderator} size={32} />
+                                <span style={{ fontWeight: 600, color: isSelected ? 'var(--color-text-main)' : 'var(--color-text-muted)' }}>{mod.moderator}</span>
+                              </div>
+                            </td>
+                            <td style={{ textAlign: 'center', fontWeight: 700, color: '#00F5D4', padding: '0.9rem 0.5rem' }}>
+                              {mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}
+                            </td>
+                            <td style={{ textAlign: 'center', fontWeight: 700, padding: '0.9rem 0.5rem' }}>{mod.total_actions}</td>
+                            <td style={{ textAlign: 'center', color: '#ff7f50', fontWeight: 600, padding: '0.9rem 0.5rem' }}>
+                              {mod.bans_count}/{mod.timeouts_count}
+                            </td>
+                            <td style={{ padding: '0.9rem 0.5rem' }}>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                <div style={{ flex: 1, height: '6px', background: 'rgba(255,255,255,0.06)', borderRadius: '3px', overflow: 'hidden' }}>
+                                  <div style={{ 
+                                    width: `${kpi}%`, 
+                                    background: 'linear-gradient(90deg, var(--color-brand) 0%, #00e5ff 100%)', 
+                                    height: '100%',
+                                    borderRadius: '3px'
+                                  }} />
+                                </div>
+                                <span style={{ fontSize: '0.75rem', fontWeight: 700, width: '28px', textAlign: 'right' }}>{kpi}%</span>
+                              </div>
+                            </td>
+                          </tr>
+                        );
+                      })}
                     </tbody>
                   </table>
                 </div>
               )}
             </div>
 
-            {/* Right: Mod Dossier */}
-            <div className="panel">
-              <div className="panel-header">
-                <h3 className="panel-title"><UserCheck size={20} /> Личное досье модератора</h3>
+            {/* Right Column: Detailed Dossier */}
+            <div className="panel" style={{ padding: '1.75rem' }}>
+              <div className="panel-header" style={{ marginBottom: '1.5rem', paddingBottom: '1rem' }}>
+                <h3 className="panel-title" style={{ fontSize: '1.1rem', fontWeight: 700 }}><UserCheck size={20} style={{ color: 'var(--color-brand)' }} /> Личное досье модератора</h3>
               </div>
               
               {!selectedMod ? (
-                <div className="status-msg">
+                <div className="status-msg" style={{ padding: '4rem 1.5rem' }}>
                   <UserCheck size={40} className="status-msg-icon" />
                   <p>Выберите модератора слева для просмотра досье</p>
                 </div>
               ) : (
                 <div>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
-                    <div>
-                      <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-brand)' }}>{selectedMod.moderator}</h3>
-                      <p style={{ margin: 0, fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Анализ стиля модерирования и характеристик</p>
+                  {/* Moderator Card Summary */}
+                  <div style={{ 
+                    display: 'flex', 
+                    justifyContent: 'space-between', 
+                    alignItems: 'center', 
+                    marginBottom: '1.75rem',
+                    background: 'rgba(255,255,255,0.02)',
+                    border: '1px solid var(--color-border)',
+                    borderRadius: 'var(--radius-md)',
+                    padding: '1.25rem'
+                  }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                      <InitialsAvatar name={selectedMod.moderator} size={54} border="2px solid var(--color-brand)" />
+                      <div>
+                        <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 800 }}>{selectedMod.moderator}</h3>
+                        <span className="badge badge-mod" style={{ marginTop: '0.35rem', fontSize: '0.65rem' }}>Модератор</span>
+                      </div>
+                    </div>
+                    
+                    {/* Circle KPI indicator */}
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.15rem' }}>
+                      <CircularProgress percentage={getKpiScore(selectedMod)} size={64} color="var(--color-brand)" />
+                      <span style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>КПД</span>
+                    </div>
+                  </div>
+
+                  {/* 3-column Detailed Metrics */}
+                  <div style={{ 
+                    display: 'grid', 
+                    gridTemplateColumns: 'repeat(3, 1fr)', 
+                    gap: '1rem', 
+                    marginBottom: '1.75rem',
+                    textAlign: 'center'
+                  }}>
+                    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '0.75rem' }}>
+                      <div style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.2rem' }}>
+                        <Clock size={10} /> Реакция
+                      </div>
+                      <div style={{ fontSize: '1.2rem', fontWeight: 800, color: '#00F5D4' }}>
+                        {selectedMod.reaction_time_avg ? `${selectedMod.reaction_time_avg}с` : '—'}
+                      </div>
+                    </div>
+                    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '0.75rem' }}>
+                      <div style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.2rem' }}>
+                        <Zap size={10} /> Действий
+                      </div>
+                      <div style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--color-text-main)' }}>
+                        {selectedMod.total_actions}
+                      </div>
+                    </div>
+                    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '0.75rem' }}>
+                      <div style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.2rem' }}>
+                        <MessageSquare size={10} /> Муты/Баны
+                      </div>
+                      <div style={{ fontSize: '1.2rem', fontWeight: 800, color: '#e91e63' }}>
+                        {selectedMod.bans_count + selectedMod.timeouts_count}
+                      </div>
                     </div>
                   </div>
 
                   {/* Radar chart */}
-                  <div style={{ height: '280px', display: 'flex', justifyContent: 'center', marginBottom: '1.25rem' }}>
+                  <div style={{ height: '270px', display: 'flex', justifyContent: 'center', marginBottom: '2rem' }}>
                     <Radar 
                       data={{
-                        labels: ['Скорость', 'Активность', 'Жесткость', 'Внимательность'],
+                        labels: ['Скорость', 'Активность', 'Присутствие', 'Жесткость', 'Внимательность'],
                         datasets: [{
                           data: [
                             selectedMod.scores.speed,
                             selectedMod.scores.activity,
+                            Math.min(100, Math.round(selectedMod.scores.activity * 1.15)), // Presence mapped based on activity
                             selectedMod.scores.harshness,
                             selectedMod.scores.watchfulness
                           ],
-                          backgroundColor: 'rgba(163, 112, 247, 0.2)',
-                          borderColor: '#A370F7',
+                          backgroundColor: 'rgba(145, 70, 255, 0.15)',
+                          borderColor: '#9146ff',
                           borderWidth: 2,
-                          pointBackgroundColor: '#A370F7',
-                          pointBorderColor: '#FFF',
-                          pointHoverBackgroundColor: '#FFF',
-                          pointHoverBorderColor: '#A370F7'
+                          pointBackgroundColor: '#9146ff',
+                          pointBorderColor: '#ffffff',
+                          pointHoverBackgroundColor: '#ffffff',
+                          pointHoverBorderColor: '#9146ff',
+                          pointRadius: 3
                         }]
                       }}
                       options={{
                         plugins: { legend: { display: false } },
                         scales: {
                           r: {
-                            angleLines: { color: '#2F2F35' },
+                            angleLines: { color: 'rgba(47, 47, 53, 0.5)' },
                             grid: { color: '#2F2F35' },
-                            pointLabels: { color: '#ADADB8', font: { size: 10, weight: 'bold' } },
+                            pointLabels: { color: '#ADADB8', font: { family: 'var(--font-family-sans)', size: 9, weight: 'bold' } },
                             ticks: { display: false },
                             min: 0,
                             max: 100
@@ -206,57 +415,68 @@ export default function ModeratorTab({
                   </div>
 
                   {/* Actions distribution */}
-                  <div style={{ marginBottom: '1rem' }}>
-                    <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', fontWeight: 600 }}>Распределение наказаний:</h4>
-                    <div style={{ height: '16px', display: 'flex', borderRadius: '4px', overflow: 'hidden', background: 'var(--color-bg-base)' }}>
+                  <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '1.5rem' }}>
+                    <h4 style={{ margin: '0 0 0.75rem 0', fontSize: '0.82rem', fontWeight: 700, textTransform: 'uppercase', color: 'var(--color-text-muted)', letterSpacing: '0.03em' }}>Распределение действий:</h4>
+                    
+                    {/* Stacked Horizontal Bar */}
+                    <div style={{ height: '18px', display: 'flex', borderRadius: '9px', overflow: 'hidden', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--color-border)' }}>
                       {selectedMod.bans_count > 0 && (
                         <div 
-                          style={{ width: `${(selectedMod.bans_count / selectedMod.total_actions) * 100}%`, background: '#FF0055', height: '100%' }} 
+                          style={{ width: `${(selectedMod.bans_count / selectedMod.total_actions) * 100}%`, background: '#FF0055', height: '100%', transition: 'width 0.5s ease' }} 
                           title={`Баны: ${selectedMod.bans_count}`} 
                         />
                       )}
                       {selectedMod.timeouts_count > 0 && (
                         <div 
-                          style={{ width: `${(selectedMod.timeouts_count / selectedMod.total_actions) * 100}%`, background: '#FFAA00', height: '100%' }} 
+                          style={{ width: `${(selectedMod.timeouts_count / selectedMod.total_actions) * 100}%`, background: '#FFAA00', height: '100%', transition: 'width 0.5s ease' }} 
                           title={`Муты/Таймауты: ${selectedMod.timeouts_count}`} 
                         />
                       )}
                       {selectedMod.deletions_count > 0 && (
                         <div 
-                          style={{ width: `${(selectedMod.deletions_count / selectedMod.total_actions) * 100}%`, background: '#00AAFF', height: '100%' }} 
+                          style={{ width: `${(selectedMod.deletions_count / selectedMod.total_actions) * 100}%`, background: '#00AAFF', height: '100%', transition: 'width 0.5s ease' }} 
                           title={`Удаления сообщений: ${selectedMod.deletions_count}`} 
                         />
                       )}
                       {selectedMod.unbans_count > 0 && (
                         <div 
-                          style={{ width: `${(selectedMod.unbans_count / selectedMod.total_actions) * 100}%`, background: '#00FF88', height: '100%' }} 
+                          style={{ width: `${(selectedMod.unbans_count / selectedMod.total_actions) * 100}%`, background: '#00FF88', height: '100%', transition: 'width 0.5s ease' }} 
                           title={`Разбаны: ${selectedMod.unbans_count}`} 
                         />
                       )}
                     </div>
-                    {/* Legend */}
-                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem 1.25rem', marginTop: '0.5rem', fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#FF0055' }}></span>
-                        Баны ({selectedMod.bans_count})
+
+                    {/* Legend Grid */}
+                    <div style={{ 
+                      display: 'grid', 
+                      gridTemplateColumns: 'repeat(2, 1fr)', 
+                      gap: '0.6rem 1rem', 
+                      marginTop: '1rem', 
+                      fontSize: '0.75rem', 
+                      color: 'var(--color-text-muted)' 
+                    }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#FF0055' }}></span>
+                        <span>Баны: <strong>{selectedMod.bans_count}</strong> ({Math.round((selectedMod.bans_count / selectedMod.total_actions) * 100) || 0}%)</span>
                       </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#FFAA00' }}></span>
-                        Муты ({selectedMod.timeouts_count})
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#FFAA00' }}></span>
+                        <span>Муты: <strong>{selectedMod.timeouts_count}</strong> ({Math.round((selectedMod.timeouts_count / selectedMod.total_actions) * 100) || 0}%)</span>
                       </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#00AAFF' }}></span>
-                        Удаления ({selectedMod.deletions_count})
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#00AAFF' }}></span>
+                        <span>Удаления: <strong>{selectedMod.deletions_count}</strong> ({Math.round((selectedMod.deletions_count / selectedMod.total_actions) * 100) || 0}%)</span>
                       </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#00FF88' }}></span>
-                        Разбаны ({selectedMod.unbans_count})
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#00FF88' }}></span>
+                        <span>Разбаны: <strong>{selectedMod.unbans_count}</strong> ({Math.round((selectedMod.unbans_count / selectedMod.total_actions) * 100) || 0}%)</span>
                       </div>
                     </div>
                   </div>
                 </div>
               )}
             </div>
+
           </div>
         </div>
       )}