first commit

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: "[email protected]",
+        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>
+  );
+}