@lukoweb/apitogo 0.1.90 → 0.1.92

package/dist/cli/cli.js

@@ -4878,6 +4878,13 @@ import {
   runnerImport,
   loadEnv as viteLoadEnv
 } from "vite";
+function resolvePublishGatewayBaseUrl() {
+  const raw = process.env.APITOGO_GATEWAY_URL?.trim();
+  if (!raw) {
+    return void 0;
+  }
+  return raw.replace(/\/+$/, "");
+}
 function mergeJsonConfigWithRuntimeOverrides(fileConfig, importedConfig) {
   const jsonConfig = buildApitogoConfig({
     ...fileConfig,
@@ -5037,7 +5044,8 @@ async function loadZudokuConfig(configEnv, rootDir) {
         ...loadedConfig.__meta,
         pricingEnabled: isBillingEnabled(jsonConfig),
         authenticationEnabled: isAuthenticationEnabled(manifest),
-        previewPlans
+        previewPlans,
+        gatewayBaseUrl: resolvePublishGatewayBaseUrl()
       }
     };
     const transformedConfig = applyAuthenticationHeaderNav(
@@ -8132,11 +8140,18 @@ function buildPostPublishChecklist(args) {
     },
     {
       id: "test_pricing",
-      label: "Verify /pricing loads live plans",
+      label: "Verify /pricing loads the public catalog (does not redirect to /account/plans)",
       required: true,
       completed: false,
       url: args.swaUrl ? `${args.swaUrl}/pricing` : void 0
     },
+    {
+      id: "test_account_plans",
+      label: "Verify /account/plans requires sign-in and manages subscriptions",
+      required: true,
+      completed: false,
+      url: args.swaUrl ? `${args.swaUrl}/account/plans` : void 0
+    },
     {
       id: "test_credentials",
       label: "Verify /credentials returns a subscription key after plan selection",
@@ -12530,7 +12545,7 @@ import {
 // package.json
 var package_default = {
   name: "@lukoweb/apitogo",
-  version: "0.1.90",
+  version: "0.1.92",
   type: "module",
   sideEffects: [
     "**/*.css",
@@ -15282,7 +15297,8 @@ var viteConfigPlugin = () => {
         rootDir: loadedConfig.__meta.rootDir,
         pricingEnabled: loadedConfig.__meta.pricingEnabled,
         authenticationEnabled: loadedConfig.__meta.authenticationEnabled,
-        previewPlans: loadedConfig.__meta.previewPlans
+        previewPlans: loadedConfig.__meta.previewPlans,
+        gatewayBaseUrl: loadedConfig.__meta.gatewayBaseUrl
       };
       return `
 import rawConfig from "${normalizePath(configPath)}";
@@ -16245,6 +16261,9 @@ import path39 from "node:path";
 import { normalizePath as normalizePath2 } from "vite";
 var getLandingModuleImport = (moduleDir, mode) => mode === "internal" ? normalizePath2(path39.join(moduleDir, "../module-landing/src/index.tsx")) : "@lukoweb/apitogo-module-landing";
 var getUserPanelModuleImport = (moduleDir, mode) => mode === "internal" ? normalizePath2(path39.join(moduleDir, "../module-user-panel/src/index.tsx")) : "@lukoweb/apitogo-module-user-panel";
+var getBillingPluginImport = (moduleDir, mode) => mode === "internal" ? normalizePath2(
+  path39.join(moduleDir, "../plugin-dev-portal-billing/src/index.ts")
+) : "@lukoweb/apitogo-plugin-dev-portal-billing";
 var resolveProjectPageImport = (rootDir, pagePath) => normalizePath2(path39.resolve(rootDir, pagePath));
 var viteModulesPlugin = () => {
   const virtualModuleId4 = "virtual:zudoku-modules-plugin";
@@ -16310,10 +16329,15 @@ var viteModulesPlugin = () => {
           `import LandingPage from "${resolveProjectPageImport(config2.__meta.rootDir, landingPagePath)}";`
         );
       }
+      const useBillingDashboard = !dashboardPagePath && userPanel.plans.enabled;
       if (dashboardPagePath) {
         code.push(
           `import UserPanelDashboardPage from "${resolveProjectPageImport(config2.__meta.rootDir, dashboardPagePath)}";`
         );
+      } else if (useBillingDashboard) {
+        code.push(
+          `import { OverviewDashboardPage as UserPanelDashboardPage } from "${getBillingPluginImport(config2.__meta.moduleDir, config2.__meta.mode)}";`
+        );
       }
       if (profilePagePath) {
         code.push(
@@ -16354,7 +16378,7 @@ var viteModulesPlugin = () => {
           `  ...${JSON.stringify(userPanelConfig)},`,
           `  dashboard: {`,
           `    ...${JSON.stringify(userPanelConfig.dashboard)},`,
-          `    component: config.modules?.userPanel?.dashboard?.component${dashboardPagePath ? " ?? UserPanelDashboardPage" : ""},`,
+          `    component: config.modules?.userPanel?.dashboard?.component${dashboardPagePath || useBillingDashboard ? " ?? UserPanelDashboardPage" : ""},`,
           `  },`,
           `  userManagement: {`,
           `    ...${JSON.stringify(userPanelConfig.userManagement)},`,
@@ -18680,6 +18704,9 @@ function patchApitogoConfigOpenApiToFile(content, input3 = "./openapi.json") {
 var ACCOUNT_PLANS_PAGE_PATH = "user-panel/AccountPlansPage.tsx";
 var ACCOUNT_PLANS_PAGE = `export { AccountPlansPage as default } from "@lukoweb/apitogo-plugin-dev-portal-billing";
 `;
+var DASHBOARD_PAGE_PATH = "user-panel/DashboardPage.tsx";
+var DASHBOARD_PAGE = `export { OverviewDashboardPage as default } from "@lukoweb/apitogo-plugin-dev-portal-billing";
+`;
 function patchAccountPlansPageConfig(content) {
   if (/plans:\s*\{[^}]*page:/s.test(content)) {
     return content;
@@ -18692,6 +18719,18 @@ function patchAccountPlansPageConfig(content) {
       }`
   );
 }
+function patchDashboardPageConfig(content) {
+  if (/dashboard:\s*\{[^}]*page:/s.test(content)) {
+    return content;
+  }
+  return content.replace(
+    /dashboard:\s*\{\s*enabled:\s*true\s*\}/,
+    `dashboard: {
+        enabled: true,
+        page: "./user-panel/DashboardPage.tsx",
+      }`
+  );
+}
 async function ensureAccountPlansPage(outputDirectory) {
   const pagePath = path53.join(outputDirectory, ACCOUNT_PLANS_PAGE_PATH);
   try {
@@ -18703,6 +18742,17 @@ async function ensureAccountPlansPage(outputDirectory) {
     return ACCOUNT_PLANS_PAGE_PATH;
   }
 }
+async function ensureDashboardPage(outputDirectory) {
+  const pagePath = path53.join(outputDirectory, DASHBOARD_PAGE_PATH);
+  try {
+    await readFile13(pagePath, "utf8");
+    return void 0;
+  } catch {
+    await mkdir10(path53.dirname(pagePath), { recursive: true });
+    await writeFile12(pagePath, DASHBOARD_PAGE);
+    return DASHBOARD_PAGE_PATH;
+  }
+}
 function patchApitogoConfig(content, options) {
   let patched = content;
   if (options.title) {
@@ -18766,12 +18816,14 @@ async function patchScaffoldedSite(outputDirectory, options) {
   const configContent = await readFile13(configPath, "utf8");
   await writeFile12(
     configPath,
-    patchAccountPlansPageConfig(
-      patchApitogoConfig(configContent, {
-        title,
-        openApiUrl: options.openApiUrl,
-        logoUrl: options.branding?.logoUrl
-      })
+    patchDashboardPageConfig(
+      patchAccountPlansPageConfig(
+        patchApitogoConfig(configContent, {
+          title,
+          openApiUrl: options.openApiUrl,
+          logoUrl: options.branding?.logoUrl
+        })
+      )
     )
   );
   filesWritten.push("apitogo.config.tsx");
@@ -18779,6 +18831,10 @@ async function patchScaffoldedSite(outputDirectory, options) {
   if (accountPlansPage) {
     filesWritten.push(accountPlansPage);
   }
+  const dashboardPage = await ensureDashboardPage(outputDirectory);
+  if (dashboardPage) {
+    filesWritten.push(dashboardPage);
+  }
   return filesWritten;
 }
 async function scaffoldDevPortalSite(options) {
@@ -19131,7 +19187,10 @@ function createDefaultApitogoJsonConfig(options) {
       },
       userPanel: {
         enabled: true,
-        dashboard: { enabled: true },
+        dashboard: {
+          enabled: true,
+          page: "./user-panel/DashboardPage.tsx"
+        },
         userManagement: { enabled: true },
         plans: {
           enabled: true,
@@ -19956,6 +20015,8 @@ async function ensureTsconfigJson(dir) {
 var LANDING_PAGE_SOURCE = 'import {\n  ApiShowcaseSection,\n  FeaturesSection,\n  HeroSection,\n  LandingShell,\n  PlansPreviewSection,\n  PricingCtaSection,\n  StepsSection,\n} from "@lukoweb/apitogo-module-landing";\n\nexport default function LandingPage() {\n  return (\n    <LandingShell\n      title="Test against a real API before you build one"\n      description="Sample API gives you realistic endpoints, authentication, rate limits, and webhooks \u2014 a fully working backend for prototypes, demos, and QA."\n    >\n      <HeroSection\n        hero={{\n          badge: "SANDBOX API",\n          title: "Test against a real API before you build one",\n          description:\n            "Sample API gives you realistic endpoints, authentication, rate limits, and webhooks \u2014 a fully working backend for prototypes, demos, and QA. No setup, no infrastructure.",\n        }}\n        primaryAction={{ label: "Start for free", href: "/signup" }}\n        secondaryAction={{ label: "Read the docs", href: "/introduction" }}\n        codeExamples={[\n          {\n            filename: "Create a key",\n            language: "bash",\n            code: `$ curl -X POST https://api.sampleapi.dev/v1/keys\n# sk_live_9f2c7a1e...`,\n          },\n          {\n            filename: "Call an endpoint",\n            language: "bash",\n            code: `$ curl https://api.sampleapi.dev/v1/users/42 \\\\\n  -H "Authorization: Bearer sk_live_9f2c..."\n# { "id": 42, "name": "Priya Shah", "plan": "pro" }`,\n          },\n        ]}\n      />\n      <FeaturesSection\n        section={{\n          label: "Everything a real API has",\n          title: "Built for testing, not just browsing",\n          description:\n            "Realistic data, live auth, rate limits, and webhooks \u2014 so you can ship with confidence.",\n        }}\n        features={[\n          {\n            title: "Realistic mock data",\n            description:\n              "Users, orders, products, and posts with relationships and pagination, not lorem ipsum.",\n            icon: "boxes",\n          },\n          {\n            title: "Real auth flow",\n            description:\n              "Every request checks a live API key, so you can test error handling and expiry.",\n            icon: "shield-check",\n          },\n          {\n            title: "Rate limiting",\n            description:\n              "Per-plan request limits and 429 responses, so you can build and test backoff logic.",\n            icon: "gauge",\n          },\n          {\n            title: "Webhooks",\n            description:\n              "Trigger test events and inspect delivered payloads and retries.",\n            icon: "webhook",\n          },\n          {\n            title: "OpenAPI & docs",\n            description:\n              "A full OpenAPI spec and reference docs for every endpoint.",\n            icon: "book-open",\n          },\n          {\n            title: "Usage analytics",\n            description:\n              "Track requests, latency, and errors per key from your dashboard.",\n            icon: "activity",\n          },\n        ]}\n      />\n      <StepsSection\n        steps={[\n          {\n            step: "01",\n            title: "Create an account",\n            description:\n              "Sign up and land straight in your dashboard \u2014 no approval queue.",\n          },\n          {\n            step: "02",\n            title: "Generate a key",\n            description:\n              "Every key is scoped and rate-limited to your plan from the moment it\'s created.",\n          },\n          {\n            step: "03",\n            title: "Call any endpoint",\n            description:\n              "Users, orders, products, posts, and webhooks \u2014 all documented, all live.",\n          },\n        ]}\n      />\n      <ApiShowcaseSection\n        apiShowcase={{\n          title: "Sample endpoints",\n          subtitle:\n            "A slice of what\'s available \u2014 see the full reference in the docs.",\n          browseAllHref: "/api",\n          browseAllLabel: "Browse all APIs",\n          layout: "list",\n          items: [\n            {\n              name: "List paginated users",\n              path: "/v1/users",\n              method: "GET",\n              summary: "List paginated users",\n            },\n            {\n              name: "Create a mock order",\n              path: "/v1/orders",\n              method: "POST",\n              summary: "Create a mock order",\n            },\n            {\n              name: "Fetch one product",\n              path: "/v1/products/{id}",\n              method: "GET",\n              summary: "Fetch one product",\n            },\n            {\n              name: "List posts with comments",\n              path: "/v1/posts",\n              method: "GET",\n              summary: "List posts with comments",\n            },\n            {\n              name: "Fire a test webhook event",\n              path: "/v1/webhooks/test",\n              method: "POST",\n              summary: "Fire a test webhook event",\n            },\n            {\n              name: "Delete a mock order",\n              path: "/v1/orders/{id}",\n              method: "DELETE",\n              summary: "Delete a mock order",\n            },\n          ],\n        }}\n      />\n      <PlansPreviewSection\n        plans={[\n          {\n            name: "Free",\n            price: "$0",\n            unit: "per month",\n            blurb: "1,000 requests/mo, community support.",\n          },\n          {\n            name: "Developer",\n            price: "$19",\n            unit: "per month",\n            blurb: "50,000 requests/mo, webhooks included.",\n            featured: true,\n          },\n          {\n            name: "Team",\n            price: "$79",\n            unit: "per month",\n            blurb: "500,000 requests/mo, 5 team seats.",\n          },\n          {\n            name: "Enterprise",\n            price: "Custom",\n            unit: "talk to us",\n            blurb: "Unlimited requests, SSO, SLA.",\n          },\n        ]}\n      />\n      <PricingCtaSection\n        variant="banner"\n        pricingCta={{\n          title: "Start testing in minutes",\n          description:\n            "Free tier includes 1,000 requests a month \u2014 no card required.",\n          primaryAction: { label: "Start for free", href: "/signup" },\n        }}\n      />\n    </LandingShell>\n  );\n}\n';
 var ACCOUNT_PLANS_PAGE_SOURCE = `export { AccountPlansPage as default } from "@lukoweb/apitogo-plugin-dev-portal-billing";
 `;
+var DASHBOARD_PAGE_SOURCE = `export { OverviewDashboardPage as default } from "@lukoweb/apitogo-plugin-dev-portal-billing";
+`;
 var fileExists2 = async (filePath) => {
   try {
     await access7(filePath, constants.F_OK);
@@ -19975,6 +20036,11 @@ async function ensurePortalStubFiles(dir) {
     await mkdir11(path57.join(dir, "user-panel"), { recursive: true });
     await writeFile14(plansPath, ACCOUNT_PLANS_PAGE_SOURCE, "utf8");
   }
+  const dashboardPath = path57.join(dir, "user-panel", "DashboardPage.tsx");
+  if (!await fileExists2(dashboardPath)) {
+    await mkdir11(path57.join(dir, "user-panel"), { recursive: true });
+    await writeFile14(dashboardPath, DASHBOARD_PAGE_SOURCE, "utf8");
+  }
   await ensurePublicBrandingFiles(dir);
 }
 async function ensurePublicBrandingFiles(dir) {

package/dist/declarations/config/loader.d.ts

@@ -13,6 +13,7 @@ export type ConfigWithMeta = ZudokuConfig & {
         pricingEnabled?: boolean;
         authenticationEnabled?: boolean;
         previewPlans?: DevPortalPreviewPlan[];
+        gatewayBaseUrl?: string;
     };
     __resolvedModules: ResolvedModulesConfig;
 };

package/dist/declarations/lib/components/LandingLayout.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export declare const LandingLayout: ({ children }: {
     children?: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/docs/configuration/plans.md

@@ -6,7 +6,11 @@ description:
   behavior.
 ---
 
-**Gateway plans** (also called API plans) are what your **end users** subscribe to on `/pricing`.
+**Gateway plans** (also called API plans) are what your **end users** subscribe to.
+
+- **`/pricing`** — public catalog. Visitors choose a plan before signup. Signed-in users still see this page; it must not redirect to `/account/plans`.
+- **`/account/plans`** — authenticated billing. Sign-in required. Manage and change subscriptions.
+
 They are separate from **platform hosting** (Free / Starter / Professional on APItoGo), which you
 select with `apitogo apply --platform-plan`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo",
-  "version": "0.1.90",
+  "version": "0.1.92",
   "type": "module",
   "sideEffects": [
     "**/*.css",

package/src/config/loader.ts

@@ -45,6 +45,8 @@ export type ConfigWithMeta = ZudokuConfig & {
     pricingEnabled?: boolean;
     authenticationEnabled?: boolean;
     previewPlans?: DevPortalPreviewPlan[];
+    /** Live gateway URL baked in at publish/build (`APITOGO_GATEWAY_URL`). */
+    gatewayBaseUrl?: string;
   };
   __resolvedModules: ResolvedModulesConfig;
 };
@@ -69,6 +71,15 @@ const zudokuConfigFiles = [
 
 const serverConfigOutputFiles = ["apitogo.config.js", "zudoku.config.js"];
 
+function resolvePublishGatewayBaseUrl(): string | undefined {
+  const raw = process.env.APITOGO_GATEWAY_URL?.trim();
+  if (!raw) {
+    return undefined;
+  }
+
+  return raw.replace(/\/+$/, "");
+}
+
 export function mergeJsonConfigWithRuntimeOverrides(
   fileConfig: Record<string, unknown>,
   importedConfig: ZudokuConfig,
@@ -304,6 +315,7 @@ export async function loadZudokuConfig(
         pricingEnabled: isBillingEnabled(jsonConfig),
         authenticationEnabled: isAuthenticationEnabled(manifest),
         previewPlans,
+        gatewayBaseUrl: resolvePublishGatewayBaseUrl(),
       },
     };
     const transformedConfig = applyAuthenticationHeaderNav(

package/src/lib/components/HeaderNavigation.tsx

@@ -1,5 +1,4 @@
 import type { LucideIcon } from "lucide-react";
-import { Link } from "react-router";
 import {
   isHeaderNavGroup,
   type HeaderNavGroup,
@@ -18,6 +17,7 @@ import {
   NavigationMenuTrigger,
 } from "../ui/NavigationMenu.js";
 import { cn } from "../util/cn.js";
+import { AnchorLink } from "./AnchorLink.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { shouldShowItem } from "./navigation/utils.js";
 
@@ -28,7 +28,7 @@ const NavLinkItem = ({ item }: { item: HeaderNavLinkItem }) => {
   const Icon = item.icon as LucideIcon | undefined;
   return (
     <NavigationMenuLink asChild>
-      <Link
+      <AnchorLink
         to={item.to}
         target={item.target}
         rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -45,7 +45,7 @@ const NavLinkItem = ({ item }: { item: HeaderNavLinkItem }) => {
             {item.description}
           </p>
         )}
-      </Link>
+      </AnchorLink>
     </NavigationMenuLink>
   );
 };
@@ -117,7 +117,7 @@ const HeaderNavItemComponent = ({
     return (
       <NavigationMenuItem>
         <NavigationMenuLink asChild>
-          <Link
+          <AnchorLink
             to={item.to}
             target={item.target}
             rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -125,7 +125,7 @@ const HeaderNavItemComponent = ({
           >
             {Icon && <Icon size={16} />}
             {item.label}
-          </Link>
+          </AnchorLink>
         </NavigationMenuLink>
       </NavigationMenuItem>
     );

package/src/lib/components/LandingLayout.tsx

@@ -1,21 +1,27 @@
 import { TooltipProvider } from "@lukoweb/apitogo/ui/Tooltip.js";
-import type { ReactNode } from "react";
-import { Suspense } from "react";
+import { type ReactNode, Suspense } from "react";
 import { Outlet } from "react-router";
+import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
+import { useScrollToTop } from "../util/useScrollToTop.js";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Slot } from "./Slot.js";
 
-export const LandingLayout = ({ children }: { children?: ReactNode }) => (
-  <TooltipProvider>
-    <Slot.Target name="layout-before-head" />
-    <Suspense>
-      <Header />
-    </Suspense>
-    <Slot.Target name="layout-after-head" />
-    <main className="min-h-[calc(100dvh-var(--top-header-height))] w-full">
-      {children ?? <Outlet />}
-    </main>
-    <Footer />
-  </TooltipProvider>
-);
+export const LandingLayout = ({ children }: { children?: ReactNode }) => {
+  useScrollToAnchor();
+  useScrollToTop();
+
+  return (
+    <TooltipProvider>
+      <Slot.Target name="layout-before-head" />
+      <Suspense>
+        <Header />
+      </Suspense>
+      <Slot.Target name="layout-after-head" />
+      <main className="min-h-[calc(100dvh-var(--top-header-height))] w-full">
+        {children ?? <Outlet />}
+      </main>
+      <Footer />
+    </TooltipProvider>
+  );
+};

package/src/lib/components/MobileTopNavigation.tsx

@@ -28,6 +28,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "../ui/Drawer.js";
+import { AnchorLink } from "./AnchorLink.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
@@ -44,7 +45,7 @@ const MobileHeaderNavLink = ({
 }) => {
   const Icon = item.icon as LucideIcon | undefined;
   return (
-    <Link
+    <AnchorLink
       to={item.to}
       target={item.target}
       rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -53,7 +54,7 @@ const MobileHeaderNavLink = ({
     >
       {Icon && <Icon size={16} />}
       {item.label}
-    </Link>
+    </AnchorLink>
   );
 };
 
@@ -68,7 +69,7 @@ const MobileHeaderNavItem = ({
     const Icon = item.icon as LucideIcon | undefined;
     return (
       <li className="w-full">
-        <Link
+        <AnchorLink
           to={item.to}
           target={item.target}
           rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -77,7 +78,7 @@ const MobileHeaderNavItem = ({
         >
           {Icon && <Icon size={16} />}
           {item.label}
-        </Link>
+        </AnchorLink>
       </li>
     );
   }

package/src/lib/util/useScrollToAnchor.ts

@@ -57,6 +57,11 @@ export const useScrollToAnchor = () => {
       return;
     }
 
+    if (scrollToHash(location.hash)) {
+      initialScrolled.current = true;
+      return;
+    }
+
     const observer = new MutationObserver((_, obs) => {
       if (!scrollToHash(location.hash)) return;
       initialScrolled.current = true;

package/src/vite/plugin-config.ts

@@ -69,6 +69,7 @@ const viteConfigPlugin = (): Plugin => {
         pricingEnabled: loadedConfig.__meta.pricingEnabled,
         authenticationEnabled: loadedConfig.__meta.authenticationEnabled,
         previewPlans: loadedConfig.__meta.previewPlans,
+        gatewayBaseUrl: loadedConfig.__meta.gatewayBaseUrl,
       };
 
       return `

package/src/vite/plugin-modules.ts

@@ -14,6 +14,13 @@ const getUserPanelModuleImport = (moduleDir: string, mode: string) =>
     ? normalizePath(path.join(moduleDir, "../module-user-panel/src/index.tsx"))
     : "@lukoweb/apitogo-module-user-panel";
 
+const getBillingPluginImport = (moduleDir: string, mode: string) =>
+  mode === "internal"
+    ? normalizePath(
+        path.join(moduleDir, "../plugin-dev-portal-billing/src/index.ts"),
+      )
+    : "@lukoweb/apitogo-plugin-dev-portal-billing";
+
 const resolveProjectPageImport = (rootDir: string, pagePath: string) =>
   normalizePath(path.resolve(rootDir, pagePath));
 
@@ -91,10 +98,17 @@ const viteModulesPlugin = (): Plugin => {
         );
       }
 
+      const useBillingDashboard =
+        !dashboardPagePath && userPanel.plans.enabled;
+
       if (dashboardPagePath) {
         code.push(
           `import UserPanelDashboardPage from "${resolveProjectPageImport(config.__meta.rootDir, dashboardPagePath)}";`,
         );
+      } else if (useBillingDashboard) {
+        code.push(
+          `import { OverviewDashboardPage as UserPanelDashboardPage } from "${getBillingPluginImport(config.__meta.moduleDir, config.__meta.mode)}";`,
+        );
       }
 
       if (profilePagePath) {
@@ -146,7 +160,7 @@ const viteModulesPlugin = (): Plugin => {
           `  ...${JSON.stringify(userPanelConfig)},`,
           `  dashboard: {`,
           `    ...${JSON.stringify(userPanelConfig.dashboard)},`,
-          `    component: config.modules?.userPanel?.dashboard?.component${dashboardPagePath ? " ?? UserPanelDashboardPage" : ""},`,
+          `    component: config.modules?.userPanel?.dashboard?.component${dashboardPagePath || useBillingDashboard ? " ?? UserPanelDashboardPage" : ""},`,
           `  },`,
           `  userManagement: {`,
           `    ...${JSON.stringify(userPanelConfig.userManagement)},`,