first commit

apps/frontend/src/App.tsx

@@ -0,0 +1,21 @@
+import { Route } from "@solidjs/router";
+import { AuthProvider } from "./providers/auth-provider";
+import { I18nProvider } from "./providers/i18n-provider";
+import { Shell } from "./components/shell";
+import { DashboardRoute } from "./routes/dashboard-route";
+import { HomeRoute } from "./routes/home-route";
+import { PublicBookingRoute } from "./routes/public-booking-route";
+
+export default function App() {
+  return (
+    <I18nProvider>
+      <AuthProvider>
+        <Shell>
+          <Route path="/" component={HomeRoute} />
+          <Route path="/dashboard" component={DashboardRoute} />
+          <Route path="/book/:tenantSlug" component={PublicBookingRoute} />
+        </Shell>
+      </AuthProvider>
+    </I18nProvider>
+  );
+}

apps/frontend/src/components/shell.tsx

@@ -0,0 +1,55 @@
+import { A } from "@solidjs/router";
+import { ParentComponent, Show } from "solid-js";
+import { useAuth } from "../providers/auth-provider";
+import { useI18n } from "../providers/i18n-provider";
+
+export const Shell: ParentComponent = (props) => {
+  const auth = useAuth();
+  const i18n = useI18n();
+
+  return (
+    <div class="min-h-screen">
+      <header class="mx-auto flex max-w-7xl items-center justify-between px-6 py-6">
+        <A class="text-lg font-semibold tracking-tight" href="/">
+          Bookra
+        </A>
+        <nav class="flex items-center gap-3 text-sm text-slate">
+          <A class="rounded-full border border-black/10 px-4 py-2 hover:border-ember" href="/dashboard">
+            {i18n.t("nav.dashboard")}
+          </A>
+          <A class="rounded-full border border-black/10 px-4 py-2 hover:border-ember" href="/book/studio-atelier">
+            {i18n.t("nav.booking")}
+          </A>
+          <button
+            class="rounded-full border border-black/10 px-4 py-2 hover:border-pine"
+            onClick={() => i18n.toggleLocale()}
+            type="button"
+          >
+            {i18n.locale().toUpperCase()}
+          </button>
+          <Show
+            when={auth.session()}
+            fallback={
+              <button
+                class="rounded-full bg-ink px-4 py-2 text-canvas"
+                onClick={() => void auth.signInDemo()}
+                type="button"
+              >
+                {i18n.t("auth.signIn")}
+              </button>
+            }
+          >
+            <button
+              class="rounded-full border border-black/10 px-4 py-2"
+              onClick={() => void auth.signOut()}
+              type="button"
+            >
+              {i18n.t("auth.signOut")}
+            </button>
+          </Show>
+        </nav>
+      </header>
+      <main class="mx-auto max-w-7xl px-6 pb-16">{props.children}</main>
+    </div>
+  );
+};

apps/frontend/src/lib/api-client.ts

@@ -0,0 +1,9 @@
+import createClient from "openapi-fetch";
+import type { paths } from "@bookra/api-client/generated/types";
+
+const baseUrl = import.meta.env.VITE_BOOKRA_API_URL ?? "http://localhost:8080";
+
+export const apiClient = createClient<paths>({
+  baseUrl,
+});
+

apps/frontend/src/lib/types.ts

@@ -0,0 +1,14 @@
+export type AuthSession = {
+  session?: {
+    id: string;
+    userId: string;
+    token?: string;
+    expiresAt?: string | Date;
+  };
+  user?: {
+    id: string;
+    email?: string;
+    name?: string;
+    image?: string | null;
+  };
+};

apps/frontend/src/main.tsx

@@ -0,0 +1,14 @@
+import { render } from "solid-js/web";
+import { Router } from "@solidjs/router";
+import App from "./App";
+import "./styles/index.css";
+
+render(
+  () => (
+    <Router>
+      <App />
+    </Router>
+  ),
+  document.getElementById("root")!,
+);
+

apps/frontend/src/providers/auth-provider.tsx

@@ -0,0 +1,92 @@
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  ParentComponent,
+  useContext,
+} from "solid-js";
+import { createAuthClient } from "@neondatabase/neon-js/auth";
+import type { AuthSession } from "../lib/types";
+
+const neonAuthUrl = import.meta.env.VITE_NEON_AUTH_URL ?? "";
+const authClient = neonAuthUrl ? createAuthClient(neonAuthUrl) : null;
+
+type AuthContextValue = {
+  session: () => AuthSession | null;
+  loading: () => boolean;
+  getToken: () => Promise<string | null>;
+  signInDemo: () => Promise<void>;
+  signOut: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextValue>();
+
+export const AuthProvider: ParentComponent = (props) => {
+  const [session, setSession] = createSignal<AuthSession | null>(null);
+  const [loading, setLoading] = createSignal(true);
+
+  createEffect(() => {
+    void (async () => {
+      if (!authClient) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const response = await authClient.getSession();
+        setSession((response?.data as unknown as AuthSession | undefined) ?? null);
+      } catch {
+        setSession(null);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  });
+
+  const value: AuthContextValue = {
+    session,
+    loading,
+    async getToken() {
+      if (!authClient) return null;
+      return session()?.session?.token ?? null;
+    },
+    async signInDemo() {
+      if (!authClient) {
+        setSession({
+          user: {
+            id: "demo-owner",
+            email: "owner@bookra.dev",
+            name: "Bookra Demo Owner",
+          },
+          session: {
+            id: "demo-session",
+            userId: "demo-owner",
+            expiresAt: new Date(Date.now() + 60 * 60 * 1000),
+          },
+        });
+        return;
+      }
+      await authClient.signIn.email({
+        email: "owner@bookra.dev",
+        password: "bookra-demo-password",
+      });
+      const response = await authClient.getSession();
+      setSession((response?.data as unknown as AuthSession | undefined) ?? null);
+    },
+    async signOut() {
+      if (!authClient) return;
+      await authClient.signOut();
+      setSession(null);
+    },
+  };
+
+  return <AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>;
+};
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("AuthProvider is missing from the component tree.");
+  }
+  return context;
+}

apps/frontend/src/providers/i18n-provider.tsx

@@ -0,0 +1,148 @@
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  ParentComponent,
+  useContext,
+} from "solid-js";
+import { defaultLocale, locales } from "@bookra/shared-types";
+import type { Locale } from "@bookra/shared-types";
+
+const dictionaries = {
+  cs: {
+    "nav.booking": "Veřejná rezervace",
+    "nav.dashboard": "Aplikace",
+    "auth.signIn": "Přihlásit",
+    "auth.signOut": "Odhlásit",
+    "home.eyebrow": "Bookra",
+    "home.title": "Klidný rezervační software pro lokální služby.",
+    "home.body":
+      "Root je marketingový vstup do produktu. Hlavní aplikace začíná v dashboardu a veřejná rezervace zůstává oddělená pro zákazníky.",
+    "home.primary": "Otevřít aplikaci",
+    "home.secondary": "Zobrazit veřejnou rezervaci",
+    "home.appLabel": "Hlavní vstup",
+    "home.appTitle": "/dashboard",
+    "home.appBody":
+      "Majitelé a tým pokračují přímo do aplikace, kde řeší dashboard, billing, tenant bootstrap a provoz.",
+    "home.publicLabel": "Veřejný tok",
+    "home.publicTitle": "/book/:tenantSlug",
+    "home.publicBody":
+      "Customer-facing booking flow zůstává mimo aplikaci, aby byl rychlý, čistý a bez interního šumu.",
+    "dashboard.title": "Owner dashboard",
+    "dashboard.body":
+      "Track weekly bookings, cancellations, utilization, and subscription state with a tenant-aware shell ready for Neon-backed data.",
+    "dashboard.kpi.bookings": "Bookings this week",
+    "dashboard.kpi.cancellations": "Cancellations",
+    "dashboard.kpi.utilization": "Utilization",
+    "dashboard.authRequired": "Live dashboard data needs a Neon Auth session and JWT.",
+    "dashboard.bootstrap": "Tenant bootstrap",
+    "dashboard.previewMode": "Preview mode",
+    "dashboard.billing": "Billing",
+    "dashboard.checkout": "Open checkout",
+    "dashboard.refreshBilling": "Refresh billing",
+    "dashboard.plan": "Plan",
+    "dashboard.status": "Status",
+    "dashboard.entitlements": "Entitlements",
+    "dashboard.onboarding.title": "Vytvořit pracovní prostor",
+    "dashboard.onboarding.body":
+      "Tento účet ještě nemá tenant membership. Vytvořte první workspace a pokračujte do aplikace.",
+    "dashboard.onboarding.name": "Název firmy",
+    "dashboard.onboarding.slug": "Slug",
+    "dashboard.onboarding.preset": "Preset",
+    "dashboard.onboarding.locale": "Locale",
+    "dashboard.onboarding.timezone": "Timezone",
+    "dashboard.onboarding.submit": "Vytvořit workspace",
+    "dashboard.onboarding.pending": "Vytvářím workspace...",
+    "booking.title": "Public booking page",
+    "booking.body":
+      "The public experience stays light: availability, slot confirmation, and a clear fallback for guest booking or account-based booking later.",
+    "booking.empty": "Live availability will load from the Railway API when the tenant is configured.",
+  },
+  en: {
+    "nav.booking": "Public booking",
+    "nav.dashboard": "App",
+    "auth.signIn": "Sign in",
+    "auth.signOut": "Sign out",
+    "home.eyebrow": "Bookra",
+    "home.title": "Calm booking software for local service businesses.",
+    "home.body":
+      "The root is the marketing entry to the product. The main app starts in the dashboard, while public booking stays separate for customers.",
+    "home.primary": "Open app",
+    "home.secondary": "View public booking",
+    "home.appLabel": "Main app entry",
+    "home.appTitle": "/dashboard",
+    "home.appBody":
+      "Owners and staff move directly into the app for dashboard, billing, tenant bootstrap, and day-to-day operations.",
+    "home.publicLabel": "Public flow",
+    "home.publicTitle": "/book/:tenantSlug",
+    "home.publicBody":
+      "The customer-facing booking flow stays outside the app so it remains focused, fast, and free of internal noise.",
+    "dashboard.title": "Owner dashboard",
+    "dashboard.body":
+      "Track weekly bookings, cancellations, utilization, and subscription state with a tenant-aware shell ready for Neon-backed data.",
+    "dashboard.kpi.bookings": "Bookings this week",
+    "dashboard.kpi.cancellations": "Cancellations",
+    "dashboard.kpi.utilization": "Utilization",
+    "dashboard.authRequired": "Live dashboard data needs a Neon Auth session and JWT.",
+    "dashboard.bootstrap": "Tenant bootstrap",
+    "dashboard.previewMode": "Preview mode",
+    "dashboard.billing": "Billing",
+    "dashboard.checkout": "Open checkout",
+    "dashboard.refreshBilling": "Refresh billing",
+    "dashboard.plan": "Plan",
+    "dashboard.status": "Status",
+    "dashboard.entitlements": "Entitlements",
+    "dashboard.onboarding.title": "Create workspace",
+    "dashboard.onboarding.body":
+      "This account does not have a tenant membership yet. Create the first workspace and continue into the app.",
+    "dashboard.onboarding.name": "Business name",
+    "dashboard.onboarding.slug": "Slug",
+    "dashboard.onboarding.preset": "Preset",
+    "dashboard.onboarding.locale": "Locale",
+    "dashboard.onboarding.timezone": "Timezone",
+    "dashboard.onboarding.submit": "Create workspace",
+    "dashboard.onboarding.pending": "Creating workspace...",
+    "booking.title": "Public booking page",
+    "booking.body":
+      "The public experience stays light: availability, slot confirmation, and a clear fallback for guest booking or account-based booking later.",
+    "booking.empty": "Live availability will load from the Railway API when the tenant is configured.",
+  },
+} satisfies Record<Locale, Record<string, string>>;
+
+type I18nContextValue = {
+  locale: () => Locale;
+  t: (key: string) => string;
+  toggleLocale: () => void;
+};
+
+const I18nContext = createContext<I18nContextValue>();
+
+export const I18nProvider: ParentComponent = (props) => {
+  const initial = (import.meta.env.VITE_DEFAULT_LOCALE as Locale | undefined) ?? defaultLocale;
+  const [locale, setLocale] = createSignal<Locale>(locales.includes(initial) ? initial : defaultLocale);
+  const dictionary = createMemo(() => dictionaries[locale()]);
+
+  return (
+    <I18nContext.Provider
+      value={{
+        locale,
+        t(key: string) {
+          return dictionary()[key as keyof (typeof dictionaries)[Locale]] ?? key;
+        },
+        toggleLocale() {
+          setLocale((value) => (value === "cs" ? "en" : "cs"));
+        },
+      }}
+    >
+      {props.children}
+    </I18nContext.Provider>
+  );
+};
+
+export function useI18n() {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error("I18nProvider is missing from the component tree.");
+  }
+  return context;
+}

apps/frontend/src/routes/dashboard-route.tsx

@@ -0,0 +1,319 @@
+import { For, Show, createEffect, createResource, createSignal } from "solid-js";
+import type { components } from "@bookra/api-client/generated/types";
+import { locales, tenantPresets } from "@bookra/shared-types";
+import { apiClient } from "../lib/api-client";
+import { useAuth } from "../providers/auth-provider";
+import { useI18n } from "../providers/i18n-provider";
+
+export function DashboardRoute() {
+  const i18n = useI18n();
+  const auth = useAuth();
+  const [token] = createResource(() => auth.session()?.session?.id, () => auth.getToken());
+  const [summary, { refetch: refetchSummary }] = createResource(token, async (bearer) => {
+    if (!bearer) return null;
+    const response = await apiClient.GET("/v1/dashboard/summary", {
+      headers: {
+        Authorization: `Bearer ${bearer}`,
+      },
+    });
+    return response.data ?? null;
+  });
+  const [bootstrap, { refetch: refetchBootstrap }] = createResource(token, async (bearer) => {
+    if (!bearer) return null;
+    const response = await apiClient.GET("/v1/tenants/bootstrap", {
+      headers: {
+        Authorization: `Bearer ${bearer}`,
+      },
+    });
+    return response.data ?? null;
+  });
+  const [billing, { refetch: refetchBilling }] = createResource(token, async (bearer) => {
+    if (!bearer) return null;
+    const response = await apiClient.GET("/v1/billing/subscription", {
+      headers: {
+        Authorization: `Bearer ${bearer}`,
+      },
+    });
+    return response.data ?? null;
+  });
+  const [billingMessage, setBillingMessage] = createSignal<string | null>(null);
+  const [onboardingMessage, setOnboardingMessage] = createSignal<string | null>(null);
+  const [submittingOnboarding, setSubmittingOnboarding] = createSignal(false);
+  const [businessName, setBusinessName] = createSignal("");
+  const [slug, setSlug] = createSignal("");
+  const [preset, setPreset] = createSignal<(typeof tenantPresets)[number]>("studio");
+  const [selectedLocale, setSelectedLocale] = createSignal<(typeof locales)[number]>(i18n.locale());
+  const [timezone, setTimezone] = createSignal(
+    Intl.DateTimeFormat().resolvedOptions().timeZone || "Europe/Prague",
+  );
+
+  createEffect(() => {
+    const name = auth.session()?.user?.name;
+    if (!businessName() && name) {
+      setBusinessName(name);
+    }
+  });
+
+  createEffect(() => {
+    if (slug()) return;
+    const source = businessName().trim().toLowerCase();
+    if (!source) return;
+    setSlug(
+      source
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 48),
+    );
+  });
+
+  const previewKPIs = [
+    { code: "bookings_this_week", label: i18n.t("dashboard.kpi.bookings"), value: "124" },
+    { code: "cancellations", label: i18n.t("dashboard.kpi.cancellations"), value: "11" },
+    { code: "utilization", label: i18n.t("dashboard.kpi.utilization"), value: "82%" },
+  ] satisfies components["schemas"]["DashboardKPI"][];
+  const resolvedSummary = () =>
+    summary.latest ??
+    ({
+      tenantName: "Studio Atelier",
+      locale: "cs",
+      timezone: "Europe/Prague",
+      planCode: "growth",
+      kpis: previewKPIs,
+    } satisfies components["schemas"]["DashboardSummary"]);
+  const resolvedBootstrap = () =>
+    (!token() || !bootstrap.latest) ?
+    ({
+      tenantId: "preview",
+      tenantName: "Studio Atelier",
+      preset: "studio",
+      locale: "cs",
+      timezone: "Europe/Prague",
+      currentUser: {
+        subject: auth.session()?.user?.id ?? "preview-user",
+        role: "owner",
+      },
+    } satisfies components["schemas"]["TenantBootstrap"]) :
+    bootstrap.latest;
+  const resolvedBilling = () =>
+    billing.latest ??
+    ({
+      tenantId: resolvedBootstrap().tenantId,
+      customerId: "cus_demo_bookra",
+      subscriptionId: "",
+      status: "none",
+      planCode: resolvedSummary().planCode,
+      priceId: "",
+      cancelAtPeriodEnd: false,
+      entitlements: {
+        maxLocations: 3,
+        maxStaff: 10,
+        smsAddonAvailable: true,
+        advancedReporting: true,
+      },
+      checkoutUrlAvailable: true,
+    } satisfies components["schemas"]["SubscriptionSnapshot"]);
+  const checkoutPlanCode = () => {
+    const code = resolvedBilling().planCode;
+    return code === "starter" || code === "multi-location" ? code : "growth";
+  };
+  const hasTenant = () => Boolean(bootstrap.latest?.tenantId);
+
+  const openCheckout = async () => {
+    if (!token()) {
+      setBillingMessage("Billing checkout needs a Neon Auth JWT.");
+      return;
+    }
+    const response = await apiClient.POST("/v1/billing/checkout", {
+      headers: {
+        Authorization: `Bearer ${token()}`,
+      },
+      body: {
+        planCode: checkoutPlanCode(),
+      },
+    });
+    if (response.data?.url) {
+      window.location.href = response.data.url;
+      return;
+    }
+    setBillingMessage("Unable to create checkout session.");
+  };
+
+  const refreshBilling = async () => {
+    if (!token()) {
+      setBillingMessage("Billing refresh needs a Neon Auth JWT.");
+      return;
+    }
+    await apiClient.POST("/v1/billing/refresh", {
+      headers: {
+        Authorization: `Bearer ${token()}`,
+      },
+    });
+    setBillingMessage("Billing snapshot refreshed.");
+    void refetchBilling();
+  };
+
+  const submitOnboarding = async () => {
+    if (!token()) {
+      setOnboardingMessage("Workspace creation needs a Neon Auth JWT.");
+      return;
+    }
+    setSubmittingOnboarding(true);
+    setOnboardingMessage(null);
+    const response = await apiClient.POST("/v1/tenants/onboard", {
+      headers: {
+        Authorization: `Bearer ${token()}`,
+      },
+      body: {
+        name: businessName().trim(),
+        slug: slug().trim(),
+        preset: preset(),
+        locale: selectedLocale(),
+        timezone: timezone().trim(),
+      },
+    });
+    setSubmittingOnboarding(false);
+    if (response.error) {
+      setOnboardingMessage(`Workspace creation failed: ${String(response.error)}`);
+      return;
+    }
+    setOnboardingMessage("Workspace created.");
+    void refetchBootstrap();
+    void refetchSummary();
+    void refetchBilling();
+  };
+
+  return (
+    <section class="space-y-8 py-10">
+      <div class="rounded-panel border border-black/10 bg-white/70 p-8 shadow-card">
+        <h1 class="text-3xl font-semibold tracking-tight">{i18n.t("dashboard.title")}</h1>
+        <p class="mt-3 max-w-3xl text-base leading-7 text-slate">{i18n.t("dashboard.body")}</p>
+        <Show when={!token.loading && !token()}>
+          <div class="mt-5 rounded-panel border border-dashed border-black/10 bg-canvas/70 px-4 py-3 text-sm text-slate">
+            {i18n.t("dashboard.authRequired")}
+          </div>
+        </Show>
+      </div>
+      <Show when={token() && bootstrap.latest && !hasTenant()}>
+        <article class="rounded-panel border border-black/10 bg-white/70 p-6 shadow-card">
+          <div class="max-w-2xl space-y-5">
+            <div>
+              <p class="text-sm uppercase tracking-[0.2em] text-slate">{i18n.t("dashboard.bootstrap")}</p>
+              <h2 class="mt-3 text-2xl font-semibold tracking-tight">{i18n.t("dashboard.onboarding.title")}</h2>
+              <p class="mt-2 text-sm leading-7 text-slate">{i18n.t("dashboard.onboarding.body")}</p>
+            </div>
+            <div class="grid gap-4 md:grid-cols-2">
+              <label class="space-y-2 text-sm text-slate">
+                <span>{i18n.t("dashboard.onboarding.name")}</span>
+                <input class="w-full rounded-panel border border-black/10 bg-white px-4 py-3" value={businessName()} onInput={(event) => setBusinessName(event.currentTarget.value)} />
+              </label>
+              <label class="space-y-2 text-sm text-slate">
+                <span>{i18n.t("dashboard.onboarding.slug")}</span>
+                <input class="w-full rounded-panel border border-black/10 bg-white px-4 py-3" value={slug()} onInput={(event) => setSlug(event.currentTarget.value.toLowerCase())} />
+              </label>
+              <label class="space-y-2 text-sm text-slate">
+                <span>{i18n.t("dashboard.onboarding.preset")}</span>
+                <select class="w-full rounded-panel border border-black/10 bg-white px-4 py-3" value={preset()} onInput={(event) => setPreset(event.currentTarget.value as (typeof tenantPresets)[number])}>
+                  <For each={tenantPresets}>
+                    {(item) => <option value={item}>{item}</option>}
+                  </For>
+                </select>
+              </label>
+              <label class="space-y-2 text-sm text-slate">
+                <span>{i18n.t("dashboard.onboarding.locale")}</span>
+                <select class="w-full rounded-panel border border-black/10 bg-white px-4 py-3" value={selectedLocale()} onInput={(event) => setSelectedLocale(event.currentTarget.value as (typeof locales)[number])}>
+                  <For each={locales}>
+                    {(item) => <option value={item}>{item}</option>}
+                  </For>
+                </select>
+              </label>
+              <label class="space-y-2 text-sm text-slate md:col-span-2">
+                <span>{i18n.t("dashboard.onboarding.timezone")}</span>
+                <input class="w-full rounded-panel border border-black/10 bg-white px-4 py-3" value={timezone()} onInput={(event) => setTimezone(event.currentTarget.value)} />
+              </label>
+            </div>
+            <div class="flex flex-wrap items-center gap-3">
+              <button
+                class="rounded-full bg-ink px-5 py-3 text-sm font-medium text-canvas disabled:opacity-50"
+                disabled={submittingOnboarding()}
+                onClick={() => void submitOnboarding()}
+                type="button"
+              >
+                {submittingOnboarding() ? i18n.t("dashboard.onboarding.pending") : i18n.t("dashboard.onboarding.submit")}
+              </button>
+              <Show when={onboardingMessage()}>
+                <p class="text-sm text-pine">{onboardingMessage()}</p>
+              </Show>
+            </div>
+          </div>
+        </article>
+      </Show>
+      <Show when={!token() || hasTenant()}>
+      <div class="grid gap-4 md:grid-cols-[1.2fr_0.8fr]">
+        <article class="rounded-panel border border-black/10 bg-pine p-6 text-canvas shadow-card">
+          <p class="text-sm uppercase tracking-[0.2em] text-canvas/70">{i18n.t("dashboard.bootstrap")}</p>
+          <div class="mt-4 space-y-3 text-sm leading-7 text-canvas/85">
+            <p><span class="font-semibold">Tenant:</span> {resolvedBootstrap().tenantName}</p>
+            <p><span class="font-semibold">Preset:</span> {resolvedBootstrap().preset}</p>
+            <p><span class="font-semibold">Locale:</span> {resolvedBootstrap().locale}</p>
+            <p><span class="font-semibold">Timezone:</span> {resolvedBootstrap().timezone}</p>
+            <p><span class="font-semibold">Role:</span> {resolvedBootstrap().currentUser.role}</p>
+          </div>
+        </article>
+        <article class="rounded-panel border border-black/10 bg-white/70 p-6 shadow-card">
+          <p class="text-sm uppercase tracking-[0.2em] text-slate">{i18n.t("dashboard.previewMode")}</p>
+          <p class="mt-4 text-sm leading-7 text-slate">
+            The dashboard hydrates from the Railway API when a Neon Auth JWT is available. Without one, it renders the same contract shape in preview mode.
+          </p>
+        </article>
+      </div>
+      <article class="rounded-panel border border-black/10 bg-white/70 p-6 shadow-card">
+        <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+          <div>
+            <p class="text-sm uppercase tracking-[0.2em] text-slate">{i18n.t("dashboard.billing")}</p>
+            <h2 class="mt-3 text-2xl font-semibold tracking-tight">
+              {i18n.t("dashboard.plan")}: {resolvedBilling().planCode}
+            </h2>
+            <p class="mt-2 text-sm leading-7 text-slate">
+              {i18n.t("dashboard.status")}: {resolvedBilling().status}
+            </p>
+            <p class="mt-2 text-sm leading-7 text-slate">
+              {i18n.t("dashboard.entitlements")}: {resolvedBilling().entitlements.maxLocations} locations,{" "}
+              {resolvedBilling().entitlements.maxStaff} staff, SMS{" "}
+              {resolvedBilling().entitlements.smsAddonAvailable ? "enabled" : "disabled"}.
+            </p>
+            <Show when={billingMessage()}>
+              <p class="mt-3 text-sm text-pine">{billingMessage()}</p>
+            </Show>
+          </div>
+          <div class="flex flex-wrap gap-3">
+            <button
+              class="rounded-full bg-ink px-5 py-3 text-sm font-medium text-canvas"
+              onClick={() => void openCheckout()}
+              type="button"
+            >
+              {i18n.t("dashboard.checkout")}
+            </button>
+            <button
+              class="rounded-full border border-black/10 px-5 py-3 text-sm font-medium"
+              onClick={() => void refreshBilling()}
+              type="button"
+            >
+              {i18n.t("dashboard.refreshBilling")}
+            </button>
+          </div>
+        </div>
+      </article>
+      <div class="grid gap-4 md:grid-cols-3">
+        <For each={resolvedSummary().kpis}>
+          {(kpi) => (
+            <article class="rounded-panel border border-black/10 bg-white/70 p-6 shadow-card">
+              <p class="text-sm uppercase tracking-[0.2em] text-slate">{kpi.label}</p>
+              <p class="mt-4 text-4xl font-semibold tracking-tight">{kpi.value}</p>
+            </article>
+          )}
+        </For>
+      </div>
+      </Show>
+    </section>
+  );
+}

apps/frontend/src/routes/home-route.tsx

@@ -0,0 +1,40 @@
+import { A } from "@solidjs/router";
+import { useI18n } from "../providers/i18n-provider";
+
+export function HomeRoute() {
+  const i18n = useI18n();
+
+  return (
+    <section class="grid gap-8 py-10 lg:grid-cols-[1.4fr_0.8fr]">
+      <div class="rounded-panel border border-black/10 bg-white/70 p-8 shadow-card backdrop-blur">
+        <p class="mb-4 text-xs uppercase tracking-[0.24em] text-slate">{i18n.t("home.eyebrow")}</p>
+        <h1 class="max-w-3xl text-4xl font-semibold tracking-tight text-ink md:text-6xl">
+          {i18n.t("home.title")}
+        </h1>
+        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate">{i18n.t("home.body")}</p>
+        <div class="mt-8 flex flex-wrap gap-3">
+          <A class="rounded-full bg-ink px-5 py-3 text-sm font-medium text-canvas" href="/dashboard">
+            {i18n.t("home.primary")}
+          </A>
+          <A class="rounded-full border border-black/10 px-5 py-3 text-sm font-medium" href="/book/studio-atelier">
+            {i18n.t("home.secondary")}
+          </A>
+        </div>
+      </div>
+      <div class="grid gap-4">
+        <div class="rounded-panel border border-black/10 bg-pine p-6 text-canvas shadow-card">
+          <p class="text-sm uppercase tracking-[0.2em] text-canvas/70">{i18n.t("home.appLabel")}</p>
+          <p class="mt-4 text-2xl font-semibold">{i18n.t("home.appTitle")}</p>
+          <p class="mt-3 text-sm leading-7 text-canvas/80">
+            {i18n.t("home.appBody")}
+          </p>
+        </div>
+        <div class="rounded-panel border border-black/10 bg-white/70 p-6 shadow-card">
+          <p class="text-sm uppercase tracking-[0.2em] text-slate">{i18n.t("home.publicLabel")}</p>
+          <p class="mt-4 text-2xl font-semibold">{i18n.t("home.publicTitle")}</p>
+          <p class="mt-3 text-sm leading-7 text-slate">{i18n.t("home.publicBody")}</p>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/frontend/src/routes/public-booking-route.tsx

@@ -0,0 +1,110 @@
+import { useParams } from "@solidjs/router";
+import { For, Show, createResource, createSignal } from "solid-js";
+import { apiClient } from "../lib/api-client";
+import { useI18n } from "../providers/i18n-provider";
+import type { components } from "@bookra/api-client/generated/types";
+
+export function PublicBookingRoute() {
+  const params = useParams();
+  const i18n = useI18n();
+  const tenantSlug = () => params.tenantSlug ?? "studio-atelier";
+  const [bookingResult, setBookingResult] = createSignal<string | null>(null);
+  const [submittingSlot, setSubmittingSlot] = createSignal<string | null>(null);
+  const [availability, { refetch }] = createResource(() =>
+    apiClient.GET("/v1/public/tenants/{tenantSlug}/availability", {
+      params: {
+        path: {
+          tenantSlug: tenantSlug(),
+        },
+      },
+    }),
+  );
+
+  const bookSlot = async (slot: components["schemas"]["TimeSlot"]) => {
+    setSubmittingSlot(slot.startsAt);
+    setBookingResult(null);
+
+    const response = await apiClient.POST("/v1/public/bookings", {
+      body: {
+        tenantSlug: tenantSlug(),
+        bookingMode: slot.mode,
+        serviceId: slot.serviceId ?? undefined,
+        classSessionId: slot.classSessionId ?? undefined,
+        staffId: slot.staffId ?? undefined,
+        locationId: slot.locationId ?? undefined,
+        customerName: "Demo Customer",
+        customerEmail: "customer@bookra.dev",
+        startsAt: slot.startsAt,
+        endsAt: slot.endsAt,
+      },
+    });
+
+    const payload = response as { data?: components["schemas"]["CreateBookingResponse"]; error?: unknown };
+    if (payload.error) {
+      setBookingResult(`Booking failed: ${String(payload.error)}`);
+    } else if (payload.data) {
+      setBookingResult(`Created ${payload.data.status} booking ${payload.data.reference}`);
+    }
+
+    setSubmittingSlot(null);
+    void refetch();
+  };
+
+  return (
+    <section class="grid gap-8 py-10 lg:grid-cols-[1.1fr_0.9fr]">
+      <div class="rounded-panel border border-black/10 bg-white/70 p-8 shadow-card">
+        <h1 class="text-3xl font-semibold tracking-tight">{i18n.t("booking.title")}</h1>
+        <p class="mt-3 max-w-2xl text-base leading-7 text-slate">{i18n.t("booking.body")}</p>
+        <Show when={bookingResult()}>
+          <div class="mt-6 rounded-panel border border-pine/20 bg-pine/10 px-4 py-3 text-sm text-pine">
+            {bookingResult()}
+          </div>
+        </Show>
+        <div class="mt-8 grid gap-3">
+          <Show
+            when={availability.latest?.data?.slots?.length}
+            fallback={
+              <div class="rounded-panel border border-dashed border-black/10 bg-canvas/70 p-5 text-sm leading-6 text-slate">
+                {i18n.t("booking.empty")}
+              </div>
+            }
+          >
+            <For each={availability.latest?.data?.slots ?? []}>
+              {(slot) => (
+                <article class="rounded-panel border border-black/10 bg-canvas/70 p-5">
+                  <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                    <div>
+                      <p class="text-sm uppercase tracking-[0.2em] text-slate">{slot.mode}</p>
+                      <h2 class="mt-2 text-xl font-semibold">{slot.label ?? "Bookable slot"}</h2>
+                      <p class="mt-2 text-sm leading-6 text-slate">
+                        {new Date(slot.startsAt).toLocaleString()} - {new Date(slot.endsAt).toLocaleTimeString()}
+                      </p>
+                      <Show when={typeof slot.remainingCapacity === "number"}>
+                        <p class="mt-2 text-sm text-pine">Remaining capacity: {slot.remainingCapacity}</p>
+                      </Show>
+                    </div>
+                    <button
+                      class="rounded-full bg-ink px-5 py-3 text-sm font-medium text-canvas disabled:opacity-50"
+                      disabled={submittingSlot() === slot.startsAt}
+                      onClick={() => void bookSlot(slot)}
+                      type="button"
+                    >
+                      {submittingSlot() === slot.startsAt ? "Booking..." : "Book demo slot"}
+                    </button>
+                  </div>
+                </article>
+              )}
+            </For>
+          </Show>
+        </div>
+      </div>
+      <div class="rounded-panel border border-black/10 bg-pine p-8 text-canvas shadow-card">
+        <p class="text-sm uppercase tracking-[0.2em] text-canvas/70">Tenant slug</p>
+        <p class="mt-4 text-2xl font-semibold">{tenantSlug()}</p>
+        <p class="mt-4 text-sm leading-7 text-canvas/80">
+          This route is ready to consume live availability from the Go API once Neon-backed tenant data is configured.
+        </p>
+      </div>
+    </section>
+  );
+}

apps/frontend/src/styles/index.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light dark;
+  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(157, 92, 61, 0.12), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 100%);
+}
+
+body {
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+