From a59a9a90713c68d71cbf1a03792e08e8a74f7aef Mon Sep 17 00:00:00 2001
From: Erik Silva <erik@stackbyte.cloud>
Date: Mon, 1 Dec 2025 01:56:58 -0300
Subject: [PATCH] feat(frontend): Complete authentication and dashboard pages
 with task management

---
 frontend-next/app/(auth)/layout.tsx          |  22 ++
 frontend-next/app/(auth)/login/page.tsx      | 119 +++++++
 frontend-next/app/(auth)/signup/page.tsx     | 151 +++++++++
 frontend-next/app/(dashboard)/layout.tsx     |  26 ++
 frontend-next/app/(dashboard)/tasks/page.tsx | 322 +++++++++++++++++++
 frontend-next/app/page.tsx                   |  77 ++---
 6 files changed, 658 insertions(+), 59 deletions(-)
 create mode 100644 frontend-next/app/(auth)/layout.tsx
 create mode 100644 frontend-next/app/(auth)/login/page.tsx
 create mode 100644 frontend-next/app/(auth)/signup/page.tsx
 create mode 100644 frontend-next/app/(dashboard)/layout.tsx
 create mode 100644 frontend-next/app/(dashboard)/tasks/page.tsx

diff --git a/frontend-next/app/(auth)/layout.tsx b/frontend-next/app/(auth)/layout.tsx
new file mode 100644
index 0000000..d493598
--- /dev/null
+++ b/frontend-next/app/(auth)/layout.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/stores';
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  useEffect(() => {
+    if (user) {
+      router.push('/dashboard/tasks');
+    }
+  }, [user, router]);
+
+  return <>{children}</>;
+}
diff --git a/frontend-next/app/(auth)/login/page.tsx b/frontend-next/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..093de48
--- /dev/null
+++ b/frontend-next/app/(auth)/login/page.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/stores';
+import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@/components';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { login, isLoading, error } = useAuth();
+
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+  });
+  const [validationErrors, setValidationErrors] = useState<{
+    email: string;
+    password: string;
+  }>({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setValidationErrors((prev) => ({ ...prev, [name]: '' }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setValidationErrors({ email: '', password: '' });
+
+    // Validação básica
+    const errors: { email: string; password: string } = { email: '', password: '' };
+    if (!formData.email) errors.email = 'Email é obrigatório';
+    if (!formData.password) errors.password = 'Senha é obrigatória';
+
+    if (Object.keys(errors).length > 0) {
+      setValidationErrors(errors);
+      return;
+    }
+
+    try {
+      await login(formData);
+      router.push('/dashboard/tasks');
+    } catch (err) {
+      // Erro já está no store
+      console.error('Login error:', err);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-center">📋 Task Manager</CardTitle>
+          <p className="text-center text-gray-600 text-sm mt-2">
+            Faça login para gerenciar suas tarefas
+          </p>
+        </CardHeader>
+
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <Input
+              label="Email"
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              error={validationErrors.email}
+              placeholder="seu@email.com"
+              required
+            />
+
+            <Input
+              label="Senha"
+              type="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              error={validationErrors.password}
+              placeholder="Sua senha"
+              required
+            />
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-700 text-sm">
+                {error}
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              variant="primary"
+              fullWidth
+              isLoading={isLoading}
+            >
+              {isLoading ? 'Entrando...' : 'Entrar'}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-gray-600 text-sm">
+              Não tem conta?{' '}
+              <Link
+                href="/auth/signup"
+                className="text-blue-600 hover:text-blue-700 font-medium"
+              >
+                Criar conta
+              </Link>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend-next/app/(auth)/signup/page.tsx b/frontend-next/app/(auth)/signup/page.tsx
new file mode 100644
index 0000000..33c23c5
--- /dev/null
+++ b/frontend-next/app/(auth)/signup/page.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/stores';
+import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@/components';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const { signup, isLoading, error } = useAuth();
+
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+  const [validationErrors, setValidationErrors] = useState<{
+    email: string;
+    password: string;
+    confirmPassword: string;
+  }>({
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setValidationErrors((prev) => ({ ...prev, [name]: '' }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setValidationErrors({ email: '', password: '', confirmPassword: '' });
+
+    // Validação
+    const errors: typeof validationErrors = { email: '', password: '', confirmPassword: '' };
+
+    if (!formData.email) {
+      errors.email = 'Email é obrigatório';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      errors.email = 'Email inválido';
+    }
+
+    if (!formData.password) {
+      errors.password = 'Senha é obrigatória';
+    } else if (formData.password.length < 6) {
+      errors.password = 'Senha deve ter no mínimo 6 caracteres';
+    }
+
+    if (!formData.confirmPassword) {
+      errors.confirmPassword = 'Confirmação de senha é obrigatória';
+    } else if (formData.password !== formData.confirmPassword) {
+      errors.confirmPassword = 'Senhas não correspondem';
+    }
+
+    if (Object.values(errors).some((e) => e)) {
+      setValidationErrors(errors);
+      return;
+    }
+
+    try {
+      await signup({
+        email: formData.email,
+        password: formData.password,
+      });
+      router.push('/dashboard/tasks');
+    } catch (err) {
+      console.error('Signup error:', err);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-center">📋 Task Manager</CardTitle>
+          <p className="text-center text-gray-600 text-sm mt-2">
+            Crie sua conta para começar
+          </p>
+        </CardHeader>
+
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <Input
+              label="Email"
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              error={validationErrors.email}
+              placeholder="seu@email.com"
+              required
+            />
+
+            <Input
+              label="Senha"
+              type="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              error={validationErrors.password}
+              placeholder="Mínimo 6 caracteres"
+              required
+            />
+
+            <Input
+              label="Confirmar Senha"
+              type="password"
+              name="confirmPassword"
+              value={formData.confirmPassword}
+              onChange={handleChange}
+              error={validationErrors.confirmPassword}
+              placeholder="Repita sua senha"
+              required
+            />
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-700 text-sm">
+                {error}
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              variant="primary"
+              fullWidth
+              isLoading={isLoading}
+            >
+              {isLoading ? 'Criando conta...' : 'Criar Conta'}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-gray-600 text-sm">
+              Já tem conta?{' '}
+              <Link
+                href="/auth/login"
+                className="text-blue-600 hover:text-blue-700 font-medium"
+              >
+                Faça login
+              </Link>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend-next/app/(dashboard)/layout.tsx b/frontend-next/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..9486ca3
--- /dev/null
+++ b/frontend-next/app/(dashboard)/layout.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/stores';
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/auth/login');
+    }
+  }, [user, router]);
+
+  if (!user) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
diff --git a/frontend-next/app/(dashboard)/tasks/page.tsx b/frontend-next/app/(dashboard)/tasks/page.tsx
new file mode 100644
index 0000000..9272a53
--- /dev/null
+++ b/frontend-next/app/(dashboard)/tasks/page.tsx
@@ -0,0 +1,322 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth, useTasks } from '@/lib/stores';
+import { Button, Card, CardContent, CardHeader, CardTitle, Checkbox, Input } from '@/components';
+import { Trash2, Edit2, Plus, LogOut } from 'lucide-react';
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const { tasks, filters, setFilters, fetchTasks, createTask, updateTask, deleteTask, isLoading } = useTasks();
+
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newTask, setNewTask] = useState({
+    title: '',
+    description: '',
+    dueDate: '',
+  });
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/auth/login');
+      return;
+    }
+    fetchTasks();
+  }, [user, router, fetchTasks]);
+
+  const handleCreateTask = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTask.title.trim()) return;
+
+    try {
+      await createTask({
+        title: newTask.title,
+        description: newTask.description,
+        dueDate: newTask.dueDate ? new Date(newTask.dueDate).toISOString() : undefined,
+      });
+      setNewTask({ title: '', description: '', dueDate: '' });
+      setShowCreateForm(false);
+      fetchTasks();
+    } catch (err) {
+      console.error('Error creating task:', err);
+    }
+  };
+
+  const handleToggleTask = async (taskId: string, completed: boolean) => {
+    try {
+      await updateTask(taskId, { completed: !completed });
+      fetchTasks();
+    } catch (err) {
+      console.error('Error updating task:', err);
+    }
+  };
+
+  const handleDeleteTask = async (taskId: string) => {
+    if (!confirm('Tem certeza que deseja deletar essa tarefa?')) return;
+    try {
+      await deleteTask(taskId);
+      fetchTasks();
+    } catch (err) {
+      console.error('Error deleting task:', err);
+    }
+  };
+
+  const handleLogout = async () => {
+    await logout();
+    router.push('/auth/login');
+  };
+
+  const filteredTasks = tasks.filter((task) => {
+    if (filters.completed !== undefined && task.completed !== filters.completed) {
+      return false;
+    }
+    if (filters.category && task.category !== filters.category) {
+      return false;
+    }
+    if (filters.priority && task.priority !== filters.priority) {
+      return false;
+    }
+    return true;
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">📋 Task Manager</h1>
+            <p className="text-sm text-gray-600">Bem-vindo, {user?.email}</p>
+          </div>
+          <Button
+            variant="ghost"
+            onClick={handleLogout}
+            className="flex items-center gap-2"
+          >
+            <LogOut size={18} />
+            Sair
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 py-8">
+        {/* Filters and Create Button */}
+        <div className="flex flex-col gap-4 mb-8">
+          <div className="flex justify-between items-center">
+            <h2 className="text-xl font-semibold text-gray-900">Minhas Tarefas</h2>
+            <Button
+              variant="primary"
+              onClick={() => setShowCreateForm(!showCreateForm)}
+              className="flex items-center gap-2"
+            >
+              <Plus size={18} />
+              Nova Tarefa
+            </Button>
+          </div>
+
+          {/* Filters */}
+          <div className="flex gap-4 flex-wrap">
+            <select
+              value={filters.completed !== undefined ? (filters.completed ? 'completed' : 'pending') : 'all'}
+              onChange={(e) => {
+                const value = e.target.value;
+                setFilters({
+                  ...filters,
+                  completed: value === 'all' ? undefined : value === 'completed',
+                });
+              }}
+              className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="all">Todas as Tarefas</option>
+              <option value="pending">Pendentes</option>
+              <option value="completed">Concluídas</option>
+            </select>
+
+            <select
+              value={filters.priority || 'all'}
+              onChange={(e) => {
+                const value = e.target.value;
+                setFilters({
+                  ...filters,
+                  priority: value === 'all' ? undefined : (value as 'low' | 'medium' | 'high'),
+                });
+              }}
+              className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="all">Todas Prioridades</option>
+              <option value="low">Baixa</option>
+              <option value="medium">Média</option>
+              <option value="high">Alta</option>
+            </select>
+
+            <select
+              value={filters.category || 'all'}
+              onChange={(e) => {
+                const value = e.target.value;
+                setFilters({
+                  ...filters,
+                  category: value === 'all' ? undefined : value,
+                });
+              }}
+              className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="all">Todas Categorias</option>
+              <option value="work">Trabalho</option>
+              <option value="personal">Pessoal</option>
+              <option value="health">Saúde</option>
+              <option value="shopping">Compras</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Create Task Form */}
+        {showCreateForm && (
+          <Card className="mb-8">
+            <CardHeader>
+              <CardTitle>Criar Nova Tarefa</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleCreateTask} className="space-y-4">
+                <Input
+                  label="Título"
+                  type="text"
+                  value={newTask.title}
+                  onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+                  placeholder="Título da tarefa"
+                  required
+                />
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Descrição
+                  </label>
+                  <textarea
+                    value={newTask.description}
+                    onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
+                    placeholder="Descrição da tarefa"
+                    rows={3}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                </div>
+
+                <Input
+                  label="Data de Vencimento"
+                  type="date"
+                  value={newTask.dueDate}
+                  onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
+                />
+
+                <div className="flex gap-2">
+                  <Button type="submit" variant="primary">
+                    Criar Tarefa
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => setShowCreateForm(false)}
+                  >
+                    Cancelar
+                  </Button>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Tasks List */}
+        {isLoading ? (
+          <div className="text-center py-12">
+            <p className="text-gray-600">Carregando tarefas...</p>
+          </div>
+        ) : filteredTasks.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
+            <p className="text-gray-600">Nenhuma tarefa encontrada</p>
+            <Button
+              variant="primary"
+              onClick={() => setShowCreateForm(true)}
+              className="mt-4 mx-auto flex items-center gap-2"
+            >
+              <Plus size={18} />
+              Criar sua primeira tarefa
+            </Button>
+          </div>
+        ) : (
+          <div className="grid gap-4">
+            {filteredTasks.map((task) => (
+              <Card key={task.id}>
+                <CardContent className="py-4">
+                  <div className="flex items-start gap-4">
+                    <Checkbox
+                      checked={task.completed}
+                      onChange={() => handleToggleTask(task.id, task.completed)}
+                    />
+
+                    <div className="flex-1">
+                      <h3
+                        className={`font-medium ${
+                          task.completed
+                            ? 'line-through text-gray-500'
+                            : 'text-gray-900'
+                        }`}
+                      >
+                        {task.title}
+                      </h3>
+                      {task.description && (
+                        <p className="text-sm text-gray-600 mt-1">
+                          {task.description}
+                        </p>
+                      )}
+
+                      <div className="flex gap-2 mt-2 flex-wrap">
+                        {task.category && (
+                          <span className="inline-block px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">
+                            {task.category}
+                          </span>
+                        )}
+                        {task.priority && (
+                          <span
+                            className={`inline-block px-2 py-1 text-xs rounded ${
+                              task.priority === 'high'
+                                ? 'bg-red-100 text-red-800'
+                                : task.priority === 'medium'
+                                  ? 'bg-yellow-100 text-yellow-800'
+                                  : 'bg-green-100 text-green-800'
+                            }`}
+                          >
+                            {task.priority === 'high'
+                              ? 'Alta'
+                              : task.priority === 'medium'
+                                ? 'Média'
+                                : 'Baixa'}
+                          </span>
+                        )}
+                        {task.due_date && (
+                          <span className="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded">
+                            {new Date(task.due_date).toLocaleDateString('pt-BR')}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleDeleteTask(task.id)}
+                        className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                        title="Deletar tarefa"
+                      >
+                        <Trash2 size={18} />
+                      </button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-next/app/page.tsx b/frontend-next/app/page.tsx
index 295f8fd..0de607c 100644
--- a/frontend-next/app/page.tsx
+++ b/frontend-next/app/page.tsx
@@ -1,65 +1,24 @@
-import Image from "next/image";
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/stores';
 
 export default function Home() {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  useEffect(() => {
+    if (user) {
+      router.push('/dashboard/tasks');
+    } else {
+      router.push('/auth/login');
+    }
+  }, [user, router]);
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
+    <div className="flex items-center justify-center min-h-screen">
+      <p>Redirecionando...</p>
     </div>
   );
 }