feat(ajustes): add API tokens management UI for OpenSheets Companion

Add a new "Dispositivos" tab in settings page that allows users to:
- Generate new API tokens for connecting Android devices
- View connected devices with last used time and IP
- Revoke tokens to disconnect devices

This provides the web UI needed for users to obtain tokens
for the OpenSheets Companion Android app.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/(dashboard)/ajustes/actions.ts

@@ -2,12 +2,13 @@
 
 import { auth } from "@/lib/auth/config";
 import { db, schema } from "@/lib/db";
-import { pagadores } from "@/db/schema";
+import { apiTokens, pagadores } from "@/db/schema";
 import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
-import { eq, and, ne } from "drizzle-orm";
+import { eq, and, ne, isNull } from "drizzle-orm";
 import { headers } from "next/headers";
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
+import { createHash, randomBytes } from "crypto";
 
 type ActionResponse<T = void> = {
   success: boolean;
@@ -412,3 +413,150 @@ export async function updatePreferencesAction(
     };
   }
 }
+
+// API Token Actions
+
+const createApiTokenSchema = z.object({
+  name: z.string().min(1, "Nome do dispositivo é obrigatório").max(100),
+});
+
+const revokeApiTokenSchema = z.object({
+  tokenId: z.string().uuid("ID do token inválido"),
+});
+
+function generateSecureToken(): string {
+  const prefix = "os";
+  const randomPart = randomBytes(32).toString("base64url");
+  return `${prefix}_${randomPart}`;
+}
+
+function hashToken(token: string): string {
+  return createHash("sha256").update(token).digest("hex");
+}
+
+export async function createApiTokenAction(
+  data: z.infer<typeof createApiTokenSchema>
+): Promise<ActionResponse<{ token: string; tokenId: string }>> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Não autenticado",
+      };
+    }
+
+    const validated = createApiTokenSchema.parse(data);
+
+    // Generate token
+    const token = generateSecureToken();
+    const tokenHash = hashToken(token);
+    const tokenPrefix = token.substring(0, 10);
+
+    // Save to database
+    const [newToken] = await db
+      .insert(apiTokens)
+      .values({
+        userId: session.user.id,
+        name: validated.name,
+        tokenHash,
+        tokenPrefix,
+        expiresAt: null, // No expiration for now
+      })
+      .returning({ id: apiTokens.id });
+
+    revalidatePath("/ajustes");
+
+    return {
+      success: true,
+      message: "Token criado com sucesso",
+      data: {
+        token,
+        tokenId: newToken.id,
+      },
+    };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.issues[0]?.message || "Dados inválidos",
+      };
+    }
+
+    console.error("Erro ao criar token:", error);
+    return {
+      success: false,
+      error: "Erro ao criar token. Tente novamente.",
+    };
+  }
+}
+
+export async function revokeApiTokenAction(
+  data: z.infer<typeof revokeApiTokenSchema>
+): Promise<ActionResponse> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Não autenticado",
+      };
+    }
+
+    const validated = revokeApiTokenSchema.parse(data);
+
+    // Find token and verify ownership
+    const [existingToken] = await db
+      .select()
+      .from(apiTokens)
+      .where(
+        and(
+          eq(apiTokens.id, validated.tokenId),
+          eq(apiTokens.userId, session.user.id),
+          isNull(apiTokens.revokedAt)
+        )
+      )
+      .limit(1);
+
+    if (!existingToken) {
+      return {
+        success: false,
+        error: "Token não encontrado",
+      };
+    }
+
+    // Revoke token
+    await db
+      .update(apiTokens)
+      .set({
+        revokedAt: new Date(),
+      })
+      .where(eq(apiTokens.id, validated.tokenId));
+
+    revalidatePath("/ajustes");
+
+    return {
+      success: true,
+      message: "Token revogado com sucesso",
+    };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.issues[0]?.message || "Dados inválidos",
+      };
+    }
+
+    console.error("Erro ao revogar token:", error);
+    return {
+      success: false,
+      error: "Erro ao revogar token. Tente novamente.",
+    };
+  }
+}

app/(dashboard)/ajustes/page.tsx

@@ -1,3 +1,4 @@
+import { ApiTokensForm } from "@/components/ajustes/api-tokens-form";
 import { DeleteAccountForm } from "@/components/ajustes/delete-account-form";
 import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
 import { UpdateNameForm } from "@/components/ajustes/update-name-form";
@@ -7,7 +8,8 @@ import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { auth } from "@/lib/auth/config";
 import { db, schema } from "@/lib/db";
-import { eq } from "drizzle-orm";
+import { apiTokens } from "@/db/schema";
+import { eq, desc } from "drizzle-orm";
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -42,11 +44,28 @@ export default async function Page() {
   // Se o providerId for "google", o usuário usa Google OAuth
   const authProvider = userAccount?.providerId || "credential";
 
+  // Buscar tokens de API do usuário
+  const userApiTokens = await db
+    .select({
+      id: apiTokens.id,
+      name: apiTokens.name,
+      tokenPrefix: apiTokens.tokenPrefix,
+      lastUsedAt: apiTokens.lastUsedAt,
+      lastUsedIp: apiTokens.lastUsedIp,
+      createdAt: apiTokens.createdAt,
+      expiresAt: apiTokens.expiresAt,
+      revokedAt: apiTokens.revokedAt,
+    })
+    .from(apiTokens)
+    .where(eq(apiTokens.userId, session.user.id))
+    .orderBy(desc(apiTokens.createdAt));
+
   return (
     <div className="w-full">
       <Tabs defaultValue="preferencias" className="w-full">
         <TabsList>
           <TabsTrigger value="preferencias">Preferências</TabsTrigger>
+          <TabsTrigger value="dispositivos">Dispositivos</TabsTrigger>
           <TabsTrigger value="nome">Alterar nome</TabsTrigger>
           <TabsTrigger value="senha">Alterar senha</TabsTrigger>
           <TabsTrigger value="email">Alterar e-mail</TabsTrigger>
@@ -74,6 +93,22 @@ export default async function Page() {
           </Card>
         </TabsContent>
 
+        <TabsContent value="dispositivos" className="mt-4">
+          <Card className="p-6">
+            <div className="space-y-4">
+              <div>
+                <h2 className="text-lg font-bold mb-1">OpenSheets Companion</h2>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Conecte o app Android OpenSheets Companion para capturar
+                  automaticamente notificações de transações financeiras e
+                  enviá-las para sua caixa de entrada.
+                </p>
+              </div>
+              <ApiTokensForm tokens={userApiTokens} />
+            </div>
+          </Card>
+        </TabsContent>
+
         <TabsContent value="nome" className="mt-4">
           <Card className="p-6">
             <div className="space-y-4">

components/ajustes/api-tokens-form.tsx

@@ -0,0 +1,335 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  RiSmartphoneLine,
+  RiDeleteBinLine,
+  RiAddLine,
+  RiFileCopyLine,
+  RiCheckLine,
+  RiAlertLine,
+} from "@remixicon/react";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { createApiTokenAction, revokeApiTokenAction } from "@/app/(dashboard)/ajustes/actions";
+
+interface ApiToken {
+  id: string;
+  name: string;
+  tokenPrefix: string;
+  lastUsedAt: Date | null;
+  lastUsedIp: string | null;
+  createdAt: Date;
+  expiresAt: Date | null;
+  revokedAt: Date | null;
+}
+
+interface ApiTokensFormProps {
+  tokens: ApiToken[];
+}
+
+export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [tokenName, setTokenName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [newToken, setNewToken] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [revokeId, setRevokeId] = useState<string | null>(null);
+  const [isRevoking, setIsRevoking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const activeTokens = tokens.filter((t) => !t.revokedAt);
+
+  const handleCreate = async () => {
+    if (!tokenName.trim()) return;
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      const result = await createApiTokenAction({ name: tokenName.trim() });
+
+      if (result.success && result.data?.token) {
+        setNewToken(result.data.token);
+        setTokenName("");
+      } else {
+        setError(result.error || "Erro ao criar token");
+      }
+    } catch {
+      setError("Erro ao criar token");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!newToken) return;
+
+    try {
+      await navigator.clipboard.writeText(newToken);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for browsers that don't support clipboard API
+      const textArea = document.createElement("textarea");
+      textArea.value = newToken;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textArea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleRevoke = async () => {
+    if (!revokeId) return;
+
+    setIsRevoking(true);
+
+    try {
+      const result = await revokeApiTokenAction({ tokenId: revokeId });
+
+      if (!result.success) {
+        setError(result.error || "Erro ao revogar token");
+      }
+    } catch {
+      setError("Erro ao revogar token");
+    } finally {
+      setIsRevoking(false);
+      setRevokeId(null);
+    }
+  };
+
+  const handleCloseCreate = () => {
+    setIsCreateOpen(false);
+    setNewToken(null);
+    setTokenName("");
+    setError(null);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-medium">Dispositivos conectados</h3>
+          <p className="text-sm text-muted-foreground">
+            Gerencie os dispositivos que podem enviar notificações para o OpenSheets.
+          </p>
+        </div>
+        <Dialog open={isCreateOpen} onOpenChange={(open) => {
+          if (!open) handleCloseCreate();
+          else setIsCreateOpen(true);
+        }}>
+          <DialogTrigger asChild>
+            <Button size="sm">
+              <RiAddLine className="h-4 w-4 mr-1" />
+              Novo Token
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            {!newToken ? (
+              <>
+                <DialogHeader>
+                  <DialogTitle>Criar Token de API</DialogTitle>
+                  <DialogDescription>
+                    Crie um token para conectar o OpenSheets Companion no seu dispositivo Android.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="tokenName">Nome do dispositivo</Label>
+                    <Input
+                      id="tokenName"
+                      placeholder="Ex: Meu Celular, Galaxy S24..."
+                      value={tokenName}
+                      onChange={(e) => setTokenName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") handleCreate();
+                      }}
+                    />
+                  </div>
+                  {error && (
+                    <div className="flex items-center gap-2 text-sm text-destructive">
+                      <RiAlertLine className="h-4 w-4" />
+                      {error}
+                    </div>
+                  )}
+                </div>
+                <DialogFooter>
+                  <Button variant="outline" onClick={handleCloseCreate}>
+                    Cancelar
+                  </Button>
+                  <Button onClick={handleCreate} disabled={isCreating || !tokenName.trim()}>
+                    {isCreating ? "Criando..." : "Criar Token"}
+                  </Button>
+                </DialogFooter>
+              </>
+            ) : (
+              <>
+                <DialogHeader>
+                  <DialogTitle>Token Criado</DialogTitle>
+                  <DialogDescription>
+                    Copie o token abaixo e cole no app OpenSheets Companion. Este token
+                    <strong> não será exibido novamente</strong>.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <Label>Seu token de API</Label>
+                    <div className="relative">
+                      <Input
+                        value={newToken}
+                        readOnly
+                        className="pr-10 font-mono text-sm"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="absolute right-0 top-0 h-full px-3"
+                        onClick={handleCopy}
+                      >
+                        {copied ? (
+                          <RiCheckLine className="h-4 w-4 text-green-500" />
+                        ) : (
+                          <RiFileCopyLine className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-sm text-amber-800 dark:text-amber-200">
+                    <p className="font-medium">Importante:</p>
+                    <ul className="list-disc list-inside mt-1 space-y-1">
+                      <li>Guarde este token em local seguro</li>
+                      <li>Ele não será exibido novamente</li>
+                      <li>Use-o para configurar o app Android</li>
+                    </ul>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button onClick={handleCloseCreate}>Fechar</Button>
+                </DialogFooter>
+              </>
+            )}
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {activeTokens.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+            <RiSmartphoneLine className="h-10 w-10 text-muted-foreground mb-3" />
+            <p className="text-sm text-muted-foreground">
+              Nenhum dispositivo conectado.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Crie um token para conectar o app OpenSheets Companion.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {activeTokens.map((token) => (
+            <Card key={token.id}>
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-start gap-3">
+                    <div className="rounded-full bg-muted p-2">
+                      <RiSmartphoneLine className="h-5 w-5" />
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium">{token.name}</span>
+                        <Badge variant="outline" className="text-xs">
+                          {token.tokenPrefix}...
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-muted-foreground mt-1">
+                        {token.lastUsedAt ? (
+                          <span>
+                            Usado{" "}
+                            {formatDistanceToNow(token.lastUsedAt, {
+                              addSuffix: true,
+                              locale: ptBR,
+                            })}
+                            {token.lastUsedIp && (
+                              <span className="text-xs ml-1">
+                                ({token.lastUsedIp})
+                              </span>
+                            )}
+                          </span>
+                        ) : (
+                          <span>Nunca usado</span>
+                        )}
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-0.5">
+                        Criado em{" "}
+                        {new Date(token.createdAt).toLocaleDateString("pt-BR")}
+                      </div>
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onClick={() => setRevokeId(token.id)}
+                  >
+                    <RiDeleteBinLine className="h-4 w-4" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Revoke Confirmation Dialog */}
+      <AlertDialog open={!!revokeId} onOpenChange={(open) => !open && setRevokeId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Revogar token?</AlertDialogTitle>
+            <AlertDialogDescription>
+              O dispositivo associado a este token será desconectado e não poderá mais
+              enviar notificações. Esta ação não pode ser desfeita.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRevoking}>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleRevoke}
+              disabled={isRevoking}
+              className="bg-destructive text-white hover:bg-destructive/90"
+            >
+              {isRevoking ? "Revogando..." : "Revogar"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}