mirror of
https://github.com/Dvorinka/Bookra.git
synced 2026-10-28 15:51:15 +00:00
feat(ui): implement comprehensive dashboard and enhance frontend experience
This commit introduces a major overhaul of the user interface, transitioning from a basic structure to a feature-rich dashboard system. Key improvements include:
- **Dashboard Implementation**: Added a complete dashboard routing system with dedicated pages for Overview, Bookings, Customers, Zones, Billing, and Settings.
- **New UI Components**: Introduced a variety of high-quality components including `AnimatedList`, `FloatingDock`, `HoverFeatureCards`, `VideoPlayer` (with ambient glow effect), `PinnedList`, and `DashboardMockup`.
- **Enhanced Dashboard Features**:
- Integrated real-time KPI cards and activity timelines.
- Implemented a multi-view calendar system.
- Added customer and booking management interfaces with filtering and search capabilities.
- Added a zone/location management view with map integration.
- **Branding & Visuals**: Updated the application with new SVG logos (horizontal and vertical variants) and implemented dark/light mode optimized branding.
- **Internationalization**: Expanded i18n support with comprehensive Czech and English translations for the new dashboard and integration modules.
- **Integration Tools**: Added a new `IntegrationModal` allowing users to easily embed Bookra widgets via HTML, React, SolidJS, or PHP.
- **Backend Support**: Updated the booking service to provide comprehensive dashboard summary data, including historical booking records for charts.
This commit is contained in:
Tomas Dvorak committed
1 parent
9d63fa7620
commit
da5ba13eab
41 files changed
+8761
-184
No files matched your search
@@ -0,0 +1,293 @@
|
||||
import { createResource, createMemo, createSignal, useContext, createContext } from "solid-js";
|
||||
import { apiClient } from "../../lib/api-client";
|
||||
import { useAuth } from "../../providers/auth-provider";
|
||||
import { useI18n } from "../../providers/i18n-provider";
|
||||
import { getInitials, getBookingDuration } from "../../components/dashboard/types";
|
||||
|
||||
export type Section = "overview" | "bookings" | "customers" | "zones" | "billing" | "settings";
|
||||
|
||||
function createDemoData(i18n: ReturnType<typeof useI18n>) {
|
||||
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
|
||||
? ["Masáž", "Kosmetika", "Fyzioterapie", "Manikúra"]
|
||||
: ["Massage", "Cosmetics", "Physiotherapy", "Manicure"];
|
||||
const customers = [
|
||||
{ name: cs ? "Martina Novakova" : "Martina Novakova", email: "[email protected]" },
|
||||
{ name: cs ? "David Svoboda" : "David Svoboda", email: "[email protected]" },
|
||||
{ name: cs ? "Jana KovarovA" : "Jana KovarovA", email: "[email protected]" },
|
||||
{ name: cs ? "Alice Johnson" : "Alice Johnson", email: "[email protected]" },
|
||||
{ name: cs ? "Bob Smith" : "Bob Smith", email: "[email protected]" },
|
||||
];
|
||||
|
||||
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 ? "Hlavní 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 ? "Hlavní 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 ? "Hlavní 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 ? "Hlavní 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 ? "Hlavní 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 ? "Hlavní 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: "[email protected]" }],
|
||||
upcomingBookings: allBookings.filter(b => b.status !== "cancelled" && b.status !== "completed"),
|
||||
allBookings,
|
||||
recentActivity: [
|
||||
{ action: cs ? "Nová rezervace" : "New booking", detail: `${customers[0].name} - ${services[0]}`, time: cs ? "Dnes, 10:00" : "Today, 10:00", type: "booking" },
|
||||
{ action: cs ? "Zrušení rezervace" : "Booking cancelled", detail: `${customers[3].name} - ${services[3]}`, time: cs ? "Včera" : "Yesterday", type: "cancel" },
|
||||
{ action: cs ? "Dokončená rezervace" : "Booking completed", detail: `${customers[4].name} - ${services[1]}`, time: cs ? "Před 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",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export interface DashboardData {
|
||||
i18n: ReturnType<typeof useI18n>;
|
||||
auth: ReturnType<typeof useAuth>;
|
||||
token: () => string | null | undefined;
|
||||
isDemoMode: () => boolean;
|
||||
resolvedSummary: () => any;
|
||||
resolvedBootstrap: () => any;
|
||||
resolvedBilling: () => any;
|
||||
normalizedKpis: () => any[];
|
||||
normalizedUpcomingBookings: () => any[];
|
||||
normalizedRecentActivity: () => any[];
|
||||
normalizedAllBookings: () => any[];
|
||||
isDashboardReady: () => boolean;
|
||||
locationData: () => number;
|
||||
smsUsage: () => any;
|
||||
demoNotice: () => string | null;
|
||||
setDemoNotice: (v: string | null) => void;
|
||||
billingNotice: () => string | null;
|
||||
setBillingNotice: (v: string | null) => void;
|
||||
billingError: () => string | null;
|
||||
setBillingError: (v: string | null) => void;
|
||||
billingAction: () => "checkout" | "refresh" | "portal" | null;
|
||||
setBillingAction: (v: "checkout" | "refresh" | "portal" | null) => void;
|
||||
billingInterval: () => "monthly" | "yearly";
|
||||
setBillingInterval: (v: "monthly" | "yearly") => void;
|
||||
openCheckout: () => Promise<void>;
|
||||
openPortal: () => Promise<void>;
|
||||
refreshBilling: () => Promise<void>;
|
||||
showIntegrationModal: () => boolean;
|
||||
setShowIntegrationModal: (v: boolean) => void;
|
||||
showBookingDetail: () => boolean;
|
||||
setShowBookingDetail: (v: boolean) => void;
|
||||
selectedBooking: () => any;
|
||||
setSelectedBooking: (v: any) => void;
|
||||
openBookingDetail: (booking: any) => void;
|
||||
}
|
||||
|
||||
const DashboardContext = createContext<DashboardData>();
|
||||
|
||||
export function useDashboardData() {
|
||||
const ctx = useContext(DashboardContext);
|
||||
if (!ctx) throw new Error("useDashboardData must be used within DashboardContext provider");
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export function DashboardDataProvider(props: { children: any }) {
|
||||
const i18n = useI18n();
|
||||
const auth = useAuth();
|
||||
const [billingInterval, setBillingInterval] = createSignal<"monthly" | "yearly">("monthly");
|
||||
const [billingNotice, setBillingNotice] = createSignal<string | null>(null);
|
||||
const [billingError, setBillingError] = createSignal<string | null>(null);
|
||||
const [billingAction, setBillingAction] = createSignal<"checkout" | "refresh" | "portal" | null>(null);
|
||||
const [showIntegrationModal, setShowIntegrationModal] = createSignal(false);
|
||||
const [demoNotice, setDemoNotice] = createSignal<string | null>(null);
|
||||
const [showBookingDetail, setShowBookingDetail] = createSignal(false);
|
||||
const [selectedBooking, setSelectedBooking] = createSignal<any>(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" ? "Nadcházející rezervace" : "Upcoming booking",
|
||||
detail: `${booking.customerName} \u2022 ${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 openCheckout = async () => {
|
||||
const bearer = token();
|
||||
if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo režimu nelze upravovat předplatné." : "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 režimu nelze upravovat předplatné." : "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 režimu nelze obnovit předplatné." : "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" ? "Předplatné obnoveno." : "Billing refreshed."); void refetchBilling(); }
|
||||
} catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
|
||||
finally { setBillingAction(null); }
|
||||
};
|
||||
|
||||
const openBookingDetail = (booking: any) => {
|
||||
setSelectedBooking(booking);
|
||||
setShowBookingDetail(true);
|
||||
};
|
||||
|
||||
const value: DashboardData = {
|
||||
i18n,
|
||||
auth,
|
||||
token: () => token(),
|
||||
isDemoMode,
|
||||
resolvedSummary,
|
||||
resolvedBootstrap,
|
||||
resolvedBilling,
|
||||
normalizedKpis,
|
||||
normalizedUpcomingBookings,
|
||||
normalizedRecentActivity,
|
||||
normalizedAllBookings,
|
||||
isDashboardReady,
|
||||
locationData: () => locationData() ?? 0,
|
||||
smsUsage: () => smsUsage.latest,
|
||||
demoNotice,
|
||||
setDemoNotice,
|
||||
billingNotice,
|
||||
setBillingNotice,
|
||||
billingError,
|
||||
setBillingError,
|
||||
billingAction,
|
||||
setBillingAction,
|
||||
billingInterval,
|
||||
setBillingInterval,
|
||||
openCheckout,
|
||||
openPortal,
|
||||
refreshBilling,
|
||||
showIntegrationModal,
|
||||
setShowIntegrationModal,
|
||||
showBookingDetail,
|
||||
setShowBookingDetail,
|
||||
selectedBooking,
|
||||
setSelectedBooking,
|
||||
openBookingDetail,
|
||||
};
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
export { DashboardContext };
|
||||
Reference in new issue
Block a user