fix: Corrigindo visualização do dashboard do estudante

src/pages/student-dashboard/StudentDashboardPage.tsx

@@ -234,8 +234,8 @@ export function StudentDashboardPage() {
         </div>
       </div>
 
-      {/* Métricas */}
+      {/* Métricas Principais */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
         <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
           <div className="flex items-center gap-4">
             <div className="p-3 bg-purple-100 rounded-lg">
@@ -285,7 +285,7 @@ export function StudentDashboardPage() {
         </div>
       </div>
 
-      {/* Métricas de Leitura */}
+      {/* Métricas Detalhadas */}
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-4">
           <h2 className="text-lg font-semibold text-gray-900">Métricas Detalhadas de Leitura</h2>
@@ -293,10 +293,13 @@ export function StudentDashboardPage() {
             className="text-gray-400 hover:text-gray-600 cursor-help transition-colors" 
             title="Estas métricas são calculadas com base em todas as suas gravações de leitura, fornecendo uma visão detalhada do seu progresso"
           >
+            <HelpCircle className="h-4 w-4" />
           </div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-6">
+
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6" title="Avalia a qualidade da sua pronúncia durante a leitura, considerando a clareza e correção dos sons das palavras">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {/* Pronúncia */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
             <div className="flex items-center gap-4">
               <div className="p-3 bg-indigo-100 rounded-lg">
                 <Mic className="h-6 w-6 text-indigo-600" />
@@ -316,7 +319,8 @@ export function StudentDashboardPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6" title="Indica o quão preciso você é ao ler as palavras, sem trocas ou omissões de letras e sílabas">
+          {/* Precisão */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
             <div className="flex items-center gap-4">
               <div className="p-3 bg-pink-100 rounded-lg">
                 <Target className="h-6 w-6 text-pink-600" />
@@ -336,7 +340,8 @@ export function StudentDashboardPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6" title="Avalia seu nível de entendimento do texto durante a leitura, baseado no ritmo e entonação adequados">
+          {/* Compreensão */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
             <div className="flex items-center gap-4">
               <div className="p-3 bg-orange-100 rounded-lg">
                 <Brain className="h-6 w-6 text-orange-600" />
@@ -356,7 +361,8 @@ export function StudentDashboardPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6" title="Média de palavras lidas por minuto (WPM), indicando a velocidade e fluidez da sua leitura">
+          {/* Velocidade */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
             <div className="flex items-center gap-4">
               <div className="p-3 bg-cyan-100 rounded-lg">
                 <Gauge className="h-6 w-6 text-cyan-600" />
@@ -376,7 +382,8 @@ export function StudentDashboardPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6" title="Média de pausas não planejadas durante a leitura, indicando momentos de hesitação">
+          {/* Pausas */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
             <div className="flex items-center gap-4">
               <div className="p-3 bg-amber-100 rounded-lg">
                 <Pause className="h-6 w-6 text-amber-600" />
@@ -396,7 +403,8 @@ export function StudentDashboardPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6" title="Média de erros cometidos durante a leitura, como trocas, omissões ou adições de palavras">
+          {/* Erros */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
             <div className="flex items-center gap-4">
               <div className="p-3 bg-red-100 rounded-lg">
                 <XCircle className="h-6 w-6 text-red-600" />

src/utils/cache.ts

@@ -0,0 +1,17 @@
+import { getFromCache, setInCache, invalidateCache } from '../lib/redis';
+
+const CACHE_TTL = 300; // 5 minutos em segundos
+
+export const cacheUtils = {
+  async get<T>(key: string): Promise<T | null> {
+    return getFromCache<T>(key);
+  },
+
+  async set<T>(key: string, value: T): Promise<void> {
+    return setInCache(key, value, CACHE_TTL);
+  },
+
+  async del(key: string): Promise<void> {
+    return invalidateCache(key);
+  }
+};