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.
2026-10-29 07:54:44 +00:00 · 2026-05-18 14:31:20 +02:00
1 parent 9d63fa7620
commit da5ba13eab
@@ -0,0 +1,140 @@
+import { Show, createSignal } from "solid-js";
+import { apiClient } from "../../lib/api-client";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import { PaletteIcon, MailIcon, CheckCircleIcon, BellIcon, XCircleIcon, CalendarDaysIcon } from "../../components/dashboard/icons";
+import { SMSSettings } from "../../components/sms-settings";
+import { WidgetBuilder } from "../../components/widget-builder";
+import { DashboardLayout, useDashboardData } from "./layout";
+
+function SettingsPage() {
+  const data = useDashboardData();
+  const [brandColor, setBrandColor] = createSignal(data.resolvedBootstrap()?.brand?.primaryColor ?? "#c25e3a");
+  const [brandSaving, setBrandSaving] = createSignal(false);
+  const [activeEmailType, setActiveEmailType] = createSignal("confirmation");
+  const [emailSubject, setEmailSubject] = createSignal("");
+  const [emailBody, setEmailBody] = createSignal("");
+  const [emailSaving, setEmailSaving] = createSignal(false);
+
+  const presetColors = [
+    { name: data.i18n.locale() === "cs" ? "Hnědá" : "Terracotta", color: "#c25e3a" },
+    { name: data.i18n.locale() === "cs" ? "Zelená" : "Sage", color: "#5a7c5a" },
+    { name: data.i18n.locale() === "cs" ? "Modrá" : "Ocean", color: "#3a6a8a" },
+    { name: data.i18n.locale() === "cs" ? "Fialová" : "Plum", color: "#6a4a7a" },
+  ];
+
+  const handleSaveBrand = async () => {
+    const bearer = data.token();
+    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.locale() === "cs" ? "V demo režimu nelze ukládat." : "Cannot save in demo mode."); return; }
+    setBrandSaving(true);
+    try {
+      await (apiClient as any).PUT("/v1/tenants/brand", { headers: { Authorization: `Bearer ${bearer}` }, body: { primaryColor: brandColor() } });
+    } catch { /* ignore */ }
+    finally { setBrandSaving(false); }
+  };
+
+  return (
+    <div class="space-y-6">
+      <div>
+        <h1 class="text-2xl sm:text-3xl font-bold text-ink font-display">{data.i18n.t("dashboard.settings")}</h1>
+        <p class="text-ink-muted mt-1">{data.i18n.locale() === "cs" ? "Spravujte svůj podnik, branding a předvolby." : "Manage your business, branding and preferences."}</p>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="surface-card p-6">
+          <div class="flex items-center gap-3 mb-5">
+            <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-accent"><PaletteIcon /></div>
+            <h3 class="text-lg font-semibold text-ink">{data.i18n.t("dashboard.settings.branding")}</h3>
+          </div>
+          <div class="mb-6">
+            <label class="block text-sm font-medium text-ink-muted mb-3">{data.i18n.t("dashboard.settings.branding")}</label>
+            <div class="grid grid-cols-4 gap-2 mb-3">
+              {presetColors.map((preset) => (
+                <button onClick={() => setBrandColor(preset.color)} class={`p-2 rounded-lg border-2 transition-all ${brandColor() === preset.color ? "border-ink" : "border-transparent hover:border-ink/20"}`}>
+                  <div class="w-full h-8 rounded-md shadow-sm" style={{ background: preset.color }} />
+                  <p class="text-xs text-ink-muted mt-1">{preset.name}</p>
+                </button>
+              ))}
+            </div>
+            <div class="flex items-center gap-3">
+              <input type="color" value={brandColor()} onInput={(e) => setBrandColor(e.currentTarget.value)} class="w-12 h-10 rounded-lg border border-border cursor-pointer" />
+              <input type="text" value={brandColor()} onInput={(e) => setBrandColor(e.currentTarget.value)} class="flex-1 px-4 py-2.5 bg-canvas-subtle border border-border rounded-xl text-ink text-sm font-mono uppercase" />
+            </div>
+          </div>
+          <div class="p-4 bg-canvas-subtle rounded-xl">
+            <p class="text-sm text-ink-muted mb-3">{data.i18n.t("dashboard.preview")}</p>
+            <div class="p-4 rounded-xl border border-border" style={{ "border-left": `4px solid ${brandColor()}` }}>
+              <div class="flex items-center gap-3 mb-3">
+                <div class="w-10 h-10 rounded-full flex items-center justify-center text-canvas font-bold" style={{ background: brandColor() }}>B</div>
+                <div>
+                  <p class="font-semibold text-ink">Bookra</p>
+                  <p class="text-xs text-ink-muted">{data.i18n.locale() === "cs" ? "Rezervujte si termin" : "Book an appointment"}</p>
+                </div>
+              </div>
+              <button class="w-full py-2.5 rounded-lg text-canvas font-medium text-sm" style={{ background: brandColor() }}>{data.i18n.locale() === "cs" ? "Rezervovat" : "Book Now"}</button>
+            </div>
+          </div>
+          <button onClick={handleSaveBrand} disabled={brandSaving()} class="mt-4 w-full py-2.5 bg-accent text-canvas rounded-xl hover:bg-accent-hover transition-colors font-medium disabled:opacity-60 flex items-center justify-center gap-2">
+            <Show when={brandSaving()}><span class="inline-block w-4 h-4 border-2 border-canvas/30 border-t-canvas rounded-full animate-spin" /></Show>
+            {brandSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.settings.save")}
+          </button>
+        </div>
+
+        <div class="surface-card p-6">
+          <div class="flex items-center gap-3 mb-5">
+            <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-accent"><MailIcon /></div>
+            <div>
+              <h3 class="text-lg font-semibold text-ink">{data.i18n.t("dashboard.settings.emailNotifications")}</h3>
+              <p class="text-sm text-ink-muted">{data.i18n.locale() === "cs" ? "Upravte e-maily posílané zákazníkům." : "Customize emails sent to customers."}</p>
+            </div>
+          </div>
+          <div class="flex gap-2 mb-4 overflow-x-auto pb-2">
+            {[
+              { key: "confirmation", label: data.i18n.t("dashboard.confirmed"), icon: CheckCircleIcon },
+              { key: "reminder", label: data.i18n.t("dashboard.notifications"), icon: BellIcon },
+              { key: "cancellation", label: data.i18n.t("dashboard.cancelled"), icon: XCircleIcon },
+              { key: "reschedule", label: data.i18n.t("dashboard.edit"), icon: CalendarDaysIcon },
+            ].map((type) => (
+              <button onClick={() => setActiveEmailType(type.key)} class={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${activeEmailType() === type.key ? "bg-accent text-canvas" : "bg-canvas-subtle text-ink-muted hover:text-ink"}`}>
+                <type.icon /> {type.label}
+              </button>
+            ))}
+          </div>
+          <div class="space-y-4">
+            <Input type="text" label={data.i18n.t("dashboard.settings.emailSubject")} value={emailSubject()} onInput={(e) => setEmailSubject(e.currentTarget.value)} placeholder={activeEmailType() === "confirmation" ? (data.i18n.locale() === "cs" ? "Potvrzení rezervace" : "Booking Confirmation") : ""} />
+            <Textarea label={data.i18n.t("dashboard.settings.emailBody")} value={emailBody()} onInput={(e) => setEmailBody(e.currentTarget.value)} rows={6} resize="none" placeholder={data.i18n.locale() === "cs" ? "Obsah e-mailu..." : "Email body..."} />
+          </div>
+          <button onClick={async () => {
+            const bearer = data.token();
+            if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.locale() === "cs" ? "V demo režimu nelze ukládat." : "Cannot save in demo mode."); return; }
+            setEmailSaving(true);
+            try {
+              await (apiClient as any).PUT("/v1/tenants/email-template", { headers: { Authorization: `Bearer ${bearer}` }, body: { type: activeEmailType(), subject: emailSubject(), body: emailBody() } });
+              data.setDemoNotice(data.i18n.locale() === "cs" ? "Šablona uložena." : "Template saved.");
+            } catch { data.setDemoNotice(data.i18n.locale() === "cs" ? "Chyba při ukládání." : "Save failed."); }
+            finally { setEmailSaving(false); }
+          }} disabled={emailSaving()} class="mt-4 w-full py-2.5 bg-accent text-canvas rounded-xl hover:bg-accent-hover transition-colors font-medium disabled:opacity-60 flex items-center justify-center gap-2">
+            <Show when={emailSaving()}><span class="inline-block w-4 h-4 border-2 border-canvas/30 border-t-canvas rounded-full animate-spin" /></Show>
+            {emailSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.settings.save")}
+          </button>
+        </div>
+      </div>
+
+      <SMSSettings token={data.token} />
+      <WidgetBuilder config={{
+        tenantSlug: data.resolvedSummary()?.tenantSlug || "demo-studio",
+        publicBookingUrl: data.resolvedSummary()?.publicBookingUrl || "https://bookra.eu/book/demo-studio",
+        tenantName: data.resolvedSummary()?.tenantName || "Demo Studio",
+        primaryColor: data.resolvedBootstrap()?.brand?.primaryColor,
+      }} />
+    </div>
+  );
+}
+
+export default function SettingsRoute() {
+  return (
+    <DashboardLayout>
+      <SettingsPage />
+    </DashboardLayout>
+  );
+}