elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/components/shared/appointment-calendar.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useRef } from "react"
+import { Temporal } from "temporal-polyfill"
+import { ScheduleXCalendar, useCalendarApp } from "@schedule-x/react"
+import { createViewDay, createViewWeek, createViewMonthGrid } from "@schedule-x/calendar"
+import { createEventModalPlugin } from "@schedule-x/event-modal"
+import { createDragAndDropPlugin } from "@schedule-x/drag-and-drop"
+// Resize plugin removed — appointments should not be resized from calendar
+import { createCurrentTimePlugin } from "@schedule-x/current-time"
+import "@schedule-x/theme-default/dist/index.css"
+import "./appointment-calendar.css"
+
+export interface CalendarEvent {
+  id: string
+  title: string
+  start: string  // UTC ISO "2026-04-03T09:00:00.000Z" or local "2026-04-03 12:00"
+  end: string
+  calendarId?: string
+  description?: string
+  location?: string
+  people?: string[]
+}
+
+export interface WorkingHoursConfig {
+  day: number    // 0=Sun … 6=Sat
+  enabled: boolean
+  start: string  // "09:00"
+  end: string    // "17:00"
+}
+
+interface AppointmentCalendarProps {
+  events?: CalendarEvent[]
+  doctors?: { id: string; name: string; color: string }[]
+  workingHours?: WorkingHoursConfig[]
+  dayStart?: string
+  dayEnd?: string
+  defaultView?: "week" | "day" | "month-grid"
+  timezone?: string
+  onEventClick?: (event: CalendarEvent) => void
+  onEventUpdate?: (event: CalendarEvent) => void
+  onDateClick?: (date: string) => void
+  onSlotClick?: (date: string, time: string) => void
+  className?: string
+}
+
+/** Convert any date string to a Temporal.ZonedDateTime in the target timezone */
+function toTemporal(dateStr: string, tz: string): Temporal.ZonedDateTime {
+  const normalized = dateStr.trim().replace(" ", "T")
+
+  // UTC ISO string: "2026-04-03T09:00:00.000Z" or with offset "+03:00"
+  if (normalized.endsWith("Z") || /[+-]\d{2}:\d{2}$/.test(normalized)) {
+    const instant = Temporal.Instant.from(normalized)
+    return instant.toZonedDateTimeISO(tz)
+  }
+
+  // Local time string: "2026-04-03T12:00" or "2026-04-03T12:00:00"
+  const withSeconds = normalized.length === 16 ? `${normalized}:00` : normalized
+  return Temporal.PlainDateTime.from(withSeconds).toZonedDateTime(tz)
+}
+
+function buildCalendars(doctors: { id: string; name: string; color: string }[]) {
+  const cals: Record<string, any> = {
+    default: {
+      colorName: "default",
+      lightColors: { main: "#e77d22", container: "#e77d2220", onContainer: "#e77d22" },
+      darkColors: { main: "#e77d22", container: "#e77d2230", onContainer: "#e77d22" },
+    },
+    "available-slot": {
+      colorName: "available-slot",
+      lightColors: { main: "#22c55e", container: "#22c55e15", onContainer: "#16a34a" },
+      darkColors: { main: "#4ade80", container: "#22c55e20", onContainer: "#4ade80" },
+    },
+  }
+  for (const doc of doctors) {
+    cals[doc.id] = {
+      colorName: doc.id,
+      lightColors: { main: doc.color, container: `${doc.color}20`, onContainer: doc.color },
+      darkColors: { main: doc.color, container: `${doc.color}30`, onContainer: doc.color },
+    }
+  }
+  return cals
+}
+
+function convertEvents(events: CalendarEvent[], tz: string) {
+  return events.map((e) => ({
+    ...e,
+    start: toTemporal(e.start, tz),
+    end: toTemporal(e.end, tz),
+    calendarId: e.calendarId ?? "default",
+  }))
+}
+
+/**
+ * Generate background events for non-working hours.
+ * For each day in a ±2 week window, create shaded blocks for hours outside working hours.
+ */
+function buildNonWorkingBackground(
+  workingHours: WorkingHoursConfig[],
+  tz: string,
+): any[] {
+  if (!Array.isArray(workingHours) || workingHours.length === 0) return []
+
+  const nonWorkingStyle = { backgroundColor: "var(--sx-non-working, rgba(0,0,0,0.04))" }
+  const workingStyle = { backgroundColor: "var(--sx-working, rgba(34,197,94,0.06))" }
+
+  const backgrounds: any[] = []
+  const today = Temporal.Now.plainDateISO()
+  const start = today.subtract({ days: 14 })
+
+  for (let d = 0; d < 35; d++) {
+    const date = start.add({ days: d })
+    const dow = date.dayOfWeek % 7 // Temporal: 1=Mon…7=Sun → convert to 0=Sun format
+    const dayConfig = workingHours.find((wh) => wh.day === dow)
+
+    if (!dayConfig || !dayConfig.enabled) {
+      // Entire day is non-working
+      backgrounds.push({
+        start: date,
+        end: date.add({ days: 1 }),
+        style: nonWorkingStyle,
+        title: "",
+      })
+      continue
+    }
+
+    // Before work starts → gray
+    if (dayConfig.start !== "00:00") {
+      const blockStart = Temporal.PlainDateTime.from(`${date}T00:00:00`).toZonedDateTime(tz)
+      const blockEnd = Temporal.PlainDateTime.from(`${date}T${dayConfig.start}:00`).toZonedDateTime(tz)
+      backgrounds.push({ start: blockStart, end: blockEnd, style: nonWorkingStyle, title: "" })
+    }
+
+    // Working hours → green tint
+    const whStart = Temporal.PlainDateTime.from(`${date}T${dayConfig.start}:00`).toZonedDateTime(tz)
+    const whEnd = Temporal.PlainDateTime.from(`${date}T${dayConfig.end}:00`).toZonedDateTime(tz)
+    backgrounds.push({ start: whStart, end: whEnd, style: workingStyle, title: "" })
+
+    // After work ends → gray
+    if (dayConfig.end !== "24:00" && dayConfig.end !== "23:59") {
+      const blockStart = Temporal.PlainDateTime.from(`${date}T${dayConfig.end}:00`).toZonedDateTime(tz)
+      const blockEnd = Temporal.PlainDateTime.from(`${date}T23:59:00`).toZonedDateTime(tz)
+      backgrounds.push({ start: blockStart, end: blockEnd, style: nonWorkingStyle, title: "" })
+    }
+  }
+
+  return backgrounds
+}
+
+/** Compute dayBoundaries from working hours: earliest start - 1h, latest end + 1h */
+function computeDayBounds(
+  workingHours: WorkingHoursConfig[],
+  dayStart?: string,
+  dayEnd?: string,
+): { start: string; end: string } {
+  if (dayStart && dayEnd) return { start: dayStart, end: dayEnd }
+
+  const enabled = Array.isArray(workingHours) ? workingHours.filter((wh) => wh.enabled) : []
+  if (enabled.length === 0) return { start: "00:00", end: "24:00" }
+
+  let earliest = "23:59"
+  let latest = "00:00"
+  for (const wh of enabled) {
+    if (wh.start < earliest) earliest = wh.start
+    if (wh.end > latest) latest = wh.end
+  }
+
+  // Add 1h padding, clamped
+  const eH = Math.max(0, parseInt(earliest.split(":")[0]) - 1)
+  const lH = Math.min(24, parseInt(latest.split(":")[0]) + 1)
+  return {
+    start: `${String(eH).padStart(2, "0")}:00`,
+    end: lH >= 24 ? "24:00" : `${String(lH).padStart(2, "0")}:00`,
+  }
+}
+
+export function AppointmentCalendar({
+  events = [],
+  doctors = [],
+  workingHours = [],
+  dayStart,
+  dayEnd,
+  defaultView = "week",
+  timezone = "Europe/Istanbul",
+  onEventClick,
+  onEventUpdate,
+  onDateClick,
+  onSlotClick,
+  className,
+}: AppointmentCalendarProps) {
+  const calendars = buildCalendars(doctors)
+  const backgroundEvents = buildNonWorkingBackground(workingHours, timezone)
+  const dayBoundaries = computeDayBounds(workingHours, dayStart, dayEnd)
+
+  const calendar = useCalendarApp({
+    views: [createViewDay(), createViewWeek(), createViewMonthGrid()],
+    defaultView,
+    events: [],
+    backgroundEvents,
+    calendars,
+    timezone,
+    dayBoundaries,
+    weekOptions: { gridHeight: 800, nDays: 7, eventWidth: 95 },
+    locale: "tr-TR",
+    plugins: [
+      createEventModalPlugin(),
+      createDragAndDropPlugin(),
+      createCurrentTimePlugin(),
+    ],
+    callbacks: {
+      onEventClick: onEventClick ? (event: any) => onEventClick(event as CalendarEvent) : undefined,
+      onEventUpdate: onEventUpdate ? (event: any) => onEventUpdate(event as CalendarEvent) : undefined,
+      onClickDate: onDateClick ? (date: any) => onDateClick(String(date)) : undefined,
+      onDoubleClickDateTime: onSlotClick
+        ? (dateTime: any) => {
+            const dt = dateTime as Temporal.ZonedDateTime
+            const dateStr = `${dt.year}-${String(dt.month).padStart(2, "0")}-${String(dt.day).padStart(2, "0")}`
+            const snappedMin = Math.floor(dt.minute / 15) * 15
+            const timeStr = `${String(dt.hour).padStart(2, "0")}:${String(snappedMin).padStart(2, "0")}`
+            onSlotClick(dateStr, timeStr)
+          }
+        : undefined,
+    },
+  })
+
+  // Set events reactively when data arrives or changes
+  const prevKeyRef = useRef("")
+  useEffect(() => {
+    if (!calendar || events.length === 0) return
+    const key = events.map((e) => e.id).sort().join(",")
+    if (key === prevKeyRef.current) return
+    prevKeyRef.current = key
+    try {
+      calendar.events.set(convertEvents(events, timezone))
+    } catch (err) {
+      console.error("[AppointmentCalendar] Failed to set events:", err)
+    }
+  }, [calendar, events, timezone])
+
+  if (!calendar) return null
+
+  return (
+    <div className={className}>
+      <ScheduleXCalendar calendarApp={calendar} />
+    </div>
+  )
+}

package/frontend/src/components/shared/chat-bubble.tsx

@@ -0,0 +1,72 @@
+import { cn } from "@/lib/utils"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { format } from "date-fns"
+
+interface ChatBubbleProps {
+  sender: "contact" | "ai" | "human" | "system"
+  senderName?: string
+  text: string
+  timestamp?: Date | string
+  mediaType?: string
+  className?: string
+}
+
+const senderStyles = {
+  contact: "bg-muted text-foreground ml-0 mr-auto",
+  ai: "bg-primary/10 text-foreground ml-auto mr-0",
+  human: "bg-blue-500/10 text-foreground ml-auto mr-0",
+  system: "bg-muted/50 text-muted-foreground mx-auto text-center italic text-xs",
+}
+
+const senderLabels = {
+  contact: "Patient",
+  ai: "AI",
+  human: "Staff",
+  system: "System",
+}
+
+const avatarColors = {
+  contact: "bg-muted-foreground/20 text-muted-foreground",
+  ai: "bg-primary/15 text-primary",
+  human: "bg-blue-500/15 text-blue-600",
+  system: "",
+}
+
+export function ChatBubble({ sender, senderName, text, timestamp, mediaType, className }: ChatBubbleProps) {
+  const isSystem = sender === "system"
+  const isOutgoing = sender === "ai" || sender === "human"
+  const time = timestamp ? format(new Date(timestamp), "HH:mm") : undefined
+  const name = senderName || senderLabels[sender]
+
+  if (isSystem) {
+    return (
+      <div className={cn("py-1", className)}>
+        <p className={cn("rounded-full px-4 py-1.5 text-xs max-w-sm", senderStyles.system)}>
+          {text}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("flex gap-2 max-w-[75%]", isOutgoing ? "ml-auto flex-row-reverse" : "mr-auto", className)}>
+      <Avatar className="w-7 h-7 shrink-0 mt-0.5">
+        <AvatarFallback className={cn("text-[10px] font-medium", avatarColors[sender])}>
+          {name.slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className={cn("space-y-0.5", isOutgoing ? "items-end" : "items-start")}>
+        <div className="flex items-baseline gap-2">
+          <span className="text-[11px] font-medium text-muted-foreground">{name}</span>
+          {time && <span className="text-[10px] text-muted-foreground/60">{time}</span>}
+        </div>
+        <div className={cn("rounded-2xl px-3.5 py-2 text-sm leading-relaxed", senderStyles[sender])}>
+          {mediaType && (
+            <p className="text-xs text-muted-foreground mb-1 italic">[{mediaType}]</p>
+          )}
+          {text}
+        </div>
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/shared/combobox.tsx

@@ -0,0 +1,119 @@
+import { useState, useMemo } from "react"
+import { cn } from "@/lib/utils"
+import { Search, X } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onSelect: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  className?: string
+  triggerClassName?: string
+}
+
+export function Combobox({
+  options,
+  value,
+  onSelect,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found",
+  className,
+  triggerClassName,
+}: ComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState("")
+
+  const selected = options.find((o) => o.value === value)
+
+  const filtered = useMemo(() => {
+    if (!search) return options
+    const q = search.toLowerCase()
+    return options.filter(
+      (o) =>
+        o.label.toLowerCase().includes(q) ||
+        o.description?.toLowerCase().includes(q)
+    )
+  }, [options, search])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        className={cn(
+          "flex w-full items-center justify-between rounded-lg border border-input bg-input-background px-3 h-9 text-sm shadow-xs hover:bg-muted/30 cursor-pointer",
+          !selected && "text-muted-foreground",
+          triggerClassName
+        )}
+      >
+        <span className="truncate">
+          {selected ? selected.label : placeholder}
+        </span>
+        {selected ? (
+          <X
+            className="w-3.5 h-3.5 text-muted-foreground hover:text-foreground shrink-0"
+            onClick={(e) => { e.stopPropagation(); onSelect(""); setSearch("") }}
+          />
+        ) : (
+          <Search className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+        )}
+      </PopoverTrigger>
+      <PopoverContent className={cn("p-0 w-[--trigger-width]", className)} align="start">
+        <div className="p-2 border-b border-border">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+            <Input
+              className="pl-8 h-8 border-0 shadow-none focus-visible:ring-0"
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </div>
+        <ScrollArea className="max-h-60">
+          {filtered.length === 0 ? (
+            <p className="py-6 text-center text-sm text-muted-foreground">{emptyText}</p>
+          ) : (
+            <div className="p-1">
+              {filtered.map((option) => (
+                <button
+                  key={option.value}
+                  className={cn(
+                    "w-full text-left flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm cursor-pointer transition-colors",
+                    option.value === value
+                      ? "bg-primary/10 text-primary"
+                      : "hover:bg-muted"
+                  )}
+                  onClick={() => { onSelect(option.value); setOpen(false); setSearch("") }}
+                >
+                  {option.icon && <span className="shrink-0">{option.icon}</span>}
+                  <div className="min-w-0">
+                    <p className="truncate font-medium">{option.label}</p>
+                    {option.description && (
+                      <p className="text-xs text-muted-foreground truncate">{option.description}</p>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/frontend/src/components/shared/confirm-dialog.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import type { ReactNode } from "react"
+
+interface ConfirmDialogProps {
+  trigger: ReactNode
+  title: string
+  description: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: "default" | "destructive"
+  onConfirm: () => void
+}
+
+export function ConfirmDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+}: ConfirmDialogProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <span onClick={() => setOpen(true)} className="cursor-pointer">{trigger}</span>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{title}</AlertDialogTitle>
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+            <AlertDialogAction
+              className={variant === "destructive" ? "bg-destructive text-white hover:bg-destructive/90" : ""}
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/frontend/src/components/shared/data-table-pagination.tsx

@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
+
+interface DataTablePaginationProps {
+  page: number
+  pageSize: number
+  totalItems: number
+  onPageChange: (page: number) => void
+  onPageSizeChange?: (size: number) => void
+  pageSizeOptions?: number[]
+}
+
+export function DataTablePagination({
+  page,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = [10, 20, 50, 100],
+}: DataTablePaginationProps) {
+  const totalPages = Math.ceil(totalItems / pageSize)
+  const start = (page - 1) * pageSize + 1
+  const end = Math.min(page * pageSize, totalItems)
+
+  return (
+    <div className="flex items-center justify-between gap-4 py-2">
+      <p className="text-sm text-muted-foreground">
+        {totalItems > 0 ? `${start}-${end} of ${totalItems}` : "No results"}
+      </p>
+      <div className="flex items-center gap-4">
+        {onPageSizeChange && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">Rows</span>
+            <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
+              <SelectTrigger className="w-[70px] h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={String(size)}>{size}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => onPageChange(1)}
+            disabled={page <= 1}
+          >
+            <ChevronsLeft className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => onPageChange(page - 1)}
+            disabled={page <= 1}
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </Button>
+          <span className="text-sm min-w-[80px] text-center">
+            {page} / {totalPages || 1}
+          </span>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => onPageChange(page + 1)}
+            disabled={page >= totalPages}
+          >
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => onPageChange(totalPages)}
+            disabled={page >= totalPages}
+          >
+            <ChevronsRight className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/shared/data-table-toolbar.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react"
+import { Search } from "lucide-react"
+import { Input } from "@/components/ui/input"
+
+interface DataTableToolbarProps {
+  searchPlaceholder?: string
+  searchValue?: string
+  onSearchChange?: (value: string) => void
+  filters?: ReactNode
+  actions?: ReactNode
+}
+
+export function DataTableToolbar({
+  searchPlaceholder = "Search...",
+  searchValue = "",
+  onSearchChange,
+  filters,
+  actions,
+}: DataTableToolbarProps) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div className="flex items-center gap-3 flex-1">
+        {onSearchChange && (
+          <div className="relative max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              className="pl-9"
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              onChange={(e) => onSearchChange(e.target.value)}
+            />
+          </div>
+        )}
+        {filters}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  )
+}

package/frontend/src/components/shared/empty-state.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react"
+import { cn } from "@/lib/utils"
+
+interface EmptyStateProps {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+  className?: string
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn("flex flex-col items-center justify-center py-16 px-4 text-center", className)}>
+      {icon && (
+        <div className="mb-4 rounded-full bg-muted p-4 text-muted-foreground">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-lg font-semibold">{title}</h3>
+      {description && (
+        <p className="text-sm text-muted-foreground mt-1 max-w-sm">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}