first project commit
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
import { handlers } from '@/lib/auth';
|
||||
|
||||
export const { GET, POST } = handlers;
|
||||
export const runtime = 'nodejs';
|
||||
@@ -0,0 +1,25 @@
|
||||
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
|
||||
import { appRouter, createTRPCContext } from '@repo/api';
|
||||
import { resolveUser } from '@/lib/auth';
|
||||
|
||||
export const runtime = 'nodejs';
|
||||
|
||||
const handler = async (req: Request) => {
|
||||
return fetchRequestHandler({
|
||||
endpoint: '/api/trpc',
|
||||
req,
|
||||
router: appRouter,
|
||||
createContext: async () => {
|
||||
const user = await resolveUser();
|
||||
return createTRPCContext({ user, headers: req.headers });
|
||||
},
|
||||
onError({ error, path }) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`[trpc] ${path ?? '<no-path>'}:`, error.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export { handler as GET, handler as POST };
|
||||
@@ -0,0 +1,58 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { Providers } from './providers';
|
||||
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 const viewport: Viewport = {
|
||||
themeColor: '#0f172a',
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="min-h-screen bg-background font-sans antialiased">
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
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 { PingClient } from './ping-client';
|
||||
|
||||
/**
|
||||
* Smoke-test home page. Uses the RSC tRPC caller (server-side) to invoke the
|
||||
* ping procedure end-to-end:
|
||||
*
|
||||
* RSC → tRPC caller → protectedProcedure → Prisma → Postgres → Tenant row
|
||||
*
|
||||
* If the call throws (e.g. UNAUTHORIZED because no session), the error is
|
||||
* caught and rendered as a legible failure card.
|
||||
*/
|
||||
export default async function HomePage() {
|
||||
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">
|
||||
<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 Auth.js.
|
||||
</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<PingClient />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
'use client';
|
||||
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { httpBatchLink } from '@trpc/client';
|
||||
import superjson from 'superjson';
|
||||
import { trpc } from '@/lib/trpc/client';
|
||||
|
||||
function makeTrpcClient() {
|
||||
return trpc.createClient({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
url: '/api/trpc',
|
||||
transformer: superjson,
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
export function Providers({ children }: { children: ReactNode }) {
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 30 * 1000,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
const [trpcClient] = useState(makeTrpcClient);
|
||||
|
||||
return (
|
||||
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
</trpc.Provider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user