mirror of
https://github.com/Dvorinka/Bookra.git
synced 2026-06-05 13:02:59 +00:00
first commit
This commit is contained in:
Tomas Dvorak
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user