create-mercato-app 0.4.2-canary-e5804f7db1

package/template/src/app/api/[...slug]/route.ts

@@ -0,0 +1,227 @@
+import { NextResponse, type NextRequest } from 'next/server'
+import { findApi, type HttpMethod } from '@open-mercato/shared/modules/registry'
+import { CrudHttpError } from '@open-mercato/shared/lib/crud/errors'
+import { modules } from '@/.mercato/generated/modules.generated'
+import { getAuthFromRequest } from '@open-mercato/shared/lib/auth/server'
+import { bootstrap } from '@/bootstrap'
+
+// Ensure all package registrations are initialized for API routes
+bootstrap()
+import type { AuthContext } from '@open-mercato/shared/lib/auth/server'
+import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
+import { RbacService } from '@open-mercato/core/modules/auth/services/rbacService'
+import { resolveFeatureCheckContext } from '@open-mercato/core/modules/directory/utils/organizationScope'
+import { enforceTenantSelection, normalizeTenantId } from '@open-mercato/core/modules/auth/lib/tenantAccess'
+import { runWithCacheTenant } from '@open-mercato/cache'
+import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+
+type MethodMetadata = {
+  requireAuth?: boolean
+  requireRoles?: string[]
+  requireFeatures?: string[]
+}
+
+type HandlerContext = {
+  params: Record<string, string | string[]>
+  auth: AuthContext
+}
+
+function extractMethodMetadata(metadata: unknown, method: HttpMethod): MethodMetadata | null {
+  if (!metadata || typeof metadata !== 'object') return null
+  const entry = (metadata as Partial<Record<HttpMethod, unknown>>)[method]
+  if (!entry || typeof entry !== 'object') return null
+  const source = entry as Record<string, unknown>
+  const normalized: MethodMetadata = {}
+  if (typeof source.requireAuth === 'boolean') normalized.requireAuth = source.requireAuth
+  if (Array.isArray(source.requireRoles)) {
+    normalized.requireRoles = source.requireRoles.filter((role): role is string => typeof role === 'string' && role.length > 0)
+  }
+  if (Array.isArray(source.requireFeatures)) {
+    normalized.requireFeatures = source.requireFeatures.filter((feature): feature is string => typeof feature === 'string' && feature.length > 0)
+  }
+  return normalized
+}
+
+async function checkAuthorization(
+  methodMetadata: MethodMetadata | null,
+  auth: AuthContext,
+  req: NextRequest
+): Promise<NextResponse | null> {
+  const { t } = await resolveTranslations()
+  if (methodMetadata?.requireAuth && !auth) {
+    return NextResponse.json({ error: t('api.errors.unauthorized', 'Unauthorized') }, { status: 401 })
+  }
+
+  const requiredRoles = methodMetadata?.requireRoles ?? []
+  const requiredFeatures = methodMetadata?.requireFeatures ?? []
+
+  if (
+    requiredRoles.length &&
+    (!auth || !Array.isArray(auth.roles) || !requiredRoles.some((role) => auth.roles!.includes(role)))
+  ) {
+    return NextResponse.json({ error: t('api.errors.forbidden', 'Forbidden'), requiredRoles }, { status: 403 })
+  }
+
+  let container: Awaited<ReturnType<typeof createRequestContainer>> | null = null
+  const ensureContainer = async () => {
+    if (!container) container = await createRequestContainer()
+    return container
+  }
+
+  if (auth) {
+    const rawTenantCandidate = await extractTenantCandidate(req)
+    if (rawTenantCandidate !== undefined) {
+      const tenantCandidate = sanitizeTenantCandidate(rawTenantCandidate)
+      if (tenantCandidate !== undefined) {
+        const normalizedCandidate = normalizeTenantId(tenantCandidate) ?? null
+        const actorTenant = normalizeTenantId(auth.tenantId ?? null) ?? null
+        const tenantDiffers = normalizedCandidate !== actorTenant
+        if (tenantDiffers) {
+          try {
+            const guardContainer = await ensureContainer()
+            await enforceTenantSelection({ auth, container: guardContainer }, tenantCandidate)
+          } catch (error) {
+            if (error instanceof CrudHttpError) {
+              return NextResponse.json(error.body ?? { error: t('api.errors.forbidden', 'Forbidden') }, { status: error.status })
+            }
+            throw error
+          }
+        }
+      }
+    }
+  }
+
+  if (requiredFeatures.length) {
+    if (!auth) {
+      return NextResponse.json({ error: t('api.errors.unauthorized', 'Unauthorized') }, { status: 401 })
+    }
+    const featureContainer = await ensureContainer()
+    const rbac = featureContainer.resolve<RbacService>('rbacService')
+    const featureContext = await resolveFeatureCheckContext({ container: featureContainer, auth, request: req })
+    const { organizationId } = featureContext
+    const ok = await rbac.userHasAllFeatures(auth.sub, requiredFeatures, {
+      tenantId: featureContext.scope.tenantId ?? auth.tenantId ?? null,
+      organizationId,
+    })
+    if (!ok) {
+      try {
+        const acl = await rbac.loadAcl(auth.sub, { tenantId: featureContext.scope.tenantId ?? auth.tenantId ?? null, organizationId })
+        console.warn('[api] Forbidden - missing required features', {
+          path: req.nextUrl.pathname,
+          method: req.method,
+          userId: auth.sub,
+          tenantId: featureContext.scope.tenantId ?? auth.tenantId ?? null,
+          selectedOrganizationId: featureContext.scope.selectedId,
+          organizationId,
+          requiredFeatures,
+          grantedFeatures: acl.features,
+          isSuperAdmin: acl.isSuperAdmin,
+          allowedOrganizations: acl.organizations,
+        })
+      } catch (err) {
+        try {
+          console.warn('[api] Forbidden - could not resolve ACL for logging', {
+            path: req.nextUrl.pathname,
+            method: req.method,
+            userId: auth.sub,
+            tenantId: featureContext.scope.tenantId ?? auth.tenantId ?? null,
+            organizationId,
+            requiredFeatures,
+            error: err instanceof Error ? err.message : err,
+          })
+        } catch {
+          // best-effort logging; ignore secondary failures
+        }
+      }
+      return NextResponse.json({ error: t('api.errors.forbidden', 'Forbidden'), requiredFeatures }, { status: 403 })
+    }
+  }
+
+  return null
+}
+
+function sanitizeTenantCandidate(candidate: unknown): unknown {
+  if (typeof candidate === 'string') {
+    const lowered = candidate.trim().toLowerCase()
+    if (lowered === 'null') return null
+    if (lowered === 'undefined') return undefined
+    return candidate.trim()
+  }
+  return candidate
+}
+
+async function extractTenantCandidate(req: NextRequest): Promise<unknown> {
+  const tenantParams = req.nextUrl?.searchParams?.getAll?.('tenantId') ?? []
+  if (tenantParams.length > 0) {
+    return tenantParams[tenantParams.length - 1]
+  }
+
+  const method = (req.method || 'GET').toUpperCase()
+  if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS') {
+    return undefined
+  }
+
+  const rawContentType = req.headers.get('content-type')
+  if (!rawContentType) return undefined
+  const contentType = rawContentType.split(';')[0].trim().toLowerCase()
+
+  try {
+    if (contentType === 'application/json') {
+      const payload = await req.clone().json()
+      if (payload && typeof payload === 'object' && !Array.isArray(payload) && 'tenantId' in payload) {
+        return (payload as Record<string, unknown>).tenantId
+      }
+    } else if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
+      const form = await req.clone().formData()
+      if (form.has('tenantId')) {
+        const value = form.get('tenantId')
+        if (value instanceof File) return value.name
+        return value
+      }
+    }
+  } catch {
+    // Ignore parsing failures; downstream handlers can deal with malformed payloads.
+  }
+
+  return undefined
+}
+
+async function handleRequest(
+  method: HttpMethod,
+  req: NextRequest,
+  paramsPromise: Promise<{ slug: string[] }>
+): Promise<Response> {
+  const { t } = await resolveTranslations()
+  const params = await paramsPromise
+  const pathname = '/' + (params.slug?.join('/') ?? '')
+  const api = findApi(modules, method, pathname)
+  if (!api) return NextResponse.json({ error: t('api.errors.notFound', 'Not Found') }, { status: 404 })
+  const auth = await getAuthFromRequest(req)
+
+  const methodMetadata = extractMethodMetadata(api.metadata, method)
+  const authError = await checkAuthorization(methodMetadata, auth, req)
+  if (authError) return authError
+
+  const handlerContext: HandlerContext = { params: api.params, auth }
+  return await runWithCacheTenant(auth?.tenantId ?? null, () => api.handler(req, handlerContext))
+}
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ slug: string[] }> }) {
+  return handleRequest('GET', req, params)
+}
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ slug: string[] }> }) {
+  return handleRequest('POST', req, params)
+}
+
+export async function PUT(req: NextRequest, { params }: { params: Promise<{ slug: string[] }> }) {
+  return handleRequest('PUT', req, params)
+}
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ slug: string[] }> }) {
+  return handleRequest('PATCH', req, params)
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ slug: string[] }> }) {
+  return handleRequest('DELETE', req, params)
+}

package/template/src/app/api/docs/markdown/route.ts

@@ -0,0 +1,35 @@
+import { modules } from '@/.mercato/generated/modules.generated'
+import { buildOpenApiDocument, generateMarkdownFromOpenApi, sanitizeOpenApiDocument } from '@open-mercato/shared/lib/openapi'
+import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+
+export const dynamic = 'force-dynamic'
+
+function resolveBaseUrl() {
+  return (
+    process.env.NEXT_PUBLIC_API_BASE_URL ||
+    process.env.NEXT_PUBLIC_APP_URL ||
+    process.env.APP_URL ||
+    'http://localhost:3000'
+  )
+}
+
+export async function GET() {
+  const { t } = await resolveTranslations()
+  const baseUrl = resolveBaseUrl()
+  const rawDoc = buildOpenApiDocument(modules, {
+    title: t('api.docs.title', 'Open Mercato API'),
+    version: '1.0.0',
+    description: t('api.docs.description', 'Auto-generated OpenAPI definition for all enabled modules.'),
+    servers: [{ url: baseUrl, description: t('api.docs.serverDescription', 'Default environment') }],
+    baseUrlForExamples: baseUrl,
+    defaultSecurity: ['bearerAuth'],
+  })
+  const doc = sanitizeOpenApiDocument(rawDoc)
+  const markdown = generateMarkdownFromOpenApi(doc)
+  return new Response(markdown, {
+    headers: {
+      'content-type': 'text/markdown; charset=utf-8',
+      'cache-control': 'no-store',
+    },
+  })
+}

package/template/src/app/api/docs/openapi/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server'
+import { modules } from '@/.mercato/generated/modules.generated'
+import { buildOpenApiDocument, sanitizeOpenApiDocument } from '@open-mercato/shared/lib/openapi'
+import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+
+export const dynamic = 'force-dynamic'
+
+function resolveBaseUrl() {
+  return (
+    process.env.NEXT_PUBLIC_API_BASE_URL ||
+    process.env.NEXT_PUBLIC_APP_URL ||
+    process.env.APP_URL ||
+    'http://localhost:3000'
+  )
+}
+
+export async function GET() {
+  const { t } = await resolveTranslations()
+  const baseUrl = resolveBaseUrl()
+  const rawDoc = buildOpenApiDocument(modules, {
+    title: t('api.docs.title', 'Open Mercato API'),
+    version: '1.0.0',
+    description: t('api.docs.description', 'Auto-generated OpenAPI definition for all enabled modules.'),
+    servers: [{ url: baseUrl, description: t('api.docs.serverDescription', 'Default environment') }],
+    baseUrlForExamples: baseUrl,
+    defaultSecurity: ['bearerAuth'],
+  })
+  const doc = sanitizeOpenApiDocument(rawDoc)
+  return NextResponse.json(doc)
+}

package/template/src/app/globals.css

@@ -0,0 +1,178 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "react-big-calendar/lib/css/react-big-calendar.css";
+@import "@xyflow/react/dist/style.css";
+
+/*
+Include @open-mercato packages in Tailwind content scanning
+For standalone apps, packages are in node_modules with compiled dist/ output
+*/
+@source "../../node_modules/@open-mercato/ui/dist/**/*.js";
+@source "../../node_modules/@open-mercato/core/dist/**/*.js";
+@source "../../node_modules/@open-mercato/shared/dist/**/*.js";
+@source "../../node_modules/@open-mercato/search/dist/**/*.js";
+@source "../../node_modules/@open-mercato/onboarding/dist/**/*.js";
+@source "../../node_modules/@open-mercato/content/dist/**/*.js";
+@source "../../node_modules/@open-mercato/ai-assistant/dist/**/*.js";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.rbc-calendar {
+  font-family: var(--font-sans);
+}
+
+.rbc-toolbar,
+.rbc-time-header,
+.rbc-time-content,
+.rbc-agenda-view,
+.rbc-month-view {
+  color: var(--foreground);
+}
+
+.rbc-today {
+  background-color: color-mix(in oklab, var(--accent) 40%, transparent);
+}
+
+.schedule-calendar .rbc-time-gutter,
+.schedule-calendar .rbc-agenda-time-cell,
+.schedule-calendar .rbc-agenda-date-cell {
+  font-size: 0.75rem;
+}
+
+.schedule-calendar .rbc-time-content {
+  font-size: 0.8125rem;
+}
+
+/* Flash message animations */
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.animate-slide-in {
+    animation: slide-in 0.3s ease-out;
+}

package/template/src/app/layout.tsx

@@ -0,0 +1,76 @@
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+import { bootstrap } from '@/bootstrap'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+// Bootstrap all package registrations at module load time
+bootstrap()
+import { ThemeProvider, FrontendLayout, QueryProvider, AuthFooter } from '@open-mercato/ui'
+import { ClientBootstrapProvider } from '@/components/ClientBootstrap'
+import { GlobalNoticeBars } from '@/components/GlobalNoticeBars'
+import { detectLocale, loadDictionary, resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export async function generateMetadata(): Promise<Metadata> {
+  const { t } = await resolveTranslations()
+  return {
+    title: t('app.metadata.title', 'Open Mercato'),
+    description: t('app.metadata.description', 'AI‑supportive, modular ERP foundation for product & service companies'),
+    icons: {
+      icon: "/open-mercato.svg",
+    },
+  }
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const locale = await detectLocale()
+  const dict = await loadDictionary(locale)
+  const demoModeEnabled = process.env.DEMO_MODE !== 'false'
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var stored = localStorage.getItem('om-theme');
+                  var theme = stored === 'dark' ? 'dark'
+                    : stored === 'light' ? 'light'
+                    : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  if (theme === 'dark') document.documentElement.classList.add('dark');
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} suppressHydrationWarning data-gramm="false">
+        <I18nProvider locale={locale} dict={dict}>
+          <ClientBootstrapProvider>
+            <ThemeProvider>
+              <QueryProvider>
+                <FrontendLayout footer={<AuthFooter />}>{children}</FrontendLayout>
+                <GlobalNoticeBars demoModeEnabled={demoModeEnabled} />
+              </QueryProvider>
+            </ThemeProvider>
+          </ClientBootstrapProvider>
+        </I18nProvider>
+      </body>
+    </html>
+  );
+}

package/template/src/app/page.tsx

@@ -0,0 +1,134 @@
+import { modules } from '@/.mercato/generated/modules.generated'
+import { StartPageContent } from '@/components/StartPageContent'
+import { cookies } from 'next/headers'
+import Image from 'next/image'
+import Link from 'next/link'
+import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
+import type { EntityManager } from '@mikro-orm/postgresql'
+
+function FeatureBadge({ label }: { label: string }) {
+  return (
+    <span className="inline-flex items-center rounded border px-2 py-0.5 text-xs text-muted-foreground">
+      {label}
+    </span>
+  )
+}
+
+export default async function Home() {
+  const { t } = await resolveTranslations()
+  
+  // Check if user wants to see the start page
+  const cookieStore = await cookies()
+  const showStartPageCookie = cookieStore.get('show_start_page')
+  const showStartPage = showStartPageCookie?.value !== 'false'
+
+  // Database status and counts
+  let dbStatus = t('app.page.dbStatus.unknown', 'Unknown')
+  let usersCount = 0
+  let tenantsCount = 0
+  let orgsCount = 0
+  try {
+    const container = await createRequestContainer()
+    const em = container.resolve<EntityManager>('em')
+    usersCount = await em.count('User', {})
+    tenantsCount = await em.count('Tenant', {})
+    orgsCount = await em.count('Organization', {})
+    dbStatus = t('app.page.dbStatus.connected', 'Connected')
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : t('app.page.dbStatus.noConnection', 'no connection')
+    dbStatus = t('app.page.dbStatus.error', 'Error: {message}', { message })
+  }
+
+  const onboardingAvailable =
+    process.env.SELF_SERVICE_ONBOARDING_ENABLED === 'true' &&
+    Boolean(process.env.RESEND_API_KEY && process.env.RESEND_API_KEY.trim()) &&
+    Boolean(process.env.APP_URL && process.env.APP_URL.trim())
+
+  return (
+    <main className="min-h-svh w-full p-8 flex flex-col gap-8">
+      <header className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
+        <Image
+          src="/open-mercato.svg"
+          alt={t('app.page.logoAlt', 'Open Mercato')}
+          width={40}
+          height={40}
+          className="dark:invert"
+          priority
+        />
+        <div className="flex-1">
+          <h1 className="text-3xl font-semibold tracking-tight">{t('app.page.title', 'Open Mercato')}</h1>
+          <p className="text-sm text-muted-foreground">{t('app.page.subtitle', 'AI‑supportive, modular ERP foundation for product & service companies')}</p>
+        </div>
+      </header>
+
+      <StartPageContent showStartPage={showStartPage} showOnboardingCta={onboardingAvailable} />
+
+      <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="rounded-lg border bg-card p-4">
+          <div className="text-sm font-medium mb-2">{t('app.page.dbStatus.title', 'Database Status')}</div>
+          <div className="text-sm text-muted-foreground">{t('app.page.dbStatus.label', 'Status:')} <span className="font-medium text-foreground">{dbStatus}</span></div>
+          <div className="mt-3 space-y-1.5 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">{t('app.page.dbStatus.users', 'Users:')}</span>
+              <span className="font-mono font-medium">{usersCount}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">{t('app.page.dbStatus.tenants', 'Tenants:')}</span>
+              <span className="font-mono font-medium">{tenantsCount}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">{t('app.page.dbStatus.organizations', 'Organizations:')}</span>
+              <span className="font-mono font-medium">{orgsCount}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-lg border bg-card p-4 md:col-span-2">
+          <div className="text-sm font-medium mb-3">{t('app.page.activeModules.title', 'Active Modules')}</div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 max-h-[200px] overflow-y-auto pr-2">
+            {modules.map((m) => {
+              const fe = m.frontendRoutes?.length || 0
+              const be = m.backendRoutes?.length || 0
+              const api = m.apis?.length || 0
+              const cli = m.cli?.length || 0
+              const i18n = m.translations ? Object.keys(m.translations).length : 0
+              return (
+                <div key={m.id} className="rounded border p-3 bg-background">
+                  <div className="text-sm font-medium">{m.info?.title || m.id}{m.info?.version ? <span className="ml-2 text-xs text-muted-foreground">v{m.info.version}</span> : null}</div>
+                  {m.info?.description ? <div className="text-xs text-muted-foreground mt-1 line-clamp-2">{m.info.description}</div> : null}
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {fe ? <FeatureBadge label={`FE:${fe}`} /> : null}
+                    {be ? <FeatureBadge label={`BE:${be}`} /> : null}
+                    {api ? <FeatureBadge label={`API:${api}`} /> : null}
+                    {cli ? <FeatureBadge label={`CLI:${cli}`} /> : null}
+                    {i18n ? <FeatureBadge label={`i18n:${i18n}`} /> : null}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-lg border bg-card p-4">
+        <div className="text-sm font-medium mb-2">{t('app.page.quickLinks.title', 'Quick Links')}</div>
+        <div className="flex flex-wrap items-center gap-3 text-sm">
+          <Link className="underline hover:text-primary transition-colors" href="/login">{t('app.page.quickLinks.login', 'Login')}</Link>
+          <span className="text-muted-foreground">·</span>
+          <Link className="underline hover:text-primary transition-colors" href="/example">{t('app.page.quickLinks.examplePage', 'Example Page')}</Link>
+          <span className="text-muted-foreground">·</span>
+          <Link className="underline hover:text-primary transition-colors" href="/backend/example">{t('app.page.quickLinks.exampleAdmin', 'Example Admin')}</Link>
+          <span className="text-muted-foreground">·</span>
+          <Link className="underline hover:text-primary transition-colors" href="/backend/todos">{t('app.page.quickLinks.exampleTodos', 'Example Todos with Custom Fields')}</Link>
+          <span className="text-muted-foreground">·</span>
+          <Link className="underline hover:text-primary transition-colors" href="/blog/123">{t('app.page.quickLinks.exampleBlog', 'Example Blog Post')}</Link>
+        </div>
+      </section>
+
+      <footer className="text-xs text-muted-foreground text-center">
+        {t('app.page.footer', 'Built with Next.js, MikroORM, and Awilix — modular by design.')}
+      </footer>
+    </main>
+  )
+}