style: padroniza layout das páginas de Classes e Professores

- Alinha o visual das páginas com o padrão do StudentsPage
- Ajusta espaçamentos, cores e tipografia
- Melhora a consistência dos componentes de lista
- Adiciona tratamento de erros uniforme
- Padroniza os estados de loading e empty

src/components/dashboard/StatsCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+  icon: LucideIcon;
+  title: string;
+  value: number;
+  iconBgColor: string;
+  iconColor: string;
+}
+
+export function StatsCard({ icon: Icon, title, value, iconBgColor, iconColor }: StatsCardProps) {
+  return (
+    <div className="bg-white rounded-2xl p-6 flex items-center gap-4 border border-gray-200 shadow-sm">
+      <div className={`w-12 h-12 rounded-xl ${iconBgColor} flex items-center justify-center`}>
+        <Icon className={`h-6 w-6 ${iconColor}`} />
+      </div>
+      <div>
+        <p className="text-gray-600">{title}</p>
+        <p className="text-3xl font-bold">{value}</p>
+      </div>
+    </div>
+  );
+} 

src/pages/dashboard/DashboardHome.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Users, GraduationCap, BookOpen } from 'lucide-react';
 import { supabase } from '../../lib/supabase';
+import { StatsCard } from '../../components/dashboard/StatsCard';
 
 interface DashboardStats {
   totalClasses: number;
@@ -90,35 +91,27 @@ export function DashboardHome() {
       <h1 className="text-2xl font-bold mb-8">Dashboard</h1>
 
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
-        <div className="bg-white rounded-2xl p-6 flex items-center gap-4">
+        <StatsCard
-          <div className="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center">
+          icon={Users}
-            <Users className="h-6 w-6 text-purple-600" />
+          title="Total de Turmas"
-          </div>
+          value={stats.totalClasses}
-          <div>
+          iconBgColor="bg-purple-100"
-            <p className="text-gray-600">Total de Turmas</p>
+          iconColor="text-purple-600"
-            <p className="text-3xl font-bold">{stats.totalClasses}</p>
+        />
-          </div>
+        <StatsCard
-        </div>
+          icon={GraduationCap}
-
+          title="Total de Professores"
-        <div className="bg-white rounded-2xl p-6 flex items-center gap-4">
+          value={stats.totalTeachers}
-          <div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
+          iconBgColor="bg-blue-100"
-            <GraduationCap className="h-6 w-6 text-blue-600" />
+          iconColor="text-blue-600"
-          </div>
+        />
-          <div>
+        <StatsCard
-            <p className="text-gray-600">Total de Professores</p>
+          icon={BookOpen}
-            <p className="text-3xl font-bold">{stats.totalTeachers}</p>
+          title="Total de Alunos"
-          </div>
+          value={stats.totalStudents}
-        </div>
+          iconBgColor="bg-green-100"
-
+          iconColor="text-green-600"
-        <div className="bg-white rounded-2xl p-6 flex items-center gap-4">
+        />
-          <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
-            <BookOpen className="h-6 w-6 text-green-600" />
-          </div>
-          <div>
-            <p className="text-gray-600">Total de Alunos</p>
-            <p className="text-3xl font-bold">{stats.totalStudents}</p>
-          </div>
-        </div>
       </div>
 
       <div className="grid gap-6 md:grid-cols-2">

src/pages/dashboard/classes/ClassesPage.tsx

@@ -10,6 +10,7 @@ export function ClassesPage() {
   const [classes, setClasses] = React.useState<Class[]>([]);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     const fetchClasses = async () => {
@@ -30,6 +31,7 @@ export function ClassesPage() {
         setClasses(data || []);
       } catch (err) {
         console.error('Erro ao buscar turmas:', err);
+        setError('Erro ao buscar turmas');
       } finally {
         setLoading(false);
       }
@@ -44,66 +46,70 @@ export function ClassesPage() {
   );
 
   return (
-    <div className="p-6">
+    <div>
-      <div className="flex justify-between items-center mb-8">
+      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">Turmas</h1>
+        <h1 className="text-2xl font-bold text-gray-900">Turmas</h1>
         <button
           onClick={() => navigate('nova')}
-          className="inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 font-medium text-lg"
+          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
         >
-          <Plus className="h-6 w-6" />
+          <Plus className="h-5 w-5" />
-          Nova Turma
+          Adicionar Turma
         </button>
       </div>
 
-      <div className="bg-white rounded-2xl shadow-sm p-6">
+      {error && (
-        <div className="relative mb-6">
+        <div className="mb-4 p-4 bg-red-50 text-red-600 rounded-lg">
-          <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
+          {error}
-          <input
+        </div>
-            type="text"
+      )}
-            placeholder="Buscar turmas..."
+
-            value={searchTerm}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-            onChange={(e) => setSearchTerm(e.target.value)}
+        <div className="p-4 border-b border-gray-200">
-            className="w-full pl-12 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-purple-500 focus:border-purple-500"
+          <div className="relative">
-          />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Buscar turmas..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
+            />
+          </div>
         </div>
 
         {loading ? (
-          <div className="text-center py-12">
+          <div className="p-8 text-center text-gray-500">Carregando...</div>
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto"></div>
-          </div>
         ) : filteredClasses.length === 0 ? (
-          <div className="text-center py-12 text-gray-500">
+          <div className="p-8 text-center text-gray-500">
             {searchTerm ? 'Nenhuma turma encontrada' : 'Nenhuma turma cadastrada'}
           </div>
         ) : (
-          <div className="divide-y divide-gray-100">
+          <div className="divide-y divide-gray-200">
             {filteredClasses.map((classItem) => (
               <div
                 key={classItem.id}
-                className="flex items-center justify-between py-4 hover:bg-gray-50 transition-colors"
+                className="p-4 hover:bg-gray-50 cursor-pointer"
+                onClick={() => navigate(`/dashboard/turmas/${classItem.id}`)}
               >
-                <div className="flex items-center gap-4">
+                <div className="flex justify-between items-center">
-                  <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
-                    <GraduationCap className="h-5 w-5 text-purple-600" />
-                  </div>
                   <div>
                     <h3 className="text-lg font-medium text-gray-900">
                       {classItem.name}
                     </h3>
-                    <p className="text-sm text-gray-500">
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                      <GraduationCap className="h-4 w-4" />
                       {classItem.grade} • {(classItem as any).students?.count || 0} alunos
-                    </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-6">
+                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      Ativo
+                    </span>
+                    <button className="p-2 hover:bg-gray-100 rounded-full">
+                      <MoreVertical className="h-5 w-5 text-gray-400" />
+                    </button>
                   </div>
-                </div>
-
-                <div className="flex items-center gap-4">
-                  <span className="px-3 py-1 text-sm bg-green-50 text-green-700 rounded-full">
-                    Ativo
-                  </span>
-                  <button className="p-2 hover:bg-gray-100 rounded-full">
-                    <MoreVertical className="h-5 w-5 text-gray-400" />
-                  </button>
                 </div>
               </div>
             ))}

src/pages/dashboard/teachers/TeachersPage.tsx

@@ -1,107 +1,42 @@
 import React from 'react';
-import { Plus, Search, MoreVertical, Mail } from 'lucide-react';
+import { Plus, Search, MoreVertical, GraduationCap, Mail } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useDatabase } from '../../../hooks/useDatabase';
 import { supabase } from '../../../lib/supabase';
-
+import type { Teacher } from '../../../types/database';
-interface Teacher {
-  id: string;
-  name: string;
-  email: string;
-  subject?: string;
-  class_count: number;
-  status: 'active' | 'pending' | 'inactive';
-}
 
 export function TeachersPage() {
   const navigate = useNavigate();
-  const { loading, error } = useDatabase();
   const [teachers, setTeachers] = React.useState<Teacher[]>([]);
   const [searchTerm, setSearchTerm] = React.useState('');
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     const fetchTeachers = async () => {
       try {
-        const { data: authData } = await supabase.auth.getSession();
+        const { data: { session } } = await supabase.auth.getSession();
-        if (!authData.session?.user) return;
+        if (!session?.user?.id) return;
 
-        const { data: schoolData, error: schoolError } = await supabase
+        const { data, error } = await supabase
-          .from('schools')
-          .select('id')
-          .eq('id', authData.session.user.id)
-          .single();
-
-        if (schoolError) throw schoolError;
-
-        const { data: teachersData, error: teachersError } = await supabase
           .from('teachers')
-          .select(`
+          .select('*')
-            id,
+          .eq('school_id', session.user.id);
-            name,
-            email,
-            subject,
-            status
-          `)
-          .eq('school_id', schoolData.id);
 
-        if (teachersError) throw teachersError;
+        if (error) throw error;
-
+        setTeachers(data || []);
-        // Buscar contagem de turmas para cada professor
-        const teachersWithCounts = await Promise.all(
-          teachersData.map(async (teacher) => {
-            const { data: countData } = await supabase
-              .rpc('get_teacher_class_count', { teacher_id: teacher.id });
-            
-            return {
-              ...teacher,
-              class_count: countData || 0
-            };
-          })
-        );
-
-        setTeachers(teachersWithCounts);
       } catch (err) {
         console.error('Erro ao buscar professores:', err);
+        setError('Erro ao buscar professores');
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchTeachers();
   }, []);
 
-  const handleInviteTeacher = () => {
+  const filteredTeachers = teachers.filter(teacher =>
-    navigate('/dashboard/professores/convidar');
+    teacher.name.toLowerCase().includes(searchTerm.toLowerCase())
-  };
-
-  const handleTeacherClick = (teacherId: string) => {
-    navigate(`/dashboard/professores/${teacherId}`);
-  };
-
-  const getStatusColor = (status: Teacher['status']) => {
-    switch (status) {
-      case 'active':
-        return 'bg-green-100 text-green-800';
-      case 'pending':
-        return 'bg-yellow-100 text-yellow-800';
-      case 'inactive':
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  const getStatusText = (status: Teacher['status']) => {
-    switch (status) {
-      case 'active':
-        return 'Ativo';
-      case 'pending':
-        return 'Pendente';
-      case 'inactive':
-        return 'Inativo';
-    }
-  };
-
-  const filteredTeachers = teachers.filter(t => 
-    t.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    t.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    (t.subject && t.subject.toLowerCase().includes(searchTerm.toLowerCase()))
   );
 
   return (
@@ -109,7 +44,7 @@ export function TeachersPage() {
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-2xl font-bold text-gray-900">Professores</h1>
         <button
-          onClick={handleInviteTeacher}
+          onClick={() => navigate('convidar')}
           className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
         >
           <Plus className="h-5 w-5" />
@@ -141,7 +76,7 @@ export function TeachersPage() {
           <div className="p-8 text-center text-gray-500">Carregando...</div>
         ) : filteredTeachers.length === 0 ? (
           <div className="p-8 text-center text-gray-500">
-            Nenhum professor encontrado
+            {searchTerm ? 'Nenhum professor encontrado' : 'Nenhum professor cadastrado'}
           </div>
         ) : (
           <div className="divide-y divide-gray-200">
@@ -149,7 +84,7 @@ export function TeachersPage() {
               <div
                 key={teacher.id}
                 className="p-4 hover:bg-gray-50 cursor-pointer"
-                onClick={() => handleTeacherClick(teacher.id)}
+                onClick={() => navigate(`/dashboard/professores/${teacher.id}`)}
               >
                 <div className="flex justify-between items-center">
                   <div>
@@ -162,25 +97,14 @@ export function TeachersPage() {
                     </div>
                   </div>
                   <div className="flex items-center gap-6">
-                    <div className="text-sm text-gray-500">
+                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                      <span className="font-medium text-gray-900">
+                      Ativo
-                        {teacher.class_count}
+                    </span>
-                      </span>{' '}
-                      turmas
-                    </div>
-                    <div className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(teacher.status)}`}>
-                      {getStatusText(teacher.status)}
-                    </div>
                     <button className="p-2 hover:bg-gray-100 rounded-full">
                       <MoreVertical className="h-5 w-5 text-gray-400" />
                     </button>
                   </div>
                 </div>
-                {teacher.subject && (
-                  <p className="mt-1 text-sm text-gray-500">
-                    {teacher.subject}
-                  </p>
-                )}
               </div>
             ))}
           </div>