diff --git a/src/pages/admin/AdminClientPerformancePage.tsx b/src/pages/admin/AdminClientPerformancePage.tsx
index b2bbf25d9..06a5acf23 100644
--- a/src/pages/admin/AdminClientPerformancePage.tsx
+++ b/src/pages/admin/AdminClientPerformancePage.tsx
@@ -3,28 +3,29 @@ import { PageSEO } from '@/components/seo/PageSEO';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { 
-  Activity, 
-  Clock, 
-  Trash2, 
-  RefreshCw, 
-  Zap, 
-  BarChart3, 
-  Layout, 
+import {
+  Activity,
+  Clock,
+  Trash2,
+  RefreshCw,
+  Zap,
+  BarChart3,
+  Layout,
   Palette,
-  Timer
+  Timer,
+  type LucideIcon,
 } from 'lucide-react';
-import { 
-  LineChart, 
-  Line, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip as RechartsTooltip, 
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
   ResponsiveContainer,
   BarChart,
   Bar,
-  Cell
+  Cell,
 } from 'recharts';
 import { performanceTracker, type PerformanceMetric } from '@/utils/performance';
 import { format } from 'date-fns';
@@ -36,122 +37,124 @@ export default function AdminClientPerformancePage() {
 
   useEffect(() => {
     setMetrics(performanceTracker.getHistory());
-    
+
     // Auto-refresh stats every 5s if there's activity
     const interval = setInterval(() => {
       setMetrics(performanceTracker.getHistory());
     }, 5000);
-    
+
     return () => clearInterval(interval);
   }, [tick]);
 
   const handleClear = () => {
     performanceTracker.clear();
     setMetrics([]);
-    setTick(t => t + 1);
+    setTick((t) => t + 1);
   };
 
-  const routeMetrics = metrics.filter(m => m.name.startsWith('Route:'));
-  const themeMetrics = metrics.filter(m => m.name.startsWith('Theme:'));
-  
-  const avgRouteTime = routeMetrics.length 
-    ? routeMetrics.reduce((acc, m) => acc + m.duration, 0) / routeMetrics.length 
+  const routeMetrics = metrics.filter((m) => m.name.startsWith('Route:'));
+  const themeMetrics = metrics.filter((m) => m.name.startsWith('Theme:'));
+
+  const avgRouteTime = routeMetrics.length
+    ? routeMetrics.reduce((acc, m) => acc + m.duration, 0) / routeMetrics.length
     : 0;
-    
-  const avgThemeTime = themeMetrics.length 
-    ? themeMetrics.reduce((acc, m) => acc + m.duration, 0) / themeMetrics.length 
+
+  const avgThemeTime = themeMetrics.length
+    ? themeMetrics.reduce((acc, m) => acc + m.duration, 0) / themeMetrics.length
     : 0;
 
-  const chartData = metrics.map(m => ({
+  const chartData = metrics.map((m) => ({
     ...m,
     time: format(m.timestamp, 'HH:mm:ss'),
-    shortName: m.name.replace('Route: ', '').replace('Theme: ', '')
+    shortName: m.name.replace('Route: ', '').replace('Theme: ', ''),
   }));
 
-  const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
-
   return (
     <>
-      <PageSEO 
-        title="Performance Client-side — Admin" 
-        description="Monitoramento de latência de interface, trocas de tema e transições de rota" 
-        path="/admin/client-performance" 
+      <PageSEO
+        title="Performance Client-side — Admin"
+        description="Monitoramento de latência de interface, trocas de tema e transições de rota"
+        path="/admin/client-performance"
       />
-      
-      <div className="w-full max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 animate-fade-in">
+
+      <div className="mx-auto w-full max-w-[1920px] animate-fade-in space-y-6 px-4 py-6 sm:px-6 lg:px-8">
         {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
           <div className="flex items-center gap-3">
-            <div className="p-2.5 bg-primary/10 rounded-xl">
+            <div className="rounded-xl bg-primary/10 p-2.5">
               <Activity className="h-6 w-6 text-primary" />
             </div>
             <div>
-              <h1 className="font-display text-2xl font-bold tracking-tight">Performance Client-side</h1>
-              <p className="text-sm text-muted-foreground">Métricas de experiência do usuário (UX) em tempo real</p>
+              <h1 className="font-display text-2xl font-bold tracking-tight">
+                Performance Client-side
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                Métricas de experiência do usuário (UX) em tempo real
+              </p>
             </div>
           </div>
-          
+
           <div className="flex items-center gap-2">
-            <Button 
-              variant="outline" 
-              size="sm" 
-              onClick={() => setTick(t => t + 1)}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setTick((t) => t + 1)}
               className="h-9"
             >
-              <RefreshCw className="h-4 w-4 mr-2" />
+              <RefreshCw className="mr-2 h-4 w-4" />
               Atualizar
             </Button>
-            <Button 
-              variant="outline" 
-              size="sm" 
+            <Button
+              variant="outline"
+              size="sm"
               onClick={handleClear}
-              className="h-9 text-destructive hover:text-destructive hover:bg-destructive/5"
+              className="h-9 text-destructive hover:bg-destructive/5 hover:text-destructive"
             >
-              <Trash2 className="h-4 w-4 mr-2" />
+              <Trash2 className="mr-2 h-4 w-4" />
               Limpar Logs
             </Button>
           </div>
         </div>
 
         {/* KPIs */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          <StatCard 
-            icon={Layout} 
-            label="Média Transição Rota" 
-            value={`${avgRouteTime.toFixed(0)}ms`} 
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <StatCard
+            icon={Layout}
+            label="Média Transição Rota"
+            value={`${avgRouteTime.toFixed(0)}ms`}
             sub={`${routeMetrics.length} transições medidas`}
             status={avgRouteTime > 500 ? 'warning' : 'success'}
           />
-          <StatCard 
-            icon={Palette} 
-            label="Média Troca Tema" 
-            value={`${avgThemeTime.toFixed(0)}ms`} 
+          <StatCard
+            icon={Palette}
+            label="Média Troca Tema"
+            value={`${avgThemeTime.toFixed(0)}ms`}
             sub={`${themeMetrics.length} trocas medidas`}
             status={avgThemeTime > 300 ? 'warning' : 'success'}
           />
-          <StatCard 
-            icon={Timer} 
-            label="Total de Eventos" 
-            value={metrics.length.toString()} 
+          <StatCard
+            icon={Timer}
+            label="Total de Eventos"
+            value={metrics.length.toString()}
             sub="Últimos 50 eventos capturados"
           />
-          <StatCard 
-            icon={Zap} 
-            label="Status Render" 
-            value="Fluido" 
+          <StatCard
+            icon={Zap}
+            label="Status Render"
+            value="Fluido"
             sub="60 FPS alvo mantido"
             status="success"
           />
         </div>
 
         {/* Charts Section */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
           {/* Timeline Chart */}
-          <Card className="border-border/60 shadow-sm overflow-hidden">
+          <Card className="overflow-hidden border-border/60 shadow-sm">
             <CardHeader className="bg-muted/30 pb-4">
               <div className="flex items-center justify-between">
                 <div>
-                  <CardTitle className="text-lg flex items-center gap-2">
+                  <CardTitle className="flex items-center gap-2 text-lg">
                     <BarChart3 className="h-5 w-5 text-primary" />
                     Timeline de Latência
                   </CardTitle>
@@ -164,35 +167,39 @@ export default function AdminClientPerformancePage() {
                 {metrics.length > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
                     <LineChart data={chartData}>
-                      <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
-                      <XAxis 
-                        dataKey="time" 
-                        fontSize={10} 
-                        tickLine={false} 
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        vertical={false}
+                        stroke="hsl(var(--border))"
+                      />
+                      <XAxis
+                        dataKey="time"
+                        fontSize={10}
+                        tickLine={false}
                         axisLine={false}
                         stroke="hsl(var(--muted-foreground))"
                       />
-                      <YAxis 
-                        fontSize={10} 
-                        tickLine={false} 
+                      <YAxis
+                        fontSize={10}
+                        tickLine={false}
                         axisLine={false}
                         stroke="hsl(var(--muted-foreground))"
                         unit="ms"
                       />
-                      <RechartsTooltip 
-                        contentStyle={{ 
-                          backgroundColor: 'hsl(var(--card))', 
+                      <RechartsTooltip
+                        contentStyle={{
+                          backgroundColor: 'hsl(var(--card))',
                           borderColor: 'hsl(var(--border))',
                           borderRadius: '8px',
-                          fontSize: '12px'
+                          fontSize: '12px',
                         }}
                       />
-                      <Line 
-                        type="monotone" 
-                        dataKey="duration" 
+                      <Line
+                        type="monotone"
+                        dataKey="duration"
                         name="Duração"
-                        stroke="hsl(var(--primary))" 
-                        strokeWidth={2} 
+                        stroke="hsl(var(--primary))"
+                        strokeWidth={2}
                         dot={{ r: 4, fill: 'hsl(var(--primary))' }}
                         activeDot={{ r: 6, strokeWidth: 0 }}
                       />
@@ -206,9 +213,9 @@ export default function AdminClientPerformancePage() {
           </Card>
 
           {/* Distribution Chart */}
-          <Card className="border-border/60 shadow-sm overflow-hidden">
+          <Card className="overflow-hidden border-border/60 shadow-sm">
             <CardHeader className="bg-muted/30 pb-4">
-              <CardTitle className="text-lg flex items-center gap-2">
+              <CardTitle className="flex items-center gap-2 text-lg">
                 <Clock className="h-5 w-5 text-primary" />
                 Distribuição por Tipo
               </CardTitle>
@@ -218,32 +225,38 @@ export default function AdminClientPerformancePage() {
               <div className="h-[300px] w-full">
                 {metrics.length > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
-                    <BarChart data={[
-                      { name: 'Rotas', value: avgRouteTime },
-                      { name: 'Temas', value: avgThemeTime },
-                    ]}>
-                      <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
-                      <XAxis 
-                        dataKey="name" 
-                        fontSize={12} 
-                        tickLine={false} 
+                    <BarChart
+                      data={[
+                        { name: 'Rotas', value: avgRouteTime },
+                        { name: 'Temas', value: avgThemeTime },
+                      ]}
+                    >
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        vertical={false}
+                        stroke="hsl(var(--border))"
+                      />
+                      <XAxis
+                        dataKey="name"
+                        fontSize={12}
+                        tickLine={false}
                         axisLine={false}
                         stroke="hsl(var(--muted-foreground))"
                       />
-                      <YAxis 
-                        fontSize={10} 
-                        tickLine={false} 
+                      <YAxis
+                        fontSize={10}
+                        tickLine={false}
                         axisLine={false}
                         stroke="hsl(var(--muted-foreground))"
                         unit="ms"
                       />
-                      <RechartsTooltip 
+                      <RechartsTooltip
                         cursor={{ fill: 'transparent' }}
-                        contentStyle={{ 
-                          backgroundColor: 'hsl(var(--card))', 
+                        contentStyle={{
+                          backgroundColor: 'hsl(var(--card))',
                           borderColor: 'hsl(var(--border))',
                           borderRadius: '8px',
-                          fontSize: '12px'
+                          fontSize: '12px',
                         }}
                       />
                       <Bar dataKey="value" name="Média (ms)" radius={[4, 4, 0, 0]}>
@@ -261,7 +274,7 @@ export default function AdminClientPerformancePage() {
         </div>
 
         {/* Logs Table */}
-        <Card className="border-border/60 shadow-sm overflow-hidden">
+        <Card className="overflow-hidden border-border/60 shadow-sm">
           <CardHeader className="bg-muted/30 pb-4">
             <CardTitle className="text-lg">Log Detalhado de Eventos</CardTitle>
             <CardDescription>Lista completa dos últimos 50 eventos medidos</CardDescription>
@@ -278,30 +291,41 @@ export default function AdminClientPerformancePage() {
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-border/60">
-                  {[...metrics].reverse().map((m, i) => (
-                    <tr key={i} className="hover:bg-muted/20 transition-colors">
-                      <td className="px-6 py-4">
-                        <span className="font-mono text-xs font-medium">{m.name}</span>
-                      </td>
-                      <td className="px-6 py-4 text-muted-foreground">
-                        {format(m.timestamp, 'dd/MM/yyyy HH:mm:ss')}
-                      </td>
-                      <td className="px-6 py-4 font-bold tabular-nums">
-                        {m.duration.toFixed(2)}ms
-                      </td>
-                      <td className="px-6 py-4">
-                        <Badge 
-                          variant={m.duration > 500 ? 'destructive' : m.duration > 200 ? 'warning' : 'secondary'}
-                          className="text-[10px] px-2 py-0"
-                        >
-                          {m.duration > 500 ? 'Lento' : m.duration > 200 ? 'Ok' : 'Excelente'}
-                        </Badge>
-                      </td>
-                    </tr>
-                  ))}
+                  {[...metrics].reverse().map((m, i) => {
+                    const isSlow = m.duration > 500;
+                    const isWarning = !isSlow && m.duration > 200;
+
+                    return (
+                      <tr key={i} className="transition-colors hover:bg-muted/20">
+                        <td className="px-6 py-4">
+                          <span className="font-mono text-xs font-medium">{m.name}</span>
+                        </td>
+                        <td className="px-6 py-4 text-muted-foreground">
+                          {format(m.timestamp, 'dd/MM/yyyy HH:mm:ss')}
+                        </td>
+                        <td className="px-6 py-4 font-bold tabular-nums">
+                          {m.duration.toFixed(2)}ms
+                        </td>
+                        <td className="px-6 py-4">
+                          <Badge
+                            variant={isSlow ? 'destructive' : isWarning ? 'outline' : 'secondary'}
+                            className={cn(
+                              'px-2 py-0 text-[10px]',
+                              isWarning && 'border-warning/30 bg-warning/10 text-warning',
+                            )}
+                          >
+                            {isSlow ? 'Lento' : isWarning ? 'Ok' : 'Excelente'}
+                          </Badge>
+                        </td>
+                      </tr>
+                    );
+                  })}
                   {metrics.length === 0 && (
                     <tr>
-                      <td colSpan={4} className="px-6 py-12 text-center text-muted-foreground italic">
+                      <td
+                        colSpan={4}
+                        className="px-6 py-12 text-center italic text-muted-foreground"
+                      >
                         Nenhum log disponível.
                       </td>
                     </tr>
@@ -316,34 +340,50 @@ export default function AdminClientPerformancePage() {
   );
 }
 
-function StatCard({ icon: Icon, label, value, sub, status }: { 
-  icon: any, 
-  label: string, 
-  value: string, 
-  sub: string,
-  status?: 'success' | 'warning' | 'destructive'
-}) {
+interface StatCardProps {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+  sub: string;
+  status?: 'success' | 'warning' | 'destructive';
+}
+
+function StatCard({ icon, label, value, sub, status }: StatCardProps) {
+  const Icon = icon;
+
   return (
-    <Card className={cn(
-      "border-border/60 shadow-sm transition-all hover:shadow-md",
-      status === 'success' && "bg-green-50/30 dark:bg-green-500/5 border-green-200/50 dark:border-green-500/20",
-      status === 'warning' && "bg-amber-50/30 dark:bg-amber-500/5 border-amber-200/50 dark:border-amber-500/20",
-      status === 'destructive' && "bg-red-50/30 dark:bg-red-500/5 border-red-200/50 dark:border-red-500/20"
-    )}>
-      <CardContent className="p-5 flex items-center gap-4">
-        <div className={cn(
-          "p-2.5 rounded-lg shrink-0",
-          status === 'success' ? "bg-green-100 dark:bg-green-500/20 text-green-600" :
-          status === 'warning' ? "bg-amber-100 dark:bg-amber-500/20 text-amber-600" :
-          status === 'destructive' ? "bg-red-100 dark:bg-red-500/20 text-red-600" :
-          "bg-primary/10 text-primary"
-        )}>
+    <Card
+      className={cn(
+        'border-border/60 shadow-sm transition-all hover:shadow-md',
+        status === 'success' &&
+          'border-green-200/50 bg-green-50/30 dark:border-green-500/20 dark:bg-green-500/5',
+        status === 'warning' &&
+          'border-amber-200/50 bg-amber-50/30 dark:border-amber-500/20 dark:bg-amber-500/5',
+        status === 'destructive' &&
+          'border-red-200/50 bg-red-50/30 dark:border-red-500/20 dark:bg-red-500/5',
+      )}
+    >
+      <CardContent className="flex items-center gap-4 p-5">
+        <div
+          className={cn(
+            'shrink-0 rounded-lg p-2.5',
+            status === 'success'
+              ? 'bg-green-100 text-green-600 dark:bg-green-500/20'
+              : status === 'warning'
+                ? 'bg-amber-100 text-amber-600 dark:bg-amber-500/20'
+                : status === 'destructive'
+                  ? 'bg-red-100 text-red-600 dark:bg-red-500/20'
+                  : 'bg-primary/10 text-primary',
+          )}
+        >
           <Icon className="h-5 w-5" />
         </div>
         <div className="min-w-0">
-          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-0.5">{label}</p>
-          <p className="text-2xl font-bold tracking-tight truncate">{value}</p>
-          <p className="text-[10px] text-muted-foreground truncate mt-0.5">{sub}</p>
+          <p className="mb-0.5 text-[11px] font-bold uppercase tracking-wider text-muted-foreground/80">
+            {label}
+          </p>
+          <p className="truncate text-2xl font-bold tracking-tight">{value}</p>
+          <p className="mt-0.5 truncate text-[10px] text-muted-foreground">{sub}</p>
         </div>
       </CardContent>
     </Card>
@@ -352,9 +392,9 @@ function StatCard({ icon: Icon, label, value, sub, status }: {
 
 function EmptyState({ message }: { message: string }) {
   return (
-    <div className="h-full w-full flex flex-col items-center justify-center text-muted-foreground gap-3">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-muted-foreground">
       <Activity className="h-8 w-8 opacity-20" />
       <p className="text-sm italic">{message}</p>
     </div>
   );
-}
\ No newline at end of file
+}