refactor(dashboard): move tabs to route segments

next.config.mjs

@@ -1,6 +1,21 @@
 // NOTE: related to src/configs/rewrites.ts
+import path from 'node:path'
+
 export const DOCUMENTATION_DOMAIN = 'e2b.mintlify.app'
 
+const browserStub = (file) => path.resolve(process.cwd(), 'stubs', file)
+
+const browserNodeModuleStubs = {
+  crypto: browserStub('crypto.ts'),
+  fs: browserStub('fs.ts'),
+  'fs/promises': browserStub('fs-promises.ts'),
+  path: browserStub('path.ts'),
+  'node:crypto': browserStub('crypto.ts'),
+  'node:fs': browserStub('fs.ts'),
+  'node:fs/promises': browserStub('fs-promises.ts'),
+  'node:path': browserStub('path.ts'),
+}
+
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
@@ -15,14 +30,32 @@ const config = {
   },
   turbopack: {
     resolveAlias: {
-      // Stub Node.js modules for browser builds
-      // e2b package bundles these packages. when dealing with browser chunks,
-      // we need to stub these packages for builds.
+      crypto: { browser: './stubs/crypto.ts' },
       fs: { browser: './stubs/fs.ts' },
+      'fs/promises': { browser: './stubs/fs-promises.ts' },
+      path: { browser: './stubs/path.ts' },
+      'node:crypto': { browser: './stubs/crypto.ts' },
       'node:fs': { browser: './stubs/fs.ts' },
       'node:fs/promises': { browser: './stubs/fs-promises.ts' },
+      'node:path': { browser: './stubs/path.ts' },
     },
   },
+  webpack: (webpackConfig, { isServer, webpack }) => {
+    if (!isServer) {
+      webpackConfig.resolve.alias = {
+        ...webpackConfig.resolve.alias,
+        ...browserNodeModuleStubs,
+      }
+
+      webpackConfig.plugins.push(
+        new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
+          resource.request = resource.request.replace(/^node:/, '')
+        })
+      )
+    }
+
+    return webpackConfig
+  },
   logging: {
     fetches: {
       fullUrl: true,

package.json

@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "<<<<<<< Next.js": "",
-    "dev": "bun scripts:check-app-env && next dev --turbopack | pino-pretty --colorize",
-    "build": "next build --turbopack",
+    "dev": "bun scripts:check-app-env && next dev | pino-pretty --colorize",
+    "build": "next build --webpack",
     "start": "next start | pino-pretty --colorize",
-    "preview": "next build --turbopack && next start | pino-pretty --colorize",
+    "preview": "next build --webpack && next start | pino-pretty --colorize",
     "lint": "biome lint .",
     "lint:fix": "biome lint --write .",
     "format": "biome check --write --linter-enabled=false --assist-enabled=true . --max-diagnostics none",
@@ -54,7 +54,7 @@
     "@hookform/resolvers": "^5.2.2",
     "@marsidev/react-turnstile": "^1.4.1",
     "@next-safe-action/adapter-react-hook-form": "^2.0.0",
-    "@next/env": "16.1.5",
+    "@next/env": "^16.2.6",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.62.1",
     "@opentelemetry/exporter-logs-otlp-http": "^0.203.0",
@@ -114,7 +114,7 @@
     "micromatch": "^4.0.8",
     "motion": "^12.23.25",
     "nanoid": "^5.0.9",
-    "next": "16.1.5",
+    "next": "^16.2.6",
     "next-safe-action": "^8.0.11",
     "next-themes": "^0.4.6",
     "nuqs": "^2.7.0",

src/app/dashboard/[teamSlug]/account/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function AccountPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/billing/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function BillingPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/billing/plan/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function BillingPlanPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/billing/plan/select/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function BillingPlanSelectPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function TeamDashboardError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/general/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function GeneralPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/keys/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function KeysPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/limits/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function LimitsPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/members/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function MembersPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function SandboxesTabsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/layout.tsx

@@ -1,33 +1,33 @@
-import { DashboardTab, DashboardTabs } from '@/ui/dashboard-tabs'
+import { PROTECTED_URLS } from '@/configs/urls'
+import { DashboardTabsList } from '@/ui/dashboard-tabs'
 import { ListIcon, TrendIcon } from '@/ui/primitives/icons'
 
-export default function SandboxesLayout({
-  list,
-  monitoring,
-}: LayoutProps<'/dashboard/[teamSlug]/sandboxes'> & {
-  list: React.ReactNode
-  monitoring: React.ReactNode
-}) {
+export default async function SandboxesTabsLayout({
+  children,
+  params,
+}: LayoutProps<'/dashboard/[teamSlug]/sandboxes'>) {
+  const { teamSlug } = await params
+
   return (
-    <DashboardTabs
-      type="query"
-      layoutKey="tabs-indicator-sandboxes"
-      className="mt-2 md:mt-3"
-    >
-      <DashboardTab
-        id="monitoring"
-        label="Monitoring"
-        icon={<TrendIcon className="size-4" />}
-      >
-        {monitoring}
-      </DashboardTab>
-      <DashboardTab
-        id="list"
-        label="List"
-        icon={<ListIcon className="size-4" />}
-      >
-        {list}
-      </DashboardTab>
-    </DashboardTabs>
+    <div className="mt-2 md:mt-3 min-h-0 h-full flex flex-col">
+      <DashboardTabsList
+        layoutKey="tabs-indicator-sandboxes"
+        tabs={[
+          {
+            id: 'monitoring',
+            label: 'Monitoring',
+            href: PROTECTED_URLS.SANDBOXES_MONITORING(teamSlug),
+            icon: <TrendIcon className="size-4" />,
+          },
+          {
+            id: 'list',
+            label: 'List',
+            href: PROTECTED_URLS.SANDBOXES_LIST(teamSlug),
+            icon: <ListIcon className="size-4" />,
+          },
+        ]}
+      />
+      {children}
+    </div>
   )
 }

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/list/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function SandboxesListError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/@list/page.tsx → src/app/dashboard/[teamSlug]/sandboxes/(tabs)/list/page.tsx

@@ -3,9 +3,9 @@ import LoadingLayout from '@/features/dashboard/loading-layout'
 import SandboxesTable from '@/features/dashboard/sandboxes/list/table'
 import { HydrateClient, prefetch, trpc } from '@/trpc/server'
 
-export default async function ListPage({
+export default async function SandboxesListPage({
   params,
-}: PageProps<'/dashboard/[teamSlug]/sandboxes'>) {
+}: PageProps<'/dashboard/[teamSlug]/sandboxes/list'>) {
   const { teamSlug } = await params
 
   prefetch(

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/monitoring/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function SandboxesMonitoringError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/@monitoring/page.tsx → src/app/dashboard/[teamSlug]/sandboxes/(tabs)/monitoring/page.tsx

@@ -1,17 +1,27 @@
 import { TeamMetricsCharts } from '@/features/dashboard/sandboxes/monitoring/charts/charts'
 import SandboxesMonitoringHeader from '@/features/dashboard/sandboxes/monitoring/header'
 
-export default async function MonitoringPage({
+type MonitoringSearchParams = {
+  start?: string
+  end?: string
+}
+
+export default async function SandboxesMonitoringPage({
   params,
   searchParams,
-}: PageProps<'/dashboard/[teamSlug]/sandboxes'> & {
-  searchParams: Promise<{ start?: string; end?: string }>
+}: PageProps<'/dashboard/[teamSlug]/sandboxes/monitoring'> & {
+  searchParams: Promise<MonitoringSearchParams>
 }) {
+  const { start, end } = await searchParams
+
   return (
     <div className="flex flex-col h-full relative min-h-0 max-md:overflow-y-auto">
       <SandboxesMonitoringHeader params={params} />
       <div className="flex flex-col flex-1 max-md:min-h-[calc(100vh-3.5rem)] min-h-0">
-        <TeamMetricsCharts params={params} searchParams={searchParams} />
+        <TeamMetricsCharts
+          params={params}
+          searchParams={Promise.resolve({ start, end })}
+        />
       </div>
     </div>
   )

src/app/dashboard/[teamSlug]/sandboxes/(tabs)/page.tsx

@@ -1,3 +1,10 @@
-export default function SandboxesTabsPage() {
-  return null // this page is not used, it's just to satisfy the parallel routes
+import { redirect } from 'next/navigation'
+import { PROTECTED_URLS } from '@/configs/urls'
+
+export default async function SandboxesTabsPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/sandboxes'>) {
+  const { teamSlug } = await params
+
+  redirect(PROTECTED_URLS.SANDBOXES_MONITORING(teamSlug))
 }

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function SandboxDetailsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}