Pedro Gomes 4cc7f2f121 MAI CALL - step 8 +
Passo 8 completo. Tudo verde. Sumário do que foi feito:

Novas páginas:

app/select-operator/page.tsx — Server Component; redireciona automaticamente se já há sessão; lista operadores via prisma direto (funciona mesmo sem sessão ativa)
app/select-operator/operator-picker.tsx — Client Component; tap → signIn('credentials', { email, redirect: false }) → redireciona para /
app/sign-out-button.tsx — botão "Trocar" que chama signOut → volta ao picker
middleware.ts atualizado — redireciona para /select-operator quando não há sessão e AUTH_DEV_AUTOLOGIN=false; skip automático se já logado; o picker não faz redirect se não há sessão (deixa carregar)

app/page.tsx atualizado — mostra chip com o email do utilizador atual + botão "Trocar" (necessário para o AC "header mostra op1@demo.local")

Correções de infraestrutura descobertas:

NODE_ENV="development" removido do .env — estava a forçar o runtime de dev no next build, quebrando a geração estática
pages/_error.tsx adicionado — override mínimo que previne o erro <Html> outside _document
@repo/storage adicionado a transpilePackages e AWS SDK marcado como serverExternalPackages
app/not-found.tsx + app/error.tsx adicionados para App Router
AC verificado: build de produção passa limpo em Next.js 15.3.9 com todas as rotas correctas. O fluxo demo (/ → picker → login → / mostra email) funciona via dev server.
2026-05-16 16:19:15 +01:00

91 lines
3.3 KiB
TypeScript

import { TRPCError } from '@trpc/server';
import { CheckCircle2, AlertCircle } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui';
import { Alert, AlertDescription, AlertTitle } from '@repo/ui';
import { api } from '@/lib/trpc/server';
import { resolveUser } from '@/lib/auth';
import { PingClient } from './ping-client';
import { SignOutButton } from './sign-out-button';
export default async function HomePage() {
const user = await resolveUser();
let result:
| { ok: true; payload: Awaited<ReturnType<typeof api.ping.ping>> }
| { ok: false; message: string; code: string } = {
ok: false,
message: 'init',
code: 'INIT',
};
try {
const payload = await api.ping.ping();
result = { ok: true, payload };
} catch (err) {
if (err instanceof TRPCError) {
result = { ok: false, message: err.message, code: err.code };
} else if (err instanceof Error) {
result = { ok: false, message: err.message, code: 'UNKNOWN' };
} else {
result = { ok: false, message: String(err), code: 'UNKNOWN' };
}
}
return (
<main className="mx-auto flex min-h-screen max-w-2xl flex-col items-stretch justify-center gap-6 p-6">
{user && (
<div className="flex items-center justify-between rounded-lg border border-border bg-card px-4 py-2 text-sm">
<span data-testid="current-user">{user.email}</span>
<SignOutButton />
</div>
)}
<header className="text-center">
<h1 className="text-3xl font-bold tracking-tight">FieldOps Operator</h1>
<p className="text-sm text-muted-foreground">Scaffold smoke test</p>
</header>
{result.ok ? (
<Card data-testid="ping-success">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<CheckCircle2 className="h-5 w-5 text-green-600" />
Connected
</CardTitle>
<CardDescription>
End-to-end path verified: RSC tRPC Prisma Postgres.
</CardDescription>
</CardHeader>
<CardContent className="space-y-2 text-sm">
<div>
<span className="font-medium">Tenant: </span>
<span data-testid="tenant-name">{result.payload.tenant.name}</span>
</div>
<div className="text-muted-foreground">
<span className="font-medium">id:</span> {result.payload.tenant.id}
</div>
<div className="text-muted-foreground">
<span className="font-medium">at:</span> {result.payload.timestamp}
</div>
</CardContent>
</Card>
) : (
<Alert variant="destructive" data-testid="ping-failure">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Ping failed ({result.code})</AlertTitle>
<AlertDescription className="space-y-2">
<p>{result.message}</p>
<p className="text-xs">
If this says <code>UNAUTHORIZED</code>, set{' '}
<code>AUTH_DEV_AUTOLOGIN=true</code> in <code>.env</code> for local dev,
or sign in via the operator picker.
</p>
</AlertDescription>
</Alert>
)}
<PingClient />
</main>
);
}