feat: update dashboard to use NextAuth session, show user name, fix avatar component usage

pages/dashboard.jsx

@@ -1,15 +1,24 @@
-import { useSession, signOut } from "next-auth/react"
+import { useState } from "react"
 import { useRouter } from "next/router"
-import { useState, useEffect } from "react"
+import { useSession, signOut } from "next-auth/react"
 import AvatarSelector from "../components/AvatarSelector"
 import CategoryMenu from "../components/CategoryMenu"
 
-// Apps organizados por categoria
+export default function Dashboard() {
+  const { data: session } = useSession()
+  const router = useRouter()
+  const [selectedAvatar, setSelectedAvatar] = useState("😀")
+  const [selectedCategory, setSelectedCategory] = useState("all")
+  const [favorites, setFavorites] = useState([])
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  // Apps organized by category
   const ALL_APPS = [
     // Produtividade
     { id: 1, name: "Tendências Semanais", desc: "Notícias em alta • Top 100", path: "/apps/trendsnews", icon: "📈", category: "produtividade", favorite: false },
     { id: 2, name: "Conversor", desc: "Conversão de unidades", path: "/apps/converter", icon: "🔄", category: "produtividade", favorite: false },
-  { id: 3, name: "Calculadora", desc: "Calculos rápidos", path: "/apps/calculator", icon: "🧮", category: "produtividade", favorite: false },
+    { id: 3, name: "Calculadora", desc: "Cálculos rápidos", path: "/apps/calculator", icon: "🧮", category: "produtividade", favorite: false },
 
     // Utilidades
     { id: 4, name: "Relógio", desc: "Relógio mundial", path: "/apps/clock", icon: "⏰", category: "utilidades", favorite: false },
@@ -19,10 +28,10 @@ const ALL_APPS = [
 
     // Games
     { id: 8, name: "Jogo da Velha", desc: "Jogo da velha clássico 2 jogadores", path: "/apps/tictactoe", icon: "⭕", category: "games", favorite: false },
-    { id: 14, name: "Expedição Gold", path: "/apps/expedicao", icon: "🗺️", category: "games", desc: "Expedições para conquistar ouro" },
+    { id: 14, name: "Expedição Gold", desc: "Expedições para conquistar ouro", path: "/apps/expedicao", icon: "🗺️", category: "games", favorite: false },
-    { id: 15, name: "Human City", path: "/apps/humancity", icon: "🏙️", category: "games", desc: "Simulação de cidade estilo Sims" },
+    { id: 15, name: "Human City", desc: "Simulação de cidade estilo Sims", path: "/apps/humancity", icon: "🏙️", category: "games", favorite: false },
-    { id: 16, name: "Aurea", path: "/apps/aurea", icon: "👑", category: "games", desc: "Simulador de vida e riqueza" },
+    { id: 16, name: "Aurea", desc: "Simulador de vida e riqueza", path: "/apps/aurea", icon: "👑", category: "games", favorite: false },
-    { id: 17, name: "TerraVerse", path: "/apps/terraverse", icon: "🌍", category: "games", desc: "Game de realidade aumentada" },
+    { id: 17, name: "TerraVerse", desc: "Game de realidade aumentada", path: "/apps/terraverse", icon: "🌍", category: "games", favorite: false },
 
     // Ferramentas
     { id: 9, name: "Editor Texto", desc: "Texto simples", path: "/apps/text-editor", icon: "📝", category: "ferramentas", favorite: false },
@@ -36,36 +45,34 @@ const ALL_APPS = [
     { id: 13, name: "Copa do Mundo 2026", desc: "Tabela, grupos, notícias", path: "/apps/worldcup2026", icon: "⚽", category: "esportes", favorite: false }
   ]
 
-export default function Dashboard() {
-  const { data: session } = useSession()
-  const router = useRouter()
-  const [selectedAvatar, setSelectedAvatar] = useState("😀")
-  const [selectedCategory, setSelectedCategory] = useState("all")
-  const [favorites, setFavorites] = useState([])
-  const [apps, setApps] = useState(ALL_APPS)
-
   // Carregar favoritos do localStorage
-  useEffect(() => {
+  React.useEffect(() => {
-    const savedFavorites = localStorage.getItem("favorites")
+    const saved = localStorage.getItem("favorites")
-    const savedAvatar = localStorage.getItem("selectedAvatar")
+    if (saved) {
-    if (savedFavorites) {
+      try {
-      setFavorites(JSON.parse(savedFavorites))
+        setFavorites(JSON.parse(saved))
+      } catch (e) {
+        console.warn("Failed to parse favorites from localStorage", e)
       }
-    if (savedAvatar) {
-      setSelectedAvatar(savedAvatar)
     }
   }, [])
 
   // Salvar favoritos no localStorage
-  useEffect(() => {
+  React.useEffect(() => {
     localStorage.setItem("favorites", JSON.stringify(favorites))
   }, [favorites])
 
   // Salvar avatar no localStorage
-  useEffect(() => {
+  React.useEffect(() => {
     localStorage.setItem("selectedAvatar", selectedAvatar)
   }, [selectedAvatar])
 
+  // Carregar avatar do localStorage
+  React.useEffect(() => {
+    const saved = localStorage.getItem("selectedAvatar")
+    if (saved) setSelectedAvatar(saved)
+  }, [])
+
   const toggleFavorite = (appId) => {
     setFavorites(prev =>
       prev.includes(appId)
@@ -76,11 +83,11 @@ export default function Dashboard() {
 
   // Filtrar apps
   const filteredApps = selectedCategory === "all"
-    ? apps
+    ? ALL_APPS
-    : apps.filter(app => app.category === selectedCategory)
+    : ALL_APPS.filter(app => app.category === selectedCategory)
 
   // Apps favoritos
-  const favoriteApps = apps.filter(app => favorites.includes(app.id))
+  const favoriteApps = ALL_APPS.filter(app => favorites.includes(app.id))
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -88,12 +95,24 @@ export default function Dashboard() {
       <nav className="bg-white shadow-lg p-4 flex justify-between items-center">
         <div className="flex items-center gap-4">
           <h1 className="text-2xl font-bold">1000Apps</h1>
-          <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-semibold">FREE</span>
+          <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-semibold">
+            FREE
+          </span>
         </div>
         <div className="flex items-center gap-4">
-          <AvatarSelector selectedAvatar={selectedAvatar} onSelect={setSelectedAvatar} />
+          <AvatarSelector
-          <span className="text-gray-600">Olá, {session?.user?.name || session?.user?.username || "usuário"}!</span>
+            selectedAvatar={selectedAvatar}
-          <button onClick={() => signOut()} className="text-red-600 hover:underline font-medium">Sair</button>
+            onSelect={setSelectedAvatar}
+          />
+          <span className="text-gray-600">
+            Olá, {session?.user?.name || session?.user?.username || "usuário"}!
+          </span>
+          <button
+            onClick={() => signOut({ callbackUrl: "/" })}
+            className="text-red-600 hover:underline font-medium"
+          >
+            Sair
+          </button>
         </div>
       </nav>
 
@@ -105,45 +124,67 @@ export default function Dashboard() {
               <span>⭐</span> Favoritos
             </h2>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              {favoriteApps.map(app => (
+              {favorites.map((favId) => {
+                const app = ALL_APPS.find((a) => a.id === favId)
+                if (!app) return null
+                return (
+                  <div key={app.id} className="relative">
                     <button
-                  key={app.id}
                       onClick={() => router.push(app.path)}
-                  className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all text-left hover:scale-105 cursor-pointer border-2 border-yellow-200"
+                      className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all text-left hover:scale-105 cursor-pointer w-full"
                     >
                       <div className="text-3xl mb-2">{app.icon}</div>
                       <h3 className="font-semibold text-gray-800 text-sm">{app.name}</h3>
                       <p className="text-xs text-gray-500 mt-1">{app.desc}</p>
                     </button>
-              ))}
+                    <button
+                      onClick={() => toggleFavorite(app.id)}
+                      className="absolute top-2 right-2 text-lg"
+                      title={favorites.includes(favId) ? "Remover dos favoritos" : "Adicionar aos favoritos"}
+                    >
+                      {favorites.includes(favId) ? "⭐" : "☆"}
+                    </button>
+                  </div>
+                )
+              })}
             </div>
           </div>
         )}
 
         {/* Category Filter */}
-        <CategoryMenu selectedCategory={selectedCategory} onSelect={setSelectedCategory} />
+        <CategoryMenu
+          selectedCategory={selectedCategory}
+          onSelect={setSelectedCategory}
+        />
 
         {/* Apps Grid */}
         <div className="mb-6">
           <h2 className="text-3xl font-bold text-gray-800 mb-2">
-            {selectedCategory === "all" ? "Todos os Apps" : 
+            {selectedCategory === "all"
-             selectedCategory === "produtividade" ? "Produtividade" :
+              ? "Todos os Apps"
-             selectedCategory === "utilidades" ? "Utilidades" :
+              : selectedCategory === "produtividade"
-             selectedCategory === "games" ? "Games" :
+              ? "Produtividade"
-             selectedCategory === "ferramentas" ? "Ferramentas" :
+              : selectedCategory === "utilidades"
-             selectedCategory === "educacao" ? "Educação" :
+              ? "Utilidades"
-             selectedCategory === "entretenimento" ? "Entretenimento" :
+              : selectedCategory === "games"
-             selectedCategory === "esportes" ? "Esportes" : "Apps"}
+              ? "Games"
+              : selectedCategory === "ferramentas"
+              ? "Ferramentas"
+              : selectedCategory === "educacao"
+              ? "Educação"
+              : selectedCategory === "esportes"
+              ? "Esportes"
+              : "Apps"}
           </h2>
           <p className="text-gray-500">
             {selectedCategory === "all"
-              ? `${apps.length} apps disponíveis` 
+              ? `${ALL_APPS.length} apps disponíveis`
               : `${filteredApps.length} apps nesta categoria`}
           </p>
         </div>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {filteredApps.map(app => (
+          {filteredApps.map((app) => (
             <div key={app.id} className="relative">
               <button
                 onClick={() => router.push(app.path)}
@@ -167,9 +208,3 @@ export default function Dashboard() {
     </div>
   )
 }
-
-export async function getServerSideProps() {
-  return {
-    props: {},
-  }
-}