story-generator/src/pages/dashboard/DashboardHome.tsx

import React from 'react';
import { Users, GraduationCap, BookOpen } from 'lucide-react';
import { useDatabase } from '../../hooks/useDatabase';

export function DashboardHome() {
  const { loading, error } = useDatabase();
  const [stats, setStats] = React.useState({
    totalClasses: 0,
    totalTeachers: 0,
    totalStudents: 0,
    totalStories: 0
  });

  React.useEffect(() => {
    // Implementar busca de estatísticas
  }, []);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>

      {error && (
        <div className="mb-4 p-4 bg-red-50 text-red-600 rounded-lg">
          {error}
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-purple-100 rounded-lg">
              <Users className="h-6 w-6 text-purple-600" />
            </div>
            <div>
              <p className="text-sm text-gray-600">Total de Turmas</p>
              <p className="text-2xl font-semibold text-gray-900">
                {loading ? '...' : stats.totalClasses}
              </p>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-blue-100 rounded-lg">
              <GraduationCap className="h-6 w-6 text-blue-600" />
            </div>
            <div>
              <p className="text-sm text-gray-600">Total de Professores</p>
              <p className="text-2xl font-semibold text-gray-900">
                {loading ? '...' : stats.totalTeachers}
              </p>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-green-100 rounded-lg">
              <Users className="h-6 w-6 text-green-600" />
            </div>
            <div>
              <p className="text-sm text-gray-600">Total de Alunos</p>
              <p className="text-2xl font-semibold text-gray-900">
                {loading ? '...' : stats.totalStudents}
              </p>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">
            Últimas Turmas
          </h2>
          {/* Lista de últimas turmas */}
        </div>

        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">
            Histórias Recentes
          </h2>
          {/* Lista de histórias recentes */}
        </div>
      </div>
    </div>
  );
}