>
+ }
+}
diff --git a/src/router.tsx b/src/router.tsx
index adcf1a9..bde43d8 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,4 +1,5 @@
import { createRouter, useRouter } from "@tanstack/react-router";
+import { QueryClient } from "@tanstack/react-query";
import { routeTree } from "./routeTree.gen";
function DefaultErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
@@ -23,9 +24,9 @@ function DefaultErrorComponent({ error, reset }: { error: Error; reset: () => vo
/>
- Something went wrong
+ Algo deu errado
- An unexpected error occurred. Please try again.
+ Ocorreu um erro inesperado. Tente novamente.
{import.meta.env.DEV && error.message && (
@@ -38,15 +39,15 @@ function DefaultErrorComponent({ error, reset }: { error: Error; reset: () => vo
router.invalidate();
reset();
}}
- className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+ className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-dark"
>
- Try again
+ Tentar novamente
- Go home
+ Ir para o início
@@ -55,9 +56,20 @@ function DefaultErrorComponent({ error, reset }: { error: Error; reset: () => vo
}
export const getRouter = () => {
+ // Fresh QueryClient per request — never module-level (vaza dados entre SSR requests)
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 30_000,
+ retry: 1,
+ refetchOnWindowFocus: false,
+ },
+ },
+ });
+
const router = createRouter({
routeTree,
- context: {},
+ context: { queryClient },
scrollRestoration: true,
defaultPreloadStaleTime: 0,
defaultErrorComponent: DefaultErrorComponent,
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index ad8467f..3605010 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,9 +1,15 @@
-import { Outlet, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
+import { Outlet, createRootRouteWithContext, HeadContent, Scripts, Link } from "@tanstack/react-router";
+import type { QueryClient } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/sonner";
import { ThemeProvider } from "@/components/theme-provider";
import appCss from "../styles.css?url";
+interface RouterContext {
+ queryClient: QueryClient;
+}
+
function NotFoundComponent() {
return (
@@ -14,19 +20,19 @@ function NotFoundComponent() {
A página que você procura não existe ou foi movida.
-
-
-
Login
-
- A página de login completa será implementada na Etapa 2 (Auth + Supabase).
-
-
← Voltar para o início
+
+ Não tem conta?{" "}
+
+ Criar conta
+
+
+ }
+ >
+
+
+
-
+
+
+
);
}
diff --git a/src/routes/painel.configuracoes.tsx b/src/routes/painel.configuracoes.tsx
new file mode 100644
index 0000000..9be147e
--- /dev/null
+++ b/src/routes/painel.configuracoes.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { createFileRoute } from "@tanstack/react-router";
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { IMaskInput } from "react-imask";
+import { toast } from "sonner";
+import { Loader2, LogOut } from "lucide-react";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/use-auth";
+import { useProfile } from "@/hooks/use-profile";
+import { translateAuthError } from "@/lib/auth-errors";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const Route = createFileRoute("/painel/configuracoes")({
+ component: SettingsPage,
+});
+
+const profileSchema = z.object({
+ full_name: z.string().min(2, "Informe seu nome completo.").max(120),
+ company_name: z.string().max(120).optional().or(z.literal("")),
+ cpf_cnpj: z.string().optional().or(z.literal("")),
+ phone: z.string().optional().or(z.literal("")),
+});
+type ProfileForm = z.infer
;
+
+function SettingsPage() {
+ const { user } = useAuth();
+ const { data: profile, isLoading } = useProfile();
+ const queryClient = useQueryClient();
+
+ const { register, handleSubmit, setValue, watch, reset, formState: { errors } } = useForm({
+ resolver: zodResolver(profileSchema),
+ });
+
+ useEffect(() => {
+ if (profile) {
+ reset({
+ full_name: profile.full_name,
+ company_name: profile.company_name ?? "",
+ cpf_cnpj: profile.cpf_cnpj ?? "",
+ phone: profile.phone ?? "",
+ });
+ }
+ }, [profile, reset]);
+
+ const cpfCnpj = watch("cpf_cnpj") || "";
+ const phone = watch("phone") || "";
+ const cpfCnpjDigits = cpfCnpj.replace(/\D/g, "");
+ const cpfCnpjMask = cpfCnpjDigits.length > 11 ? "00.000.000/0000-00" : "000.000.000-00";
+
+ const updateProfile = useMutation({
+ mutationFn: async (data: ProfileForm) => {
+ if (!user) throw new Error("Sem sessão");
+ const { error } = await supabase
+ .from("profiles")
+ .update({
+ full_name: data.full_name,
+ company_name: data.company_name || null,
+ cpf_cnpj: data.cpf_cnpj || null,
+ phone: data.phone || null,
+ })
+ .eq("id", user.id);
+ if (error) throw error;
+ },
+ onSuccess: () => {
+ toast.success("Perfil atualizado com sucesso.");
+ queryClient.invalidateQueries({ queryKey: ["profile"] });
+ },
+ onError: (e: Error) => toast.error(translateAuthError(e.message)),
+ });
+
+ const signOutAll = async () => {
+ const { error } = await supabase.auth.signOut({ scope: "global" });
+ if (error) toast.error(translateAuthError(error.message));
+ else toast.success("Saiu de todos os dispositivos.");
+ };
+
+ if (isLoading) return ;
+
+ return (
+
+
+
+
+ Perfil
+ Informações para faturamento e suporte.
+
+
+
+
+
+ Segurança
+
+ Para alterar sua senha, use o link de recuperação no e-mail.
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+ Plano atual
+ {subscription && plan ? (
+
+
+
+
+
+
+ ) : (
+
+ Você ainda não possui uma assinatura ativa.
+
+ )}
+
+
+ )}
+
+
+ Histórico de pagamentos
+
+ Seu histórico aparecerá aqui após a primeira cobrança.
+
+
+
+
+ Método de pagamento
+
+
+ Nenhum método cadastrado
+
+
+
+
+
+
+
+ );
+ }
+
+ const firstName = (profile?.full_name || "").split(" ")[0] || "por aqui";
+
+ return (
+
+
+
+
+
+ {!subscription &&
}
+
+ {subscription && (subscription.status === "incomplete" || subscription.status === "active") && (
+
+ )}
+
+
+
+
+
Escolha um plano para começar
+
+ Em poucos minutos seu agente Mika estará disponível no Telegram, com memória persistente e
+ skills personalizadas.
+
+
+
+
+
+
+
+
+
Seu agente Mika está sendo provisionado
+
+ Você receberá um e-mail quando estiver pronto — geralmente em até 10 minutos.
+
+
+
+
+
+ {steps.map((step, i) => (
+ -
+
+
+ {step.state === "active" ? (
+
+ ) : step.state === "pending" ? (
+ i + 1
+ ) : (
+
+ )}
+
+
+ {step.label}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setMobileOpen(false)} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {profile?.full_name || "Usuário"}
+ {user?.email}
+
+
+
+
+ Perfil
+
+
+
+ Sair
+
+
+
+
+
+ Se o e-mail informado existir em nossa base, você receberá o link em alguns minutos.
+ Verifique também a pasta de spam.
+
+
+
-
-
-
Criar conta
-
- Cadastro completo será implementado na Etapa 2.
-
- {plan && (
-
- Plano selecionado: {plan} · {cycle === "yearly" ? "anual" : "mensal"}
+ const navigate = useNavigate();
+ const [submitting, setSubmitting] = useState(false);
+ const [needsConfirm, setNeedsConfirm] = useState(null);
+
+ const {
+ register,
+ handleSubmit,
+ setValue,
+ watch,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: { accept_terms: false as unknown as true },
+ });
+
+ const password = watch("password") || "";
+
+ const onSubmit = async (data: FormValues) => {
+ if (passwordStrength(data.password) < 2) {
+ toast.error("Escolha uma senha mais forte.");
+ return;
+ }
+ setSubmitting(true);
+ const { data: signupData, error } = await supabase.auth.signUp({
+ email: data.email,
+ password: data.password,
+ options: {
+ data: { full_name: data.full_name },
+ emailRedirectTo: `${window.location.origin}/painel`,
+ },
+ });
+ setSubmitting(false);
+ if (error) {
+ toast.error(translateAuthError(error.message));
+ return;
+ }
+ // Sessão presente = e-mail já confirmado (auto-confirm desligado, então normalmente null)
+ if (signupData.session) {
+ toast.success("Conta criada!");
+ if (plan && plan !== "enterprise") {
+ // TODO Etapa 3: chamar create-checkout-session com plan/cycle
+ navigate({ to: "/painel" });
+ } else {
+ navigate({ to: "/painel" });
+ }
+ return;
+ }
+ setNeedsConfirm(data.email);
+ };
+
+ const resend = async () => {
+ if (!needsConfirm) return;
+ const { error } = await supabase.auth.resend({ type: "signup", email: needsConfirm });
+ if (error) {
+ toast.error(translateAuthError(error.message));
+ return;
+ }
+ toast.success("E-mail reenviado. Confira sua caixa de entrada.");
+ };
+
+ if (needsConfirm) {
+ return (
+
+
+
+
+
+
+ Clique no link do e-mail para ativar sua conta. Não esqueça de checar a pasta de spam.
- )}
-
- ← Voltar para o início
+
+
+ Voltar para o login
+
+
+ );
+ }
+
+ return (
+
+ Já tem conta?{" "}
+
+ Entrar
+
+
+ }
+ >
+
+
+
-