MAI CALL - step 9
This commit is contained in:
parent
4cc7f2f121
commit
04855cb8a4
@ -33,7 +33,8 @@
|
|||||||
"Bash(Select-String \"15\\\\.\")",
|
"Bash(Select-String \"15\\\\.\")",
|
||||||
"Bash(Select-Object -Last 15)",
|
"Bash(Select-Object -Last 15)",
|
||||||
"Bash(pnpm --filter @repo/operator-pwa build -- --no-lint)",
|
"Bash(pnpm --filter @repo/operator-pwa build -- --no-lint)",
|
||||||
"Bash(pnpm --filter @repo/operator-pwa exec next build)"
|
"Bash(pnpm --filter @repo/operator-pwa exec next build)",
|
||||||
|
"Bash(del \"c:\\\\Users\\\\prdcg\\\\Documents\\\\Git\\\\FieldOps\\\\apps\\\\operator-pwa\\\\app\\\\ping-client.tsx\")"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,90 +1,72 @@
|
|||||||
import { TRPCError } from '@trpc/server';
|
import Link from 'next/link';
|
||||||
import { CheckCircle2, AlertCircle } from 'lucide-react';
|
import { Wrench } 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 { resolveUser } from '@/lib/auth';
|
||||||
import { PingClient } from './ping-client';
|
import { api } from '@/lib/trpc/server';
|
||||||
import { SignOutButton } from './sign-out-button';
|
import { SignOutButton } from './sign-out-button';
|
||||||
|
import { StatusBadge } from './status-badge';
|
||||||
|
|
||||||
export default async function HomePage() {
|
export default async function HomePage() {
|
||||||
const user = await resolveUser();
|
const user = await resolveUser();
|
||||||
|
|
||||||
let result:
|
// myRecent is a protectedProcedure — fails gracefully when there is no session.
|
||||||
| { ok: true; payload: Awaited<ReturnType<typeof api.ping.ping>> }
|
type RecentItem = Awaited<ReturnType<typeof api.maintenanceRequest.myRecent>>[number];
|
||||||
| { ok: false; message: string; code: string } = {
|
let recent: RecentItem[] = [];
|
||||||
ok: false,
|
|
||||||
message: 'init',
|
|
||||||
code: 'INIT',
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const payload = await api.ping.ping();
|
recent = await api.maintenanceRequest.myRecent({ limit: 5 });
|
||||||
result = { ok: true, payload };
|
} catch {
|
||||||
} catch (err) {
|
// No session or other error — show empty list without crashing.
|
||||||
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 (
|
return (
|
||||||
<main className="mx-auto flex min-h-screen max-w-2xl flex-col items-stretch justify-center gap-6 p-6">
|
<main className="mx-auto flex min-h-dvh max-w-lg flex-col bg-background">
|
||||||
{user && (
|
{/* ── Header ── */}
|
||||||
<div className="flex items-center justify-between rounded-lg border border-border bg-card px-4 py-2 text-sm">
|
<header className="flex items-center justify-between border-b border-border bg-card px-4 py-3">
|
||||||
<span data-testid="current-user">{user.email}</span>
|
<div>
|
||||||
<SignOutButton />
|
<p className="text-xs text-muted-foreground">Operador</p>
|
||||||
|
<p className="text-sm font-medium" data-testid="current-user">
|
||||||
|
{user?.email ?? '—'}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<SignOutButton />
|
||||||
|
|
||||||
<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>
|
</header>
|
||||||
|
|
||||||
{result.ok ? (
|
<div className="flex flex-1 flex-col gap-6 p-4">
|
||||||
<Card data-testid="ping-success">
|
{/* ── Primary CTA ── */}
|
||||||
<CardHeader>
|
<Link
|
||||||
<CardTitle className="flex items-center gap-2">
|
href="/maintenance/new"
|
||||||
<CheckCircle2 className="h-5 w-5 text-green-600" />
|
data-testid="btn-request-maintenance"
|
||||||
Connected
|
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]"
|
||||||
</CardTitle>
|
>
|
||||||
<CardDescription>
|
<Wrench className="h-6 w-6" />
|
||||||
End-to-end path verified: RSC → tRPC → Prisma → Postgres.
|
Pedir manutenção
|
||||||
</CardDescription>
|
</Link>
|
||||||
</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 />
|
{/* ── Recent requests ── */}
|
||||||
|
<section>
|
||||||
|
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Os meus pedidos</h2>
|
||||||
|
|
||||||
|
{recent.length === 0 ? (
|
||||||
|
<p className="text-sm text-muted-foreground">Nenhum pedido ainda.</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>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,43 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui';
|
|
||||||
import { trpc } from '@/lib/trpc/client';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Client-side ping. Demonstrates the second tRPC path: client hooks +
|
|
||||||
* TanStack Query. The RSC caller above the fold and this hook hit the same
|
|
||||||
* procedure — both must succeed for the hybrid wiring to be considered green.
|
|
||||||
*/
|
|
||||||
export function PingClient() {
|
|
||||||
const query = trpc.ping.ping.useQuery();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card data-testid="ping-client">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2 text-base">
|
|
||||||
{query.isPending ? (
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
) : query.isError ? (
|
|
||||||
<AlertCircle className="h-4 w-4 text-destructive" />
|
|
||||||
) : (
|
|
||||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
|
||||||
)}
|
|
||||||
Client-side ping (useQuery)
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>Round-trips through /api/trpc.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="text-sm">
|
|
||||||
{query.isPending && <span>Loading…</span>}
|
|
||||||
{query.isError && (
|
|
||||||
<span className="text-destructive" data-testid="ping-client-error">
|
|
||||||
{query.error.message}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{query.data && (
|
|
||||||
<span data-testid="ping-client-tenant">tenant: {query.data.tenant.name}</span>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
14
apps/operator-pwa/app/status-badge.tsx
Normal file
14
apps/operator-pwa/app/status-badge.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
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' },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export function StatusBadge({ status }: { status: keyof typeof CONFIG }) {
|
||||||
|
const { label, className } = CONFIG[status];
|
||||||
|
return (
|
||||||
|
<span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ${className}`}>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user