mirror of
https://github.com/Dvorinka/Bookra.git
synced 2026-06-04 04:22:59 +00:00
Tomas Dvorak
2964 lines
153 KiB
TypeScript
2964 lines
153 KiB
TypeScript
import {
|
|
Show,
|
|
createResource,
|
|
createSignal,
|
|
createMemo,
|
|
createEffect
|
|
} from "solid-js";
|
|
import { A, useSearchParams } from "@solidjs/router";
|
|
import { apiClient } from "../lib/api-client";
|
|
import { getPaddle, paddleConfigured } from "../lib/paddle";
|
|
import { useAuth } from "../providers/auth-provider";
|
|
import { useI18n } from "../providers/i18n-provider";
|
|
import { useTheme } from "../providers/theme-provider";
|
|
import type { JSX } from "solid-js";
|
|
import { BookraCharacter } from "../components/bookra-character";
|
|
import { WidgetBuilder } from "../components/widget-builder";
|
|
import { IntegrationModal } from "../components/integration-modal";
|
|
import { Select } from "../components/ui/select";
|
|
import { Input } from "../components/ui/input";
|
|
import { Textarea } from "../components/ui/textarea";
|
|
|
|
// ============================================
|
|
// TYPES & INTERFACES
|
|
// ============================================
|
|
type Section = "overview" | "bookings" | "customers" | "zones" | "billing" | "settings";
|
|
type BookingStatus = "confirmed" | "pending" | "cancelled";
|
|
|
|
interface KpiData {
|
|
label: string;
|
|
value: number | string;
|
|
change?: string;
|
|
trend?: "up" | "down" | "neutral";
|
|
icon: () => JSX.Element;
|
|
}
|
|
|
|
// ============================================
|
|
// SOPHISTICATED ICONS
|
|
// ============================================
|
|
const LayoutDashboardIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect width="7" height="9" x="3" y="3" rx="1" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
<rect width="7" height="5" x="14" y="3" rx="1" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
<rect width="7" height="9" x="14" y="12" rx="1" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
<rect width="7" height="5" x="3" y="16" rx="1" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
</svg>
|
|
);
|
|
|
|
const CalendarDaysIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M8 2v4"/><path d="M16 2v4"/>
|
|
<rect width="18" height="18" x="3" y="4" rx="2" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
<path d="M3 10h18"/>
|
|
<path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/>
|
|
<path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/>
|
|
</svg>
|
|
);
|
|
|
|
const CreditCardIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect width="20" height="14" x="2" y="5" rx="2" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
<line x1="2" x2="22" y1="10" y2="10"/>
|
|
</svg>
|
|
);
|
|
|
|
const Settings2Icon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 7h-9"/><path d="M14 17H5"/>
|
|
<circle cx="17" cy="17" r="3" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
<circle cx="7" cy="7" r="3" class="transition-all duration-300 group-hover:fill-orange-50"/>
|
|
</svg>
|
|
);
|
|
|
|
const LogOutIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
<polyline points="16 17 21 12 16 7"/>
|
|
<line x1="21" x2="9" y1="12" y2="12"/>
|
|
</svg>
|
|
);
|
|
|
|
const MenuIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>
|
|
</svg>
|
|
);
|
|
|
|
const XIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
|
|
</svg>
|
|
);
|
|
|
|
const TrendingUpIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
|
|
<polyline points="16 7 22 7 22 13"/>
|
|
</svg>
|
|
);
|
|
|
|
const TrendingDownIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/>
|
|
<polyline points="16 17 22 17 22 11"/>
|
|
</svg>
|
|
);
|
|
|
|
const ClockIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
);
|
|
|
|
const CheckCircleIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
|
|
</svg>
|
|
);
|
|
|
|
const AlertCircleIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>
|
|
</svg>
|
|
);
|
|
|
|
const MoreHorizontalIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
|
</svg>
|
|
);
|
|
|
|
const ChevronLeftIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m15 18-6-6 6-6"/>
|
|
</svg>
|
|
);
|
|
|
|
const ChevronRightIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m9 18 6-6-6-6"/>
|
|
</svg>
|
|
);
|
|
|
|
const SparklesIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
|
|
</svg>
|
|
);
|
|
|
|
const BellIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
|
|
</svg>
|
|
);
|
|
|
|
const PlusIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M5 12h14"/><path d="M12 5v14"/>
|
|
</svg>
|
|
);
|
|
|
|
const UsersIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
);
|
|
|
|
const UserCircleIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<circle cx="12" cy="10" r="3"/>
|
|
<path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>
|
|
</svg>
|
|
);
|
|
|
|
const MapPinIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
|
|
<circle cx="12" cy="10" r="3"/>
|
|
</svg>
|
|
);
|
|
|
|
const BanIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="m4.9 4.9 14.2 14.2"/>
|
|
</svg>
|
|
);
|
|
|
|
const ClockOffIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 7v5l3 3"/>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="m2 2 20 20"/>
|
|
</svg>
|
|
);
|
|
|
|
const SunIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>
|
|
</svg>
|
|
);
|
|
|
|
const MoonIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
|
|
</svg>
|
|
);
|
|
|
|
const PaletteIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="13.5" cy="6.5" r=".5"/>
|
|
<circle cx="17.5" cy="10.5" r=".5"/>
|
|
<circle cx="8.5" cy="7.5" r=".5"/>
|
|
<circle cx="6.5" cy="12.5" r=".5"/>
|
|
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.6 1.6 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.01 17.461 2 12 2z"/>
|
|
</svg>
|
|
);
|
|
|
|
const MailIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect width="20" height="16" x="2" y="4" rx="2"/>
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
|
|
</svg>
|
|
);
|
|
|
|
const XCircleIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="m15 9-6 6"/>
|
|
<path d="m9 9 6 6"/>
|
|
</svg>
|
|
);
|
|
|
|
const CalendarIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect width="18" height="18" x="3" y="4" rx="2" ry="2"/>
|
|
<line x1="16" x2="16" y1="2" y2="6"/>
|
|
<line x1="8" x2="8" y1="2" y2="6"/>
|
|
<line x1="3" x2="21" y1="10" y2="10"/>
|
|
</svg>
|
|
);
|
|
|
|
// ============================================
|
|
// DEMO DATA GENERATOR
|
|
// ============================================
|
|
const createDemoData = (i18n: any) => ({
|
|
summary: {
|
|
tenantSlug: "demo-studio",
|
|
tenantName: "Serenity Wellness Studio",
|
|
publicBookingUrl: "http://localhost:3000/book/demo-studio",
|
|
kpis: [
|
|
{ label: i18n.locale() === 'cs' ? 'Celkem rezervací' : 'Total Bookings', value: 42, change: "+12%", trend: "up" },
|
|
{ label: i18n.locale() === 'cs' ? 'Zrušených' : 'Cancelled', value: 3, change: "-5%", trend: "down" },
|
|
{ label: i18n.locale() === 'cs' ? 'Dokončených' : 'Completed', value: 38, change: "+8%", trend: "up" },
|
|
{ label: i18n.locale() === 'cs' ? 'Noví klienti' : 'New Clients', value: 12, change: "+24%", trend: "up" },
|
|
],
|
|
upcomingBookings: [
|
|
{ id: "1", customerName: "Alice Johnson", service: "Yoga Flow Class", status: "confirmed" as BookingStatus, startsAt: new Date(Date.now() + 86400000).toISOString(), reference: "BK-001", avatar: "AJ", duration: "60 min" },
|
|
{ id: "2", customerName: "Bob Smith", service: "Deep Tissue Massage", status: "pending" as BookingStatus, startsAt: new Date(Date.now() + 172800000).toISOString(), reference: "BK-002", avatar: "BS", duration: "90 min" },
|
|
{ id: "3", customerName: "Carol White", service: "Personal Training", status: "confirmed" as BookingStatus, startsAt: new Date(Date.now() + 259200000).toISOString(), reference: "BK-003", avatar: "CW", duration: "45 min" },
|
|
{ id: "4", customerName: "David Brown", service: "Nutrition Consultation", status: "cancelled" as BookingStatus, startsAt: new Date(Date.now() + 345600000).toISOString(), reference: "BK-004", avatar: "DB", duration: "30 min" },
|
|
{ id: "5", customerName: "Emma Wilson", service: "Meditation Session", status: "confirmed" as BookingStatus, startsAt: new Date(Date.now() + 432000000).toISOString(), reference: "BK-005", avatar: "EW", duration: "45 min" },
|
|
],
|
|
recentActivity: [
|
|
{ action: "New booking received", detail: "Alice Johnson • Yoga Flow Class", time: "2 min ago", type: "booking" },
|
|
{ action: "Booking rescheduled", detail: "David Brown moved to Friday 2pm", time: "1 hour ago", type: "reschedule" },
|
|
{ action: "New client registered", detail: "Emma Wilson joined", time: "3 hours ago", type: "client" },
|
|
{ action: "Reminder sent", detail: "Tomorrow's session confirmed", time: "6 hours ago", type: "reminder" },
|
|
{ action: "Booking cancelled", detail: "Carol White • Personal Training", time: "8 hours ago", type: "cancel" },
|
|
],
|
|
allBookings: [
|
|
{ id: "1", customerName: "Alice Johnson", customerEmail: "alice@example.com", service: "Yoga Flow Class", status: "confirmed", startsAt: new Date(Date.now() + 86400000).toISOString(), endsAt: new Date(Date.now() + 86400000 + 3600000).toISOString(), reference: "BK-001", avatar: "AJ", duration: "60 min", location: "Main Studio", createdAt: new Date(Date.now() - 86400000).toISOString() },
|
|
{ id: "2", customerName: "Bob Smith", customerEmail: "bob@example.com", service: "Deep Tissue Massage", status: "pending", startsAt: new Date(Date.now() + 172800000).toISOString(), endsAt: new Date(Date.now() + 172800000 + 5400000).toISOString(), reference: "BK-002", avatar: "BS", duration: "90 min", location: "Treatment Room A", createdAt: new Date(Date.now() - 172800000).toISOString() },
|
|
{ id: "3", customerName: "Carol White", customerEmail: "carol@example.com", service: "Personal Training", status: "confirmed", startsAt: new Date(Date.now() + 259200000).toISOString(), endsAt: new Date(Date.now() + 259200000 + 2700000).toISOString(), reference: "BK-003", avatar: "CW", duration: "45 min", location: "Main Studio", createdAt: new Date(Date.now() - 259200000).toISOString() },
|
|
{ id: "4", customerName: "David Brown", customerEmail: "david@example.com", service: "Nutrition Consultation", status: "cancelled", startsAt: new Date(Date.now() + 345600000).toISOString(), endsAt: new Date(Date.now() + 345600000 + 1800000).toISOString(), reference: "BK-004", avatar: "DB", duration: "30 min", location: "Treatment Room B", createdAt: new Date(Date.now() - 345600000).toISOString() },
|
|
{ id: "5", customerName: "Emma Wilson", customerEmail: "emma@example.com", service: "Meditation Session", status: "confirmed", startsAt: new Date(Date.now() + 432000000).toISOString(), endsAt: new Date(Date.now() + 432000000 + 2700000).toISOString(), reference: "BK-005", avatar: "EW", duration: "45 min", location: "Group Hall", createdAt: new Date(Date.now() - 432000000).toISOString() },
|
|
{ id: "6", customerName: "Frank Miller", customerEmail: "frank@example.com", service: "Yoga Flow Class", status: "completed", startsAt: new Date(Date.now() - 86400000).toISOString(), endsAt: new Date(Date.now() - 86400000 + 3600000).toISOString(), reference: "BK-006", avatar: "FM", duration: "60 min", location: "Main Studio", createdAt: new Date(Date.now() - 172800000).toISOString() },
|
|
],
|
|
},
|
|
bootstrap: {
|
|
tenantId: "demo-tenant-id",
|
|
tenantName: "Serenity Wellness Studio",
|
|
preset: "studio",
|
|
locale: i18n.locale(),
|
|
timezone: "Europe/Prague",
|
|
currentUser: { role: "admin", name: "Demo User", email: "demo@bookra.io" },
|
|
brand: { primaryColor: "#a65c3e", name: "Serenity Wellness Studio" },
|
|
},
|
|
billing: {
|
|
provider: "paddle",
|
|
planCode: "pro",
|
|
status: "active",
|
|
nextBilling: "2024-02-15",
|
|
amount: "$49",
|
|
checkoutUrlAvailable: true,
|
|
syncAvailable: true,
|
|
portalAvailable: true,
|
|
entitlements: { maxLocations: 3, maxStaff: 10, emailReminders: true, customBranding: true, analytics: true },
|
|
},
|
|
});
|
|
|
|
const getInitials = (name?: string) =>
|
|
(name ?? "User")
|
|
.split(" ")
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((part) => part[0]?.toUpperCase() ?? "")
|
|
.join("") || "U";
|
|
|
|
const getBookingDuration = (startsAt?: string, endsAt?: string) => {
|
|
if (!startsAt || !endsAt) return "60 min";
|
|
const start = new Date(startsAt).getTime();
|
|
const end = new Date(endsAt).getTime();
|
|
if (Number.isNaN(start) || Number.isNaN(end) || end <= start) return "60 min";
|
|
return `${Math.round((end - start) / 60000)} min`;
|
|
};
|
|
|
|
// ============================================
|
|
// ANIMATED CALENDAR COMPONENT
|
|
// ============================================
|
|
function CalendarView(props: { bookings: any[]; locale?: string }) {
|
|
const [currentDate, setCurrentDate] = createSignal(new Date());
|
|
const [selectedDay, setSelectedDay] = createSignal<number | null>(null);
|
|
const [isAnimating, setIsAnimating] = createSignal(false);
|
|
const isCs = () => props.locale === 'cs';
|
|
|
|
const weekDays = isCs()
|
|
? ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"]
|
|
: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
|
|
const calendarDays = createMemo(() => {
|
|
const date = currentDate();
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth();
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
const days: Array<{ day: number | null; bookings: any[]; isToday: boolean }> = [];
|
|
|
|
for (let i = 0; i < firstDay; i++) days.push({ day: null, bookings: [], isToday: false });
|
|
|
|
const today = new Date();
|
|
for (let day = 1; day <= daysInMonth; day++) {
|
|
const dayBookings = props.bookings.filter(b => {
|
|
const bookingDate = new Date(b.startsAt);
|
|
return bookingDate.getDate() === day && bookingDate.getMonth() === month;
|
|
});
|
|
const isToday = today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
|
|
days.push({ day, bookings: dayBookings, isToday });
|
|
}
|
|
return days;
|
|
});
|
|
|
|
const changeMonth = (direction: number) => {
|
|
setIsAnimating(true);
|
|
setTimeout(() => {
|
|
setCurrentDate(new Date(currentDate().getFullYear(), currentDate().getMonth() + direction, 1));
|
|
setIsAnimating(false);
|
|
}, 150);
|
|
};
|
|
|
|
const prevMonth = () => changeMonth(-1);
|
|
const nextMonth = () => changeMonth(1);
|
|
|
|
return (
|
|
<div class="surface-card p-6 shadow-sm hover:shadow-lg transition-all duration-500">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-ink">
|
|
{new Intl.DateTimeFormat(isCs() ? 'cs-CZ' : 'en-US', { month: 'long', year: 'numeric' }).format(currentDate())}
|
|
</h3>
|
|
<p class="text-sm text-ink-muted mt-0.5">{props.bookings.length} {isCs() ? 'rezervací tento měsíc' : 'bookings this month'}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button onClick={prevMonth} class="p-2 hover:bg-canvas-subtle rounded-xl transition-all duration-200 hover:scale-105 active:scale-95">
|
|
<ChevronLeftIcon />
|
|
</button>
|
|
<button onClick={nextMonth} class="p-2 hover:bg-canvas-subtle rounded-xl transition-all duration-200 hover:scale-105 active:scale-95">
|
|
<ChevronRightIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 gap-1 mb-3">
|
|
{weekDays.map(day => (
|
|
<div class="text-center text-xs font-semibold text-ink-subtle uppercase tracking-wider py-2">{day}</div>
|
|
))}
|
|
</div>
|
|
|
|
<div class={`grid grid-cols-7 gap-1 transition-opacity duration-200 ${isAnimating() ? 'opacity-0' : 'opacity-100'}`}>
|
|
{calendarDays().map(({ day, bookings, isToday }, index) => (
|
|
<div
|
|
class={`
|
|
aspect-square p-1.5 rounded-xl border-2 transition-all duration-300 cursor-pointer relative overflow-hidden
|
|
${day ? 'bg-canvas border-border hover:border-accent hover:shadow-md hover:-translate-y-0.5' : 'bg-transparent border-transparent'}
|
|
${isToday ? 'bg-accent-subtle border-accent shadow-sm' : ''}
|
|
${selectedDay() === day ? 'ring-2 ring-accent ring-offset-2 ring-offset-canvas' : ''}
|
|
${bookings.length > 0 && !isToday ? 'bg-gradient-to-br from-accent-subtle/50 to-canvas' : ''}
|
|
`}
|
|
style={{ "animation-delay": `${index * 20}ms` }}
|
|
classList={{ "animate-fade-in": true }}
|
|
onClick={() => day && setSelectedDay(selectedDay() === day ? null : day)}
|
|
>
|
|
{day && (
|
|
<>
|
|
<span class={`text-sm font-medium ${isToday ? 'text-accent' : 'text-ink'}`}>{day}</span>
|
|
{bookings.length > 0 && (
|
|
<div class="mt-1 flex flex-wrap gap-0.5">
|
|
{bookings.slice(0, 4).map((booking: any, i: number) => (
|
|
<div
|
|
class={`w-1.5 h-1.5 rounded-full ${booking.status === 'confirmed' ? 'bg-green-500' : booking.status === 'pending' ? 'bg-amber-500' : 'bg-red-400'}`}
|
|
title={`${booking.customerName} - ${booking.service}`}
|
|
/>
|
|
))}
|
|
{bookings.length > 4 && (
|
|
<span class="text-[7px] font-bold text-accent leading-none">+{bookings.length - 4}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Selected Day Preview */}
|
|
<Show when={selectedDay()}>
|
|
<div class="mt-4 p-4 bg-canvas-subtle rounded-xl border border-border animate-fade-in">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-sm font-semibold text-ink">{new Intl.DateTimeFormat(isCs() ? 'cs-CZ' : 'en-US', { month: 'long' }).format(currentDate())} {selectedDay()}</span>
|
|
<button onClick={() => setSelectedDay(null)} class="text-xs text-ink-muted hover:text-ink">{isCs() ? 'Zavřít' : 'Close'}</button>
|
|
</div>
|
|
<div class="space-y-2">
|
|
{calendarDays().find(d => d.day === selectedDay())?.bookings.map((booking: any) => (
|
|
<div class="flex items-center gap-3 p-2 bg-canvas rounded-lg shadow-sm">
|
|
<div class={`w-2 h-2 rounded-full ${booking.status === 'confirmed' ? 'bg-[hsl(var(--success))]' : booking.status === 'pending' ? 'bg-[hsl(var(--warning))]' : 'bg-[hsl(var(--error))]'}`} />
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-ink truncate">{booking.customerName}</p>
|
|
<p class="text-xs text-ink-muted">{booking.service} • {booking.duration}</p>
|
|
</div>
|
|
<span class="text-xs text-ink-subtle">{new Date(booking.startsAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================
|
|
// KPI CARD COMPONENT
|
|
// ============================================
|
|
function KpiCard(props: { kpi: any; index: number }) {
|
|
const [isHovered, setIsHovered] = createSignal(false);
|
|
const trend = () => props.kpi.trend ?? "neutral";
|
|
const trendClass = () => {
|
|
switch (trend()) {
|
|
case "up":
|
|
return "bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]";
|
|
case "down":
|
|
return "bg-[hsl(var(--error-soft))] text-[hsl(var(--error))]";
|
|
default:
|
|
return "bg-canvas-subtle text-ink-muted";
|
|
}
|
|
};
|
|
const sparklineClass = () => {
|
|
switch (trend()) {
|
|
case "up":
|
|
return "bg-[hsl(var(--success-muted))] group-hover:bg-[hsl(var(--success-subtle))]";
|
|
case "down":
|
|
return "bg-[hsl(var(--error-muted))] group-hover:bg-[hsl(var(--error-subtle))]";
|
|
default:
|
|
return "bg-canvas-muted group-hover:bg-border";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
class="group relative surface-card p-5 hover:shadow-xl transition-all duration-500 hover:-translate-y-1 overflow-hidden"
|
|
style={{ "animation-delay": `${props.index * 100}ms` }}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
{/* Background gradient on hover */}
|
|
<div class={`absolute inset-0 bg-gradient-to-br from-accent-subtle/0 via-accent-subtle/0 to-accent-subtle/30 transition-opacity duration-500 ${isHovered() ? 'opacity-100' : 'opacity-0'}`} />
|
|
|
|
<div class="relative flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-ink-muted group-hover:text-ink transition-colors">{props.kpi.label}</p>
|
|
<p class="text-3xl font-bold text-ink mt-2 tracking-tight">{props.kpi.value}</p>
|
|
</div>
|
|
<div class={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold transition-all duration-300 ${trendClass()} ${isHovered() ? 'scale-105' : ''}`}>
|
|
<Show when={trend() === "up"} fallback={<Show when={trend() === "down"} fallback={<MoreHorizontalIcon />}><TrendingDownIcon /></Show>}>
|
|
<TrendingUpIcon />
|
|
</Show>
|
|
{props.kpi.change ?? "Live"}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mini sparkline visualization */}
|
|
<div class="mt-4 flex items-end gap-0.5 h-8">
|
|
{[40, 65, 45, 80, 55, 70, 90, 60, 75, 85].map((height, i) => (
|
|
<div
|
|
class={`flex-1 rounded-t-sm transition-all duration-300 ${sparklineClass()}`}
|
|
style={{ height: `${height}%`, "transition-delay": `${i * 30}ms` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================
|
|
// ACTIVITY TIMELINE COMPONENT
|
|
// ============================================
|
|
function ActivityTimeline(props: { activities: any[] }) {
|
|
const getIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'booking': return <div class="w-8 h-8 rounded-full bg-[hsl(var(--info-subtle))] text-[hsl(var(--info))] flex items-center justify-center"><CheckCircleIcon /></div>;
|
|
case 'cancel': return <div class="w-8 h-8 rounded-full bg-[hsl(var(--error-subtle))] text-[hsl(var(--error))] flex items-center justify-center"><AlertCircleIcon /></div>;
|
|
case 'client': return <div class="w-8 h-8 rounded-full bg-[hsl(270_40%_20%)] text-[hsl(270_50%_60%)] flex items-center justify-center"><UsersIcon /></div>;
|
|
case 'reschedule': return <div class="w-8 h-8 rounded-full bg-[hsl(var(--warning-subtle))] text-[hsl(var(--warning))] flex items-center justify-center"><ClockIcon /></div>;
|
|
case 'reminder': return <div class="w-8 h-8 rounded-full bg-[hsl(var(--success-subtle))] text-[hsl(var(--success))] flex items-center justify-center"><BellIcon /></div>;
|
|
default: return <div class="w-8 h-8 rounded-full bg-canvas-subtle text-ink-muted flex items-center justify-center"><MoreHorizontalIcon /></div>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div class="surface-card p-6 shadow-sm">
|
|
<h3 class="text-lg font-semibold text-ink mb-5">Recent Activity</h3>
|
|
<div class="space-y-0">
|
|
{props.activities.map((activity: any, index: number) => (
|
|
<div class="group flex gap-4 relative" style={{ "animation-delay": `${index * 75}ms` }}>
|
|
{/* Timeline line */}
|
|
{index < props.activities.length - 1 && (
|
|
<div class="absolute left-4 top-8 bottom-0 w-px bg-gradient-to-b from-border to-transparent" />
|
|
)}
|
|
|
|
<div class="relative z-10 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
|
|
{getIcon(activity.type)}
|
|
</div>
|
|
|
|
<div class="flex-1 pb-5">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-semibold text-ink group-hover:text-accent transition-colors">{activity.action}</p>
|
|
<p class="text-sm text-ink-muted mt-0.5">{activity.detail}</p>
|
|
</div>
|
|
<span class="text-xs text-ink-subtle whitespace-nowrap">{activity.time}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================
|
|
// MAIN DASHBOARD ROUTE
|
|
// ============================================
|
|
export function DashboardRoute() {
|
|
const i18n = useI18n();
|
|
const auth = useAuth();
|
|
const theme = useTheme();
|
|
const [searchParams] = useSearchParams();
|
|
const [activeSection, setActiveSection] = createSignal<Section>("overview");
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = createSignal(false);
|
|
const [isPageTransitioning, setIsPageTransitioning] = createSignal(false);
|
|
const [billingNotice, setBillingNotice] = createSignal<string | null>(null);
|
|
const [billingError, setBillingError] = createSignal<string | null>(null);
|
|
const [billingAction, setBillingAction] = createSignal<"checkout" | "refresh" | "portal" | null>(null);
|
|
const [handledBillingState, setHandledBillingState] = createSignal<string | null>(null);
|
|
const [showIntegrationModal, setShowIntegrationModal] = createSignal(false);
|
|
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 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 ?? "Live",
|
|
})));
|
|
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} • ${booking.service}`,
|
|
time: new Date(booking.startsAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
|
|
type: "booking",
|
|
}));
|
|
});
|
|
const billingPriceLabel = createMemo(() => {
|
|
const current = resolvedBilling();
|
|
if (!current) return "--";
|
|
if (current.amount) return current.amount;
|
|
const displayPrice = current.displayPrices?.find((price: any) => price.currency === current.currency) ?? current.displayPrices?.[0];
|
|
return displayPrice?.formatted ?? "--";
|
|
});
|
|
const nextBillingLabel = createMemo(() => {
|
|
const current = resolvedBilling();
|
|
if (!current) return "--";
|
|
if (current.nextBilling) return current.nextBilling;
|
|
if (!current.currentPeriodEnd) return i18n.locale() === "cs" ? "Není naplánováno" : "Not scheduled";
|
|
return new Date(current.currentPeriodEnd).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
|
|
});
|
|
const paymentMethodLabel = createMemo(() => {
|
|
const current = resolvedBilling();
|
|
if (!current) return "--";
|
|
if (current.paymentMethodBrand && current.paymentMethodLast4) {
|
|
return `${current.paymentMethodBrand} •••• ${current.paymentMethodLast4}`;
|
|
}
|
|
return i18n.locale() === "cs" ? "Není k dispozici" : "Not available";
|
|
});
|
|
const hasTenant = () => Boolean(bootstrap.latest?.tenantId) || isDemoMode();
|
|
const isDashboardReady = () => Boolean(token() && hasTenant() && (summary.latest || isDemoMode()) && (billing.latest || isDemoMode()));
|
|
|
|
const refreshBilling = async (silent = false) => {
|
|
const bearer = token();
|
|
if (!bearer) return;
|
|
if (bearer.startsWith("demo.")) {
|
|
if (!silent) setBillingNotice(i18n.locale() === "cs" ? "Demo předplatné je statické." : "Demo subscription is static.");
|
|
return;
|
|
}
|
|
setBillingAction("refresh");
|
|
if (!silent) {
|
|
setBillingError(null);
|
|
setBillingNotice(null);
|
|
}
|
|
const response = await apiClient.POST("/v1/billing/refresh", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
});
|
|
setBillingAction(null);
|
|
if (response.error) {
|
|
setBillingError(i18n.locale() === "cs" ? "Obnovení předplatného selhalo." : "Billing refresh failed.");
|
|
return;
|
|
}
|
|
await refetchBilling();
|
|
setBillingNotice(i18n.locale() === "cs" ? "Předplatné bylo obnoveno." : "Billing state refreshed.");
|
|
};
|
|
|
|
const openCheckout = async () => {
|
|
const bearer = token();
|
|
if (!bearer) return;
|
|
if (bearer.startsWith("demo.")) {
|
|
setBillingNotice(i18n.locale() === "cs" ? "Checkout není v demo režimu dostupný." : "Checkout is unavailable in demo mode.");
|
|
return;
|
|
}
|
|
if (!paddleConfigured()) {
|
|
setBillingError(i18n.locale() === "cs" ? "Paddle client token není nastaven." : "Paddle client token is not configured.");
|
|
return;
|
|
}
|
|
setBillingAction("checkout");
|
|
setBillingError(null);
|
|
setBillingNotice(null);
|
|
const current = resolvedBilling();
|
|
const response = await apiClient.POST("/v1/billing/checkout", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: {
|
|
planCode: current.planCode,
|
|
currency: current.currency,
|
|
},
|
|
});
|
|
setBillingAction(null);
|
|
if (response.error || !response.data?.priceId) {
|
|
setBillingError(i18n.locale() === "cs" ? "Paddle checkout není připraven." : "Paddle checkout is not ready.");
|
|
return;
|
|
}
|
|
const paddle = await getPaddle();
|
|
if (!paddle) {
|
|
setBillingError(i18n.locale() === "cs" ? "Paddle se nepodařilo inicializovat." : "Paddle failed to initialize.");
|
|
return;
|
|
}
|
|
paddle.Checkout.open({
|
|
items: [{ priceId: response.data.priceId, quantity: 1 }],
|
|
customer: response.data.customerId
|
|
? { id: response.data.customerId }
|
|
: response.data.customerEmail
|
|
? { email: response.data.customerEmail }
|
|
: undefined,
|
|
customData: response.data.customData,
|
|
settings: {
|
|
displayMode: "overlay",
|
|
successUrl: response.data.successRedirectUrl,
|
|
},
|
|
});
|
|
};
|
|
|
|
const openBillingPortal = async () => {
|
|
const bearer = token();
|
|
if (!bearer) return;
|
|
if (bearer.startsWith("demo.")) {
|
|
setBillingNotice(i18n.locale() === "cs" ? "Portál není v demo režimu dostupný." : "Portal is unavailable in demo mode.");
|
|
return;
|
|
}
|
|
setBillingAction("portal");
|
|
setBillingError(null);
|
|
setBillingNotice(null);
|
|
const response = await apiClient.POST("/v1/billing/portal", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
});
|
|
setBillingAction(null);
|
|
if (response.error || !response.data?.url) {
|
|
setBillingError(i18n.locale() === "cs" ? "Paddle portál není připraven." : "Paddle portal is not ready.");
|
|
return;
|
|
}
|
|
const portalUrl = response.data.url;
|
|
if (!portalUrl.startsWith("https://")) {
|
|
setBillingError(i18n.locale() === "cs" ? "Neplatný portál URL." : "Invalid portal URL.");
|
|
return;
|
|
}
|
|
window.location.href = portalUrl;
|
|
};
|
|
|
|
createEffect(() => {
|
|
const billingState = Array.isArray(searchParams.billing) ? searchParams.billing[0] : searchParams.billing;
|
|
const bearer = token();
|
|
if (!billingState || billingState === handledBillingState() || !bearer) return;
|
|
setHandledBillingState(billingState);
|
|
setActiveSection("billing");
|
|
if (billingState === "success") {
|
|
void refreshBilling();
|
|
return;
|
|
}
|
|
if (billingState === "cancelled") {
|
|
setBillingError(null);
|
|
setBillingNotice(i18n.locale() === "cs" ? "Checkout byl zrušen." : "Checkout was cancelled.");
|
|
}
|
|
});
|
|
|
|
// Smooth page transition
|
|
const changeSection = (section: Section) => {
|
|
if (section === activeSection()) return;
|
|
setIsPageTransitioning(true);
|
|
setTimeout(() => {
|
|
setActiveSection(section);
|
|
setIsPageTransitioning(false);
|
|
}, 150);
|
|
};
|
|
|
|
const navItems = [
|
|
{ id: "overview" as Section, label: i18n.locale() === 'cs' ? 'Prehled' : 'Overview', icon: LayoutDashboardIcon },
|
|
{ id: "bookings" as Section, label: i18n.locale() === 'cs' ? 'Rezervace' : 'Bookings', icon: CalendarDaysIcon },
|
|
{ id: "customers" as Section, label: i18n.locale() === 'cs' ? 'Zakaznici' : 'Customers', icon: UserCircleIcon },
|
|
{ id: "zones" as Section, label: i18n.locale() === 'cs' ? 'Zony a dostupnost' : 'Zones & Availability', icon: MapPinIcon },
|
|
{ id: "billing" as Section, label: i18n.locale() === 'cs' ? 'Platby' : 'Billing', icon: CreditCardIcon },
|
|
{ id: "settings" as Section, label: i18n.locale() === 'cs' ? 'Nastaveni' : 'Settings', icon: Settings2Icon },
|
|
];
|
|
|
|
// ==========================================
|
|
// PAGE COMPONENTS
|
|
// ==========================================
|
|
|
|
const OverviewPage = () => (
|
|
<div class="space-y-6 animate-fade-in">
|
|
{/* Header */}
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-ink tracking-tight">
|
|
{i18n.locale() === 'cs' ? 'Dobrý den,' : 'Welcome back,'} <span class="text-accent">{auth.session()?.user?.name}</span>
|
|
</h1>
|
|
<p class="text-ink-muted mt-1">{i18n.locale() === 'cs' ? `Přehled pro ${resolvedBootstrap().tenantName}` : `Overview for ${resolvedBootstrap().tenantName}`}</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button
|
|
onClick={() => setShowIntegrationModal(true)}
|
|
class="btn-secondary text-sm"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
|
</svg>
|
|
{i18n.locale() === 'cs' ? 'Sdílet/Spravit' : 'Share/Manage'}
|
|
</button>
|
|
<span class="text-sm text-ink-subtle">{new Date().toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}</span>
|
|
<button class="p-2 text-ink-subtle hover:text-ink hover:bg-canvas-subtle rounded-xl transition-all">
|
|
<BellIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI Cards */}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{normalizedKpis().map((kpi: any, index: number) => (
|
|
<KpiCard kpi={kpi} index={index} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Calendar + Activity */}
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2">
|
|
<CalendarView bookings={normalizedUpcomingBookings()} locale={i18n.locale()} />
|
|
</div>
|
|
<div class="space-y-6">
|
|
<ActivityTimeline activities={normalizedRecentActivity()} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upcoming Bookings */}
|
|
<div class="surface-card p-6 shadow-sm">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-ink">{i18n.locale() === 'cs' ? 'Nadcházející rezervace' : 'Upcoming Bookings'}</h3>
|
|
<p class="text-sm text-ink-muted mt-0.5">{normalizedUpcomingBookings().length} total</p>
|
|
</div>
|
|
<button
|
|
onClick={() => changeSection("bookings")}
|
|
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-accent hover:text-accent-hover hover:bg-accent-subtle rounded-xl transition-all"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zobrazit vše' : 'View all'}
|
|
<ChevronRightIcon />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divide-y divide-border">
|
|
{normalizedUpcomingBookings().slice(0, 3).map((booking: any, index: number) => (
|
|
<div
|
|
class="group py-4 flex items-center justify-between hover:bg-canvas-subtle/50 rounded-xl px-2 -mx-2 transition-all duration-300 cursor-pointer"
|
|
style={{ "animation-delay": `${index * 100}ms` }}
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-sm font-bold text-accent shadow-sm group-hover:shadow-md transition-shadow">
|
|
{booking.avatar}
|
|
</div>
|
|
<div class={`absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full border-2 border-canvas ${booking.status === 'confirmed' ? 'bg-[hsl(var(--success))]' : booking.status === 'pending' ? 'bg-[hsl(var(--warning))]' : 'bg-[hsl(var(--error))]'}`} />
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-ink group-hover:text-accent transition-colors">{booking.customerName}</p>
|
|
<p class="text-sm text-ink-muted">{booking.service}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-sm font-medium text-ink">{new Date(booking.startsAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</p>
|
|
<span class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${booking.status === 'confirmed' ? 'bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]' : booking.status === 'pending' ? 'bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]' : 'bg-[hsl(var(--error-soft))] text-[hsl(var(--error))]'}`}>
|
|
{booking.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
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 [selectedBooking, setSelectedBooking] = createSignal<any>(null);
|
|
const [showBookingDetail, setShowBookingDetail] = createSignal(false);
|
|
const [showNewBooking, setShowNewBooking] = createSignal(false);
|
|
const [editingBooking, setEditingBooking] = createSignal(false);
|
|
|
|
// Booking form state
|
|
const [newBookingCustomer, setNewBookingCustomer] = createSignal("");
|
|
const [newBookingEmail, setNewBookingEmail] = createSignal("");
|
|
const [newBookingService, setNewBookingService] = createSignal("");
|
|
const [newBookingDate, setNewBookingDate] = createSignal("");
|
|
const [newBookingTime, setNewBookingTime] = createSignal("");
|
|
const [newBookingLocation, setNewBookingLocation] = createSignal("");
|
|
const [newBookingNotes, setNewBookingNotes] = createSignal("");
|
|
|
|
// Fetch all bookings
|
|
const [allBookings, { refetch: refetchBookings }] = createResource(token, async (bearer) => {
|
|
if (!bearer || bearer.startsWith("demo.")) return demoData().summary.allBookings;
|
|
const response = await (apiClient as any).GET("/v1/catalog/bookings", {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
return response.data ?? [];
|
|
});
|
|
|
|
const resolvedAllBookings = () => (allBookings.latest as any[]) ?? demoData().summary.allBookings ?? [];
|
|
|
|
// Filter bookings
|
|
const filteredBookings = createMemo(() => {
|
|
let bookings = resolvedAllBookings();
|
|
|
|
// Status filter
|
|
if (filterStatus() !== "all") {
|
|
bookings = bookings.filter((b: any) => b.status === filterStatus());
|
|
}
|
|
|
|
// Date range filter
|
|
const now = new Date();
|
|
if (filterDateRange() === "today") {
|
|
bookings = bookings.filter((b: any) => {
|
|
const date = new Date(b.startsAt);
|
|
return date.toDateString() === now.toDateString();
|
|
});
|
|
} else if (filterDateRange() === "week") {
|
|
const weekEnd = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
|
|
bookings = bookings.filter((b: any) => {
|
|
const date = new Date(b.startsAt);
|
|
return date >= now && date <= weekEnd;
|
|
});
|
|
} else if (filterDateRange() === "month") {
|
|
const monthEnd = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
|
|
bookings = bookings.filter((b: any) => {
|
|
const date = new Date(b.startsAt);
|
|
return date >= now && date <= monthEnd;
|
|
});
|
|
}
|
|
|
|
// Search filter
|
|
if (searchQuery().trim()) {
|
|
const query = searchQuery().toLowerCase();
|
|
bookings = bookings.filter((b: any) =>
|
|
b.customerName?.toLowerCase().includes(query) ||
|
|
b.customerEmail?.toLowerCase().includes(query) ||
|
|
b.service?.toLowerCase().includes(query) ||
|
|
b.reference?.toLowerCase().includes(query)
|
|
);
|
|
}
|
|
|
|
// Sort by date, newest first
|
|
return bookings.sort((a: any, b: any) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
|
|
});
|
|
|
|
// Stats
|
|
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.")) {
|
|
setShowNewBooking(false);
|
|
return;
|
|
}
|
|
|
|
const dateTime = new Date(`${newBookingDate()}T${newBookingTime()}`);
|
|
|
|
await (apiClient as any).POST("/v1/catalog/bookings", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: {
|
|
customerName: newBookingCustomer(),
|
|
customerEmail: newBookingEmail(),
|
|
service: newBookingService(),
|
|
locationId: newBookingLocation(),
|
|
startsAt: dateTime.toISOString(),
|
|
endsAt: new Date(dateTime.getTime() + 60 * 60 * 1000).toISOString(),
|
|
notes: newBookingNotes(),
|
|
status: "confirmed"
|
|
}
|
|
});
|
|
|
|
// Reset form
|
|
setNewBookingCustomer("");
|
|
setNewBookingEmail("");
|
|
setNewBookingService("");
|
|
setNewBookingDate("");
|
|
setNewBookingTime("");
|
|
setNewBookingLocation("");
|
|
setNewBookingNotes("");
|
|
setShowNewBooking(false);
|
|
void refetchBookings();
|
|
};
|
|
|
|
const handleUpdateBooking = async () => {
|
|
const bearer = token();
|
|
const booking = selectedBooking();
|
|
if (!bearer || !booking || bearer.startsWith("demo.")) {
|
|
setEditingBooking(false);
|
|
setShowBookingDetail(false);
|
|
return;
|
|
}
|
|
|
|
await (apiClient as any).PUT(`/v1/catalog/bookings/${booking.id}`, {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: {
|
|
customerName: newBookingCustomer(),
|
|
customerEmail: newBookingEmail(),
|
|
service: newBookingService(),
|
|
locationId: newBookingLocation(),
|
|
notes: newBookingNotes()
|
|
}
|
|
});
|
|
|
|
setEditingBooking(false);
|
|
setShowBookingDetail(false);
|
|
setSelectedBooking(null);
|
|
void refetchBookings();
|
|
};
|
|
|
|
const handleCancelBooking = async (bookingId: string) => {
|
|
const bearer = token();
|
|
if (!bearer || bearer.startsWith("demo.")) return;
|
|
|
|
if (!confirm(i18n.locale() === 'cs' ? 'Opravdu chcete zrušit tuto rezervaci?' : 'Are you sure you want to cancel this booking?')) return;
|
|
|
|
await (apiClient as any).POST(`/v1/catalog/bookings/${bookingId}/cancel`, {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
|
|
void refetchBookings();
|
|
};
|
|
|
|
const handleRescheduleBooking = async (bookingId: string, newDate: string, newTime: string) => {
|
|
const bearer = token();
|
|
if (!bearer || bearer.startsWith("demo.")) return;
|
|
|
|
const newDateTime = new Date(`${newDate}T${newTime}`);
|
|
|
|
await (apiClient as any).POST(`/v1/catalog/bookings/${bookingId}/reschedule`, {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: {
|
|
startsAt: newDateTime.toISOString(),
|
|
endsAt: new Date(newDateTime.getTime() + 60 * 60 * 1000).toISOString()
|
|
}
|
|
});
|
|
|
|
void refetchBookings();
|
|
};
|
|
|
|
const openBookingDetail = (booking: any) => {
|
|
setSelectedBooking(booking);
|
|
setNewBookingCustomer(booking.customerName);
|
|
setNewBookingEmail(booking.customerEmail);
|
|
setNewBookingService(booking.service);
|
|
setNewBookingLocation(booking.location || "");
|
|
setNewBookingNotes(booking.notes || "");
|
|
setShowBookingDetail(true);
|
|
setEditingBooking(false);
|
|
};
|
|
|
|
const statusColors: Record<string, string> = {
|
|
confirmed: "bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]",
|
|
pending: "bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]",
|
|
cancelled: "bg-[hsl(var(--error-soft))] text-[hsl(var(--error))]",
|
|
completed: "bg-canvas-muted text-ink-muted"
|
|
};
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
confirmed: i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed',
|
|
pending: i18n.locale() === 'cs' ? 'Čeká' : 'Pending',
|
|
cancelled: i18n.locale() === 'cs' ? 'Zrušeno' : 'Cancelled',
|
|
completed: i18n.locale() === 'cs' ? 'Dokončeno' : 'Completed'
|
|
};
|
|
|
|
return (
|
|
<div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? 'opacity-0' : 'opacity-100'}`}>
|
|
{/* Header */}
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Správa rezervací' : 'Booking Management'}</h1>
|
|
<p class="text-ink-muted mt-1">{bookingStats().total} {i18n.locale() === 'cs' ? 'celkem rezervací' : 'total bookings'}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowNewBooking(true)}
|
|
class="btn-primary"
|
|
>
|
|
<PlusIcon />
|
|
{i18n.locale() === 'cs' ? 'Nová rezervace' : 'New Booking'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div class="grid grid-cols-2 sm:grid-cols-5 gap-4">
|
|
{[
|
|
{ label: i18n.locale() === 'cs' ? 'Celkem' : 'Total', value: bookingStats().total, color: 'bg-canvas-subtle' },
|
|
{ label: i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed', value: bookingStats().confirmed, color: 'bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]' },
|
|
{ label: i18n.locale() === 'cs' ? 'Čeká' : 'Pending', value: bookingStats().pending, color: 'bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]' },
|
|
{ label: i18n.locale() === 'cs' ? 'Zrušeno' : 'Cancelled', value: bookingStats().cancelled, color: 'bg-[hsl(var(--error-soft))] text-[hsl(var(--error))]' },
|
|
{ label: i18n.locale() === 'cs' ? 'Dokončeno' : 'Completed', value: bookingStats().completed, color: 'bg-canvas-muted text-ink-muted' },
|
|
].map((stat, index) => (
|
|
<div
|
|
class={`${stat.color} p-4 rounded-xl border border-border`}
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<p class="text-2xl font-bold">{stat.value}</p>
|
|
<p class="text-sm opacity-80">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div class="surface-card p-4">
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="flex-1">
|
|
<Input
|
|
type="text"
|
|
placeholder={i18n.locale() === 'cs' ? 'Hledat podle jména, emailu nebo reference...' : 'Search by name, email, or reference...'}
|
|
value={searchQuery()}
|
|
onInput={(e) => setSearchQuery(e.currentTarget.value)}
|
|
/>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<Select
|
|
value={filterStatus()}
|
|
onChange={(v) => setFilterStatus(v as any)}
|
|
class="min-w-[140px]"
|
|
options={[
|
|
{ value: "all", label: i18n.locale() === 'cs' ? 'Všechny stavy' : 'All Statuses' },
|
|
{ value: "confirmed", label: i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed' },
|
|
{ value: "pending", label: i18n.locale() === 'cs' ? 'Čeká' : 'Pending' },
|
|
{ value: "cancelled", label: i18n.locale() === 'cs' ? 'Zrušeno' : 'Cancelled' },
|
|
{ value: "completed", label: i18n.locale() === 'cs' ? 'Dokončeno' : 'Completed' },
|
|
]}
|
|
/>
|
|
<Select
|
|
value={filterDateRange()}
|
|
onChange={(v) => setFilterDateRange(v as any)}
|
|
class="min-w-[140px]"
|
|
options={[
|
|
{ value: "all", label: i18n.locale() === 'cs' ? 'Všechny termíny' : 'All Dates' },
|
|
{ value: "today", label: i18n.locale() === 'cs' ? 'Dnes' : 'Today' },
|
|
{ value: "week", label: i18n.locale() === 'cs' ? 'Tento týden' : 'This Week' },
|
|
{ value: "month", label: i18n.locale() === 'cs' ? 'Tento měsíc' : 'This Month' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bookings Table */}
|
|
<div class="surface-card overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-canvas-subtle border-b border-border">
|
|
<tr>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Zákazník' : 'Customer'}</th>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Služba' : 'Service'}</th>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Datum a čas' : 'Date & Time'}</th>
|
|
<th class="text-center px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Stav' : 'Status'}</th>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Reference' : 'Reference'}</th>
|
|
<th class="text-center px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Akce' : 'Actions'}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border">
|
|
{filteredBookings().map((booking: any, index: number) => (
|
|
<tr
|
|
class="group hover:bg-canvas-subtle/50 transition-colors"
|
|
style={{ "animation-delay": `${index * 30}ms` }}
|
|
>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-sm font-bold text-accent">
|
|
{booking.avatar || getInitials(booking.customerName)}
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-ink">{booking.customerName}</p>
|
|
<p class="text-sm text-ink-muted">{booking.customerEmail}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-medium text-ink">{booking.service}</p>
|
|
<p class="text-sm text-ink-muted">{booking.location}</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="text-ink">{new Date(booking.startsAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}</p>
|
|
<p class="text-sm text-ink-muted">{new Date(booking.startsAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })} - {new Date(booking.endsAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<span class={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusColors[booking.status] || 'bg-canvas-muted text-ink-muted'}`}>
|
|
{statusLabels[booking.status] || booking.status}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-ink-muted font-mono">
|
|
{booking.reference}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => openBookingDetail(booking)}
|
|
class="p-2 text-ink-muted hover:text-accent hover:bg-accent-subtle rounded-lg transition-colors"
|
|
title={i18n.locale() === 'cs' ? 'Detail' : 'Details'}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7Z"/>
|
|
</svg>
|
|
</button>
|
|
{booking.status !== 'cancelled' && booking.status !== 'completed' && (
|
|
<>
|
|
<button
|
|
onClick={() => openBookingDetail(booking)}
|
|
class="p-2 text-ink-muted hover:text-accent hover:bg-accent-subtle rounded-lg transition-colors"
|
|
title={i18n.locale() === 'cs' ? 'Upravit' : 'Edit'}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={() => handleCancelBooking(booking.id)}
|
|
class="p-2 text-ink-muted hover:text-[hsl(var(--error))] hover:bg-[hsl(var(--error-soft))] rounded-lg transition-colors"
|
|
title={i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/>
|
|
</svg>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{filteredBookings().length === 0 && (
|
|
<div class="p-12 text-center">
|
|
<div class="w-16 h-16 rounded-full bg-canvas-subtle flex items-center justify-center mx-auto mb-4">
|
|
<CalendarDaysIcon />
|
|
</div>
|
|
<p class="text-ink-muted">{i18n.locale() === 'cs' ? 'Žádné rezervace nenalezeny' : 'No bookings found'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* New Booking Modal */}
|
|
{showNewBooking() && (
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" onClick={() => setShowNewBooking(false)} />
|
|
<div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6 border-b border-border">
|
|
<h3 class="text-xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Nová rezervace' : 'New Booking'}</h3>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<Input
|
|
type="text"
|
|
label={i18n.locale() === 'cs' ? 'Jméno zákazníka' : 'Customer Name'}
|
|
value={newBookingCustomer()}
|
|
onInput={(e) => setNewBookingCustomer(e.currentTarget.value)}
|
|
placeholder={i18n.locale() === 'cs' ? 'např. Jan Novák' : 'e.g. John Doe'}
|
|
/>
|
|
<Input
|
|
type="email"
|
|
label={i18n.locale() === 'cs' ? 'Email' : 'Email'}
|
|
value={newBookingEmail()}
|
|
onInput={(e) => setNewBookingEmail(e.currentTarget.value)}
|
|
placeholder="customer@example.com"
|
|
/>
|
|
<Input
|
|
type="text"
|
|
label={i18n.locale() === 'cs' ? 'Služba' : 'Service'}
|
|
value={newBookingService()}
|
|
onInput={(e) => setNewBookingService(e.currentTarget.value)}
|
|
placeholder={i18n.locale() === 'cs' ? 'např. Masáž' : 'e.g. Massage'}
|
|
/>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<Input
|
|
type="date"
|
|
label={i18n.locale() === 'cs' ? 'Datum' : 'Date'}
|
|
value={newBookingDate()}
|
|
onInput={(e) => setNewBookingDate(e.currentTarget.value)}
|
|
/>
|
|
<Input
|
|
type="time"
|
|
label={i18n.locale() === 'cs' ? 'Čas' : 'Time'}
|
|
value={newBookingTime()}
|
|
onInput={(e) => setNewBookingTime(e.currentTarget.value)}
|
|
/>
|
|
</div>
|
|
<Textarea
|
|
label={i18n.locale() === 'cs' ? 'Poznámky' : 'Notes'}
|
|
value={newBookingNotes()}
|
|
onInput={(e) => setNewBookingNotes(e.currentTarget.value)}
|
|
rows={3}
|
|
resize="none"
|
|
placeholder={i18n.locale() === 'cs' ? 'Speciální požadavky...' : 'Special requests...'}
|
|
/>
|
|
</div>
|
|
<div class="p-6 border-t border-border flex gap-3">
|
|
<button
|
|
onClick={() => setShowNewBooking(false)}
|
|
class="flex-1 px-4 py-2.5 border border-border rounded-xl text-ink hover:bg-canvas-subtle transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
|
|
</button>
|
|
<button
|
|
onClick={handleCreateBooking}
|
|
disabled={!newBookingCustomer() || !newBookingEmail() || !newBookingDate() || !newBookingTime()}
|
|
class="flex-1 px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Vytvořit rezervaci' : 'Create Booking'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Booking Detail Modal */}
|
|
{showBookingDetail() && selectedBooking() && (
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" onClick={() => setShowBookingDetail(false)} />
|
|
<div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6 border-b border-border flex items-center justify-between">
|
|
<h3 class="text-xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Detail rezervace' : 'Booking Details'}</h3>
|
|
<button onClick={() => setShowBookingDetail(false)} class="p-2 hover:bg-canvas-subtle rounded-lg transition-colors">
|
|
<XIcon />
|
|
</button>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
{!editingBooking() ? (
|
|
<>
|
|
<div class="flex items-center gap-4 p-4 bg-canvas-subtle rounded-xl">
|
|
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-lg font-bold text-accent">
|
|
{selectedBooking().avatar || getInitials(selectedBooking().customerName)}
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-ink text-lg">{selectedBooking().customerName}</p>
|
|
<p class="text-ink-muted">{selectedBooking().customerEmail}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Služba' : 'Service'}</p>
|
|
<p class="font-medium text-ink">{selectedBooking().service}</p>
|
|
</div>
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Místo' : 'Location'}</p>
|
|
<p class="font-medium text-ink">{selectedBooking().location || '-'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Datum a čas' : 'Date & Time'}</p>
|
|
<p class="font-medium text-ink">{new Date(selectedBooking().startsAt).toLocaleString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
|
|
<p class="text-sm text-ink-muted">{new Date(selectedBooking().endsAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-canvas-subtle rounded-xl">
|
|
<div>
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Reference' : 'Reference'}</p>
|
|
<p class="font-medium text-ink font-mono">{selectedBooking().reference}</p>
|
|
</div>
|
|
<span class={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium ${statusColors[selectedBooking().status]}`}>
|
|
{statusLabels[selectedBooking().status]}
|
|
</span>
|
|
</div>
|
|
|
|
{selectedBooking().notes && (
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Poznámky' : 'Notes'}</p>
|
|
<p class="text-ink">{selectedBooking().notes}</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div>
|
|
<label class="block text-sm font-medium text-ink-muted mb-1.5">{i18n.locale() === 'cs' ? 'Jméno' : 'Name'}</label>
|
|
<input
|
|
type="text"
|
|
value={newBookingCustomer()}
|
|
onInput={(e) => setNewBookingCustomer(e.currentTarget.value)}
|
|
class="w-full px-4 py-2.5 bg-canvas-subtle border border-border rounded-xl text-ink focus:ring-2 focus:ring-accent/20 focus:border-accent transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-ink-muted mb-1.5">{i18n.locale() === 'cs' ? 'Email' : 'Email'}</label>
|
|
<input
|
|
type="email"
|
|
value={newBookingEmail()}
|
|
onInput={(e) => setNewBookingEmail(e.currentTarget.value)}
|
|
class="w-full px-4 py-2.5 bg-canvas-subtle border border-border rounded-xl text-ink focus:ring-2 focus:ring-accent/20 focus:border-accent transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-ink-muted mb-1.5">{i18n.locale() === 'cs' ? 'Služba' : 'Service'}</label>
|
|
<input
|
|
type="text"
|
|
value={newBookingService()}
|
|
onInput={(e) => setNewBookingService(e.currentTarget.value)}
|
|
class="w-full px-4 py-2.5 bg-canvas-subtle border border-border rounded-xl text-ink focus:ring-2 focus:ring-accent/20 focus:border-accent transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-ink-muted mb-1.5">{i18n.locale() === 'cs' ? 'Poznámky' : 'Notes'}</label>
|
|
<textarea
|
|
value={newBookingNotes()}
|
|
onInput={(e) => setNewBookingNotes(e.currentTarget.value)}
|
|
rows={3}
|
|
class="w-full px-4 py-2.5 bg-canvas-subtle border border-border rounded-xl text-ink focus:ring-2 focus:ring-accent/20 focus:border-accent transition-all resize-none"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div class="p-6 border-t border-border flex gap-3">
|
|
{!editingBooking() ? (
|
|
<>
|
|
<button
|
|
onClick={() => setShowBookingDetail(false)}
|
|
class="flex-1 px-4 py-2.5 border border-border rounded-xl text-ink hover:bg-canvas-subtle transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zavřít' : 'Close'}
|
|
</button>
|
|
{selectedBooking().status !== 'cancelled' && selectedBooking().status !== 'completed' && (
|
|
<>
|
|
<button
|
|
onClick={() => setEditingBooking(true)}
|
|
class="px-4 py-2.5 bg-accent-subtle text-accent rounded-xl hover:bg-accent-soft transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Upravit' : 'Edit'}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
handleCancelBooking(selectedBooking().id);
|
|
setShowBookingDetail(false);
|
|
}}
|
|
class="px-4 py-2.5 bg-[hsl(var(--error-soft))] text-[hsl(var(--error))] rounded-xl hover:bg-[hsl(var(--error-subtle))] transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<button
|
|
onClick={() => setEditingBooking(false)}
|
|
class="flex-1 px-4 py-2.5 border border-border rounded-xl text-ink hover:bg-canvas-subtle transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
|
|
</button>
|
|
<button
|
|
onClick={handleUpdateBooking}
|
|
class="flex-1 px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Uložit změny' : 'Save Changes'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const BillingPage = () => (
|
|
<div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? 'opacity-0' : 'opacity-100'}`}>
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Platby' : 'Billing'}</h1>
|
|
<p class="text-ink-muted mt-1">{i18n.locale() === 'cs' ? 'Spravujte své předplatné' : 'Manage your subscription'}</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Plan Card */}
|
|
<div class="lg:col-span-2 relative overflow-hidden rounded-card">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-ink via-ink/95 to-ink" />
|
|
<div class="absolute inset-0 bg-gradient-to-tr from-accent/10 via-transparent to-[hsl(210,60%,50%,0.1)]" />
|
|
<div class="relative p-8 text-canvas">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-canvas/10 backdrop-blur text-xs font-medium mb-4">
|
|
<SparklesIcon /> {i18n.locale() === 'cs' ? 'Aktuální plán' : 'Current Plan'}
|
|
</div>
|
|
<h2 class="text-4xl font-bold capitalize tracking-tight">{resolvedBilling().planCode}</h2>
|
|
<p class="text-canvas/60 mt-2 text-lg">{billingPriceLabel()}<span class="text-sm text-canvas/40">/{i18n.locale() === 'cs' ? 'měsíc' : 'month'}</span></p>
|
|
</div>
|
|
<div class="flex flex-col items-end gap-3">
|
|
<span class="inline-flex items-center px-4 py-1.5 rounded-full bg-[hsl(var(--success))/20] text-[hsl(var(--success))] text-sm font-semibold backdrop-blur">
|
|
{resolvedBilling().status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Show when={billingNotice()}>
|
|
<div class="mt-6 rounded-xl border border-[hsl(var(--success))/20] bg-[hsl(var(--success))/10] px-4 py-3 text-sm text-[hsl(var(--success))]">
|
|
{billingNotice()}
|
|
</div>
|
|
</Show>
|
|
<Show when={billingError()}>
|
|
<div class="mt-6 rounded-xl border border-[hsl(var(--error))/20] bg-[hsl(var(--error))/10] px-4 py-3 text-sm text-[hsl(var(--error))]">
|
|
{billingError()}
|
|
</div>
|
|
</Show>
|
|
<div class="mt-8 flex items-center gap-4 flex-wrap">
|
|
<button
|
|
onClick={() => void openCheckout()}
|
|
disabled={billingAction() !== null || !resolvedBilling().checkoutUrlAvailable}
|
|
class="bg-canvas text-ink px-6 py-2.5 rounded-xl font-semibold hover:bg-canvas/90 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:translate-y-0"
|
|
>
|
|
{billingAction() === "checkout" ? (i18n.locale() === 'cs' ? 'Otevírání...' : 'Opening...') : i18n.t("dashboard.checkout")}
|
|
</button>
|
|
<button
|
|
onClick={() => void openBillingPortal()}
|
|
disabled={billingAction() !== null || resolvedBilling().portalAvailable === false}
|
|
class="text-canvas/60 hover:text-canvas transition-colors px-4 py-2.5 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{billingAction() === "portal" ? (i18n.locale() === 'cs' ? 'Otevírání portálu...' : 'Opening portal...') : (i18n.locale() === "cs" ? "Spravovat předplatné" : "Manage subscription")}
|
|
</button>
|
|
<button
|
|
onClick={() => void refreshBilling()}
|
|
disabled={billingAction() !== null || resolvedBilling().syncAvailable === false}
|
|
class="text-canvas/60 hover:text-canvas transition-colors px-4 py-2.5 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{billingAction() === "refresh" ? (i18n.locale() === 'cs' ? 'Obnovování...' : 'Refreshing...') : i18n.t("dashboard.refreshBilling")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Next Billing */}
|
|
<div class="surface-card p-6 hover:shadow-lg transition-shadow">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-accent">
|
|
<ClockIcon />
|
|
</div>
|
|
<p class="text-sm font-semibold text-ink-muted uppercase tracking-wide">{i18n.locale() === 'cs' ? 'Další platba' : 'Next Billing'}</p>
|
|
</div>
|
|
<p class="text-3xl font-bold text-ink">{nextBillingLabel()}</p>
|
|
<p class="text-ink-muted mt-1">{billingPriceLabel()} {i18n.locale() === 'cs' ? 'bude strženo' : 'will be charged'}</p>
|
|
<div class="mt-4 pt-4 border-t border-border">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-ink-muted">{i18n.locale() === 'cs' ? 'Způsob platby' : 'Payment method'}</span>
|
|
<span class="font-medium text-ink">{paymentMethodLabel()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div class="surface-card p-6">
|
|
<h3 class="text-lg font-semibold text-ink mb-5">{i18n.locale() === 'cs' ? 'Zahrnuté funkce' : 'Included Features'}</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{Object.entries(resolvedBilling().entitlements).map(([key, value], index) => (
|
|
<div
|
|
class="group flex items-center gap-4 p-4 rounded-xl bg-canvas-subtle hover:bg-canvas hover:shadow-md border border-transparent hover:border-border transition-all duration-300"
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<div class="w-12 h-12 rounded-full bg-[hsl(var(--success-soft))] flex items-center justify-center text-[hsl(var(--success))] group-hover:scale-110 transition-transform">
|
|
<CheckCircleIcon />
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-ink capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</p>
|
|
<p class="text-sm text-ink-muted">{typeof value === 'boolean' ? (value ? (i18n.locale() === 'cs' ? 'Zapnuto' : 'Enabled') : (i18n.locale() === 'cs' ? 'Vypnuto' : 'Disabled')) : String(value)}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const SettingsPage = () => {
|
|
// Brand settings state
|
|
const [brandColor, setBrandColor] = createSignal(resolvedBootstrap().brand?.primaryColor || "#a65c3e");
|
|
const [businessName, setBusinessName] = createSignal(resolvedBootstrap().tenantName || "");
|
|
const [businessEmail, setBusinessEmail] = createSignal("");
|
|
const [businessPhone, setBusinessPhone] = createSignal("");
|
|
const [businessAddress, setBusinessAddress] = createSignal("");
|
|
const [emailTemplate, setEmailTemplate] = createSignal("default");
|
|
const [activeEmailType, setActiveEmailType] = createSignal<"confirmation" | "reminder" | "cancellation" | "reschedule">("confirmation");
|
|
const [showEmailPreview, setShowEmailPreview] = createSignal(false);
|
|
const [emailSettings, setEmailSettings] = createSignal({
|
|
sendConfirmation: true,
|
|
sendReminder: true,
|
|
reminderHours: 24,
|
|
sendCancellation: true,
|
|
sendReschedule: true,
|
|
includeManageLink: true,
|
|
includeCalendarLink: true,
|
|
includeChatLink: true,
|
|
});
|
|
|
|
const handleSaveBrand = async () => {
|
|
const bearer = token();
|
|
if (!bearer || bearer.startsWith("demo.")) return;
|
|
|
|
// Save brand settings to backend
|
|
await (apiClient as any).PUT("/v1/tenants/brand", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: {
|
|
primaryColor: brandColor(),
|
|
name: businessName()
|
|
}
|
|
});
|
|
};
|
|
|
|
const presetColors = [
|
|
{ color: "#a65c3e", name: i18n.locale() === 'cs' ? 'Terra' : 'Terra' },
|
|
{ color: "#2563eb", name: i18n.locale() === 'cs' ? 'Ocean' : 'Ocean' },
|
|
{ color: "#059669", name: i18n.locale() === 'cs' ? 'Forest' : 'Forest' },
|
|
{ color: "#7c3aed", name: i18n.locale() === 'cs' ? 'Royal' : 'Royal' },
|
|
{ color: "#dc2626", name: i18n.locale() === 'cs' ? 'Ruby' : 'Ruby' },
|
|
{ color: "#ea580c", name: i18n.locale() === 'cs' ? 'Sunset' : 'Sunset' },
|
|
{ color: "#0891b2", name: i18n.locale() === 'cs' ? 'Cyan' : 'Cyan' },
|
|
{ color: "#475569", name: i18n.locale() === 'cs' ? 'Slate' : 'Slate' },
|
|
];
|
|
|
|
return (
|
|
<div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? 'opacity-0' : 'opacity-100'}`}>
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Nastavení' : 'Settings'}</h1>
|
|
<p class="text-ink-muted mt-1">{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">
|
|
{/* Business Information */}
|
|
<div class="surface-card p-6">
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<div class="w-10 h-10 rounded-full bg-[hsl(var(--info-subtle))] flex items-center justify-center text-[hsl(var(--info))]">
|
|
<LayoutDashboardIcon />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-ink">{i18n.locale() === 'cs' ? 'Informace o podniku' : 'Business Information'}</h3>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<Input
|
|
type="text"
|
|
label={i18n.locale() === 'cs' ? 'Název podniku' : 'Business Name'}
|
|
value={businessName()}
|
|
onInput={(e) => setBusinessName(e.currentTarget.value)}
|
|
/>
|
|
<Input
|
|
type="email"
|
|
label={i18n.locale() === 'cs' ? 'Kontaktní email' : 'Contact Email'}
|
|
value={businessEmail()}
|
|
onInput={(e) => setBusinessEmail(e.currentTarget.value)}
|
|
placeholder="info@yourbusiness.com"
|
|
/>
|
|
<Input
|
|
type="tel"
|
|
label={i18n.locale() === 'cs' ? 'Telefon' : 'Phone'}
|
|
value={businessPhone()}
|
|
onInput={(e) => setBusinessPhone(e.currentTarget.value)}
|
|
placeholder="+420 123 456 789"
|
|
/>
|
|
<Textarea
|
|
label={i18n.locale() === 'cs' ? 'Adresa' : 'Address'}
|
|
value={businessAddress()}
|
|
onInput={(e) => setBusinessAddress(e.currentTarget.value)}
|
|
rows={2}
|
|
placeholder={i18n.locale() === 'cs' ? 'Vaše adresa...' : 'Your address...'}
|
|
resize="none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Branding Settings */}
|
|
<div class="surface-card p-6">
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-accent">
|
|
<PaletteIcon />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-ink">{i18n.locale() === 'cs' ? 'Branding a vzhled' : 'Branding & Appearance'}</h3>
|
|
</div>
|
|
|
|
{/* Color Picker */}
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-ink-muted mb-3">{i18n.locale() === 'cs' ? 'Barva značky' : 'Brand Color'}</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>
|
|
|
|
{/* Preview */}
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-3">{i18n.locale() === 'cs' ? 'Náhled widgetu' : 'Widget 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-white font-bold"
|
|
style={{ background: brandColor() }}
|
|
>
|
|
{businessName().charAt(0) || 'B'}
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-ink">{businessName() || (i18n.locale() === 'cs' ? 'Váš podnik' : 'Your Business')}</p>
|
|
<p class="text-xs text-ink-muted">{i18n.locale() === 'cs' ? 'Rezervujte si termín' : 'Book an appointment'}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="w-full py-2.5 rounded-lg text-white font-medium text-sm"
|
|
style={{ background: brandColor() }}
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Rezervovat' : 'Book Now'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSaveBrand}
|
|
class="mt-4 w-full py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-colors font-medium"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Uložit změny' : 'Save Changes'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email Notifications Section */}
|
|
<div class="surface-card p-6">
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<div class="w-10 h-10 rounded-full bg-[hsl(var(--info-subtle))] flex items-center justify-center text-[hsl(var(--info))]">
|
|
<MailIcon />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-ink">{i18n.locale() === 'cs' ? 'Emailová oznámení' : 'Email Notifications'}</h3>
|
|
<p class="text-sm text-ink-muted">{i18n.locale() === 'cs' ? 'Přizpůsobte emaily posílané zákazníkům' : 'Customize emails sent to customers'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email Type Tabs */}
|
|
<div class="flex gap-2 mb-4 overflow-x-auto pb-2">
|
|
{[
|
|
{ key: "confirmation", label: i18n.locale() === 'cs' ? 'Potvrzení' : 'Confirmation', icon: CheckCircleIcon },
|
|
{ key: "reminder", label: i18n.locale() === 'cs' ? 'Připomínka' : 'Reminder', icon: BellIcon },
|
|
{ key: "cancellation", label: i18n.locale() === 'cs' ? 'Zrušení' : 'Cancellation', icon: XCircleIcon },
|
|
{ key: "reschedule", label: i18n.locale() === 'cs' ? 'Změna' : 'Reschedule', icon: CalendarIcon },
|
|
].map((type) => (
|
|
<button
|
|
onClick={() => setActiveEmailType(type.key as any)}
|
|
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-white'
|
|
: 'bg-canvas-subtle text-ink-muted hover:text-ink'
|
|
}`}
|
|
>
|
|
<type.icon />
|
|
{type.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Select
|
|
label={i18n.locale() === 'cs' ? 'Šablona stylu' : 'Template Style'}
|
|
value={emailTemplate()}
|
|
onChange={(v) => setEmailTemplate(v)}
|
|
options={[
|
|
{ value: "default", label: i18n.locale() === 'cs' ? 'Výchozí (Bookra)' : 'Default (Bookra)' },
|
|
{ value: "minimal", label: i18n.locale() === 'cs' ? 'Minimální' : 'Minimal' },
|
|
{ value: "professional", label: i18n.locale() === 'cs' ? 'Profesionální' : 'Professional' },
|
|
{ value: "friendly", label: i18n.locale() === 'cs' ? 'Přátelská' : 'Friendly' },
|
|
]}
|
|
/>
|
|
<Select
|
|
label={i18n.locale() === 'cs' ? 'Připomínka před' : 'Reminder Before'}
|
|
value={String(emailSettings().reminderHours)}
|
|
onChange={(v) => setEmailSettings({ ...emailSettings(), reminderHours: Number(v) })}
|
|
options={[
|
|
{ value: "2", label: '2 ' + (i18n.locale() === 'cs' ? 'hodiny' : 'hours') },
|
|
{ value: "12", label: '12 ' + (i18n.locale() === 'cs' ? 'hodin' : 'hours') },
|
|
{ value: "24", label: '24 ' + (i18n.locale() === 'cs' ? 'hodin' : 'hours') },
|
|
{ value: "48", label: '48 ' + (i18n.locale() === 'cs' ? 'hodin' : 'hours') },
|
|
{ value: "72", label: '72 ' + (i18n.locale() === 'cs' ? 'hodin' : 'hours') },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Email Settings Toggles */}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 p-4 bg-canvas-subtle rounded-xl">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={emailSettings().sendConfirmation}
|
|
onChange={(e) => setEmailSettings({ ...emailSettings(), sendConfirmation: e.currentTarget.checked })}
|
|
class="w-4 h-4 rounded border-border text-accent focus:ring-accent"
|
|
/>
|
|
<span class="text-sm text-ink">{i18n.locale() === 'cs' ? 'Odeslat potvrzení' : 'Send confirmation'}</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={emailSettings().sendReminder}
|
|
onChange={(e) => setEmailSettings({ ...emailSettings(), sendReminder: e.currentTarget.checked })}
|
|
class="w-4 h-4 rounded border-border text-accent focus:ring-accent"
|
|
/>
|
|
<span class="text-sm text-ink">{i18n.locale() === 'cs' ? 'Odeslat připomínku' : 'Send reminder'}</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={emailSettings().includeManageLink}
|
|
onChange={(e) => setEmailSettings({ ...emailSettings(), includeManageLink: e.currentTarget.checked })}
|
|
class="w-4 h-4 rounded border-border text-accent focus:ring-accent"
|
|
/>
|
|
<span class="text-sm text-ink">{i18n.locale() === 'cs' ? 'Odkaz pro správu' : 'Management link'}</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={emailSettings().includeChatLink}
|
|
onChange={(e) => setEmailSettings({ ...emailSettings(), includeChatLink: e.currentTarget.checked })}
|
|
class="w-4 h-4 rounded border-border text-accent focus:ring-accent"
|
|
/>
|
|
<span class="text-sm text-ink">{i18n.locale() === 'cs' ? 'Chat s podnikem' : 'Chat with business'}</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-canvas-subtle rounded-xl">
|
|
<div>
|
|
<p class="font-medium text-ink">
|
|
{activeEmailType() === 'confirmation' ? (i18n.locale() === 'cs' ? 'Náhled potvrzení' : 'Confirmation Preview') :
|
|
activeEmailType() === 'reminder' ? (i18n.locale() === 'cs' ? 'Náhled připomínky' : 'Reminder Preview') :
|
|
activeEmailType() === 'cancellation' ? (i18n.locale() === 'cs' ? 'Náhled zrušení' : 'Cancellation Preview') :
|
|
i18n.locale() === 'cs' ? 'Náhled změny' : 'Reschedule Preview'}
|
|
</p>
|
|
<p class="text-sm text-ink-muted">{i18n.locale() === 'cs' ? 'Zobrazit ukázku emailu' : 'See how emails look'}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowEmailPreview(true)}
|
|
class="px-4 py-2 bg-accent text-white rounded-lg hover:bg-accent-hover transition-colors text-sm"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zobrazit náhled' : 'Preview'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email Preview Modal */}
|
|
{showEmailPreview() && (
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" onClick={() => setShowEmailPreview(false)} />
|
|
<div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6 border-b border-border flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-ink">
|
|
{activeEmailType() === 'confirmation' ? (i18n.locale() === 'cs' ? 'Náhled: Potvrzení' : 'Preview: Confirmation') :
|
|
activeEmailType() === 'reminder' ? (i18n.locale() === 'cs' ? 'Náhled: Připomínka' : 'Preview: Reminder') :
|
|
activeEmailType() === 'cancellation' ? (i18n.locale() === 'cs' ? 'Náhled: Zrušení' : 'Preview: Cancellation') :
|
|
i18n.locale() === 'cs' ? 'Náhled: Změna termínu' : 'Preview: Reschedule'}
|
|
</h3>
|
|
<p class="text-sm text-ink-muted mt-1">
|
|
{i18n.locale() === 'cs' ? 'Šablona: ' : 'Template: '}
|
|
{emailTemplate() === 'default' ? (i18n.locale() === 'cs' ? 'Výchozí' : 'Default') :
|
|
emailTemplate() === 'minimal' ? (i18n.locale() === 'cs' ? 'Minimální' : 'Minimal') :
|
|
emailTemplate() === 'professional' ? (i18n.locale() === 'cs' ? 'Profesionální' : 'Professional') :
|
|
i18n.locale() === 'cs' ? 'Přátelská' : 'Friendly'}
|
|
</p>
|
|
</div>
|
|
<button onClick={() => setShowEmailPreview(false)} class="p-2 hover:bg-canvas-subtle rounded-lg transition-colors">
|
|
<XIcon />
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class={`rounded-xl border border-border overflow-hidden ${theme.resolvedTheme() === 'dark' ? 'dark' : ''}`}>
|
|
{/* Email Header */}
|
|
<div class="p-6 border-b border-border" style={{ background: brandColor() + '15' }}>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold shadow-lg"
|
|
style={{ background: brandColor() }}
|
|
>
|
|
{businessName().charAt(0) || 'B'}
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-ink">{businessName() || (i18n.locale() === 'cs' ? 'Váš podnik' : 'Your Business')}</p>
|
|
<p class="text-sm text-ink-muted">
|
|
{activeEmailType() === 'confirmation' ? (i18n.locale() === 'cs' ? 'Potvrzení rezervace' : 'Booking Confirmation') :
|
|
activeEmailType() === 'reminder' ? (i18n.locale() === 'cs' ? 'Připomínka rezervace' : 'Booking Reminder') :
|
|
activeEmailType() === 'cancellation' ? (i18n.locale() === 'cs' ? 'Rezervace zrušena' : 'Booking Cancelled') :
|
|
i18n.locale() === 'cs' ? 'Změna rezervace' : 'Booking Rescheduled'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email Body - Dynamic based on type */}
|
|
<div class="p-6 space-y-4 bg-white dark:bg-canvas">
|
|
<p class="text-ink">{i18n.locale() === 'cs' ? 'Dobrý den,' : 'Hello,'} Alice Johnson</p>
|
|
|
|
{/* Dynamic Message */}
|
|
<p class="text-ink-muted">
|
|
{activeEmailType() === 'confirmation' ?
|
|
(i18n.locale() === 'cs' ? 'Vaše rezervace byla úspěšně potvrzena. Těšíme se na vás!' : 'Your booking has been confirmed. We look forward to seeing you!') :
|
|
activeEmailType() === 'reminder' ?
|
|
(i18n.locale() === 'cs' ? `Vaše rezervace je naplánována za ${emailSettings().reminderHours} hodin.` : `Your booking is scheduled in ${emailSettings().reminderHours} hours.`) :
|
|
activeEmailType() === 'cancellation' ?
|
|
(i18n.locale() === 'cs' ? 'Vaše rezervace byla zrušena podle vaší žádosti.' : 'Your booking has been cancelled as requested.') :
|
|
(i18n.locale() === 'cs' ? 'Váš termín rezervace byl změněn. Zde jsou nové detaily:' : 'Your booking has been rescheduled. Here are the new details:')}
|
|
</p>
|
|
|
|
{/* Show previous date for reschedule */}
|
|
{activeEmailType() === 'reschedule' && (
|
|
<div class="p-3 bg-[hsl(var(--warning-subtle))] rounded-lg">
|
|
<p class="text-sm text-[hsl(var(--warning))]">
|
|
{i18n.locale() === 'cs' ? 'Předchozí termín: ' : 'Previous: '} Friday, Jan 12, 2025 at 2:00 PM
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Služba' : 'Service'}</p>
|
|
<p class="font-medium text-ink">Yoga Flow Class</p>
|
|
</div>
|
|
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Datum a čas' : 'Date & Time'}</p>
|
|
<p class="font-medium text-ink">
|
|
{activeEmailType() === 'reschedule' ?
|
|
(i18n.locale() === 'cs' ? 'NOVÝ TERMÍN: ' : 'NEW TIME: ') : ''}
|
|
Monday, Jan 15, 2025 at 10:00 AM
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-4 bg-canvas-subtle rounded-xl">
|
|
<p class="text-sm text-ink-muted mb-1">{i18n.locale() === 'cs' ? 'Místo' : 'Location'}</p>
|
|
<p class="font-medium text-ink">{businessName() || (i18n.locale() === 'cs' ? 'Váš podnik' : 'Your Business')}</p>
|
|
<p class="text-sm text-ink-muted">{businessAddress() || (i18n.locale() === 'cs' ? 'Vaše adresa' : 'Your Address')}</p>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<Show when={emailSettings().includeManageLink}>
|
|
<div class="flex gap-3 pt-4">
|
|
<button
|
|
class="flex-1 py-2.5 rounded-lg text-white font-medium text-sm shadow-md transition-transform hover:scale-[1.02]"
|
|
style={{ background: brandColor() }}
|
|
>
|
|
{activeEmailType() === 'cancellation' ?
|
|
(i18n.locale() === 'cs' ? 'Vytvořit novou rezervaci' : 'Book Again') :
|
|
activeEmailType() === 'reschedule' ?
|
|
(i18n.locale() === 'cs' ? 'Potvrdit změnu' : 'Confirm Change') :
|
|
(i18n.locale() === 'cs' ? 'Spravovat rezervaci' : 'Manage Booking')}
|
|
</button>
|
|
<Show when={emailSettings().includeCalendarLink && activeEmailType() !== 'cancellation'}>
|
|
<button class="flex-1 py-2.5 border border-border rounded-lg text-ink font-medium text-sm hover:bg-canvas-subtle transition-colors">
|
|
{i18n.locale() === 'cs' ? 'Přidat do kalendáře' : 'Add to Calendar'}
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
|
|
{/* Chat Link */}
|
|
<Show when={emailSettings().includeChatLink && activeEmailType() !== 'cancellation'}>
|
|
<p class="text-center text-sm text-ink-muted pt-2">
|
|
{i18n.locale() === 'cs' ? 'Máte otázky? ' : 'Have questions? '}
|
|
<a href="#" class="text-accent hover:underline">
|
|
{i18n.locale() === 'cs' ? 'Kontaktujte nás' : 'Contact us'}
|
|
</a>
|
|
</p>
|
|
</Show>
|
|
</div>
|
|
|
|
{/* Email Footer */}
|
|
<div class="p-6 bg-canvas-subtle text-center">
|
|
<p class="text-xs text-ink-muted">
|
|
{i18n.locale() === 'cs' ? 'Děkujeme, že používáte naše služby.' : 'Thank you for choosing us.'}
|
|
</p>
|
|
<p class="text-xs text-ink-muted mt-1">{businessEmail() || 'contact@business.com'}</p>
|
|
<p class="text-xs text-ink-subtle mt-3">
|
|
{i18n.locale() === 'cs' ? 'Odesláno přes Bookra' : 'Powered by Bookra'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dark Mode Toggle for Preview */}
|
|
<div class="mt-4 flex justify-center">
|
|
<button
|
|
onClick={() => theme.toggle()}
|
|
class="flex items-center gap-2 px-4 py-2 text-sm text-ink-muted hover:text-ink transition-colors"
|
|
>
|
|
{theme.resolvedTheme() === 'dark' ? <SunIcon /> : <MoonIcon />}
|
|
{theme.resolvedTheme() === 'dark'
|
|
? (i18n.locale() === 'cs' ? 'Náhled ve světlém režimu' : 'Preview in light mode')
|
|
: (i18n.locale() === 'cs' ? 'Náhled v tmavém režimu' : 'Preview in dark mode')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Widget Builder */}
|
|
<div class="surface-card p-6">
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<div class="w-10 h-10 rounded-full bg-[hsl(270_40%_20%)] flex items-center justify-center text-[hsl(270_50%_60%)]">
|
|
<SparklesIcon />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-ink">{i18n.locale() === 'cs' ? 'Widget pro rezervace' : 'Booking Widget'}</h3>
|
|
<p class="text-sm text-ink-muted">{i18n.locale() === 'cs' ? 'Integrujte rezervace na váš web' : 'Integrate booking to your website'}</p>
|
|
</div>
|
|
</div>
|
|
<WidgetBuilder config={{
|
|
tenantSlug: resolvedSummary()?.tenantSlug || "demo-studio",
|
|
publicBookingUrl: resolvedSummary()?.publicBookingUrl || "https://bookra.eu/book/demo-studio",
|
|
tenantName: resolvedSummary()?.tenantName || "Demo Studio",
|
|
primaryColor: brandColor()
|
|
}} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ==========================================
|
|
// SIDEBAR COMPONENT
|
|
// ==========================================
|
|
const Sidebar = () => (
|
|
<aside class="hidden lg:flex flex-col w-72 h-screen sticky top-0 border-r border-border bg-canvas/80 backdrop-blur-xl">
|
|
<div class="p-6 border-b border-border">
|
|
<A href="/" class="inline-flex items-center gap-3 group">
|
|
<img src="/bookra-logo.svg" alt="Bookra" class="h-9 w-auto transition-transform group-hover:scale-105 dark:invert" />
|
|
</A>
|
|
<Show when={isDemoMode()}>
|
|
<div class="mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r from-[hsl(var(--warning-subtle))] to-[hsl(var(--warning-soft))] text-[hsl(var(--warning))] text-xs font-semibold shadow-sm">
|
|
<SparklesIcon /> {i18n.locale() === 'cs' ? 'Demo režim' : 'Demo Mode'}
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
<nav class="flex-1 p-4 space-y-1">
|
|
{navItems.map((item) => (
|
|
<button
|
|
onClick={() => changeSection(item.id)}
|
|
class={`
|
|
group w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 relative overflow-hidden
|
|
${activeSection() === item.id
|
|
? "bg-gradient-to-r from-accent-subtle to-accent-soft text-accent shadow-sm"
|
|
: "text-ink-muted hover:text-ink hover:bg-canvas-subtle/80"
|
|
}
|
|
`}
|
|
>
|
|
{/* Active indicator */}
|
|
{activeSection() === item.id && (
|
|
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full" />
|
|
)}
|
|
<span class={`transition-transform duration-300 ${activeSection() === item.id ? 'translate-x-1' : 'group-hover:translate-x-0.5'}`}>
|
|
<item.icon />
|
|
</span>
|
|
<span class="relative">{item.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-border space-y-2">
|
|
{/* Theme Toggle */}
|
|
<button
|
|
onClick={() => theme.toggle()}
|
|
class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-ink-muted hover:text-ink hover:bg-canvas-subtle/80 transition-all duration-300 group"
|
|
>
|
|
<span class="transition-transform group-hover:scale-110">
|
|
{theme.resolvedTheme() === 'dark' ? <SunIcon /> : <MoonIcon />}
|
|
</span>
|
|
{theme.resolvedTheme() === 'dark'
|
|
? (i18n.locale() === 'cs' ? 'Světlý režim' : 'Light Mode')
|
|
: (i18n.locale() === 'cs' ? 'Tmavý režim' : 'Dark Mode')
|
|
}
|
|
</button>
|
|
|
|
<Show when={auth.session()}>
|
|
<div class="flex items-center gap-3 p-3 rounded-xl bg-canvas-subtle/80 hover:bg-canvas-muted transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center shadow-sm">
|
|
<span class="font-bold text-accent text-sm">{auth.session()?.user?.name?.charAt(0) || 'U'}</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-semibold text-ink truncate">{auth.session()?.user?.name}</p>
|
|
<p class="text-xs text-ink-muted truncate">{auth.session()?.user?.email}</p>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
<button
|
|
onClick={() => void auth.signOut()}
|
|
class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-ink-muted hover:text-[hsl(var(--error))] hover:bg-[hsl(var(--error-soft))] transition-all duration-300 group"
|
|
>
|
|
<span class="group-hover:translate-x-0.5 transition-transform"><LogOutIcon /></span>
|
|
{i18n.t("auth.signOut")}
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
|
|
// ==========================================
|
|
// MOBILE MENU
|
|
// ==========================================
|
|
const MobileMenu = () => (
|
|
<Show when={isMobileMenuOpen()}>
|
|
<div class="lg:hidden fixed inset-0 z-50">
|
|
<div
|
|
class="absolute inset-0 bg-ink/40 backdrop-blur-sm transition-opacity"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
/>
|
|
<div class="absolute left-0 top-0 h-full w-72 bg-canvas shadow-2xl transform transition-transform">
|
|
<div class="p-4 border-b border-border flex items-center justify-between">
|
|
<img src="/bookra-logo.svg" alt="Bookra" class="h-8 w-auto dark:invert" />
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
class="p-2 hover:bg-canvas-subtle rounded-xl transition-colors"
|
|
>
|
|
<XIcon />
|
|
</button>
|
|
</div>
|
|
<nav class="p-4 space-y-1">
|
|
{navItems.map((item) => (
|
|
<button
|
|
onClick={() => { changeSection(item.id); setIsMobileMenuOpen(false); }}
|
|
class={`
|
|
w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all
|
|
${activeSection() === item.id
|
|
? "bg-accent-subtle text-accent"
|
|
: "text-ink-muted hover:bg-canvas-subtle"
|
|
}
|
|
`}
|
|
>
|
|
<item.icon /> {item.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
);
|
|
|
|
// ==========================================
|
|
// CUSTOMERS PAGE
|
|
// ==========================================
|
|
const CustomersPage = () => {
|
|
const [searchQuery, setSearchQuery] = createSignal("");
|
|
const [selectedCustomer, setSelectedCustomer] = createSignal<any>(null);
|
|
const [showCustomerDetail, setShowCustomerDetail] = createSignal(false);
|
|
const [filterStatus, setFilterStatus] = createSignal<"all" | "active" | "vip" | "inactive">("all");
|
|
|
|
const [customers, { refetch: refetchCustomers }] = createResource(token, async (bearer) => {
|
|
if (!bearer || bearer.startsWith("demo.")) return getDemoCustomers();
|
|
const response = await (apiClient as any).GET("/v1/catalog/customers", {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
return response.data ?? [];
|
|
});
|
|
|
|
// Get all bookings for linking
|
|
const [allBookings] = createResource(token, async (bearer) => {
|
|
if (!bearer || bearer.startsWith("demo.")) return demoData().summary.allBookings || [];
|
|
const response = await (apiClient as any).GET("/v1/catalog/bookings", {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
return response.data ?? [];
|
|
});
|
|
|
|
const getDemoCustomers = () => [
|
|
{ id: "1", name: "Alice Johnson", email: "alice@example.com", phone: "+420 123 456 789", bookingsCount: 5, lastBookingAt: new Date(Date.now() - 86400000).toISOString(), status: "active", notes: "Allergic to strong scents" },
|
|
{ id: "2", name: "Bob Smith", email: "bob@example.com", phone: "+420 987 654 321", bookingsCount: 3, lastBookingAt: new Date(Date.now() - 172800000).toISOString(), status: "active", notes: "" },
|
|
{ id: "3", name: "Carol White", email: "carol@example.com", phone: "+420 555 666 777", bookingsCount: 8, lastBookingAt: new Date(Date.now() - 259200000).toISOString(), status: "vip", notes: "Prefers morning slots" },
|
|
{ id: "4", name: "David Brown", email: "david@example.com", phone: "+420 111 222 333", bookingsCount: 1, lastBookingAt: new Date(Date.now() - 604800000).toISOString(), status: "inactive", notes: "" },
|
|
{ id: "5", name: "Emma Wilson", email: "emma@example.com", phone: "+420 444 555 666", bookingsCount: 12, lastBookingAt: new Date(Date.now() - 432000000).toISOString(), status: "vip", notes: "Loyal customer since 2020" },
|
|
];
|
|
|
|
const resolvedCustomers = () => (customers.latest as any[]) ?? getDemoCustomers();
|
|
const resolvedBookings = () => (allBookings.latest as any[]) ?? demoData().summary.allBookings ?? [];
|
|
|
|
// Filter customers
|
|
const filteredCustomers = createMemo(() => {
|
|
let result = resolvedCustomers();
|
|
|
|
// Status filter
|
|
if (filterStatus() !== "all") {
|
|
result = result.filter((c: any) => c.status === filterStatus());
|
|
}
|
|
|
|
// Search filter
|
|
if (searchQuery().trim()) {
|
|
const query = searchQuery().toLowerCase();
|
|
result = result.filter((c: any) =>
|
|
c.name?.toLowerCase().includes(query) ||
|
|
c.email?.toLowerCase().includes(query) ||
|
|
c.phone?.toLowerCase().includes(query)
|
|
);
|
|
}
|
|
|
|
// Sort by last booking, newest first
|
|
return result.sort((a: any, b: any) => {
|
|
if (!a.lastBookingAt) return 1;
|
|
if (!b.lastBookingAt) return -1;
|
|
return new Date(b.lastBookingAt).getTime() - new Date(a.lastBookingAt).getTime();
|
|
});
|
|
});
|
|
|
|
// Get customer bookings
|
|
const getCustomerBookings = (customerEmail: string) => {
|
|
return resolvedBookings()
|
|
.filter((b: any) => b.customerEmail?.toLowerCase() === customerEmail?.toLowerCase())
|
|
.sort((a: any, b: any) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
|
|
};
|
|
|
|
const openCustomerDetail = (customer: any) => {
|
|
setSelectedCustomer(customer);
|
|
setShowCustomerDetail(true);
|
|
};
|
|
|
|
const statusColors: Record<string, string> = {
|
|
active: "bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]",
|
|
vip: "bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]",
|
|
inactive: "bg-canvas-muted text-ink-muted"
|
|
};
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
active: i18n.locale() === 'cs' ? 'Aktivní' : 'Active',
|
|
vip: "VIP",
|
|
inactive: i18n.locale() === 'cs' ? 'Neaktivní' : 'Inactive'
|
|
};
|
|
|
|
const bookingStatusColors: Record<string, string> = {
|
|
confirmed: "bg-[hsl(var(--success-subtle))]",
|
|
pending: "bg-[hsl(var(--warning-subtle))]",
|
|
cancelled: "bg-[hsl(var(--error-subtle))]",
|
|
completed: "bg-canvas-muted"
|
|
};
|
|
|
|
return (
|
|
<div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? 'opacity-0' : 'opacity-100'}`}>
|
|
{/* Header */}
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Zákazníci' : 'Customers'}</h1>
|
|
<p class="text-ink-muted mt-1">{filteredCustomers().length} {i18n.locale() === 'cs' ? 'zákazníků' : 'customers'}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<Select
|
|
value={filterStatus()}
|
|
onChange={(v) => setFilterStatus(v as any)}
|
|
class="min-w-[130px]"
|
|
options={[
|
|
{ value: "all", label: i18n.locale() === 'cs' ? 'Všichni' : 'All' },
|
|
{ value: "active", label: i18n.locale() === 'cs' ? 'Aktivní' : 'Active' },
|
|
{ value: "vip", label: "VIP" },
|
|
{ value: "inactive", label: i18n.locale() === 'cs' ? 'Neaktivní' : 'Inactive' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div class="surface-card p-4">
|
|
<Input
|
|
type="text"
|
|
placeholder={i18n.locale() === 'cs' ? 'Hledat podle jména, emailu nebo telefonu...' : 'Search by name, email, or phone...'}
|
|
value={searchQuery()}
|
|
onInput={(e) => setSearchQuery(e.currentTarget.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Customers Table */}
|
|
<div class="surface-card overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-canvas-subtle border-b border-border">
|
|
<tr>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Jméno' : 'Name'}</th>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Kontakt' : 'Contact'}</th>
|
|
<th class="text-center px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Rezervace' : 'Bookings'}</th>
|
|
<th class="text-left px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Poslední návštěva' : 'Last Visit'}</th>
|
|
<th class="text-center px-6 py-4 text-sm font-semibold text-ink-muted">{i18n.locale() === 'cs' ? 'Status' : 'Status'}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border">
|
|
{filteredCustomers().map((customer: any, index: number) => (
|
|
<tr
|
|
class="group hover:bg-canvas-subtle/50 transition-colors cursor-pointer"
|
|
onClick={() => openCustomerDetail(customer)}
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-sm font-bold text-accent">
|
|
{customer.name.split(' ').map((n: string) => n[0]).join('')}
|
|
</div>
|
|
<span class="font-medium text-ink">{customer.name}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm text-ink-muted">
|
|
<p>{customer.email}</p>
|
|
<p class="text-ink-subtle">{customer.phone}</p>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium bg-[hsl(var(--info-soft))] text-[hsl(var(--info))]">
|
|
{customer.bookingsCount}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-ink-muted">
|
|
{customer.lastBookingAt ? new Date(customer.lastBookingAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '-'}
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<span class={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusColors[customer.status]}`}>
|
|
{statusLabels[customer.status]}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{filteredCustomers().length === 0 && (
|
|
<div class="p-12 text-center">
|
|
<div class="w-16 h-16 rounded-full bg-canvas-subtle flex items-center justify-center mx-auto mb-4">
|
|
<UsersIcon />
|
|
</div>
|
|
<p class="text-ink-muted">{i18n.locale() === 'cs' ? 'Žádní zákazníci nenalezeni' : 'No customers found'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Customer Detail Modal */}
|
|
{showCustomerDetail() && selectedCustomer() && (
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" onClick={() => setShowCustomerDetail(false)} />
|
|
<div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6 border-b border-border flex items-center justify-between">
|
|
<h3 class="text-xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Detail zákazníka' : 'Customer Details'}</h3>
|
|
<button onClick={() => setShowCustomerDetail(false)} class="p-2 hover:bg-canvas-subtle rounded-lg transition-colors">
|
|
<XIcon />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-6">
|
|
{/* Customer Info */}
|
|
<div class="flex items-start gap-4 p-4 bg-canvas-subtle rounded-xl">
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-xl font-bold text-accent">
|
|
{selectedCustomer().name.split(' ').map((n: string) => n[0]).join('')}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3">
|
|
<h4 class="font-semibold text-ink text-lg">{selectedCustomer().name}</h4>
|
|
<span class={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[selectedCustomer().status]}`}>
|
|
{statusLabels[selectedCustomer().status]}
|
|
</span>
|
|
</div>
|
|
<p class="text-ink-muted">{selectedCustomer().email}</p>
|
|
<p class="text-ink-subtle text-sm">{selectedCustomer().phone}</p>
|
|
{selectedCustomer().notes && (
|
|
<p class="mt-2 text-sm text-ink-muted bg-canvas p-2 rounded-lg">{selectedCustomer().notes}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Booking Stats */}
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="p-4 bg-canvas-subtle rounded-xl text-center">
|
|
<p class="text-2xl font-bold text-ink">{selectedCustomer().bookingsCount}</p>
|
|
<p class="text-sm text-ink-muted">{i18n.locale() === 'cs' ? 'Celkem rezervací' : 'Total Bookings'}</p>
|
|
</div>
|
|
<div class="p-4 bg-canvas-subtle rounded-xl text-center">
|
|
<p class="text-2xl font-bold text-[hsl(var(--success))]">
|
|
{getCustomerBookings(selectedCustomer().email).filter((b: any) => b.status === 'confirmed').length}
|
|
</p>
|
|
<p class="text-sm text-ink-muted">{i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed'}</p>
|
|
</div>
|
|
<div class="p-4 bg-canvas-subtle rounded-xl text-center">
|
|
<p class="text-2xl font-bold text-ink">
|
|
{selectedCustomer().lastBookingAt ? new Date(selectedCustomer().lastBookingAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '-'}
|
|
</p>
|
|
<p class="text-sm text-ink-muted">{i18n.locale() === 'cs' ? 'Poslední návštěva' : 'Last Visit'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Booking History */}
|
|
<div>
|
|
<h5 class="font-semibold text-ink mb-4">{i18n.locale() === 'cs' ? 'Historie rezervací' : 'Booking History'}</h5>
|
|
<div class="space-y-3 max-h-[300px] overflow-y-auto">
|
|
{getCustomerBookings(selectedCustomer().email).length > 0 ? (
|
|
getCustomerBookings(selectedCustomer().email).map((booking: any, index: number) => (
|
|
<div
|
|
class="flex items-center gap-4 p-3 bg-canvas-subtle rounded-xl border border-border"
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<div class={`w-2 h-12 rounded-full ${bookingStatusColors[booking.status] || 'bg-canvas-muted'}`} />
|
|
<div class="flex-1">
|
|
<p class="font-medium text-ink">{booking.service}</p>
|
|
<p class="text-sm text-ink-muted">
|
|
{new Date(booking.startsAt).toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
|
{' • '}
|
|
{booking.location}
|
|
</p>
|
|
</div>
|
|
<span class={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
|
booking.status === 'confirmed' ? 'bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]' :
|
|
booking.status === 'pending' ? 'bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]' :
|
|
booking.status === 'cancelled' ? 'bg-[hsl(var(--error-soft))] text-[hsl(var(--error))]' :
|
|
'bg-canvas-muted text-ink-muted'
|
|
}`}>
|
|
{booking.status === 'confirmed' ? (i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed') :
|
|
booking.status === 'pending' ? (i18n.locale() === 'cs' ? 'Čeká' : 'Pending') :
|
|
booking.status === 'cancelled' ? (i18n.locale() === 'cs' ? 'Zrušeno' : 'Cancelled') :
|
|
i18n.locale() === 'cs' ? 'Dokončeno' : 'Completed'}
|
|
</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p class="text-ink-muted text-center py-4">{i18n.locale() === 'cs' ? 'Žádná historie rezervací' : 'No booking history'}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 border-t border-border">
|
|
<button
|
|
onClick={() => setShowCustomerDetail(false)}
|
|
class="w-full px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-colors"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zavřít' : 'Close'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ==========================================
|
|
// ZONES & AVAILABILITY PAGE
|
|
// ==========================================
|
|
const ZonesPage = () => {
|
|
const [activeTab, setActiveTab] = createSignal<"zones" | "blocked" | "hours">("zones");
|
|
const [showAddZone, setShowAddZone] = createSignal(false);
|
|
const [showAddBlocked, setShowAddBlocked] = createSignal(false);
|
|
const [newZoneName, setNewZoneName] = createSignal("");
|
|
const [newZoneType, setNewZoneType] = createSignal("room");
|
|
const [newZoneCapacity, setNewZoneCapacity] = createSignal(10);
|
|
const [newBlockedDate, setNewBlockedDate] = createSignal("");
|
|
const [newBlockedReason, setNewBlockedReason] = createSignal("");
|
|
const [newBlockedType, setNewBlockedType] = createSignal<"full" | "partial">("full");
|
|
|
|
// Fetch locations/zones
|
|
const [locations, { refetch: refetchLocations }] = createResource(token, async (bearer) => {
|
|
if (!bearer || bearer.startsWith("demo.")) return demoData().zones;
|
|
const response = await (apiClient as any).GET("/v1/catalog/locations", {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
return response.data ?? [];
|
|
});
|
|
|
|
// Fetch blocked days
|
|
const [blockedDays, { refetch: refetchBlockedDays }] = createResource(token, async (bearer) => {
|
|
if (!bearer || bearer.startsWith("demo.")) return demoData().blockedDays;
|
|
const response = await (apiClient as any).GET("/v1/catalog/blocked-days", {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
return response.data ?? [];
|
|
});
|
|
|
|
// Fetch working hours
|
|
const [workingHours, { refetch: refetchWorkingHours }] = createResource(token, async (bearer) => {
|
|
if (!bearer || bearer.startsWith("demo.")) return demoData().workingHours;
|
|
const response = await (apiClient as any).GET("/v1/catalog/working-hours", {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
return response.data ?? [];
|
|
});
|
|
|
|
const demoData = () => ({
|
|
zones: [
|
|
{ id: "1", name: "Main Studio", capacity: 15, type: "room", bookingsToday: 8 },
|
|
{ id: "2", name: "Treatment Room A", capacity: 2, type: "private", bookingsToday: 4 },
|
|
{ id: "3", name: "Treatment Room B", capacity: 2, type: "private", bookingsToday: 3 },
|
|
{ id: "4", name: "Group Hall", capacity: 30, type: "hall", bookingsToday: 12 },
|
|
],
|
|
blockedDays: [
|
|
{ id: "1", date: new Date(Date.now() + 604800000).toISOString(), reason: "Maintenance", type: "full" },
|
|
{ id: "2", date: new Date(Date.now() + 1209600000).toISOString(), reason: "Holiday", type: "full" },
|
|
{ id: "3", date: new Date(Date.now() + 259200000).toISOString(), reason: "Private Event", type: "partial" },
|
|
],
|
|
workingHours: [
|
|
{ dayOfWeek: 1, day: "Mon", open: "09:00", close: "18:00", isOpen: true },
|
|
{ dayOfWeek: 2, day: "Tue", open: "09:00", close: "18:00", isOpen: true },
|
|
{ dayOfWeek: 3, day: "Wed", open: "09:00", close: "18:00", isOpen: true },
|
|
{ dayOfWeek: 4, day: "Thu", open: "09:00", close: "18:00", isOpen: true },
|
|
{ dayOfWeek: 5, day: "Fri", open: "09:00", close: "17:00", isOpen: true },
|
|
{ dayOfWeek: 6, day: "Sat", open: "10:00", close: "14:00", isOpen: true },
|
|
{ dayOfWeek: 0, day: "Sun", open: "10:00", close: "14:00", isOpen: false },
|
|
],
|
|
});
|
|
|
|
const resolvedLocations = () => (locations.latest as any[]) ?? demoData().zones;
|
|
const resolvedBlockedDays = () => (blockedDays.latest as any[]) ?? demoData().blockedDays;
|
|
const resolvedWorkingHours = () => (workingHours.latest as any[]) ?? demoData().workingHours;
|
|
|
|
const handleAddZone = async () => {
|
|
const bearer = token();
|
|
if (!bearer || bearer.startsWith("demo.")) {
|
|
setShowAddZone(false);
|
|
return;
|
|
}
|
|
await (apiClient as any).POST("/v1/catalog/locations", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: { name: newZoneName(), type: newZoneType(), capacity: newZoneCapacity() }
|
|
});
|
|
setNewZoneName("");
|
|
setNewZoneType("room");
|
|
setNewZoneCapacity(10);
|
|
setShowAddZone(false);
|
|
void refetchLocations();
|
|
};
|
|
|
|
const handleAddBlockedDay = async () => {
|
|
const bearer = token();
|
|
if (!bearer || bearer.startsWith("demo.")) {
|
|
setShowAddBlocked(false);
|
|
return;
|
|
}
|
|
const date = new Date(newBlockedDate());
|
|
await (apiClient as any).POST("/v1/catalog/blocked-days", {
|
|
headers: { Authorization: `Bearer ${bearer}` },
|
|
body: {
|
|
date: date.toISOString(),
|
|
reason: newBlockedReason(),
|
|
type: newBlockedType()
|
|
}
|
|
});
|
|
setNewBlockedDate("");
|
|
setNewBlockedReason("");
|
|
setNewBlockedType("full");
|
|
setShowAddBlocked(false);
|
|
void refetchBlockedDays();
|
|
};
|
|
|
|
const handleDeleteBlockedDay = async (id: string) => {
|
|
const bearer = token();
|
|
if (!bearer || bearer.startsWith("demo.")) return;
|
|
await (apiClient as any).DELETE(`/v1/catalog/blocked-days/${id}` as string, {
|
|
headers: { Authorization: `Bearer ${bearer}` }
|
|
});
|
|
void refetchBlockedDays();
|
|
};
|
|
|
|
return (
|
|
<div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? 'opacity-0' : 'opacity-100'}`}>
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-ink">{i18n.locale() === 'cs' ? 'Zony a dostupnost' : 'Zones & Availability'}</h1>
|
|
<p class="text-ink-muted mt-1">{i18n.locale() === 'cs' ? 'Spravujte prostory, blokované dny a pracovní dobu' : 'Manage spaces, blocked days and working hours'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div class="flex gap-2 p-1 bg-canvas-subtle rounded-xl w-fit">
|
|
{[
|
|
{ id: "zones", label: i18n.locale() === 'cs' ? 'Zony' : 'Zones', icon: MapPinIcon },
|
|
{ id: "blocked", label: i18n.locale() === 'cs' ? 'Blokované dny' : 'Blocked Days', icon: BanIcon },
|
|
{ id: "hours", label: i18n.locale() === 'cs' ? 'Pracovní doba' : 'Working Hours', icon: ClockIcon },
|
|
].map((tab) => (
|
|
<button
|
|
onClick={() => setActiveTab(tab.id as any)}
|
|
class={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
activeTab() === tab.id
|
|
? 'bg-canvas text-accent shadow-sm'
|
|
: 'text-ink-muted hover:text-ink'
|
|
}`}
|
|
>
|
|
<tab.icon />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Zones Tab */}
|
|
{activeTab() === "zones" && (
|
|
<div class="surface-card overflow-hidden">
|
|
<div class="p-6 border-b border-border flex items-center justify-between">
|
|
<h3 class="text-lg font-display font-semibold text-ink">{i18n.locale() === 'cs' ? 'Prostory a zony' : 'Spaces & Zones'}</h3>
|
|
<button
|
|
onClick={() => setShowAddZone(true)}
|
|
class="btn-primary text-sm"
|
|
>
|
|
<PlusIcon />
|
|
{i18n.locale() === 'cs' ? 'Přidat zonu' : 'Add Zone'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Add Zone Modal */}
|
|
<Show when={showAddZone()}>
|
|
<div class="p-6 border-b border-border bg-canvas-subtle/50">
|
|
<h4 class="font-medium text-ink mb-4">{i18n.locale() === 'cs' ? 'Nová zóna' : 'New Zone'}</h4>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<Input
|
|
type="text"
|
|
label={i18n.locale() === 'cs' ? 'Název' : 'Name'}
|
|
value={newZoneName()}
|
|
onInput={(e) => setNewZoneName(e.currentTarget.value)}
|
|
placeholder={i18n.locale() === 'cs' ? 'např. Hlavní sál' : 'e.g. Main Hall'}
|
|
/>
|
|
<Select
|
|
label={i18n.locale() === 'cs' ? 'Typ' : 'Type'}
|
|
value={newZoneType()}
|
|
onChange={(v) => setNewZoneType(v)}
|
|
options={[
|
|
{ value: "room", label: i18n.locale() === 'cs' ? 'Místnost' : 'Room' },
|
|
{ value: "private", label: i18n.locale() === 'cs' ? 'Soukromá místnost' : 'Private Room' },
|
|
{ value: "hall", label: i18n.locale() === 'cs' ? 'Sál' : 'Hall' },
|
|
]}
|
|
/>
|
|
<Input
|
|
type="number"
|
|
label={i18n.locale() === 'cs' ? 'Kapacita' : 'Capacity'}
|
|
value={newZoneCapacity()}
|
|
onInput={(e) => setNewZoneCapacity(parseInt(e.currentTarget.value) || 10)}
|
|
/>
|
|
</div>
|
|
<div class="flex gap-3 mt-4">
|
|
<button onClick={handleAddZone} class="btn-primary text-sm">
|
|
{i18n.locale() === 'cs' ? 'Uložit' : 'Save'}
|
|
</button>
|
|
<button onClick={() => setShowAddZone(false)} class="btn-secondary text-sm">
|
|
{i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
|
|
<div class="divide-y divide-border">
|
|
{resolvedLocations().map((zone: any, index: number) => (
|
|
<div
|
|
class="group flex items-center justify-between p-6 hover:bg-canvas-subtle/50 transition-colors"
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-[hsl(var(--info-subtle))] flex items-center justify-center text-[hsl(var(--info))]">
|
|
<MapPinIcon />
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-ink">{zone.name}</h4>
|
|
<p class="text-sm text-ink-muted">
|
|
{zone.type === 'room' ? (i18n.locale() === 'cs' ? 'Místnost' : 'Room') :
|
|
zone.type === 'private' ? (i18n.locale() === 'cs' ? 'Soukromá místnost' : 'Private Room') :
|
|
i18n.locale() === 'cs' ? 'Sál' : 'Hall'}
|
|
{' • '}
|
|
{i18n.locale() === 'cs' ? 'Kapacita' : 'Capacity'}: {zone.capacity}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="text-right">
|
|
<p class="text-sm font-medium text-ink">{zone.bookingsToday}</p>
|
|
<p class="text-xs text-ink-muted">{i18n.locale() === 'cs' ? 'rezervací dnes' : 'bookings today'}</p>
|
|
</div>
|
|
<button class="p-2 text-ink-muted hover:text-ink hover:bg-canvas-subtle rounded-lg transition-colors opacity-0 group-hover:opacity-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Blocked Days Tab */}
|
|
{activeTab() === "blocked" && (
|
|
<div class="space-y-6">
|
|
<div class="surface-card p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 class="text-lg font-display font-semibold text-ink">{i18n.locale() === 'cs' ? 'Blokované dny' : 'Blocked Days'}</h3>
|
|
<p class="text-sm text-ink-muted mt-1">{i18n.locale() === 'cs' ? 'Zákazníci nebudou moci rezervovat v tyto dny' : 'Customers will not be able to book on these days'}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowAddBlocked(true)}
|
|
class="btn-primary text-sm"
|
|
>
|
|
<PlusIcon />
|
|
{i18n.locale() === 'cs' ? 'Blokovat den' : 'Block Day'}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
{resolvedBlockedDays().map((blocked: any, index: number) => (
|
|
<div
|
|
class="flex items-center justify-between p-4 bg-canvas-subtle rounded-xl border border-border"
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class={`w-10 h-10 rounded-lg flex items-center justify-center ${
|
|
blocked.type === 'full' ? 'bg-[hsl(var(--error-subtle))] text-[hsl(var(--error))]' : 'bg-[hsl(var(--warning-subtle))] text-[hsl(var(--warning))]'
|
|
}`}>
|
|
{blocked.type === 'full' ? <BanIcon /> : <ClockOffIcon />}
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-ink">{new Date(blocked.date).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
|
|
<p class="text-sm text-ink-muted">{blocked.reason}</p>
|
|
</div>
|
|
</div>
|
|
<span class={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${
|
|
blocked.type === 'full' ? 'bg-[hsl(var(--error-soft))] text-[hsl(var(--error))]' : 'bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]'
|
|
}`}>
|
|
{blocked.type === 'full'
|
|
? (i18n.locale() === 'cs' ? 'Celý den' : 'Full Day')
|
|
: (i18n.locale() === 'cs' ? 'Částečný' : 'Partial')
|
|
}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add Blocked Day Form */}
|
|
<Show when={showAddBlocked()}>
|
|
<div class="mt-6 p-6 bg-canvas-subtle rounded-xl border border-border">
|
|
<h4 class="font-medium text-ink mb-4">{i18n.locale() === 'cs' ? 'Blokovat nový den' : 'Block New Day'}</h4>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
|
|
<Input
|
|
type="date"
|
|
label={i18n.locale() === 'cs' ? 'Datum' : 'Date'}
|
|
value={newBlockedDate()}
|
|
onInput={(e) => setNewBlockedDate(e.currentTarget.value)}
|
|
/>
|
|
<Select
|
|
label={i18n.locale() === 'cs' ? 'Typ' : 'Type'}
|
|
value={newBlockedType()}
|
|
onChange={(v) => setNewBlockedType(v as "full" | "partial")}
|
|
options={[
|
|
{ value: "full", label: i18n.locale() === 'cs' ? 'Celý den' : 'Full Day' },
|
|
{ value: "partial", label: i18n.locale() === 'cs' ? 'Částečný' : 'Partial' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<Input
|
|
type="text"
|
|
label={i18n.locale() === 'cs' ? 'Důvod' : 'Reason'}
|
|
value={newBlockedReason()}
|
|
onInput={(e) => setNewBlockedReason(e.currentTarget.value)}
|
|
placeholder={i18n.locale() === 'cs' ? 'např. Dovolená, Údržba...' : 'e.g. Holiday, Maintenance...'}
|
|
/>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button
|
|
onClick={handleAddBlockedDay}
|
|
disabled={!newBlockedDate() || !newBlockedReason()}
|
|
class="px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Blokovat' : 'Block'}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setShowAddBlocked(false);
|
|
setNewBlockedDate("");
|
|
setNewBlockedReason("");
|
|
setNewBlockedType("full");
|
|
}}
|
|
class="px-4 py-2.5 border border-border rounded-xl text-ink hover:bg-canvas transition-colors text-sm"
|
|
>
|
|
{i18n.locale() === 'cs' ? 'Zrušit' : 'Cancel'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
{/* Quick Block */}
|
|
<div class="surface-card p-6">
|
|
<h3 class="text-lg font-display font-semibold text-ink mb-4">{i18n.locale() === 'cs' ? 'Rychlé blokování' : 'Quick Block'}</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<button class="p-4 bg-canvas-subtle rounded-xl border border-border hover:border-[hsl(var(--error))]/30 hover:bg-[hsl(var(--error-soft))]/50 transition-all text-left">
|
|
<div class="w-8 h-8 rounded-lg bg-[hsl(var(--error-subtle))] flex items-center justify-center text-[hsl(var(--error))] mb-3">
|
|
<BanIcon />
|
|
</div>
|
|
<p class="font-medium text-ink text-sm">{i18n.locale() === 'cs' ? 'Víkendy' : 'Weekends'}</p>
|
|
<p class="text-xs text-ink-muted">{i18n.locale() === 'cs' ? 'Blokovat všechny víkendy' : 'Block all weekends'}</p>
|
|
</button>
|
|
<button class="p-4 bg-canvas-subtle rounded-xl border border-border hover:border-[hsl(var(--warning))]/30 hover:bg-[hsl(var(--warning-soft))]/50 transition-all text-left">
|
|
<div class="w-8 h-8 rounded-lg bg-[hsl(var(--warning-subtle))] flex items-center justify-center text-[hsl(var(--warning))] mb-3">
|
|
<ClockOffIcon />
|
|
</div>
|
|
<p class="font-medium text-ink text-sm">{i18n.locale() === 'cs' ? 'Státní svátky' : 'Public Holidays'}</p>
|
|
<p class="text-xs text-ink-muted">{i18n.locale() === 'cs' ? 'Importovat oficiální svátky' : 'Import official holidays'}</p>
|
|
</button>
|
|
<button class="p-4 bg-canvas-subtle rounded-xl border border-border hover:border-accent/30 hover:bg-accent-subtle/50 transition-all text-left">
|
|
<div class="w-8 h-8 rounded-lg bg-accent-subtle flex items-center justify-center text-accent mb-3">
|
|
<CalendarDaysIcon />
|
|
</div>
|
|
<p class="font-medium text-ink text-sm">{i18n.locale() === 'cs' ? 'Rekurentní' : 'Recurring'}</p>
|
|
<p class="text-xs text-ink-muted">{i18n.locale() === 'cs' ? 'Nastavit pravidelné volno' : 'Set regular time off'}</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Working Hours Tab */}
|
|
{activeTab() === "hours" && (
|
|
<div class="surface-card overflow-hidden">
|
|
<div class="p-6 border-b border-border">
|
|
<h3 class="text-lg font-display font-semibold text-ink">{i18n.locale() === 'cs' ? 'Pracovní doba' : 'Working Hours'}</h3>
|
|
<p class="text-sm text-ink-muted mt-1">{i18n.locale() === 'cs' ? 'Nastavte kdy jste otevření pro rezervace' : 'Set when you are open for bookings'}</p>
|
|
</div>
|
|
<div class="divide-y divide-border">
|
|
{resolvedWorkingHours().map((hours: any, index: number) => (
|
|
<div
|
|
class="flex items-center justify-between p-6 hover:bg-canvas-subtle/50 transition-colors"
|
|
style={{ "animation-delay": `${index * 50}ms` }}
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class={`w-12 h-12 rounded-xl flex items-center justify-center ${
|
|
hours.isOpen ? 'bg-[hsl(var(--success-subtle))] text-[hsl(var(--success))]' : 'bg-canvas-muted text-ink-muted'
|
|
}`}>
|
|
<span class="text-lg font-display font-bold">{hours.day}</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-ink">
|
|
{hours.day === 'Mon' ? (i18n.locale() === 'cs' ? 'Pondělí' : 'Monday') :
|
|
hours.day === 'Tue' ? (i18n.locale() === 'cs' ? 'Úterý' : 'Tuesday') :
|
|
hours.day === 'Wed' ? (i18n.locale() === 'cs' ? 'Středa' : 'Wednesday') :
|
|
hours.day === 'Thu' ? (i18n.locale() === 'cs' ? 'Čtvrtek' : 'Thursday') :
|
|
hours.day === 'Fri' ? (i18n.locale() === 'cs' ? 'Pátek' : 'Friday') :
|
|
hours.day === 'Sat' ? (i18n.locale() === 'cs' ? 'Sobota' : 'Saturday') :
|
|
i18n.locale() === 'cs' ? 'Neděle' : 'Sunday'}
|
|
</p>
|
|
<p class="text-sm text-ink-muted">
|
|
{hours.isOpen ? `${hours.open} - ${hours.close}` : (i18n.locale() === 'cs' ? 'Zavřeno' : 'Closed')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={hours.isOpen}
|
|
class="sr-only peer"
|
|
readOnly
|
|
/>
|
|
<div class="w-11 h-6 bg-canvas-muted peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ==========================================
|
|
// RENDER
|
|
// ==========================================
|
|
const ActivePage = () => {
|
|
switch (activeSection()) {
|
|
case "overview": return <OverviewPage />;
|
|
case "bookings": return <BookingsPage />;
|
|
case "customers": return <CustomersPage />;
|
|
case "zones": return <ZonesPage />;
|
|
case "billing": return <BillingPage />;
|
|
case "settings": return <SettingsPage />;
|
|
default: return <OverviewPage />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div class="min-h-screen flex bg-gradient-to-br from-canvas-subtle via-canvas to-canvas-subtle">
|
|
<Sidebar />
|
|
|
|
<div class="flex-1 flex flex-col min-h-screen">
|
|
{/* Mobile Header */}
|
|
<div class="lg:hidden bg-canvas/80 backdrop-blur-xl border-b border-border p-4 flex items-center justify-between sticky top-0 z-40">
|
|
<img src="/bookra-logo.svg" alt="Bookra" class="h-8 w-auto dark:invert" />
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(true)}
|
|
class="p-2 hover:bg-canvas-subtle rounded-xl transition-all hover:scale-105 active:scale-95"
|
|
>
|
|
<MenuIcon />
|
|
</button>
|
|
</div>
|
|
|
|
<MobileMenu />
|
|
|
|
<main class="flex-1 p-4 lg:p-8 overflow-y-auto font-dashboard">
|
|
{/* Access Denied State */}
|
|
<Show when={!token.loading && !token()}>
|
|
<div class="max-w-md mx-auto py-20 text-center">
|
|
<div class="relative inline-block">
|
|
<div class="absolute inset-0 bg-[hsl(var(--error-soft))] rounded-full blur-3xl opacity-50" />
|
|
<BookraCharacter pose="forbidden" size="xl" animate={true} />
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-ink mt-8">{i18n.locale() === 'cs' ? 'Přístup odepřen' : 'Access Denied'}</h3>
|
|
<p class="text-ink-muted mt-2 max-w-xs mx-auto">{i18n.locale() === 'cs' ? 'Pro přístup do dashboardu se musíte přihlásit.' : 'Please sign in to access the dashboard.'}</p>
|
|
</div>
|
|
</Show>
|
|
|
|
{/* Loading State */}
|
|
<Show when={token() && (bootstrap.loading || summary.loading || billing.loading)}>
|
|
<div class="flex flex-col items-center justify-center py-20">
|
|
<BookraCharacter pose="walk" size="lg" animate={true} />
|
|
<p class="mt-6 text-sm text-ink-muted animate-pulse font-medium">{i18n.locale() === 'cs' ? 'Načítání dashboardu...' : 'Loading your dashboard...'}</p>
|
|
</div>
|
|
</Show>
|
|
|
|
{/* Dashboard Content */}
|
|
<Show when={isDashboardReady()}>
|
|
<div class="max-w-7xl mx-auto">
|
|
<ActivePage />
|
|
</div>
|
|
</Show>
|
|
</main>
|
|
</div>
|
|
|
|
{/* Integration Modal */}
|
|
<IntegrationModal
|
|
isOpen={showIntegrationModal()}
|
|
onClose={() => setShowIntegrationModal(false)}
|
|
tenantSlug={resolvedSummary()?.tenantSlug || "demo-studio"}
|
|
publicBookingUrl={resolvedSummary()?.publicBookingUrl || "https://bookra.eu/book/demo-studio"}
|
|
tenantName={resolvedSummary()?.tenantName || "Demo Studio"}
|
|
primaryColor={resolvedBootstrap()?.brand?.primaryColor}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|