+
+ {(b) => (
+
+ 0}>
+
);
};
@@ -145,29 +157,25 @@ export function CalendarView(props: { bookings: any[]; locale?: string; onBookin
+
+
+ {new Date(b.startsAt).toLocaleTimeString(isCs() ? "cs-CZ" : "en-US", { hour: "2-digit", minute: "2-digit" })}
+
+
+ )}
+ +{overflow} {isCs() ? "další" : "more"}
+
{calendarDays().map(({ day, bookings, isToday }) => {
if (!day) {
- return ;
+ return ;
}
return (
);
})}
diff --git a/apps/frontend/src/components/dashboard/notification-dropdown.tsx b/apps/frontend/src/components/dashboard/notification-dropdown.tsx
index 221e0a4..03fca7c 100644
--- a/apps/frontend/src/components/dashboard/notification-dropdown.tsx
+++ b/apps/frontend/src/components/dashboard/notification-dropdown.tsx
@@ -26,8 +26,8 @@ export function NotificationDropdown(props: { bookings?: any[]; billing?: any })
id: `booking-${i}`,
type: "booking",
title: `${cs ? "Nová rezervace" : "New booking"} ${b.customerName}`,
- message: `${b.service} — ${new Date(b.startsAt).toLocaleDateString()}`,
- time: new Date(b.startsAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+ message: `${b.service} — ${new Date(b.startsAt).toLocaleDateString(cs ? "cs-CZ" : "en-US")}`,
+ time: new Date(b.startsAt).toLocaleDateString(cs ? "cs-CZ" : "en-US", { month: "short", day: "numeric" }),
read: false,
});
});
diff --git a/apps/frontend/src/components/dashboard/revenue-chart.tsx b/apps/frontend/src/components/dashboard/revenue-chart.tsx
index 974133a..5fdf6e7 100644
--- a/apps/frontend/src/components/dashboard/revenue-chart.tsx
+++ b/apps/frontend/src/components/dashboard/revenue-chart.tsx
@@ -1,32 +1,43 @@
-import { createMemo } from "solid-js";
+import { createMemo, Show } from "solid-js";
import { useI18n } from "../../providers/i18n-provider";
interface DataPoint {
label: string;
+ dateLabel: string;
value: number;
+ isToday: boolean;
+ isFuture: boolean;
}
export function RevenueChart(props: { data?: DataPoint[]; bookings?: any[] }) {
const i18n = useI18n();
+ const isCs = () => i18n.locale() === "cs";
- const chartData = createMemo(() => {
+ const chartData = createMemo(() => {
if (props.data && props.data.length > 0) return props.data;
- // Build last 7 days from bookings
- const days: DataPoint[] = [];
+ // Bucket bookings into the current calendar week (Mon-Sun) so both
+ // completed and upcoming bookings are visible.
const bookings = props.bookings ?? [];
const today = new Date();
- for (let i = 6; i >= 0; i--) {
- const d = new Date(today);
- d.setDate(d.getDate() - i);
- const dateStr = d.toISOString().split("T")[0];
+ const monday = new Date(today);
+ monday.setDate(today.getDate() - ((today.getDay() + 6) % 7));
+
+ const days: DataPoint[] = [];
+ for (let i = 0; i < 7; i++) {
+ const d = new Date(monday);
+ d.setDate(monday.getDate() + i);
+ const isToday = d.toDateString() === today.toDateString();
const count = bookings.filter((b: any) => {
- const bd = new Date(b.startsAt).toISOString().split("T")[0];
- return bd === dateStr;
+ const bd = new Date(b.startsAt);
+ return bd.getFullYear() === d.getFullYear() && bd.getMonth() === d.getMonth() && bd.getDate() === d.getDate();
}).length;
days.push({
- label: d.toLocaleDateString(i18n.locale() === "cs" ? "cs-CZ" : "en-US", { weekday: "short" }),
+ label: d.toLocaleDateString(isCs() ? "cs-CZ" : "en-US", { weekday: "short" }),
+ dateLabel: d.toLocaleDateString(isCs() ? "cs-CZ" : "en-US", { day: "numeric", month: "numeric" }),
value: count,
+ isToday,
+ isFuture: d > today,
});
}
return days;
@@ -36,34 +47,46 @@ export function RevenueChart(props: { data?: DataPoint[]; bookings?: any[] }) {
const total = createMemo(() => chartData().reduce((s, d) => s + d.value, 0));
return (
-
-
+
+
-
- {i18n.t("dashboard.revenueTitle")}
+{i18n.t("dashboard.revenueTitle")}
{i18n.t("dashboard.revenueSubtitle")}
-
- {total()}
+
+
{total()}
{i18n.t("dashboard.totalBookings")}
- {chartData().map((point, i) => {
+
+ {chartData().map((point) => {
const heightPct = Math.round((point.value / maxValue()) * 100);
return (
-
-
+
-
+
+
);
})}
diff --git a/apps/frontend/src/components/pinned-list.tsx b/apps/frontend/src/components/pinned-list.tsx
index 66a1d7d..8ae25c3 100644
--- a/apps/frontend/src/components/pinned-list.tsx
+++ b/apps/frontend/src/components/pinned-list.tsx
@@ -82,21 +82,21 @@ export function PinnedList(props: PinnedListProps) {
const ItemCard = (p: { item: PinnedListItem; pinned: boolean }) => {
const content = (
-
+
+
+
+ class={`w-full rounded-t-lg transition-all duration-300 ${
+ point.isToday
+ ? "bg-accent"
+ : point.isFuture
+ ? "bg-accent/40 group-hover:bg-accent/60"
+ : "bg-accent/70 group-hover:bg-accent"
+ }`}
+ style={{ height: `${Math.max(heightPct, point.value > 0 ? 8 : 3)}%`, "min-height": point.value > 0 ? "6px" : "3px", opacity: point.value === 0 ? 0.15 : 1 }}
+ />
+ 0}>
+
{point.value}
-
-
+
+ {point.label}
+
+
- {point.label}
{point.dateLabel}
+ | null = null;
-
-export function paddleConfigured() {
- return paddleToken.trim() !== "";
-}
-
-export async function getPaddle() {
- if (!paddleConfigured()) {
- return undefined;
- }
- if (!paddlePromise) {
- paddlePromise = initializePaddle({
- environment: paddleEnvironment,
- token: paddleToken,
- });
- }
- return paddlePromise;
-}
diff --git a/apps/frontend/src/lib/stripe.ts b/apps/frontend/src/lib/stripe.ts
deleted file mode 100644
index 976c558..0000000
--- a/apps/frontend/src/lib/stripe.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { loadStripe, type Stripe } from "@stripe/stripe-js";
-
-const stripePublishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ?? "";
-
-let stripePromise: Promise | null = null;
-
-export function stripeConfigured() {
- return stripePublishableKey.trim() !== "";
-}
-
-export async function getStripe() {
- if (!stripeConfigured()) {
- return null;
- }
- if (!stripePromise) {
- stripePromise = loadStripe(stripePublishableKey);
- }
- return stripePromise;
-}
diff --git a/apps/frontend/src/providers/i18n-provider.tsx b/apps/frontend/src/providers/i18n-provider.tsx
index 8401875..80da44f 100644
--- a/apps/frontend/src/providers/i18n-provider.tsx
+++ b/apps/frontend/src/providers/i18n-provider.tsx
@@ -348,7 +348,11 @@ const dictionaries = {
"dashboard.onboarding.submit": "Vytvořit prostor",
"dashboard.onboarding.pending": "Vytvářím prostor...",
"dashboard.revenueTitle": "Trend rezervací",
- "dashboard.revenueSubtitle": "Počet rezervací za posledních 7 dní",
+ "dashboard.revenueSubtitle": "Počet rezervací v tomto týdnu",
+ "dashboard.customerStatus.active": "Aktivní",
+ "dashboard.customerStatus.inactive": "Neaktivní",
+ "dashboard.bookingModal.date": "Datum",
+ "dashboard.bookingModal.time": "Čas",
"dashboard.noNotifications": "Žádná nová oznámení",
"dashboard.markAllRead": "Označit vše jako přečtené",
"dashboard.notifications.title": "Oznámení",
@@ -512,7 +516,7 @@ const dictionaries = {
"legal.terms.service.title": "Používání služby",
"legal.terms.service.body": "Službu je nutné používat v souladu se zákonem, bez zneužití rezervačních formulářů, obcházení zabezpečení nebo nahrávání zakázaného obsahu.",
"legal.terms.billing.title": "Předplatné",
- "legal.terms.billing.body": "Placené plány se účtují přes Paddle. Aktivní plán určuje dostupné limity, rozšíření a podpůrné funkce.",
+ "legal.terms.billing.body": "Placené plány se účtují přes Stripe. Aktivní plán určuje dostupné limity, rozšíření a podpůrné funkce.",
},
en: {
// Navigation & Auth
@@ -853,7 +857,11 @@ const dictionaries = {
"dashboard.onboarding.submit": "Create workspace",
"dashboard.onboarding.pending": "Creating workspace...",
"dashboard.revenueTitle": "Booking trend",
- "dashboard.revenueSubtitle": "Bookings over the last 7 days",
+ "dashboard.revenueSubtitle": "Bookings this week",
+ "dashboard.customerStatus.active": "Active",
+ "dashboard.customerStatus.inactive": "Inactive",
+ "dashboard.bookingModal.date": "Date",
+ "dashboard.bookingModal.time": "Time",
"dashboard.noNotifications": "No new notifications",
"dashboard.markAllRead": "Mark all as read",
"dashboard.notifications.title": "Notifications",
@@ -1017,7 +1025,7 @@ const dictionaries = {
"legal.terms.service.title": "Using the service",
"legal.terms.service.body": "The service must be used lawfully, without abusing booking forms, bypassing security, or uploading prohibited content.",
"legal.terms.billing.title": "Subscription",
- "legal.terms.billing.body": "Paid plans are billed through Paddle. The active plan controls limits, add-ons, and support features.",
+ "legal.terms.billing.body": "Paid plans are billed through Stripe. The active plan controls limits, add-ons, and support features.",
},
} satisfies Record>;
diff --git a/apps/frontend/src/routes/dashboard-route.tsx b/apps/frontend/src/routes/dashboard-route.tsx
deleted file mode 100644
index df5daee..0000000
--- a/apps/frontend/src/routes/dashboard-route.tsx
+++ /dev/null
@@ -1,1654 +0,0 @@
-import { Show, For, createResource, createSignal, createMemo, createEffect, type JSX } from "solid-js";
-import { A, useSearchParams } from "@solidjs/router";
-import { apiClient } from "../lib/api-client";
-import { getPaddle, paddleConfigured } from "../lib/paddle";
-import { getStripe, stripeConfigured } from "../lib/stripe";
-import { useAuth } from "../providers/auth-provider";
-import { useI18n } from "../providers/i18n-provider";
-import { useTheme } from "../providers/theme-provider";
-import { BookraCharacter } from "../components/bookra-character";
-import { WidgetBuilder } from "../components/widget-builder";
-import { IntegrationModal } from "../components/integration-modal";
-import { SMSSettings } from "../components/sms-settings";
-import { Select } from "../components/ui/select";
-import { Input } from "../components/ui/input";
-import { Textarea } from "../components/ui/textarea";
-import { RevenueChart } from "../components/dashboard/revenue-chart";
-import { CalendarView } from "../components/dashboard/calendar-view";
-import { NotificationDropdown } from "../components/dashboard/notification-dropdown";
-import type { Section } from "../components/dashboard/types";
-import { getInitials, getBookingDuration } from "../components/dashboard/types";
-import {
- LayoutDashboardIcon, CalendarDaysIcon, CreditCardIcon, Settings2Icon,
- LogOutIcon, MenuIcon, XIcon, TrendingUpIcon, TrendingDownIcon,
- ClockIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon,
- ChevronLeftIcon, ChevronRightIcon, SparklesIcon, BellIcon, PlusIcon,
- UsersIcon, UserCircleIcon, MapPinIcon, BarChart3Icon, CheckIcon,
- SunIcon, MoonIcon, GlobeIcon, PaletteIcon, MailIcon, XCircleIcon,
- BanIcon, ClockOffIcon, Trash2Icon, EditIcon, EyeIcon
-} from "../components/dashboard/icons";
-
-// ============================================
-// DEMO DATA
-// ============================================
-function createDemoData(i18n: ReturnType) {
- const cs = i18n.locale() === "cs";
- const now = new Date();
- const fmt = (d: Date) => d.toISOString();
- const addDays = (n: number) => { const d = new Date(now); d.setDate(d.getDate() + n); return d; };
- const addHours = (d: Date, h: number) => { const r = new Date(d); r.setHours(r.getHours() + h); return r; };
-
- const services = cs
- ? ["Masaz", "Kosmetika", "Fyzioterapie", "Manikura"]
- : ["Massage", "Cosmetics", "Physiotherapy", "Manicure"];
- const customers = [
- { name: cs ? "Martina Novakova" : "Martina Novakova", email: "martina@example.com" },
- { name: cs ? "David Svoboda" : "David Svoboda", email: "david@example.com" },
- { name: cs ? "Jana KovarovA" : "Jana KovarovA", email: "jana@example.com" },
- { name: cs ? "Alice Johnson" : "Alice Johnson", email: "alice@example.com" },
- { name: cs ? "Bob Smith" : "Bob Smith", email: "bob@example.com" },
- ];
-
- const allBookings = [
- { id: "b1", customerName: customers[0].name, customerEmail: customers[0].email, service: services[0], status: "confirmed", startsAt: fmt(addHours(addDays(0), 10)), endsAt: fmt(addHours(addDays(0), 11)), reference: "BOK-001", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
- { id: "b2", customerName: customers[1].name, customerEmail: customers[1].email, service: services[1], status: "pending", startsAt: fmt(addHours(addDays(1), 14)), endsAt: fmt(addHours(addDays(1), 15)), reference: "BOK-002", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Lucie K." : "Lucie K.", notes: "" },
- { id: "b3", customerName: customers[2].name, customerEmail: customers[2].email, service: services[2], status: "confirmed", startsAt: fmt(addHours(addDays(2), 9)), endsAt: fmt(addHours(addDays(2), 10)), reference: "BOK-003", location: cs ? "Studio B" : "Studio B", staffName: "", notes: cs ? "Bolest zad" : "Back pain" },
- { id: "b4", customerName: customers[3].name, customerEmail: customers[3].email, service: services[3], status: "cancelled", startsAt: fmt(addHours(addDays(-1), 11)), endsAt: fmt(addHours(addDays(-1), 12)), reference: "BOK-004", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
- { id: "b5", customerName: customers[4].name, customerEmail: customers[4].email, service: services[0], status: "completed", startsAt: fmt(addHours(addDays(-2), 13)), endsAt: fmt(addHours(addDays(-2), 14)), reference: "BOK-005", location: cs ? "Studio B" : "Studio B", staffName: cs ? "Lucie K." : "Lucie K.", notes: "" },
- { id: "b6", customerName: customers[0].name, customerEmail: customers[0].email, service: services[1], status: "confirmed", startsAt: fmt(addHours(addDays(3), 10)), endsAt: fmt(addHours(addDays(3), 11)), reference: "BOK-006", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
- { id: "b7", customerName: customers[1].name, customerEmail: customers[1].email, service: services[2], status: "confirmed", startsAt: fmt(addHours(addDays(0), 16)), endsAt: fmt(addHours(addDays(0), 17)), reference: "BOK-007", location: cs ? "Studio B" : "Studio B", staffName: "", notes: "" },
- { id: "b8", customerName: customers[2].name, customerEmail: customers[2].email, service: services[3], status: "pending", startsAt: fmt(addHours(addDays(4), 9)), endsAt: fmt(addHours(addDays(4), 10)), reference: "BOK-008", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Lucie K." : "Lucie K.", notes: "" },
- { id: "b9", customerName: customers[3].name, customerEmail: customers[3].email, service: services[0], status: "confirmed", startsAt: fmt(addHours(addDays(5), 11)), endsAt: fmt(addHours(addDays(5), 12)), reference: "BOK-009", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
- { id: "b10", customerName: customers[4].name, customerEmail: customers[4].email, service: services[1], status: "completed", startsAt: fmt(addHours(addDays(-3), 10)), endsAt: fmt(addHours(addDays(-3), 11)), reference: "BOK-010", location: cs ? "Studio B" : "Studio B", staffName: "", notes: "" },
- ];
-
- return {
- summary: {
- tenantName: cs ? "Demo Studio" : "Demo Studio",
- tenantSlug: "demo-studio",
- publicBookingUrl: "http://localhost:3000/book/demo-studio",
- kpis: [
- { label: i18n.t("dashboard.kpi.bookings"), value: 42, change: "+12%", trend: "up" },
- { label: i18n.t("dashboard.kpi.cancelled"), value: 3, change: "-5%", trend: "down" },
- { label: i18n.t("dashboard.kpi.completed"), value: 38, change: "+8%", trend: "up" },
- { label: i18n.t("dashboard.kpi.newClients"), value: 12, change: "+24%", trend: "up" },
- ],
- staff: [{ id: "s1", name: cs ? "Petra M." : "Petra M.", role: cs ? "Specialista" : "Specialist", email: "petra@demo.cz" }],
- upcomingBookings: allBookings.filter(b => b.status !== "cancelled" && b.status !== "completed"),
- allBookings,
- recentActivity: [
- { action: cs ? "Nova rezervace" : "New booking", detail: `${customers[0].name} - ${services[0]}`, time: cs ? "Dnes, 10:00" : "Today, 10:00", type: "booking" },
- { action: cs ? "Zruseni rezervace" : "Booking cancelled", detail: `${customers[3].name} - ${services[3]}`, time: cs ? "Vcera" : "Yesterday", type: "cancel" },
- { action: cs ? "Dokoncena rezervace" : "Booking completed", detail: `${customers[4].name} - ${services[1]}`, time: cs ? "Pred 2 dny" : "2 days ago", type: "reminder" },
- ],
- },
- bootstrap: {
- tenantName: cs ? "Demo Studio" : "Demo Studio",
- slug: "demo-studio",
- brand: { primaryColor: "#c25e3a" },
- locale: cs ? "cs" : "en",
- timezone: "Europe/Prague",
- },
- billing: {
- planCode: "pro",
- planName: "Pro",
- subscriptionStatus: "trialing",
- trialDaysRemaining: 12,
- entitlements: { maxLocations: 3, maxBookings: -1, maxStaff: 10 },
- billingProvider: "stripe",
- },
- };
-}
-
-// ============================================
-// KPI CARD
-// ============================================
-function KpiCard(props: { kpi: any; index: number }) {
- const trend = () => props.kpi.trend ?? "neutral";
- const trendClass = () => {
- switch (trend()) {
- case "up": return "bg-canvas-muted text-accent";
- case "down": return "bg-canvas-muted text-ink-muted";
- default: return "bg-canvas-muted text-ink-muted";
- }
- };
- return (
- (initialTab());
- const [isMobileMenuOpen, setIsMobileMenuOpen] = createSignal(false);
- const [isPageTransitioning, setIsPageTransitioning] = createSignal(false);
- const [billingNotice, setBillingNotice] = createSignal(null);
- const [billingError, setBillingError] = createSignal(null);
- const [billingAction, setBillingAction] = createSignal<"checkout" | "refresh" | "portal" | null>(null);
- const [handledBillingState, setHandledBillingState] = createSignal(null);
- const [showIntegrationModal, setShowIntegrationModal] = createSignal(false);
- const [billingInterval, setBillingInterval] = createSignal<"monthly" | "yearly">("monthly");
- const [demoNotice, setDemoNotice] = createSignal(null);
- const [token] = createResource(() => auth.session()?.session?.id, () => auth.getToken());
-
- const isDemoMode = () => token()?.startsWith("demo.") ?? false;
- const demoData = createMemo(() => createDemoData(i18n));
-
- const [summary] = createResource(token, async (bearer) => {
- if (!bearer) return null;
- if (bearer.startsWith("demo.")) return demoData().summary;
- const response = await apiClient.GET("/v1/dashboard/summary", { headers: { Authorization: `Bearer ${bearer}` } });
- return response.data ?? null;
- });
-
- const [bootstrap] = createResource(token, async (bearer) => {
- if (!bearer) return null;
- if (bearer.startsWith("demo.")) return demoData().bootstrap;
- 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;
- if (bearer.startsWith("demo.")) return demoData().billing;
- const response = await apiClient.GET("/v1/billing/subscription", { headers: { Authorization: `Bearer ${bearer}` } });
- return response.data ?? null;
- });
-
- const [locationData] = createResource(token, async (bearer) => {
- if (!bearer) return 0;
- if (bearer.startsWith("demo.")) return 1;
- try {
- const response = await (apiClient as any).GET("/v1/catalog/locations", { headers: { Authorization: `Bearer ${bearer}` } });
- return (response.data as any[])?.length ?? 0;
- } catch { return 0; }
- });
-
- const [smsUsage] = createResource(token, async (bearer) => {
- if (!bearer || bearer.startsWith("demo.")) return null;
- try {
- const response = await (apiClient as any).GET("/v1/sms/usage", { headers: { Authorization: `Bearer ${bearer}` } });
- return response.data as any ?? null;
- } catch { return null; }
- });
-
- const resolvedSummary = () => (summary.latest as any) ?? (isDemoMode() ? demoData().summary : undefined);
- const resolvedBootstrap = () => (bootstrap.latest as any) ?? (isDemoMode() ? demoData().bootstrap : undefined);
- const resolvedBilling = () => (billing.latest as any) ?? (isDemoMode() ? demoData().billing : undefined);
-
- const normalizedKpis = createMemo(() => (resolvedSummary()?.kpis ?? []).map((kpi: any) => ({
- ...kpi, trend: kpi.trend ?? "neutral", change: kpi.change ?? "—",
- })));
-
- const normalizedUpcomingBookings = createMemo(() => (resolvedSummary()?.upcomingBookings ?? []).map((booking: any) => ({
- ...booking,
- avatar: booking.avatar ?? getInitials(booking.customerName),
- service: booking.service ?? booking.label ?? booking.reference ?? (i18n.locale() === "cs" ? "Rezervace" : "Booking"),
- duration: booking.duration ?? getBookingDuration(booking.startsAt, booking.endsAt),
- })));
-
- const normalizedRecentActivity = createMemo(() => {
- if (resolvedSummary()?.recentActivity?.length) return resolvedSummary().recentActivity;
- return normalizedUpcomingBookings().slice(0, 5).map((booking: any) => ({
- action: i18n.locale() === "cs" ? "Nadchazejici rezervace" : "Upcoming booking",
- detail: `${booking.customerName} • ${booking.service}`,
- time: new Date(booking.startsAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
- type: "booking",
- }));
- });
-
- const normalizedAllBookings = createMemo(() => resolvedSummary()?.allBookings ?? normalizedUpcomingBookings());
-
- const isDashboardReady = () => !!token() && !bootstrap.loading && !summary.loading && !billing.loading;
-
- const changeSection = (section: Section) => {
- if (section === activeSection()) return;
- setIsPageTransitioning(true);
- setTimeout(() => { setActiveSection(section); setIsPageTransitioning(false); }, 150);
- setSearchParams({ tab: section });
- };
-
- const openCheckout = async () => {
- const bearer = token();
- if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze upravovat predplatne." : "Cannot modify billing in demo mode."); return; }
- setBillingAction("checkout");
- setBillingError(null);
- try {
- const response = await (apiClient as any).POST("/v1/billing/checkout", {
- headers: { Authorization: `Bearer ${bearer}` },
- body: { interval: billingInterval() },
- });
- if (response.data?.url) window.location.href = response.data.url;
- else throw new Error("No checkout URL");
- } catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
- finally { setBillingAction(null); }
- };
-
- const openPortal = async () => {
- const bearer = token();
- if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze upravovat predplatne." : "Cannot modify billing in demo mode."); return; }
- setBillingAction("portal");
- setBillingError(null);
- try {
- const response = await (apiClient as any).POST("/v1/billing/portal", { headers: { Authorization: `Bearer ${bearer}` } });
- if (response.data?.url) window.location.href = response.data.url;
- else throw new Error("No portal URL");
- } catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
- finally { setBillingAction(null); }
- };
-
- const refreshBilling = async () => {
- const bearer = token();
- if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze obnovit predplatne." : "Cannot refresh billing in demo mode."); return; }
- setBillingAction("refresh");
- setBillingError(null);
- try {
- const response = await (apiClient as any).POST("/v1/billing/refresh", { headers: { Authorization: `Bearer ${bearer}` } });
- if (response.data) { setBillingNotice(i18n.locale() === "cs" ? "Predplatne obnoveno." : "Billing refreshed."); void refetchBilling(); }
- } catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
- finally { setBillingAction(null); }
- };
-
- createEffect(() => {
- const t = searchParams["tab"];
- const tab = Array.isArray(t) ? t[0] : t;
- const validTabs: Section[] = ["overview", "bookings", "customers", "zones", "billing", "settings", "analytics"];
- if (tab && validTabs.includes(tab as Section) && tab !== activeSection()) {
- setIsPageTransitioning(true);
- setTimeout(() => { setActiveSection(tab as Section); setIsPageTransitioning(false); }, 150);
- }
- });
-
- createEffect(() => {
- const state = Array.isArray(searchParams["billing"]) ? searchParams["billing"][0] : searchParams["billing"];
- if (state && state !== handledBillingState()) {
- setHandledBillingState(state);
- if (state === "success") setBillingNotice(i18n.locale() === "cs" ? "Platba uspesna! Vase predplatne je aktivni." : "Payment successful! Your subscription is active.");
- else if (state === "cancelled") setBillingNotice(i18n.locale() === "cs" ? "Platba byla zrusena." : "Payment was cancelled.");
- }
- });
-
- const navItems = [
- { id: "overview" as Section, label: i18n.t("dashboard.overview"), icon: LayoutDashboardIcon },
- { id: "bookings" as Section, label: i18n.t("dashboard.bookings"), icon: CalendarDaysIcon },
- { id: "customers" as Section, label: i18n.t("dashboard.customers"), icon: UserCircleIcon },
- { id: "zones" as Section, label: i18n.t("dashboard.zones"), icon: MapPinIcon },
- { id: "billing" as Section, label: i18n.t("dashboard.billing"), icon: CreditCardIcon },
- { id: "analytics" as Section, label: i18n.locale() === "cs" ? "Analytika" : "Analytics", icon: BarChart3Icon },
- { id: "settings" as Section, label: i18n.t("dashboard.settings"), icon: Settings2Icon },
- ];
-
- const LanguageToggle = () => (
-
- );
-
- const ThemeToggle = () => (
-
- );
-
- const DemoBanner = () => (
-
-
- );
-
- const Sidebar = () => (
-
- );
-
- const MobileMenu = () => (
-
-
{p.item.icon}
-
{p.item.name}
-{p.item.subtitle}
+{p.item.name}
+{p.item.subtitle}
-
- );
-}
-
-// ============================================
-// ACTIVITY TIMELINE
-// ============================================
-function ActivityTimeline(props: { activities: any[] }) {
- const i18n = useI18n();
- const getIcon = (type: string) => {
- const base = "w-8 h-8 rounded-full flex items-center justify-center shrink-0";
- switch (type) {
- case "booking": return
-
-
-
- {props.kpi.label}
-{props.kpi.value}
-
- {trend() === "up" ?
-
- {[30, 55, 40, 70, 50, 65, 85, 60, 75, 90].map((h, i) => (
-
- ))}
-
-
- 0} fallback={
-
-
- );
-}
-
-export function DashboardRoute() {
- const i18n = useI18n();
- const auth = useAuth();
- const theme = useTheme();
- const isDark = () => theme.resolvedTheme() === "dark";
- const [searchParams, setSearchParams] = useSearchParams();
- const initialTab = () => {
- const t = searchParams["tab"];
- const tab = Array.isArray(t) ? t[0] : t;
- const validTabs: Section[] = ["overview", "bookings", "customers", "zones", "billing", "settings", "analytics"];
- return validTabs.includes(tab as Section) ? (tab as Section) : "overview";
- };
- const [activeSection, setActiveSection] = createSignal{i18n.t("dashboard.recentActivity")}
-
-
- }>
- {i18n.t("dashboard.recentActivity.empty")}
-
- {props.activities.map((activity, index) => (
-
-
- {index < props.activities.length - 1 && (
-
- )}
-
- ))}
-
- {getIcon(activity.type)}
-
-
-
-
-
-
-
- {activity.time}
- {activity.action}
-{activity.detail}
-
-
-
-
-
-
-
- {i18n.t("dashboard.demoBanner")}
-{i18n.t("dashboard.demoBannerDesc")}
-
- (null);
-
- const openBookingDetail = (booking: any) => {
- setSelectedBooking(booking);
- setShowBookingDetail(true);
- };
-
- const BookingDetailModal = () => (
-
-
setIsMobileMenuOpen(false)} />
-
-
- );
-
- const [showBookingDetail, setShowBookingDetail] = createSignal(false);
- const [selectedBooking, setSelectedBooking] = createSignal
-
-
-
-
-
- 
- 
-
-
-
-
-
-
-
-
-
-
- = {
- confirmed: i18n.t("dashboard.confirmed"), pending: i18n.t("dashboard.pending"),
- cancelled: i18n.t("dashboard.cancelled"), completed: i18n.t("dashboard.completed")
- };
-
- return (
-
setShowBookingDetail(false)} />
-
-
- );
-
-
- // ==========================================
- const OverviewPage = () => (
-
-
-
-
- {i18n.t("dashboard.bookingDetails")}
- -
-
-
-
-
-
-
- {getInitials(selectedBooking()?.customerName)}
-
-
-
- {selectedBooking()?.customerName}
-{selectedBooking()?.customerEmail}
-
-
-
-
- {i18n.t("dashboard.bookingModal.service")}
-{selectedBooking()?.service}
-
-
- {i18n.t("dashboard.bookingModal.location")}
-{selectedBooking()?.location || "—"}
-
- {i18n.t("dashboard.bookingModal.noAssign")}}>
-
-
- {i18n.t("dashboard.bookingModal.assignedTo")}
-
-
-
- {selectedBooking()?.staffName?.split(" ").map((n: string) => n[0]).join("")}
-
- {selectedBooking()?.staffName}
-
-
- {i18n.t("dashboard.bookingModal.dateTime")}
-- {new Date(selectedBooking()?.startsAt).toLocaleString(undefined, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" })} -
-{i18n.t("dashboard.bookingModal.duration")}: {getBookingDuration(selectedBooking()?.startsAt, selectedBooking()?.endsAt)}
-
-
-
-
-
- {i18n.t(`dashboard.${selectedBooking()?.status}`)}
-
- {i18n.t("dashboard.bookingModal.reference")}
-{selectedBooking()?.reference}
-
-
- {i18n.t("dashboard.bookingModal.notes")}
-{selectedBooking()?.notes}
-
- {/* Header */}
-
- );
-
- // ==========================================
- // BOOKINGS PAGE
- // ==========================================
- const BookingsPage = () => {
- const [filterStatus, setFilterStatus] = createSignal<"all" | "confirmed" | "pending" | "cancelled" | "completed">("all");
- const [filterDateRange, setFilterDateRange] = createSignal<"all" | "today" | "week" | "month">("all");
- const [searchQuery, setSearchQuery] = createSignal("");
- const [showNewBooking, setShowNewBooking] = createSignal(false);
- const [creatingBooking, setCreatingBooking] = createSignal(false);
-
- const [newBookingCustomer, setNewBookingCustomer] = createSignal("");
- const [newBookingEmail, setNewBookingEmail] = createSignal("");
- const [newBookingService, setNewBookingService] = createSignal("");
- const [newBookingDate, setNewBookingDate] = createSignal("");
- const [newBookingTime, setNewBookingTime] = createSignal("");
- const [newBookingNotes, setNewBookingNotes] = createSignal("");
-
- const resolvedAllBookings = () => (summary.latest as any)?.allBookings ?? (isDemoMode() ? demoData().summary.allBookings : []) ?? [];
-
- const filteredBookings = createMemo(() => {
- let bookings = resolvedAllBookings();
- if (filterStatus() !== "all") bookings = bookings.filter((b: any) => b.status === filterStatus());
- const now = new Date();
- if (filterDateRange() === "today") bookings = bookings.filter((b: any) => new Date(b.startsAt).toDateString() === now.toDateString());
- else if (filterDateRange() === "week") {
- const weekEnd = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
- bookings = bookings.filter((b: any) => { const d = new Date(b.startsAt); return d >= now && d <= weekEnd; });
- } else if (filterDateRange() === "month") {
- const monthEnd = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
- bookings = bookings.filter((b: any) => { const d = new Date(b.startsAt); return d >= now && d <= monthEnd; });
- }
- if (searchQuery().trim()) {
- const q = searchQuery().toLowerCase();
- bookings = bookings.filter((b: any) =>
- b.customerName?.toLowerCase().includes(q) ||
- b.service?.toLowerCase().includes(q) ||
- b.reference?.toLowerCase().includes(q)
- );
- }
- return bookings.sort((a: any, b: any) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
- });
-
- const bookingStats = createMemo(() => {
- const bookings = resolvedAllBookings();
- return {
- total: bookings.length,
- confirmed: bookings.filter((b: any) => b.status === "confirmed").length,
- pending: bookings.filter((b: any) => b.status === "pending").length,
- cancelled: bookings.filter((b: any) => b.status === "cancelled").length,
- completed: bookings.filter((b: any) => b.status === "completed").length,
- };
- });
-
- const handleCreateBooking = async () => {
- const bearer = token();
- if (!bearer || bearer.startsWith("demo.")) {
- setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze vytvaret rezervace." : "Cannot create bookings in demo mode.");
- setShowNewBooking(false); return;
- }
- setCreatingBooking(true);
- try {
- await (apiClient as any).POST("/v1/catalog/bookings", {
- headers: { Authorization: `Bearer ${bearer}` },
- body: {
- customerName: newBookingCustomer(), customerEmail: newBookingEmail(), service: newBookingService(),
- startsAt: new Date(`${newBookingDate()}T${newBookingTime()}`).toISOString(), notes: newBookingNotes()
- }
- });
- setNewBookingCustomer(""); setNewBookingEmail(""); setNewBookingService(""); setNewBookingDate(""); setNewBookingTime(""); setNewBookingNotes("");
- setShowNewBooking(false);
- } catch { setDemoNotice(i18n.locale() === "cs" ? "Vytvoreni rezervace selhalo." : "Failed to create booking."); }
- finally { setCreatingBooking(false); }
- };
-
- const statusLabels: Record
-
-
- {/* KPI Cards */}
-
-
- - {i18n.t("dashboard.welcome")} {auth.session()?.user?.name} -
-{i18n.t("dashboard.overviewFor")} {resolvedBootstrap()?.tenantName}
-
-
-
-
-
- {normalizedKpis().map((kpi: any, index: number) => (
-
-
- {/* SMS Usage */}
- {(() => {
- const usage = smsUsage.latest;
- if (!usage || usage.messageCount === 0) return null;
- return (
-
-
- );
- })()}
-
- {/* Plan Limit Warning */}
- {(() => {
- const entitlements = resolvedBilling()?.entitlements;
- const limit = entitlements?.maxLocations ?? -1;
- const count = locationData() ?? 0;
- const isNear = limit > 0 && count >= limit * 0.8;
- const isAt = limit > 0 && count >= limit;
- if (!isNear && !isAt) return null;
- return (
-
-
-
-
-
-
-
-
-
- SMS {i18n.t("dashboard.billing.planUsage")}
-{usage.messageCount} messages — {(usage.totalCostCents / 100).toFixed(2)} Kc
-
-
- );
- })()}
-
- {/* Revenue Chart + Calendar + Activity */}
-
-
-
-
-
-
-
- {isAt ? i18n.t("dashboard.locationLimitReached") : i18n.t("dashboard.nearingLocationLimit")}
-{i18n.t("dashboard.locationsUsed")} {count}/{limit === -1 ? "∞" : limit}
-
-
-
- {/* Upcoming Bookings */}
-
-
-
-
-
-
-
-
-
-
-
- {i18n.t("dashboard.upcomingBookings")}
-{normalizedUpcomingBookings().length} total
-
- {normalizedUpcomingBookings().slice(0, 5).map((booking: any) => (
-
- ))}
-
-
-
-
-
-
- {/* Stats */}
-
-
-
- {i18n.t("dashboard.bookingManagement")}
-{bookingStats().total} {i18n.t("dashboard.totalBookings")}
-
- {[
- { key: "confirmed", label: i18n.t("dashboard.confirmed"), value: bookingStats().confirmed },
- { key: "pending", label: i18n.t("dashboard.pending"), value: bookingStats().pending },
- { key: "cancelled", label: i18n.t("dashboard.cancelled"), value: bookingStats().cancelled },
- { key: "completed", label: i18n.t("dashboard.completed"), value: bookingStats().completed },
- ].map((s) => (
-
- ))}
-
-
- {/* Filters */}
-
-
-
- {/* Bookings List */}
-
- setSearchQuery(e.currentTarget.value)} />
-
-
-
-
- 0} fallback={
-
-
-
- {/* New Booking Modal */}
-
-
- }>
-
-
- {i18n.t("dashboard.empty.title")}
-{i18n.t("dashboard.empty.bookingsDesc")}
-
- {filteredBookings().map((booking: any) => (
-
-
-
- ))}
-
- {getInitials(booking.customerName)}
-
-
-
- {booking.customerName}
-{booking.service} • {new Date(booking.startsAt).toLocaleDateString()} {new Date(booking.startsAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
-
-
- {statusLabels[booking.status]}
-
-
-
-
-
setShowNewBooking(false)} />
-
-
-
- {i18n.t("dashboard.newBooking")}
- -
- setNewBookingCustomer(e.currentTarget.value)} />
- setNewBookingEmail(e.currentTarget.value)} />
- setNewBookingService(e.currentTarget.value)} />
-
- setNewBookingDate(e.currentTarget.value)} />
- setNewBookingTime(e.currentTarget.value)} />
-
-