Add src/app/dashboard/page.tsx

src/app/dashboard/page.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { LogOut, User, Settings, Bell } from 'lucide-react';
+
+interface UserSession {
+  email: string;
+  loginTime: string;
+  token: string;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(true);
+  const [userSession, setUserSession] = useState<UserSession | null>(null);
+  const [lastActivityTime, setLastActivityTime] = useState<string>("");
+
+  useEffect(() => {
+    // Check if user is logged in
+    const isLoggedIn = sessionStorage.getItem('isLoggedIn');
+    if (!isLoggedIn) {
+      router.push('/login');
+      return;
+    }
+
+    // Retrieve session data
+    const sessionData = localStorage.getItem('userSession');
+    if (sessionData) {
+      const parsed = JSON.parse(sessionData);
+      setUserSession(parsed);
+      const loginTime = new Date(parsed.loginTime);
+      setLastActivityTime(loginTime.toLocaleString('pt-BR'));
+    }
+
+    setIsLoading(false);
+  }, [router]);
+
+  const handleLogout = () => {
+    if (window.confirm('Deseja sair da sua conta?')) {
+      localStorage.removeItem('userSession');
+      sessionStorage.removeItem('isLoggedIn');
+      router.push('/');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-background via-background to-background-accent">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-cta"></div>
+      </div>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Sair", onClick: handleLogout }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-br from-background via-background to-background-accent py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          {/* Welcome Header */}
+          <div className="mb-12">
+            <h1 className="text-5xl font-extrabold text-foreground mb-2">Bem-vindo de Volta! 👋</h1>
+            <p className="text-foreground/60 text-lg">Sua jornada de fitness começa aqui</p>
+          </div>
+
+          {/* User Info Card */}
+          {userSession && (
+            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur mb-8">
+              <div className="flex items-start justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="w-16 h-16 rounded-full bg-primary-cta/20 border-2 border-primary-cta flex items-center justify-center">
+                    <User className="w-8 h-8 text-primary-cta" />
+                  </div>
+                  <div>
+                    <p className="text-sm text-foreground/60">Email da Conta</p>
+                    <p className="text-2xl font-semibold text-foreground">{userSession.email}</p>
+                    <p className="text-sm text-foreground/50 mt-1">Login: {lastActivityTime}</p>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <button className="p-3 rounded-full bg-secondary-cta/20 hover:bg-secondary-cta/30 transition-colors text-secondary-cta">
+                    <Settings className="w-6 h-6" />
+                  </button>
+                  <button className="p-3 rounded-full bg-secondary-cta/20 hover:bg-secondary-cta/30 transition-colors text-secondary-cta">
+                    <Bell className="w-6 h-6" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Dashboard Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            {/* Stats Card 1 */}
+            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <p className="text-foreground/60 text-sm mb-2">Treinos Completos</p>
+              <p className="text-4xl font-extrabold text-primary-cta mb-2">12</p>
+              <p className="text-sm text-accent">↑ 2 mais que a semana passada</p>
+            </div>
+
+            {/* Stats Card 2 */}
+            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <p className="text-foreground/60 text-sm mb-2">Calorias Queimadas</p>
+              <p className="text-4xl font-extrabold text-secondary-cta mb-2">2,450</p>
+              <p className="text-sm text-accent">Meta: 2,000 calorias</p>
+            </div>
+
+            {/* Stats Card 3 */}
+            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <p className="text-foreground/60 text-sm mb-2">Sequência de Dias</p>
+              <p className="text-4xl font-extrabold text-accent mb-2">8</p>
+              <p className="text-sm text-accent">dias consecutivos ✨</p>
+            </div>
+          </div>
+
+          {/* Quick Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <h3 className="text-2xl font-bold text-foreground mb-4">🏋️ Iniciar Treino</h3>
+              <p className="text-foreground/60 mb-6">Comece um treino personalizado com base em sua biometria</p>
+              <button className="w-full py-3 px-4 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold rounded-full transition-all duration-300">
+                Começar Agora
+              </button>
+            </div>
+
+            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <h3 className="text-2xl font-bold text-foreground mb-4">🥗 Plano Nutricional</h3>
+              <p className="text-foreground/60 mb-6">Veja suas refeições planejadas para hoje e suas macros</p>
+              <button className="w-full py-3 px-4 bg-secondary-cta hover:bg-secondary-cta/90 text-white font-semibold rounded-full transition-all duration-300">
+                Ver Plano
+              </button>
+            </div>
+          </div>
+
+          {/* Session Info */}
+          <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+            <h3 className="text-lg font-semibold text-foreground mb-4">Informações da Sessão</h3>
+            <div className="space-y-2 text-sm text-foreground/60">
+              <p>🔐 Token de Sessão: {userSession?.token?.substring(0, 20)}...</p>
+              <p>📱 Navegador: {typeof navigator !== 'undefined' ? navigator.userAgent.substring(0, 50) : 'N/A'}...</p>
+              <p>🌐 Plataforma: {typeof window !== 'undefined' ? window.location.hostname : 'N/A'}</p>
+            </div>
+          </div>
+
+          {/* Logout Button */}
+          <div className="mt-8 flex justify-center">
+            <button
+              onClick={handleLogout}
+              className="px-8 py-3 bg-red-500/20 hover:bg-red-500/30 border border-red-500/50 text-red-500 font-semibold rounded-full transition-all duration-300 flex items-center gap-2"
+            >
+              <LogOut className="w-5 h-5" />
+              Sair da Conta
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}