pedrogomes/FieldOps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

localization support

Browse Source 
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.
This commit is contained in:
Pedro Gomes
2026-05-30 16:46:07 +01:00
parent 2093f12d0a
commit 35e7027881
41 changed files with 1549 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/.env.admin
+9
View File
@@ -0,0 +1,9 @@
# Per-app AUTH_URL for admin-web (port 3001).
#
# The shared root .env sets AUTH_URL=http://localhost:3000 (correct for the
# operator-pwa). Auth.js needs each app to know its OWN base URL, otherwise the
# admin redirects unauthenticated users to :3000 and login breaks when autologin
# is off. This file gives admin-web its own value; the dev/start scripts load it
# BEFORE the root .env, and dotenv never overrides an already-set variable, so
# this wins. Not a secret — safe to commit.
AUTH_URL="http://localhost:3001"
apps/admin-web/app/language-switcher.tsx
+33
View File
@@ -0,0 +1,33 @@
'use client';
import { useRouter } from 'next/navigation';
import { useLocale } from 'next-intl';
import { LOCALES, LOCALE_LABELS, type Locale } from '@/i18n/locales';
export function LanguageSwitcher() {
const router = useRouter();
const current = useLocale() as Locale;
function switchTo(locale: Locale) {
document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=31536000; SameSite=Lax`;
router.refresh();
}
return (
<div className="flex items-center gap-1 rounded-full border border-border bg-muted p-0.5">
{LOCALES.map((l) => (
<button
key={l}
onClick={() => switchTo(l)}
className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${
l === current
? 'bg-card text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
}`}
>
{LOCALE_LABELS[l]}
</button>
))}
</div>
);
}
apps/admin-web/app/layout.tsx
+17 -7
View File
@@ -1,17 +1,27 @@
import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages, getTranslations } from 'next-intl/server';
import type { Metadata } from 'next';
import { Providers } from './providers';
import './globals.css';
export const metadata: Metadata = {
title: 'FieldOps — Manutenção',
description: 'Backoffice de manutenção industrial.',
};
export async function generateMetadata(): Promise<Metadata> {
const t = await getTranslations('metadata');
return {
title: t('title'),
description: t('description'),
};
}
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const locale = await getLocale();
const messages = await getMessages();
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="pt">
<html lang={locale}>
<body className="min-h-screen bg-background font-sans antialiased">
<Providers>{children}</Providers>
<NextIntlClientProvider locale={locale} messages={messages}>
<Providers>{children}</Providers>
</NextIntlClientProvider>
</body>
</html>
);
apps/admin-web/app/login/login-form.tsx
+9 -6
View File
@@ -2,10 +2,13 @@
import { useState, type FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { signIn } from 'next-auth/react';
export function LoginForm() {
const router = useRouter();
const t = useTranslations('auth');
const tc = useTranslations('common');
const [busy, setBusy] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -20,13 +23,13 @@ export function LoginForm() {
try {
const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
setError('Email ou password incorretos. Tente novamente.');
setError(t('invalidCredentials'));
} else {
router.push('/maintenance');
router.refresh();
}
} catch {
setError('Erro inesperado. Tente novamente.');
setError(t('unexpectedError'));
} finally {
setBusy(false);
}
@@ -36,7 +39,7 @@ export function LoginForm() {
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div className="flex flex-col gap-1.5">
<label htmlFor="email" className="text-sm font-medium">
Email
{t('emailLabel')}
</label>
<input
id="email"
@@ -46,13 +49,13 @@ export function LoginForm() {
autoComplete="email"
disabled={busy}
className="rounded-lg border border-border bg-background px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
placeholder="admin@demo.local"
placeholder={t('emailPlaceholder')}
/>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="password" className="text-sm font-medium">
Password
{t('passwordLabel')}
</label>
<input
id="password"
@@ -72,7 +75,7 @@ export function LoginForm() {
disabled={busy}
className="mt-2 w-full rounded-xl bg-primary py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 active:scale-[0.98] disabled:opacity-50"
>
{busy ? 'A entrar…' : 'Entrar'}
{busy ? tc('entering') : tc('enter')}
</button>
</form>
);
apps/admin-web/app/login/page.tsx
+5 -5
View File
@@ -1,13 +1,13 @@
import { getTranslations } from 'next-intl/server';
import { LoginForm } from './login-form';
export default function LoginPage() {
export default async function LoginPage() {
const t = await getTranslations('auth');
return (
<main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-8 p-6">
<header className="text-center">
<h1 className="text-2xl font-bold tracking-tight">FieldOps</h1>
<p className="mt-1 text-sm text-muted-foreground">
Acesso à consola de manutenção
</p>
<h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
<p className="mt-1 text-sm text-muted-foreground">{t('subtitle')}</p>
</header>
<LoginForm />
</main>
apps/admin-web/app/maintenance/maintenance-queue.tsx
+55 -44
View File
@@ -3,22 +3,26 @@
import { useState, useEffect, useRef } from 'react';
import { CheckCircle2, Clock, Loader2, Wrench, BarChart2 } from 'lucide-react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { trpc } from '@/lib/trpc/client';
import type { RouterOutputs } from '@/lib/trpc/server';
import { LanguageSwitcher } from '../language-switcher';
type Status = 'OPEN' | 'CLAIMED' | 'RESOLVED';
type QueueItem = RouterOutputs['maintenanceRequest']['queue']['items'][number];
// ── Helpers ────────────────────────────────────────────────────────────────
function timeAgo(date: Date | string): string {
type TFn = (key: string, values?: Record<string, string | number>) => string;
function timeAgo(date: Date | string, t: TFn): string {
const diffMs = Date.now() - new Date(date).getTime();
const mins = Math.floor(diffMs / 60_000);
if (mins < 1) return 'agora';
if (mins < 60) return `há ${mins}m`;
if (mins < 1) return t('timeAgo.now');
if (mins < 60) return t('timeAgo.minutesAgo', { mins });
const hours = Math.floor(mins / 60);
if (hours < 24) return `há ${hours}h`;
return `há ${Math.floor(hours / 24)}d`;
if (hours < 24) return t('timeAgo.hoursAgo', { hours });
return t('timeAgo.daysAgo', { days: Math.floor(hours / 24) });
}
function playBeep() {
@@ -39,12 +43,6 @@ function playBeep() {
}
}
const STATUS_LABEL: Record<Status, string> = {
OPEN: 'Aberto',
CLAIMED: 'Em curso',
RESOLVED: 'Resolvido',
};
const STATUS_CLASS: Record<Status, string> = {
OPEN: 'bg-orange-100 text-orange-700',
CLAIMED: 'bg-blue-100 text-blue-700',
@@ -53,7 +51,7 @@ const STATUS_CLASS: Record<Status, string> = {
// ── Thumbnail ───────────────────────────────────────────────────────────────
function Thumbnail({ photoKey }: { photoKey: string | null }) {
function Thumbnail({ photoKey, alt }: { photoKey: string | null; alt: string }) {
const { data } = trpc.storage.signPhotoDownload.useQuery(
{ photoKey: photoKey! },
{ enabled: !!photoKey, staleTime: 50_000 },
@@ -66,7 +64,7 @@ function Thumbnail({ photoKey }: { photoKey: string | null }) {
}
return (
// eslint-disable-next-line @next/next/no-img-element
<img src={data.url} alt="Foto" className="h-16 w-16 shrink-0 rounded-lg object-cover" />
<img src={data.url} alt={alt} className="h-16 w-16 shrink-0 rounded-lg object-cover" />
);
}
@@ -77,17 +75,21 @@ function RequestCard({
onClaim,
onResolve,
claiming,
t,
tc,
}: {
item: QueueItem;
onClaim: () => void;
onResolve: () => void;
claiming: boolean;
t: ReturnType<typeof useTranslations<'maintenance'>>;
tc: ReturnType<typeof useTranslations<'common'>>;
}) {
return (
<div data-testid="request-card" className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
{/* Top row: thumbnail + main info */}
<div className="flex gap-3">
<Thumbnail photoKey={item.photoKey} />
<Thumbnail photoKey={item.photoKey} alt={t('photo')} />
<div className="min-w-0 flex-1">
<p className="font-medium">
{item.workstation.code} — {item.workstation.name}{' '}
@@ -95,17 +97,15 @@ function RequestCard({
</p>
<p className="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{item.description}</p>
<p className="mt-1 text-xs text-muted-foreground">
Reportado por {item.reportedBy.email} · {timeAgo(item.createdAt)}
{t('reportedBy', { email: item.reportedBy.email, time: timeAgo(item.createdAt, tc) })}
</p>
</div>
</div>
{/* Footer: badge + actions */}
<div className="flex items-center justify-between gap-3">
<span
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_CLASS[item.status as Status]}`}
>
{STATUS_LABEL[item.status as Status]}
<span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_CLASS[item.status as Status]}`}>
{tc(`status.${item.status.toLowerCase() as 'open' | 'claimed' | 'resolved'}`)}
</span>
{item.status === 'OPEN' && (
@@ -115,28 +115,28 @@ function RequestCard({
className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
>
{claiming ? <Loader2 className="h-4 w-4 animate-spin" /> : <Wrench className="h-4 w-4" />}
Aceitar
{t('accept')}
</button>
)}
{item.status === 'CLAIMED' && (
<div className="flex items-center gap-3">
<p className="text-xs text-muted-foreground">
Aceite por {item.claimedBy?.email ?? '?'} · {timeAgo(item.claimedAt!)}
{t('claimedBy', { email: item.claimedBy?.email ?? '?', time: timeAgo(item.claimedAt!, tc) })}
</p>
<button
onClick={onResolve}
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:opacity-90"
>
<CheckCircle2 className="h-4 w-4" />
Marcar resolvido
{t('markResolved')}
</button>
</div>
)}
{item.status === 'RESOLVED' && (
<p className="text-xs text-muted-foreground">
Resolvido por {item.resolvedBy?.email ?? '?'} · {timeAgo(item.resolvedAt!)}
{t('resolvedBy', { email: item.resolvedBy?.email ?? '?', time: timeAgo(item.resolvedAt!, tc) })}
</p>
)}
</div>
@@ -152,33 +152,34 @@ function ResolveDialog({
note,
onNoteChange,
resolving,
t,
tc,
}: {
onConfirm: () => void;
onCancel: () => void;
note: string;
onNoteChange: (v: string) => void;
resolving: boolean;
t: ReturnType<typeof useTranslations<'maintenance'>>;
tc: ReturnType<typeof useTranslations<'common'>>;
}) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
<div className="w-full max-w-md rounded-2xl bg-card p-6 shadow-xl">
<h2 className="mb-4 text-lg font-semibold">Marcar como resolvido</h2>
<h2 className="mb-4 text-lg font-semibold">{t('resolveDialogTitle')}</h2>
<label className="mb-1 block text-sm font-medium">
Nota de resolução (opcional)
{t('resolveNoteLabel')}
</label>
<textarea
value={note}
onChange={(e) => onNoteChange(e.target.value)}
rows={3}
placeholder="Descreve o que foi feito…"
placeholder={t('resolveNotePlaceholder')}
className="mb-4 w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
/>
<div className="flex justify-end gap-3">
<button
onClick={onCancel}
className="rounded-lg px-4 py-2 text-sm hover:bg-accent"
>
Cancelar
<button onClick={onCancel} className="rounded-lg px-4 py-2 text-sm hover:bg-accent">
{tc('cancel')}
</button>
<button
onClick={onConfirm}
@@ -186,7 +187,7 @@ function ResolveDialog({
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
>
{resolving && <Loader2 className="h-4 w-4 animate-spin" />}
Confirmar
{tc('confirm')}
</button>
</div>
</div>
@@ -197,6 +198,9 @@ function ResolveDialog({
// ── Main queue component ────────────────────────────────────────────────────
export function MaintenanceQueue() {
const t = useTranslations('maintenance');
const tc = useTranslations('common');
const [statuses, setStatuses] = useState<Status[]>(['OPEN', 'CLAIMED']);
const [area, setArea] = useState('');
const [resolveId, setResolveId] = useState<string | null>(null);
@@ -217,8 +221,10 @@ export function MaintenanceQueue() {
// Document title badge
useEffect(() => {
document.title =
openCount > 0 ? `(${openCount}) FieldOps — Manutenção` : 'FieldOps — Manutenção';
}, [openCount]);
openCount > 0
? t('documentTitleWithCount', { count: openCount })
: t('documentTitle');
}, [openCount, t]);
// Audio notification for new OPEN requests
const prevOpenIds = useRef(new Set<string>());
@@ -261,10 +267,10 @@ export function MaintenanceQueue() {
<span className="mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white">
{openCount}
</span>
pedidos abertos
{t('openRequestsTitle', { count: openCount })}
</span>
) : (
'Fila de manutenção'
t('queueTitle')
)}
</h1>
</div>
@@ -274,7 +280,7 @@ export function MaintenanceQueue() {
className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground hover:bg-accent"
>
<BarChart2 className="h-3 w-3" />
Relatório de turno
{t('reportLink')}
</Link>
<button
onClick={() => setSoundEnabled((v) => !v)}
@@ -284,14 +290,15 @@ export function MaintenanceQueue() {
: 'bg-muted text-muted-foreground'
}`}
>
{soundEnabled ? '🔔 Som on' : '🔕 Som off'}
{soundEnabled ? t('soundOn') : t('soundOff')}
</button>
<LanguageSwitcher />
</div>
</div>
{/* Filters */}
<div className="mx-auto mt-2 flex max-w-4xl flex-wrap items-center gap-3">
<span className="text-xs text-muted-foreground">Estado:</span>
<span className="text-xs text-muted-foreground">{t('filterStatus')}</span>
{(['OPEN', 'CLAIMED', 'RESOLVED'] as Status[]).map((s) => (
<label key={s} className="flex cursor-pointer items-center gap-1.5 text-sm">
<input
@@ -300,19 +307,19 @@ export function MaintenanceQueue() {
onChange={() => toggleStatus(s)}
className="rounded"
/>
{STATUS_LABEL[s]}
{tc(`status.${s.toLowerCase() as 'open' | 'claimed' | 'resolved'}`)}
</label>
))}
{areas.length > 0 && (
<>
<span className="text-xs text-muted-foreground">Área:</span>
<span className="text-xs text-muted-foreground">{t('filterArea')}</span>
<select
value={area}
onChange={(e) => setArea(e.target.value)}
className="rounded-lg border border-border bg-card px-2 py-1 text-sm"
>
<option value="">Todas</option>
<option value="">{tc('allAreas')}</option>
{areas.map((a) => (
<option key={a} value={a}>
{a}
@@ -324,7 +331,7 @@ export function MaintenanceQueue() {
<div className="ml-auto flex items-center gap-1 text-xs text-muted-foreground">
<Clock className="h-3 w-3" />
Atualiza a cada 5s
{t('updatesEvery')}
</div>
</div>
</header>
@@ -334,7 +341,7 @@ export function MaintenanceQueue() {
{items.length === 0 ? (
<div className="py-16 text-center text-muted-foreground">
<Wrench className="mx-auto mb-3 h-10 w-10 opacity-30" />
<p>Nenhum pedido com os filtros actuais.</p>
<p>{t('emptyQueue')}</p>
</div>
) : (
<div className="grid gap-3 sm:grid-cols-2">
@@ -342,6 +349,8 @@ export function MaintenanceQueue() {
<RequestCard
key={item.id}
item={item}
t={t}
tc={tc}
onClaim={() => claimMutation.mutate({ id: item.id })}
onResolve={() => {
setResolveId(item.id);
@@ -362,6 +371,8 @@ export function MaintenanceQueue() {
<ResolveDialog
note={resolutionNote}
onNoteChange={setResolutionNote}
t={t}
tc={tc}
onConfirm={() =>
resolveMutation.mutate({
id: resolveId,
apps/admin-web/app/maintenance/report/page.tsx
+6 -1
View File
@@ -1,6 +1,11 @@
import { getTranslations } from 'next-intl/server';
import type { Metadata } from 'next';
import { ReportView } from './report-view';
export const metadata = { title: 'FieldOps — Relatório de turno' };
export async function generateMetadata(): Promise<Metadata> {
const t = await getTranslations('report');
return { title: t('pageTitle') };
}
export default function ReportPage() {
return <ReportView />;
apps/admin-web/app/maintenance/report/report-view.tsx
+72 -81
View File
@@ -3,40 +3,30 @@
import { useMemo, useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, Printer, AlertCircle } from 'lucide-react';
import { useTranslations, useFormatter } from 'next-intl';
import { trpc } from '@/lib/trpc/client';
import { SHIFTS, shiftWindow, todayWindow, type ShiftKey } from '@/lib/shifts';
// ── Duration helper ─────────────────────────────────────────────────────────
function formatDuration(ms: number | null): string {
if (ms === null) return '—';
type TFn = ReturnType<typeof useTranslations<'report'>>;
function formatDuration(ms: number | null, t: TFn): string {
if (ms === null) return t('duration.dash');
const totalMin = Math.round(ms / 60_000);
if (totalMin < 1) return '< 1 min';
if (totalMin < 60) return `${totalMin} min`;
if (totalMin < 1) return t('duration.lessThan1Min');
if (totalMin < 60) return t('duration.minutes', { n: totalMin });
const h = Math.floor(totalMin / 60);
const m = totalMin % 60;
return m > 0 ? `${h} h ${m} min` : `${h} h`;
return m > 0 ? t('duration.hoursMinutes', { h, m }) : t('duration.hours', { h });
}
function formatDateTime(d: Date | string): string {
const dt = new Date(d);
return dt.toLocaleString('pt-PT', {
day: '2-digit',
month: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
}
// ── Status ───────────────────────────────────────────────────────────────────
function formatDate(d: Date | string): string {
return new Date(d).toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit' });
}
// ── Window label ─────────────────────────────────────────────────────────────
function windowLabel(from: Date, to: Date): string {
return `${formatDateTime(from)} → ${formatDateTime(to)}`;
}
const STATUS_CLASS: Record<'OPEN' | 'CLAIMED', string> = {
OPEN: 'bg-orange-100 text-orange-700',
CLAIMED: 'bg-blue-100 text-blue-700',
};
// ── Metric card ──────────────────────────────────────────────────────────────
@@ -52,16 +42,6 @@ function MetricCard({ label, value, sub }: { label: string; value: string; sub?:
);
}
const STATUS_LABEL: Record<'OPEN' | 'CLAIMED', string> = {
OPEN: 'Aberto',
CLAIMED: 'Em curso',
};
const STATUS_CLASS: Record<'OPEN' | 'CLAIMED', string> = {
OPEN: 'bg-orange-100 text-orange-700',
CLAIMED: 'bg-blue-100 text-blue-700',
};
// ── Main component ───────────────────────────────────────────────────────────
type WindowState =
@@ -87,7 +67,14 @@ function localDateTimeStr(d: Date): string {
return `${localDateStr(d)}T${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}
const DATE_TIME_FMT = { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' } as const;
const DATE_FMT = { day: '2-digit', month: '2-digit' } as const;
export function ReportView() {
const t = useTranslations('report');
const tc = useTranslations('common');
const format = useFormatter();
const [windowState, setWindowState] = useState<WindowState>({ type: 'today' });
const [dayInput, setDayInput] = useState(() => localDateStr(new Date()));
const [customActive, setCustomActive] = useState(false);
@@ -100,7 +87,7 @@ export function ReportView() {
// Stabilise the window so the query key only changes when the user picks a
// new window. Without this, the 'today' mode recomputes `to = new Date()` on
// every render → new query key → fetch loop. Re-selecting "Hoje" refreshes.
// every render → new query key → fetch loop. Re-selecting "Today" refreshes.
const win = useMemo(() => computeWindow(windowState), [windowState]);
const { data, isLoading, error } = trpc.maintenanceRequest.report.useQuery(
@@ -126,8 +113,16 @@ export function ReportView() {
setWindowState({ type: 'custom', from, to });
}
const activeShift =
windowState.type === 'shift' ? windowState.key : null;
const activeShift = windowState.type === 'shift' ? windowState.key : null;
const range = `${format.dateTime(win.from, DATE_TIME_FMT)} → ${format.dateTime(win.to, DATE_TIME_FMT)}`;
const windowLabelText =
windowState.type === 'today'
? t('windowLabel.today', { range })
: windowState.type === 'shift'
? t(`windowLabel.${windowState.key}`, { range })
: t('windowLabel.custom', { range });
return (
<div className="min-h-screen bg-background print:bg-white">
@@ -140,25 +135,25 @@ export function ReportView() {
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
>
<ArrowLeft className="h-4 w-4" />
Fila
{t('backToQueue')}
</Link>
<span className="text-muted-foreground">/</span>
<h1 className="text-lg font-bold">Relatório de turno</h1>
<h1 className="text-lg font-bold">{t('title')}</h1>
</div>
<button
onClick={() => window.print()}
className="flex items-center gap-1.5 rounded-lg bg-muted px-3 py-1.5 text-sm font-medium hover:bg-accent"
>
<Printer className="h-4 w-4" />
Imprimir
{t('print')}
</button>
</div>
</header>
{/* ── Print header (only in print) ── */}
<div className="hidden print:block px-8 pt-6 pb-2">
<p className="text-lg font-bold">FieldOps — Relatório de manutenção</p>
<p className="text-sm text-gray-600">{windowLabel(win.from, win.to)}</p>
<p className="text-lg font-bold">{t('printHeader')}</p>
<p className="text-sm text-gray-600">{range}</p>
</div>
{/* ── Window selector (hidden in print) ── */}
@@ -174,7 +169,7 @@ export function ReportView() {
: 'bg-card border border-border hover:bg-accent'
}`}
>
Hoje
{t('today')}
</button>
{(Object.keys(SHIFTS) as ShiftKey[]).map((key) => (
<button
@@ -186,7 +181,7 @@ export function ReportView() {
: 'bg-card border border-border hover:bg-accent'
}`}
>
{SHIFTS[key].label}
{t(`shiftButton.${key}`)}
</button>
))}
@@ -211,7 +206,7 @@ export function ReportView() {
: 'bg-card border border-border hover:bg-accent'
}`}
>
Personalizado
{t('custom')}
</button>
</div>
@@ -224,7 +219,7 @@ export function ReportView() {
onChange={(e) => setCustomPending((p) => ({ ...p, from: e.target.value }))}
className="rounded-lg border border-border bg-card px-2 py-1 text-sm"
/>
<span className="text-sm text-muted-foreground">até</span>
<span className="text-sm text-muted-foreground">{t('customUntil')}</span>
<input
type="datetime-local"
value={customPending.to}
@@ -235,27 +230,20 @@ export function ReportView() {
onClick={applyCustom}
className="rounded-lg bg-primary px-3 py-1 text-sm font-medium text-primary-foreground hover:opacity-90"
>
Aplicar
{t('customApply')}
</button>
</div>
)}
{/* Active window label */}
<p className="text-xs text-muted-foreground">
{windowState.type === 'shift'
? `Turno d${windowState.key === 'manha' ? 'a Manhã' : windowState.key === 'tarde' ? 'a Tarde' : 'a Noite'} — `
: windowState.type === 'today'
? 'Hoje — '
: 'Personalizado — '}
{windowLabel(win.from, win.to)}
</p>
<p className="text-xs text-muted-foreground">{windowLabelText}</p>
</div>
</div>
{/* ── Body ── */}
<main className="mx-auto max-w-4xl px-4 py-6 print:px-8 print:py-4">
{isLoading && (
<p className="py-16 text-center text-muted-foreground">A carregar…</p>
<p className="py-16 text-center text-muted-foreground">{tc('loading')}</p>
)}
{error && (
@@ -267,7 +255,7 @@ export function ReportView() {
{data && data.totals.created === 0 && (
<div className="py-16 text-center text-muted-foreground">
<p className="text-lg">Sem pedidos nesta janela.</p>
<p className="text-lg">{t('emptyWindow')}</p>
</div>
)}
@@ -276,41 +264,41 @@ export function ReportView() {
{/* Summary cards */}
<section>
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground print:text-gray-500">
Resumo
{t('sections.summary')}
</h2>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 print:grid-cols-3">
<MetricCard label="Pedidos" value={String(data.totals.created)} />
<MetricCard label="Resolvidos" value={String(data.totals.resolved)} />
<MetricCard label={t('metrics.created')} value={String(data.totals.created)} />
<MetricCard label={t('metrics.resolved')} value={String(data.totals.resolved)} />
<MetricCard
label="Em aberto"
label={t('metrics.open')}
value={String(data.totals.open + data.totals.claimed)}
sub={
data.totals.open > 0 || data.totals.claimed > 0
? `${data.totals.open} aberto · ${data.totals.claimed} em curso`
? t('metrics.openSub', { open: data.totals.open, claimed: data.totals.claimed })
: undefined
}
/>
<MetricCard
label="Resposta média"
value={formatDuration(data.responseMs.avg)}
label={t('metrics.responseAvg')}
value={formatDuration(data.responseMs.avg, t)}
sub={
data.responseMs.count > 0
? `sobre ${data.responseMs.count} pedido${data.responseMs.count > 1 ? 's' : ''}`
: 'sem dados'
? t('metrics.requestsSub', { count: data.responseMs.count })
: t('metrics.noData')
}
/>
<MetricCard
label="Resolução média"
value={formatDuration(data.resolutionMs.avg)}
label={t('metrics.resolutionAvg')}
value={formatDuration(data.resolutionMs.avg, t)}
sub={
data.resolutionMs.count > 0
? `sobre ${data.resolutionMs.count} pedido${data.resolutionMs.count > 1 ? 's' : ''}`
: 'sem dados'
? t('metrics.requestsSub', { count: data.resolutionMs.count })
: t('metrics.noData')
}
/>
<MetricCard
label="Pior resposta"
value={formatDuration(data.responseMs.max)}
label={t('metrics.responseMax')}
value={formatDuration(data.responseMs.max, t)}
/>
</div>
</section>
@@ -319,16 +307,16 @@ export function ReportView() {
{data.byWorkstation.length > 0 && (
<section>
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground print:text-gray-500">
Por posto
{t('sections.byWorkstation')}
</h2>
<div className="overflow-hidden rounded-xl border border-border print:border-gray-300">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-muted/50 text-left print:bg-gray-50 print:border-gray-300">
<th className="px-4 py-2 font-medium">Código</th>
<th className="px-4 py-2 font-medium">Nome</th>
<th className="px-4 py-2 font-medium">Área</th>
<th className="px-4 py-2 text-right font-medium">Pedidos</th>
<th className="px-4 py-2 font-medium">{t('table.code')}</th>
<th className="px-4 py-2 font-medium">{t('table.name')}</th>
<th className="px-4 py-2 font-medium">{t('table.area')}</th>
<th className="px-4 py-2 text-right font-medium">{t('table.requests')}</th>
</tr>
</thead>
<tbody>
@@ -357,7 +345,7 @@ export function ReportView() {
{data.byArea.length > 1 && (
<section>
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground print:text-gray-500">
Por área
{t('sections.byArea')}
</h2>
<div className="flex flex-wrap gap-3">
{data.byArea.map((a) => (
@@ -378,10 +366,10 @@ export function ReportView() {
{/* Still open */}
<section>
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground print:text-gray-500">
Em aberto à hora do relatório
{t('sections.stillOpen')}
</h2>
{data.stillOpen.length === 0 ? (
<p className="text-sm text-green-600">Nada em aberto neste turno. ✓</p>
<p className="text-sm text-green-600">{t('allClear')}</p>
) : (
<div className="space-y-2">
{data.stillOpen.map((r) => (
@@ -400,13 +388,16 @@ export function ReportView() {
{r.description}
</p>
<p className="mt-0.5 text-xs text-muted-foreground print:text-gray-500">
Reportado por {r.reportedByEmail} · {formatDate(r.createdAt)}
{t('stillOpenReportedBy', {
email: r.reportedByEmail,
date: format.dateTime(new Date(r.createdAt), DATE_FMT),
})}
</p>
</div>
<span
className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium print:border print:bg-transparent ${STATUS_CLASS[r.status]}`}
>
{STATUS_LABEL[r.status]}
{tc(`status.${r.status.toLowerCase() as 'open' | 'claimed'}`)}
</span>
</div>
))}
apps/admin-web/i18n/locales.ts
+8
View File
@@ -0,0 +1,8 @@
export const LOCALES = ['pt', 'en'] as const;
export type Locale = (typeof LOCALES)[number];
export const DEFAULT_LOCALE: Locale = 'pt';
export const LOCALE_LABELS: Record<Locale, string> = { pt: 'PT', en: 'EN' };
export function isLocale(v: string | undefined): v is Locale {
return !!v && (LOCALES as readonly string[]).includes(v);
}
apps/admin-web/i18n/request.ts
+12
View File
@@ -0,0 +1,12 @@
import { getRequestConfig } from 'next-intl/server';
import { cookies } from 'next/headers';
import { DEFAULT_LOCALE, isLocale } from './locales';
export default getRequestConfig(async () => {
const cookie = (await cookies()).get('NEXT_LOCALE')?.value;
const locale = isLocale(cookie) ? cookie : DEFAULT_LOCALE;
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});
apps/admin-web/lib/shifts.ts
+4 -4
View File
@@ -1,9 +1,9 @@
export type ShiftKey = 'manha' | 'tarde' | 'noite';
export const SHIFTS: Record<ShiftKey, { label: string; startHour: number; endHour: number }> = {
manha: { label: 'Manhã', startHour: 6, endHour: 14 },
tarde: { label: 'Tarde', startHour: 14, endHour: 22 },
noite: { label: 'Noite', startHour: 22, endHour: 6 },
export const SHIFTS: Record<ShiftKey, { startHour: number; endHour: number }> = {
manha: { startHour: 6, endHour: 14 },
tarde: { startHour: 14, endHour: 22 },
noite: { startHour: 22, endHour: 6 },
};
/** Given a shift and a day (Date at local midnight), returns [from, to). */
apps/admin-web/messages/en.json
+113
View File
@@ -0,0 +1,113 @@
{
"metadata": {
"title": "FieldOps — Maintenance",
"description": "Industrial maintenance backoffice."
},
"common": {
"enter": "Sign in",
"entering": "Signing in…",
"cancel": "Cancel",
"confirm": "Confirm",
"loading": "Loading…",
"allAreas": "All",
"status": {
"open": "Open",
"claimed": "In progress",
"resolved": "Resolved"
},
"timeAgo": {
"now": "just now",
"minutesAgo": "{mins}m ago",
"hoursAgo": "{hours}h ago",
"daysAgo": "{days}d ago"
}
},
"auth": {
"emailLabel": "Email",
"emailPlaceholder": "admin@demo.local",
"passwordLabel": "Password",
"invalidCredentials": "Incorrect email or password. Please try again.",
"unexpectedError": "Unexpected error. Please try again.",
"title": "FieldOps",
"subtitle": "Maintenance console access"
},
"maintenance": {
"queueTitle": "Maintenance queue",
"openRequestsTitle": "{count} open requests",
"reportLink": "Shift report",
"soundOn": "🔔 Sound on",
"soundOff": "🔕 Sound off",
"filterStatus": "Status:",
"filterArea": "Area:",
"updatesEvery": "Updates every 5s",
"emptyQueue": "No requests match the current filters.",
"photo": "Photo",
"reportedBy": "Reported by {email} · {time}",
"claimedBy": "Accepted by {email} · {time}",
"resolvedBy": "Resolved by {email} · {time}",
"accept": "Accept",
"markResolved": "Mark resolved",
"resolveDialogTitle": "Mark as resolved",
"resolveNoteLabel": "Resolution note (optional)",
"resolveNotePlaceholder": "Describe what was done…",
"documentTitleWithCount": "({count}) FieldOps — Maintenance",
"documentTitle": "FieldOps — Maintenance"
},
"report": {
"pageTitle": "FieldOps — Shift report",
"title": "Shift report",
"print": "Print",
"printHeader": "FieldOps — Maintenance report",
"backToQueue": "Queue",
"today": "Today",
"custom": "Custom",
"customUntil": "to",
"customApply": "Apply",
"loading": "Loading…",
"emptyWindow": "No requests in this window.",
"windowLabel": {
"today": "Today — {range}",
"manha": "Morning Shift — {range}",
"tarde": "Afternoon Shift — {range}",
"noite": "Night Shift — {range}",
"custom": "Custom — {range}"
},
"shiftButton": {
"manha": "Morning",
"tarde": "Afternoon",
"noite": "Night"
},
"sections": {
"summary": "Summary",
"byWorkstation": "By workstation",
"byArea": "By area",
"stillOpen": "Open at report time"
},
"metrics": {
"created": "Requests",
"resolved": "Resolved",
"open": "Open",
"responseAvg": "Avg response",
"resolutionAvg": "Avg resolution",
"responseMax": "Worst response",
"openSub": "{open} open · {claimed} in progress",
"requestsSub": "{count, plural, one {over # request} other {over # requests}}",
"noData": "no data"
},
"table": {
"code": "Code",
"name": "Name",
"area": "Area",
"requests": "Requests"
},
"stillOpenReportedBy": "Reported by {email} · {date}",
"allClear": "Nothing open in this shift. ✓",
"duration": {
"lessThan1Min": "< 1 min",
"minutes": "{n} min",
"hours": "{h} h",
"hoursMinutes": "{h} h {m} min",
"dash": "—"
}
}
}
apps/admin-web/messages/pt.json
+113
View File
@@ -0,0 +1,113 @@
{
"metadata": {
"title": "FieldOps — Manutenção",
"description": "Backoffice de manutenção industrial."
},
"common": {
"enter": "Entrar",
"entering": "A entrar…",
"cancel": "Cancelar",
"confirm": "Confirmar",
"loading": "A carregar…",
"allAreas": "Todas",
"status": {
"open": "Aberto",
"claimed": "Em curso",
"resolved": "Resolvido"
},
"timeAgo": {
"now": "agora",
"minutesAgo": "há {mins}m",
"hoursAgo": "há {hours}h",
"daysAgo": "há {days}d"
}
},
"auth": {
"emailLabel": "Email",
"emailPlaceholder": "admin@demo.local",
"passwordLabel": "Password",
"invalidCredentials": "Email ou password incorretos. Tente novamente.",
"unexpectedError": "Erro inesperado. Tente novamente.",
"title": "FieldOps",
"subtitle": "Acesso à consola de manutenção"
},
"maintenance": {
"queueTitle": "Fila de manutenção",
"openRequestsTitle": "{count} pedidos abertos",
"reportLink": "Relatório de turno",
"soundOn": "🔔 Som on",
"soundOff": "🔕 Som off",
"filterStatus": "Estado:",
"filterArea": "Área:",
"updatesEvery": "Atualiza a cada 5s",
"emptyQueue": "Nenhum pedido com os filtros actuais.",
"photo": "Foto",
"reportedBy": "Reportado por {email} · {time}",
"claimedBy": "Aceite por {email} · {time}",
"resolvedBy": "Resolvido por {email} · {time}",
"accept": "Aceitar",
"markResolved": "Marcar resolvido",
"resolveDialogTitle": "Marcar como resolvido",
"resolveNoteLabel": "Nota de resolução (opcional)",
"resolveNotePlaceholder": "Descreve o que foi feito…",
"documentTitleWithCount": "({count}) FieldOps — Manutenção",
"documentTitle": "FieldOps — Manutenção"
},
"report": {
"pageTitle": "FieldOps — Relatório de turno",
"title": "Relatório de turno",
"print": "Imprimir",
"printHeader": "FieldOps — Relatório de manutenção",
"backToQueue": "Fila",
"today": "Hoje",
"custom": "Personalizado",
"customUntil": "até",
"customApply": "Aplicar",
"loading": "A carregar…",
"emptyWindow": "Sem pedidos nesta janela.",
"windowLabel": {
"today": "Hoje — {range}",
"manha": "Turno da Manhã — {range}",
"tarde": "Turno da Tarde — {range}",
"noite": "Turno da Noite — {range}",
"custom": "Personalizado — {range}"
},
"shiftButton": {
"manha": "Manhã",
"tarde": "Tarde",
"noite": "Noite"
},
"sections": {
"summary": "Resumo",
"byWorkstation": "Por posto",
"byArea": "Por área",
"stillOpen": "Em aberto à hora do relatório"
},
"metrics": {
"created": "Pedidos",
"resolved": "Resolvidos",
"open": "Em aberto",
"responseAvg": "Resposta média",
"resolutionAvg": "Resolução média",
"responseMax": "Pior resposta",
"openSub": "{open} aberto · {claimed} em curso",
"requestsSub": "{count, plural, one {sobre # pedido} other {sobre # pedidos}}",
"noData": "sem dados"
},
"table": {
"code": "Código",
"name": "Nome",
"area": "Área",
"requests": "Pedidos"
},
"stillOpenReportedBy": "Reportado por {email} · {date}",
"allClear": "Nada em aberto neste turno. ✓",
"duration": {
"lessThan1Min": "< 1 min",
"minutes": "{n} min",
"hours": "{h} h",
"hoursMinutes": "{h} h {m} min",
"dash": "—"
}
}
}
apps/admin-web/next.config.ts
+4 -1
View File
@@ -1,6 +1,9 @@
import type { NextConfig } from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
import './env'; // Validate env vars at build time
const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
const config: NextConfig = {
transpilePackages: ['@repo/db', '@repo/api', '@repo/ui', '@repo/storage'],
reactStrictMode: true,
@@ -14,4 +17,4 @@ const config: NextConfig = {
],
};
export default config;
export default withNextIntl(config);
apps/admin-web/package.json
+2 -1
View File
@@ -4,7 +4,7 @@
"private": true,
"type": "module",
"scripts": {
"dev": "dotenv -e ../../.env -- next dev --port 3001",
"dev": "dotenv -e ./.env.admin -e ../../.env -- next dev --port 3001",
"build": "dotenv -e ../../.env -- next build",
"start": "dotenv -e ../../.env -- next start --port 3001",
"lint": "next lint",
@@ -24,6 +24,7 @@
"lucide-react": "^0.469.0",
"next": "15.3.9",
"next-auth": "5.0.0-beta.25",
"next-intl": "^4.13.0",
"pino": "^9.5.0",
"pino-pretty": "^11.3.0",
"react": "^19.0.0",
apps/operator-pwa/app/error.tsx
+6 -3
View File
@@ -1,6 +1,7 @@
'use client';
import { useEffect } from 'react';
import { useTranslations } from 'next-intl';
export default function ErrorPage({
error,
@@ -9,16 +10,18 @@ export default function ErrorPage({
error: Error & { digest?: string };
reset: () => void;
}) {
const t = useTranslations('errors');
useEffect(() => {
console.error(error);
}, [error]);
return (
<main className="flex min-h-screen flex-col items-center justify-center gap-4 p-6 text-center">
<h1 className="text-4xl font-bold">500</h1>
<p className="text-muted-foreground">Ocorreu um erro inesperado.</p>
<h1 className="text-4xl font-bold">{t('title500')}</h1>
<p className="text-muted-foreground">{t('message500')}</p>
<button onClick={reset} className="text-sm underline underline-offset-4">
Tentar novamente
{t('retry')}
</button>
</main>
);
apps/operator-pwa/app/language-switcher.tsx
+33
View File
@@ -0,0 +1,33 @@
'use client';
import { useRouter } from 'next/navigation';
import { useLocale } from 'next-intl';
import { LOCALES, LOCALE_LABELS, type Locale } from '@/i18n/locales';
export function LanguageSwitcher() {
const router = useRouter();
const current = useLocale() as Locale;
function switchTo(locale: Locale) {
document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=31536000; SameSite=Lax`;
router.refresh();
}
return (
<div className="flex items-center gap-1 rounded-full border border-border bg-muted p-0.5">
{LOCALES.map((l) => (
<button
key={l}
onClick={() => switchTo(l)}
className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${
l === current
? 'bg-card text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
}`}
>
{LOCALE_LABELS[l]}
</button>
))}
</div>
);
}
apps/operator-pwa/app/layout.tsx
+26 -16
View File
@@ -1,19 +1,24 @@
import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages, getTranslations } from 'next-intl/server';
import type { Metadata, Viewport } from 'next';
import { Providers } from './providers';
import { SyncProvider } from './sync-provider';
import './globals.css';
export const metadata: Metadata = {
title: 'FieldOps — Operator',
description: 'Industrial operator console.',
manifest: '/manifest.webmanifest',
applicationName: 'FieldOps Operator',
appleWebApp: {
capable: true,
title: 'FieldOps Operator',
statusBarStyle: 'default',
},
};
export async function generateMetadata(): Promise<Metadata> {
const t = await getTranslations('metadata');
return {
title: t('title'),
description: t('description'),
manifest: '/manifest.webmanifest',
applicationName: t('appName'),
appleWebApp: {
capable: true,
title: t('appName'),
statusBarStyle: 'default',
},
};
}
export const viewport: Viewport = {
themeColor: '#0f172a',
@@ -21,13 +26,18 @@ export const viewport: Viewport = {
initialScale: 1,
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const locale = await getLocale();
const messages = await getMessages();
return (
<html lang="en">
<html lang={locale}>
<body className="min-h-screen bg-background font-sans antialiased">
<Providers>
<SyncProvider>{children}</SyncProvider>
</Providers>
<NextIntlClientProvider locale={locale} messages={messages}>
<Providers>
<SyncProvider>{children}</SyncProvider>
</Providers>
</NextIntlClientProvider>
</body>
</html>
);
apps/operator-pwa/app/maintenance/new/page.tsx
+17 -19
View File
@@ -4,11 +4,11 @@ import { useState, useRef } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft, Camera, X } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { trpc } from '@/lib/trpc/client';
import { db } from '@/lib/queue/db';
import { runSync } from '@/lib/queue/sync';
// Resize to max 1600px on longest side and compress to JPEG q=0.8.
function compressImage(file: File): Promise<Blob> {
return new Promise((resolve, reject) => {
const img = new Image();
@@ -44,6 +44,7 @@ function compressImage(file: File): Promise<Blob> {
}
export default function NewRequestPage() {
const t = useTranslations('maintenance');
const router = useRouter();
const fileRef = useRef<HTMLInputElement>(null);
@@ -56,7 +57,7 @@ export default function NewRequestPage() {
const { data: workstations = [], isLoading: wsLoading } = trpc.workstation.list.useQuery(
undefined,
{ staleTime: 60 * 60 * 1000 }, // 1h — serves from cache when offline
{ staleTime: 60 * 60 * 1000 },
);
async function handlePhotoChange(e: React.ChangeEvent<HTMLInputElement>) {
@@ -68,7 +69,7 @@ export default function NewRequestPage() {
setPhotoBlob(compressed);
setPhotoPreview(URL.createObjectURL(compressed));
} catch {
setError('Não foi possível processar a foto. Tenta de novo.');
setError(t('photoError'));
}
}
@@ -89,8 +90,6 @@ export default function NewRequestPage() {
try {
const clientRequestId = crypto.randomUUID();
// Enqueue in IndexedDB immediately — returns control to the user
// regardless of network state. The SyncProvider will drain the queue.
await db.pending.add({
clientRequestId,
workstationId,
@@ -100,12 +99,11 @@ export default function NewRequestPage() {
retries: 0,
});
// Attempt immediate sync if online (fire-and-forget)
if (navigator.onLine) runSync().catch(() => {});
router.push(`/maintenance/sent?cid=${clientRequestId}`);
} catch (err) {
setError(err instanceof Error ? err.message : 'Erro ao guardar pedido. Tenta de novo.');
setError(err instanceof Error ? err.message : t('saveError'));
setSubmitting(false);
}
}
@@ -119,14 +117,14 @@ export default function NewRequestPage() {
<Link href="/" className="rounded-md p-1 hover:bg-accent">
<ArrowLeft className="h-5 w-5" />
</Link>
<h1 className="text-base font-semibold">Novo pedido de manutenção</h1>
<h1 className="text-base font-semibold">{t('newTitle')}</h1>
</header>
<form onSubmit={handleSubmit} className="flex flex-1 flex-col gap-6 p-4">
{/* Posto */}
{/* Workstation */}
<div className="flex flex-col gap-1.5">
<label htmlFor="workstation" className="text-sm font-medium">
Posto <span className="text-destructive">*</span>
{t('workstationLabel')} <span className="text-destructive">{t('workstationRequired')}</span>
</label>
<select
id="workstation"
@@ -137,7 +135,7 @@ export default function NewRequestPage() {
className="w-full rounded-lg border border-border bg-card px-3 py-2.5 text-sm disabled:opacity-50"
>
<option value="">
{wsLoading ? 'A carregar postos…' : 'Seleciona um posto…'}
{wsLoading ? t('workstationLoading') : t('workstationPlaceholder')}
</option>
{workstations.map((ws) => (
<option key={ws.id} value={ws.id}>
@@ -147,13 +145,13 @@ export default function NewRequestPage() {
</select>
</div>
{/* Foto */}
{/* Photo */}
<div className="flex flex-col gap-1.5">
<span className="text-sm font-medium">Foto (opcional)</span>
<span className="text-sm font-medium">{t('photoLabel')}</span>
{photoPreview ? (
<div className="relative">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={photoPreview} alt="Pré-visualização" className="h-48 w-full rounded-lg object-cover" />
<img src={photoPreview} alt={t('photoPreview')} className="h-48 w-full rounded-lg object-cover" />
<button
type="button"
onClick={removePhoto}
@@ -169,7 +167,7 @@ export default function NewRequestPage() {
className="flex h-24 w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border text-sm text-muted-foreground hover:bg-accent"
>
<Camera className="h-5 w-5" />
Tirar / escolher foto
{t('photoButton')}
</button>
)}
<input
@@ -182,10 +180,10 @@ export default function NewRequestPage() {
/>
</div>
{/* Descrição */}
{/* Description */}
<div className="flex flex-col gap-1.5">
<label htmlFor="description" className="flex items-center justify-between text-sm font-medium">
<span>Descrição <span className="text-destructive">*</span></span>
<span>{t('descriptionLabel')} <span className="text-destructive">{t('descriptionRequired')}</span></span>
<span className={`text-xs ${descLen > 1000 ? 'text-destructive' : 'text-muted-foreground'}`}>
{descLen}/1000
</span>
@@ -198,7 +196,7 @@ export default function NewRequestPage() {
minLength={3}
maxLength={1000}
rows={4}
placeholder="Descreve o problema…"
placeholder={t('descriptionPlaceholder')}
className="w-full resize-none rounded-lg border border-border bg-card px-3 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
/>
</div>
@@ -213,7 +211,7 @@ export default function NewRequestPage() {
disabled={!canSubmit}
className="w-full rounded-xl bg-primary px-6 py-4 text-base font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
>
{submitting ? 'A guardar…' : 'Enviar pedido'}
{submitting ? t('submitting') : t('submit')}
</button>
</div>
</form>
apps/operator-pwa/app/maintenance/sent/sent-status.tsx
+6 -6
View File
@@ -3,11 +3,13 @@
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { CheckCircle2, Clock } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { db } from '@/lib/queue/db';
import { subscribeBroadcast } from '@/lib/queue/broadcast';
export function SentStatus({ cid }: { cid: string }) {
const [inQueue, setInQueue] = useState<boolean | null>(null); // null = loading
const t = useTranslations('maintenance');
const [inQueue, setInQueue] = useState<boolean | null>(null);
useEffect(() => {
async function check() {
@@ -35,7 +37,7 @@ export function SentStatus({ cid }: { cid: string }) {
<CheckCircle2 className="h-16 w-16 text-green-500" />
)}
<h1 className="text-2xl font-bold">
{pending ? 'Pedido em fila' : 'Pedido enviado'}
{pending ? t('pendingTitle') : t('sentTitle')}
</h1>
{cid && (
<p className="font-mono text-xs text-muted-foreground" data-testid="request-cid">
@@ -43,16 +45,14 @@ export function SentStatus({ cid }: { cid: string }) {
</p>
)}
<p className="text-sm text-muted-foreground">
{pending
? 'Será enviado assim que a ligação for restabelecida.'
: 'A equipa de manutenção foi notificada e irá tratar do problema.'}
{pending ? t('pendingMessage') : t('sentMessage')}
</p>
</div>
<Link
href="/"
className="rounded-xl bg-primary px-8 py-3 font-semibold text-primary-foreground hover:opacity-90"
>
Voltar ao início
{t('backHome')}
</Link>
</main>
);
apps/operator-pwa/app/not-found.tsx
+8 -4
View File
@@ -1,10 +1,14 @@
export default function NotFound() {
import { getTranslations } from 'next-intl/server';
export default async function NotFound() {
const t = await getTranslations('errors');
return (
<main className="flex min-h-screen flex-col items-center justify-center gap-4 p-6 text-center">
<h1 className="text-4xl font-bold">404</h1>
<p className="text-muted-foreground">Página não encontrada.</p>
<h1 className="text-4xl font-bold">{t('title404')}</h1>
<p className="text-muted-foreground">{t('message404')}</p>
<a href="/" className="text-sm underline underline-offset-4">
Voltar ao início
{t('backHome')}
</a>
</main>
);
apps/operator-pwa/app/page.tsx
+11 -6
View File
@@ -1,15 +1,17 @@
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();
// myRecent is a protectedProcedure — fails gracefully when there is no session.
type RecentItem = Awaited<ReturnType<typeof api.maintenanceRequest.myRecent>>[number];
let recent: RecentItem[] = [];
try {
@@ -23,12 +25,15 @@ export default async function HomePage() {
{/* ── 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">Operador</p>
<p className="text-xs text-muted-foreground">{t('operator')}</p>
<p className="text-sm font-medium" data-testid="current-user">
{user?.email ?? '—'}
</p>
</div>
<SignOutButton />
<div className="flex items-center gap-2">
<LanguageSwitcher />
<SignOutButton />
</div>
</header>
<div className="flex flex-1 flex-col gap-6 p-4">
@@ -42,15 +47,15 @@ export default async function HomePage() {
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" />
Pedir manutenção
{t('requestMaintenance')}
</Link>
{/* ── Recent requests ── */}
<section>
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Os meus pedidos</h2>
<h2 className="mb-3 text-sm font-medium text-muted-foreground">{t('myRequests')}</h2>
{recent.length === 0 ? (
<p className="text-sm text-muted-foreground">Nenhum pedido ainda.</p>
<p className="text-sm text-muted-foreground">{t('noRequests')}</p>
) : (
<ul className="flex flex-col gap-2">
{recent.map((req) => (
apps/operator-pwa/app/select-operator/operator-picker.tsx
+19 -15
View File
@@ -2,6 +2,7 @@
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { signIn } from 'next-auth/react';
import { ArrowLeft, Delete } from 'lucide-react';
@@ -10,8 +11,6 @@ interface Operator {
email: string;
}
// ── State types ──────────────────────────────────────────────────────────────
type PickerState =
| { step: 'list' }
| { step: 'pin'; operator: Operator };
@@ -19,20 +18,18 @@ type PickerState =
const PIN_MIN = 4;
const PIN_MAX = 6;
// ── Sub-components ───────────────────────────────────────────────────────────
function OperatorList({
operators,
onSelect,
t,
}: {
operators: Operator[];
onSelect: (op: Operator) => void;
t: ReturnType<typeof useTranslations<'auth'>>;
}) {
if (operators.length === 0) {
return (
<p className="text-sm text-muted-foreground">
Nenhum operador encontrado. Execute <code>pnpm db:seed</code>.
</p>
<p className="text-sm text-muted-foreground">{t('noOperators')}</p>
);
}
return (
@@ -53,9 +50,13 @@ function OperatorList({
function PinPad({
operator,
onBack,
t,
tc,
}: {
operator: Operator;
onBack: () => void;
t: ReturnType<typeof useTranslations<'auth'>>;
tc: ReturnType<typeof useTranslations<'common'>>;
}) {
const router = useRouter();
const [digits, setDigits] = useState('');
@@ -85,14 +86,14 @@ function PinPad({
});
if (result?.error) {
setDigits('');
setError('PIN incorreto ou conta bloqueada. Tente novamente.');
setError(t('invalidPin'));
} else {
router.push('/');
router.refresh();
}
} catch {
setDigits('');
setError('Erro inesperado. Tente novamente.');
setError(t('unexpectedError'));
} finally {
setBusy(false);
}
@@ -108,12 +109,12 @@ function PinPad({
onClick={onBack}
disabled={busy}
className="rounded-lg p-2 hover:bg-accent disabled:opacity-50"
aria-label="Voltar"
aria-label={t('back')}
>
<ArrowLeft className="h-5 w-5" />
</button>
<div>
<p className="text-xs text-muted-foreground">Operador selecionado</p>
<p className="text-xs text-muted-foreground">{t('operatorSelected')}</p>
<p className="text-sm font-medium">{operator.email}</p>
</div>
</div>
@@ -150,7 +151,7 @@ function PinPad({
onClick={erase}
disabled={busy || digits.length === 0}
className="flex items-center justify-center rounded-2xl border border-border bg-card py-5 text-lg font-medium transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
aria-label="Apagar"
aria-label={t('deleteDigit')}
>
<Delete className="h-5 w-5" />
</button>
@@ -175,15 +176,15 @@ function PinPad({
disabled={digits.length < PIN_MIN || busy}
className="w-full rounded-xl bg-primary py-4 text-base font-semibold text-primary-foreground transition-opacity hover:opacity-90 active:scale-[0.98] disabled:opacity-40"
>
{busy ? 'A entrar…' : 'Entrar'}
{busy ? tc('entering') : tc('enter')}
</button>
</div>
);
}
// ── Main component ───────────────────────────────────────────────────────────
export function OperatorPicker({ operators }: { operators: Operator[] }) {
const t = useTranslations('auth');
const tc = useTranslations('common');
const [state, setState] = useState<PickerState>({ step: 'list' });
if (state.step === 'pin') {
@@ -191,6 +192,8 @@ export function OperatorPicker({ operators }: { operators: Operator[] }) {
<PinPad
operator={state.operator}
onBack={() => setState({ step: 'list' })}
t={t}
tc={tc}
/>
);
}
@@ -199,6 +202,7 @@ export function OperatorPicker({ operators }: { operators: Operator[] }) {
<OperatorList
operators={operators}
onSelect={(op) => setState({ step: 'pin', operator: op })}
t={t}
/>
);
}
apps/operator-pwa/app/select-operator/page.tsx
+4 -2
View File
@@ -1,4 +1,5 @@
import { redirect } from 'next/navigation';
import { getTranslations } from 'next-intl/server';
import { prisma } from '@repo/db';
import { resolveUser } from '@/lib/auth';
import { OperatorPicker } from './operator-picker';
@@ -7,6 +8,7 @@ import { OperatorPicker } from './operator-picker';
// the login step. prisma is used directly (bypassing the tRPC auth layer) so
// the page works even when AUTH_DEV_AUTOLOGIN=false.
export default async function SelectOperatorPage() {
const t = await getTranslations('auth');
const user = await resolveUser();
if (user) redirect('/');
@@ -19,8 +21,8 @@ export default async function SelectOperatorPage() {
return (
<main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-8 p-6">
<header className="text-center">
<h1 className="text-2xl font-bold tracking-tight">Quem és tu?</h1>
<p className="mt-1 text-sm text-muted-foreground">Escolhe o teu perfil para continuar.</p>
<h1 className="text-2xl font-bold tracking-tight">{t('pickerTitle')}</h1>
<p className="mt-1 text-sm text-muted-foreground">{t('pickerSubtitle')}</p>
</header>
<OperatorPicker operators={operators} />
</main>
apps/operator-pwa/app/sign-out-button.tsx
+3 -1
View File
@@ -1,14 +1,16 @@
'use client';
import { useTranslations } from 'next-intl';
import { signOut } from 'next-auth/react';
export function SignOutButton() {
const t = useTranslations('auth');
return (
<button
onClick={() => signOut({ callbackUrl: '/select-operator' })}
className="text-xs text-muted-foreground underline-offset-2 hover:underline"
>
Trocar
{t('switchOperator')}
</button>
);
}
apps/operator-pwa/app/status-badge.tsx
+14 -8
View File
@@ -1,14 +1,20 @@
const CONFIG = {
OPEN: { label: 'Aberto', className: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' },
CLAIMED: { label: 'Em curso', className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' },
RESOLVED: { label: 'Resolvido',className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' },
'use client';
import { useTranslations } from 'next-intl';
const STATUS_CLASS = {
OPEN: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
CLAIMED: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
RESOLVED: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
} as const;
export function StatusBadge({ status }: { status: keyof typeof CONFIG }) {
const { label, className } = CONFIG[status];
type Status = keyof typeof STATUS_CLASS;
export function StatusBadge({ status }: { status: Status }) {
const t = useTranslations('common');
return (
<span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ${className}`}>
{label}
<span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_CLASS[status]}`}>
{t(`status.${status.toLowerCase() as 'open' | 'claimed' | 'resolved'}`)}
</span>
);
}
apps/operator-pwa/app/sync-chip.tsx
+5 -3
View File
@@ -1,14 +1,16 @@
'use client';
import { useTranslations } from 'next-intl';
import { useSyncState } from './sync-provider';
export function SyncChip() {
const t = useTranslations('sync');
const { pendingCount, deadLetterCount } = useSyncState();
if (deadLetterCount > 0) {
return (
<div className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
{deadLetterCount} pedido{deadLetterCount > 1 ? 's' : ''} com erro — contacta o supervisor.
{t('deadLetters', { count: deadLetterCount })}
</div>
);
}
@@ -17,7 +19,7 @@ export function SyncChip() {
return (
<div className="flex items-center gap-2 rounded-lg bg-orange-50 px-3 py-2 text-xs text-orange-700">
<span className="h-2 w-2 rounded-full bg-orange-400" />
{pendingCount} pedido{pendingCount > 1 ? 's' : ''} por enviar
{t('pending', { count: pendingCount })}
</div>
);
}
@@ -25,7 +27,7 @@ export function SyncChip() {
return (
<div className="flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2 text-xs text-green-700">
<span className="h-2 w-2 rounded-full bg-green-500" />
Tudo sincronizado
{t('synced')}
</div>
);
}
apps/operator-pwa/app/sync-provider.tsx
+4 -2
View File
@@ -9,6 +9,7 @@ import {
useState,
type ReactNode,
} from 'react';
import { useTranslations } from 'next-intl';
import { subscribeBroadcast, type SyncMessage } from '@/lib/queue/broadcast';
import { runSync } from '@/lib/queue/sync';
import { db } from '@/lib/queue/db';
@@ -22,6 +23,7 @@ const SyncCtx = createContext<SyncState>({ pendingCount: 0, deadLetterCount: 0 }
export const useSyncState = () => useContext(SyncCtx);
export function SyncProvider({ children }: { children: ReactNode }) {
const t = useTranslations('sync');
const [state, setState] = useState<SyncState>({ pendingCount: 0, deadLetterCount: 0 });
const [failedIds, setFailedIds] = useState<string[]>([]);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -85,11 +87,11 @@ export function SyncProvider({ children }: { children: ReactNode }) {
key={id}
className="flex items-center justify-between rounded-lg bg-destructive px-4 py-3 text-sm text-destructive-foreground shadow-lg"
>
<span>Pedido {id.slice(0, 8)}… falhou — contacta o supervisor.</span>
<span>{t('requestFailed', { id: id.slice(0, 8) })}</span>
<button
onClick={() => setFailedIds((prev) => prev.filter((x) => x !== id))}
className="ml-4 shrink-0 opacity-80 hover:opacity-100"
aria-label="Fechar"
aria-label={t('close')}
>
✕
</button>
apps/operator-pwa/i18n/locales.ts
+8
View File
@@ -0,0 +1,8 @@
export const LOCALES = ['pt', 'en'] as const;
export type Locale = (typeof LOCALES)[number];
export const DEFAULT_LOCALE: Locale = 'pt';
export const LOCALE_LABELS: Record<Locale, string> = { pt: 'PT', en: 'EN' };
export function isLocale(v: string | undefined): v is Locale {
return !!v && (LOCALES as readonly string[]).includes(v);
}
apps/operator-pwa/i18n/request.ts
+12
View File
@@ -0,0 +1,12 @@
import { getRequestConfig } from 'next-intl/server';
import { cookies } from 'next/headers';
import { DEFAULT_LOCALE, isLocale } from './locales';
export default getRequestConfig(async () => {
const cookie = (await cookies()).get('NEXT_LOCALE')?.value;
const locale = isLocale(cookie) ? cookie : DEFAULT_LOCALE;
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});
apps/operator-pwa/messages/en.json
+70
View File
@@ -0,0 +1,70 @@
{
"metadata": {
"title": "FieldOps — Operator",
"description": "Industrial operator console.",
"appName": "FieldOps Operator"
},
"common": {
"enter": "Sign in",
"entering": "Signing in…",
"status": {
"open": "Open",
"claimed": "In progress",
"resolved": "Resolved"
}
},
"errors": {
"title500": "500",
"message500": "An unexpected error occurred.",
"retry": "Try again",
"title404": "404",
"message404": "Page not found.",
"backHome": "Back to home"
},
"auth": {
"pickerTitle": "Who are you?",
"pickerSubtitle": "Choose your profile to continue.",
"noOperators": "No operators found. Run pnpm db:seed.",
"back": "Back",
"operatorSelected": "Selected operator",
"invalidPin": "Incorrect PIN or account locked. Please try again.",
"unexpectedError": "Unexpected error. Please try again.",
"deleteDigit": "Delete",
"switchOperator": "Switch"
},
"home": {
"operator": "Operator",
"myRequests": "My requests",
"requestMaintenance": "Request maintenance",
"noRequests": "No requests yet."
},
"sync": {
"deadLetters": "{count, plural, one {# request failed — contact your supervisor.} other {# requests failed — contact your supervisor.}}",
"pending": "{count, plural, one {# request pending} other {# requests pending}}",
"synced": "All synced",
"requestFailed": "Request {id}… failed — contact your supervisor.",
"close": "Close"
},
"maintenance": {
"newTitle": "New maintenance request",
"workstationLabel": "Workstation",
"workstationRequired": "*",
"workstationLoading": "Loading workstations…",
"workstationPlaceholder": "Select a workstation…",
"photoLabel": "Photo (optional)",
"photoPreview": "Preview",
"photoButton": "Take / choose photo",
"descriptionLabel": "Description",
"descriptionRequired": "*",
"descriptionPlaceholder": "Describe the problem…",
"photoError": "Could not process the photo. Please try again.",
"saveError": "Error saving request. Please try again.",
"submit": "Submit request",
"submitting": "Saving…",
"sentTitle": "Request submitted",
"pendingTitle": "Request queued",
"sentMessage": "The maintenance team has been notified and will handle the issue.",
"pendingMessage": "Will be sent as soon as the connection is restored.",
"backHome": "Back to home"
}
}
apps/operator-pwa/messages/pt.json
+70
View File
@@ -0,0 +1,70 @@
{
"metadata": {
"title": "FieldOps — Operador",
"description": "Consola de operador industrial.",
"appName": "FieldOps Operador"
},
"common": {
"enter": "Entrar",
"entering": "A entrar…",
"status": {
"open": "Aberto",
"claimed": "Em curso",
"resolved": "Resolvido"
}
},
"errors": {
"title500": "500",
"message500": "Ocorreu um erro inesperado.",
"retry": "Tentar novamente",
"title404": "404",
"message404": "Página não encontrada.",
"backHome": "Voltar ao início"
},
"auth": {
"pickerTitle": "Quem és tu?",
"pickerSubtitle": "Escolhe o teu perfil para continuar.",
"noOperators": "Nenhum operador encontrado. Execute pnpm db:seed.",
"back": "Voltar",
"operatorSelected": "Operador selecionado",
"invalidPin": "PIN incorreto ou conta bloqueada. Tente novamente.",
"unexpectedError": "Erro inesperado. Tente novamente.",
"deleteDigit": "Apagar",
"switchOperator": "Trocar"
},
"home": {
"operator": "Operador",
"myRequests": "Os meus pedidos",
"requestMaintenance": "Pedir manutenção",
"noRequests": "Nenhum pedido ainda."
},
"sync": {
"deadLetters": "{count, plural, one {# pedido com erro — contacta o supervisor.} other {# pedidos com erro — contacta o supervisor.}}",
"pending": "{count, plural, one {# pedido por enviar} other {# pedidos por enviar}}",
"synced": "Tudo sincronizado",
"requestFailed": "Pedido {id}… falhou — contacta o supervisor.",
"close": "Fechar"
},
"maintenance": {
"newTitle": "Novo pedido de manutenção",
"workstationLabel": "Posto",
"workstationRequired": "*",
"workstationLoading": "A carregar postos…",
"workstationPlaceholder": "Seleciona um posto…",
"photoLabel": "Foto (opcional)",
"photoPreview": "Pré-visualização",
"photoButton": "Tirar / escolher foto",
"descriptionLabel": "Descrição",
"descriptionRequired": "*",
"descriptionPlaceholder": "Descreve o problema…",
"photoError": "Não foi possível processar a foto. Tenta de novo.",
"saveError": "Erro ao guardar pedido. Tenta de novo.",
"submit": "Enviar pedido",
"submitting": "A guardar…",
"sentTitle": "Pedido enviado",
"pendingTitle": "Pedido em fila",
"sentMessage": "A equipa de manutenção foi notificada e irá tratar do problema.",
"pendingMessage": "Será enviado assim que a ligação for restabelecida.",
"backHome": "Voltar ao início"
}
}
apps/operator-pwa/next.config.ts
+4 -1
View File
@@ -1,7 +1,10 @@
import type { NextConfig } from 'next';
import withPWAInit from '@ducanh2912/next-pwa';
import createNextIntlPlugin from 'next-intl/plugin';
import './env';
const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
const withPWA = withPWAInit({
dest: 'public',
cacheOnFrontEndNav: true,
@@ -29,4 +32,4 @@ const nextConfig: NextConfig = {
],
};
export default withPWA(nextConfig);
export default withPWA(withNextIntl(nextConfig));
apps/operator-pwa/package.json
+2 -1
View File
@@ -17,15 +17,16 @@
"@repo/db": "workspace:*",
"@repo/domain": "workspace:*",
"@repo/ui": "workspace:*",
"dexie": "^4.0.10",
"@t3-oss/env-nextjs": "^0.11.1",
"@tanstack/react-query": "^5.62.10",
"@trpc/client": "^11.0.0",
"@trpc/react-query": "^11.0.0",
"@trpc/server": "^11.0.0",
"dexie": "^4.0.10",
"lucide-react": "^0.469.0",
"next": "15.3.9",
"next-auth": "5.0.0-beta.25",
"next-intl": "^4.13.0",
"pino": "^9.5.0",
"pino-pretty": "^11.3.0",
"react": "^19.0.0",