first project commit

2026-05-16 12:02:15 +01:00
parent 33789b13d1
commit c013b52f59
79 changed files with 5834 additions and 0 deletions
@@ -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>
+  );
+}
@@ -0,0 +1,36 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+/**
+ * Zod-validated environment. Imported eagerly from next.config.ts so that
+ * missing/invalid variables fail the build instead of silently leaking
+ * `undefined` at runtime.
+ */
+export const env = createEnv({
+  server: {
+    NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
+    DATABASE_URL: z.string().url(),
+    AUTH_SECRET: z.string().min(1, 'AUTH_SECRET is required'),
+    AUTH_URL: z.string().url().optional(),
+    AUTH_DEV_AUTOLOGIN: z
+      .string()
+      .optional()
+      .transform((v) => v === 'true'),
+    LOG_LEVEL: z
+      .enum(['fatal', 'error', 'warn', 'info', 'debug', 'trace'])
+      .default('info'),
+  },
+  client: {
+    NEXT_PUBLIC_APP_URL: z.string().url(),
+  },
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    DATABASE_URL: process.env.DATABASE_URL,
+    AUTH_SECRET: process.env.AUTH_SECRET,
+    AUTH_URL: process.env.AUTH_URL,
+    AUTH_DEV_AUTOLOGIN: process.env.AUTH_DEV_AUTOLOGIN,
+    LOG_LEVEL: process.env.LOG_LEVEL,
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+  },
+  emptyStringAsUndefined: true,
+});
@@ -0,0 +1,40 @@
+import type { NextAuthConfig } from 'next-auth';
+
+/**
+ * Edge-safe portion of the Auth.js config. The middleware imports THIS, never
+ * the full `auth.ts` — Credentials providers and the Prisma client are not
+ * edge-compatible, so they live exclusively in auth.ts which runs in the
+ * Node.js runtime (route handlers).
+ */
+export const authConfig = {
+  trustHost: true,
+  session: { strategy: 'jwt' },
+  pages: {
+    // No login UI in this scaffold phase. See auth.ts for the placeholder.
+  },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        // user is the value returned from `authorize()` in the Credentials provider.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const u = user as any;
+        token.id = u.id;
+        token.role = u.role;
+        token.tenantId = u.tenantId;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (token && session.user) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (session.user as any).id = token.id;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (session.user as any).role = token.role;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (session.user as any).tenantId = token.tenantId;
+      }
+      return session;
+    },
+  },
+  providers: [],
+} satisfies NextAuthConfig;
@@ -0,0 +1,93 @@
+import NextAuth from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import { prisma } from '@repo/db';
+import type { SessionUser } from '@repo/api';
+import { env } from '../env';
+import { authConfig } from './auth.config';
+
+/**
+ * ============================================================================
+ *  Auth.js v5 — PLACEHOLDER configuration for the scaffold phase.
+ * ============================================================================
+ *
+ *  The Credentials provider below accepts ANY email that exists in the User
+ *  table (seeded by `pnpm db:seed`). NO PASSWORD CHECK is performed. This is
+ *  deliberately minimal — just enough to populate the tRPC context with a real
+ *  Auth.js session — and MUST be replaced with real authentication before any
+ *  non-dev deployment.
+ *
+ *  Auto sign-in
+ *  ------------
+ *  See `resolveUser()` below. When AUTH_DEV_AUTOLOGIN=true, server-side code
+ *  that has no session falls back to the seeded admin user. This is a back
+ *  door and is gated by an explicit env flag whose default in .env.example is
+ *  FALSE.
+ *
+ *      !!! NEVER set AUTH_DEV_AUTOLOGIN=true in production. !!!
+ *
+ *  In production with AUTH_DEV_AUTOLOGIN unset/false, requests without a
+ *  signed Auth.js session resolve to user=null, and protectedProcedure throws
+ *  401.
+ * ============================================================================
+ */
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  ...authConfig,
+  secret: env.AUTH_SECRET,
+  providers: [
+    Credentials({
+      name: 'Email (placeholder)',
+      credentials: {
+        email: { label: 'Email', type: 'email' },
+      },
+      async authorize(credentials) {
+        const email = credentials?.email;
+        if (typeof email !== 'string' || !email) return null;
+        const user = await prisma.user.findFirst({ where: { email } });
+        if (!user) return null;
+        // NO password verification — placeholder only.
+        return {
+          id: user.id,
+          email: user.email,
+          name: user.email,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          role: user.role as any,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          tenantId: user.tenantId as any,
+        };
+      },
+    }),
+  ],
+});
+
+/**
+ * Resolve the current user for server-side code (RSC, route handlers, tRPC).
+ * Single chokepoint that combines the real Auth.js session with the dev-only
+ * auto-login fallback. Application code MUST use this and not call `auth()`
+ * directly when it expects to honour AUTH_DEV_AUTOLOGIN.
+ */
+export async function resolveUser(): Promise<SessionUser | null> {
+  const session = await auth();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const u = session?.user as any;
+  if (u?.id && u?.tenantId) {
+    return { id: u.id, email: u.email, role: u.role, tenantId: u.tenantId };
+  }
+
+  if (env.AUTH_DEV_AUTOLOGIN) {
+    // Dev back door. Production guards: env flag default is false; this branch
+    // is also a no-op if the seed user doesn't exist.
+    const admin = await prisma.user.findFirst({ where: { email: 'admin@demo.local' } });
+    if (admin) {
+      return {
+        id: admin.id,
+        email: admin.email,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        role: admin.role as any,
+        tenantId: admin.tenantId,
+      };
+    }
+  }
+
+  return null;
+}
@@ -0,0 +1,12 @@
+'use client';
+
+import { createTRPCReact } from '@trpc/react-query';
+import type { AppRouter } from '@repo/api';
+
+/**
+ * Typed tRPC React Query hooks for client components.
+ *
+ *   import { trpc } from '@/lib/trpc/client';
+ *   const { data } = trpc.ping.ping.useQuery();
+ */
+export const trpc = createTRPCReact<AppRouter>();
@@ -0,0 +1,30 @@
+import 'server-only';
+import { cache } from 'react';
+import { headers } from 'next/headers';
+import {
+  appRouter,
+  createCallerFactory,
+  createTRPCContext,
+  type AppRouter,
+} from '@repo/api';
+import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
+import { resolveUser } from '../auth';
+
+/**
+ * RSC-side tRPC caller. Bypasses HTTP — runs the router directly inside the
+ * server component. Use this for reads in Server Components / Server Actions.
+ *
+ * For client-side reads/mutations, see `./client.ts` (TanStack Query hooks).
+ */
+const createContext = cache(async () => {
+  const user = await resolveUser();
+  const h = await headers();
+  return createTRPCContext({ user, headers: h });
+});
+
+const createCaller = createCallerFactory(appRouter);
+
+export const api = createCaller(createContext);
+
+export type RouterInputs = inferRouterInputs<AppRouter>;
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
@@ -0,0 +1,17 @@
+import NextAuth from 'next-auth';
+import { authConfig } from './lib/auth.config';
+
+// Edge-runtime middleware. Uses the edge-safe authConfig (no Credentials
+// provider, no Prisma) — it only validates and refreshes the JWT cookie. The
+// full auth config with the Credentials provider lives in lib/auth.ts and
+// runs in the Node.js runtime via the route handlers.
+export default NextAuth(authConfig).auth;
+
+export const config = {
+  matcher: [
+    // Run on every path except static assets, image optimization, and the
+    // PWA manifest. The Auth.js / tRPC API routes are excluded explicitly
+    // because they handle session resolution themselves.
+    '/((?!api/auth|api/trpc|_next/static|_next/image|favicon.ico|manifest.webmanifest|icon-.*\\.svg).*)',
+  ],
+};
@@ -0,0 +1,14 @@
+import type { NextConfig } from 'next';
+import './env';
+
+const config: NextConfig = {
+  transpilePackages: ['@repo/db', '@repo/api', '@repo/ui', '@repo/domain'],
+  reactStrictMode: true,
+  poweredByHeader: false,
+  // Pino uses worker_threads via pino-pretty. Next's server bundler doesn't
+  // emit the worker chunk correctly — mark these as external so they're
+  // required straight from node_modules at runtime.
+  serverExternalPackages: ['pino', 'pino-pretty'],
+};
+
+export default config;
@@ -0,0 +1,46 @@
+{
+  "name": "@repo/operator-pwa",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "dotenv -e ../../.env -- next dev --port 3000",
+    "build": "dotenv -e ../../.env -- next build",
+    "start": "dotenv -e ../../.env -- next start --port 3000",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf .next .turbo node_modules"
+  },
+  "dependencies": {
+    "@repo/api": "workspace:*",
+    "@repo/db": "workspace:*",
+    "@repo/domain": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "@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",
+    "lucide-react": "^0.469.0",
+    "next": "^15.1.3",
+    "next-auth": "5.0.0-beta.25",
+    "pino": "^9.5.0",
+    "pino-pretty": "^11.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "superjson": "^2.2.2",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@repo/config": "workspace:*",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "autoprefixer": "^10.4.20",
+    "dotenv-cli": "^8.0.0",
+    "postcss": "^8.4.49",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2"
+  }
+}
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="192" height="192">
+  <rect width="192" height="192" rx="32" fill="#0f172a"/>
+  <text x="96" y="116" font-family="system-ui, sans-serif" font-size="64" font-weight="700" fill="#f8fafc" text-anchor="middle">FO</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <rect width="512" height="512" rx="88" fill="#0f172a"/>
+  <text x="256" y="310" font-family="system-ui, sans-serif" font-size="180" font-weight="700" fill="#f8fafc" text-anchor="middle">FO</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <rect width="512" height="512" fill="#0f172a"/>
+  <text x="256" y="310" font-family="system-ui, sans-serif" font-size="160" font-weight="700" fill="#f8fafc" text-anchor="middle">FO</text>
+</svg>
@@ -0,0 +1,30 @@
+{
+  "name": "FieldOps Operator",
+  "short_name": "FieldOps",
+  "description": "Industrial operator console.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/icon-192.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    }
+  ]
+}
@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss';
+import preset from '@repo/config/tailwind/preset';
+
+const config: Config = {
+  presets: [preset],
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './lib/**/*.{ts,tsx}',
+    '../../packages/ui/src/**/*.{ts,tsx}',
+  ],
+};
+
+export default config;
@@ -0,0 +1,11 @@
+{
+  "extends": "@repo/config/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next-env.d.ts"],
+  "exclude": ["node_modules", ".next"]
+}