Pedro Gomes 35e7027881 localization support
O que mudou
Infra (por app):

i18n/locales.ts — lista de locales (pt, en), default pt, labels para o seletor
i18n/request.ts — lê o cookie NEXT_LOCALE, carrega as mensagens
messages/pt.json + messages/en.json — todas as strings extraídas
next.config.ts — envolvido com withNextIntl (operator-pwa: withPWA(withNextIntl(...)))
app/layout.tsx — <html lang={locale}> dinâmico, NextIntlClientProvider
app/language-switcher.tsx — seletor PT | EN (cookie + router.refresh())
23 ficheiros de UI atualizados — todos os textos visíveis agora usam t('...') ou getTranslations.

Datas no relatório passaram de toLocaleString('pt-PT') fixo para useFormatter() do next-intl — localizam-se automaticamente.

Plurais em ICU no sync-chip: {count, plural, one {# pedido...} other {# pedidos...}}.

Resultado dos testes:

pnpm test:e2e — 3/3 ✓
pnpm test:e2e:auth — 4/4 ✓
tsc --noEmit em ambas as apps — limpo ✓
Para adicionar uma língua futura: criar messages/<locale>.json + adicionar o locale a i18n/locales.ts em cada app. O seletor aparece automaticamente.
2026-05-30 16:46:07 +01:00

82 lines
3.0 KiB
TypeScript

import Link from 'next/link';
import { Wrench } from 'lucide-react';
import { getTranslations } from 'next-intl/server';
import { resolveUser } from '@/lib/auth';
import { api } from '@/lib/trpc/server';
import { SignOutButton } from './sign-out-button';
import { StatusBadge } from './status-badge';
import { SyncChip } from './sync-chip';
import { LanguageSwitcher } from './language-switcher';
export default async function HomePage() {
const t = await getTranslations('home');
const user = await resolveUser();
type RecentItem = Awaited<ReturnType<typeof api.maintenanceRequest.myRecent>>[number];
let recent: RecentItem[] = [];
try {
recent = await api.maintenanceRequest.myRecent({ limit: 5 });
} catch {
// No session or other error — show empty list without crashing.
}
return (
<main className="mx-auto flex min-h-dvh max-w-lg flex-col bg-background">
{/* ── Header ── */}
<header className="flex items-center justify-between border-b border-border bg-card px-4 py-3">
<div>
<p className="text-xs text-muted-foreground">{t('operator')}</p>
<p className="text-sm font-medium" data-testid="current-user">
{user?.email ?? '—'}
</p>
</div>
<div className="flex items-center gap-2">
<LanguageSwitcher />
<SignOutButton />
</div>
</header>
<div className="flex flex-1 flex-col gap-6 p-4">
{/* ── Sync status ── */}
<SyncChip />
{/* ── Primary CTA ── */}
<Link
href="/maintenance/new"
data-testid="btn-request-maintenance"
className="flex items-center justify-center gap-3 rounded-2xl bg-primary px-6 py-10 text-lg font-semibold text-primary-foreground shadow-sm transition-opacity hover:opacity-90 active:scale-[0.98]"
>
<Wrench className="h-6 w-6" />
{t('requestMaintenance')}
</Link>
{/* ── Recent requests ── */}
<section>
<h2 className="mb-3 text-sm font-medium text-muted-foreground">{t('myRequests')}</h2>
{recent.length === 0 ? (
<p className="text-sm text-muted-foreground">{t('noRequests')}</p>
) : (
<ul className="flex flex-col gap-2">
{recent.map((req) => (
<li
key={req.id}
className="flex items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3 text-sm"
>
<div className="min-w-0 flex-1">
<p className="font-medium">
{req.workstation.code} {req.workstation.name}
</p>
<p className="truncate text-xs text-muted-foreground">{req.description}</p>
</div>
<StatusBadge status={req.status} />
</li>
))}
</ul>
)}
</section>
</div>
</main>
);
}