elevenlabs-webhook-nodejs 1.0.0

package/web/src/contexts/AuthContext.tsx

@@ -0,0 +1,103 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import api from '../lib/api';
+import type { User, Tenant, AuthResponse } from '../types';
+
+interface AuthContextType {
+  user: User | null;
+  tenant: Tenant | null;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string, name: string, tenantName: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      fetchMe();
+    } else {
+      setIsLoading(false);
+    }
+
+    function handleForceLogout() {
+      setUser(null);
+      setTenant(null);
+    }
+    window.addEventListener('auth:logout', handleForceLogout);
+    return () => window.removeEventListener('auth:logout', handleForceLogout);
+  }, []);
+
+  async function fetchMe() {
+    try {
+      const { data } = await api.get('/auth/me');
+      setUser(data.user);
+      setTenant(data.tenant);
+    } catch {
+      // Interceptor already handles refresh + redirect to /login on failure,
+      // so only clear state here (tokens are managed by the interceptor).
+      setUser(null);
+      setTenant(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  function handleAuthResponse(data: AuthResponse) {
+    localStorage.setItem('access_token', data.access_token);
+    localStorage.setItem('refresh_token', data.refresh_token);
+    setUser(data.user);
+    setTenant(data.tenant);
+  }
+
+  async function login(email: string, password: string) {
+    const { data } = await api.post('/auth/login', { email, password });
+    handleAuthResponse(data);
+  }
+
+  async function register(email: string, password: string, name: string, tenantName: string) {
+    const { data } = await api.post('/auth/register', {
+      email,
+      password,
+      name,
+      tenant_name: tenantName
+    });
+    handleAuthResponse(data);
+  }
+
+  async function logout() {
+    const refreshToken = localStorage.getItem('refresh_token');
+    try {
+      await api.post('/auth/logout', { refresh_token: refreshToken });
+    } catch {
+      // ignore
+    }
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+    setUser(null);
+    setTenant(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, tenant, isLoading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}
+
+export function useFeature(feature: string): boolean {
+  const { tenant } = useAuth();
+  return tenant?.enabled_features?.includes(feature as any) ?? false;
+}

package/web/src/index.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/web/src/lib/api.ts

@@ -0,0 +1,92 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  headers: { 'Content-Type': 'application/json' }
+});
+
+// Attach access token to every request
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('access_token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// ─── Refresh token queue ─────────────────────────────────────
+// Prevents multiple concurrent refresh calls when several requests
+// fail with 401 at the same time (token rotation would invalidate
+// all but the first refresh attempt).
+
+let isRefreshing = false;
+let refreshQueue: { resolve: (token: string) => void; reject: (err: unknown) => void }[] = [];
+
+function processQueue(error: unknown, token: string | null) {
+  refreshQueue.forEach(({ resolve, reject }) => {
+    if (error) reject(error);
+    else resolve(token!);
+  });
+  refreshQueue = [];
+}
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // Don't intercept 401 on auth endpoints (login, register) — let the caller handle it
+    const url = originalRequest.url || '';
+    if (error.response?.status !== 401 || originalRequest._retry || url.startsWith('/auth/')) {
+      return Promise.reject(error);
+    }
+
+    originalRequest._retry = true;
+
+    const refreshToken = localStorage.getItem('refresh_token');
+    if (!refreshToken) {
+      localStorage.removeItem('access_token');
+      window.dispatchEvent(new Event('auth:logout'));
+      return Promise.reject(error);
+    }
+
+    // If already refreshing, queue this request
+    if (isRefreshing) {
+      return new Promise((resolve, reject) => {
+        refreshQueue.push({
+          resolve: (newToken: string) => {
+            originalRequest.headers.Authorization = `Bearer ${newToken}`;
+            resolve(api(originalRequest));
+          },
+          reject,
+        });
+      });
+    }
+
+    isRefreshing = true;
+
+    try {
+      const { data } = await axios.post('/api/auth/refresh', {
+        refresh_token: refreshToken
+      });
+
+      localStorage.setItem('access_token', data.access_token);
+      localStorage.setItem('refresh_token', data.refresh_token);
+
+      originalRequest.headers.Authorization = `Bearer ${data.access_token}`;
+
+      processQueue(null, data.access_token);
+      return api(originalRequest);
+    } catch (refreshError) {
+      processQueue(refreshError, null);
+      localStorage.removeItem('access_token');
+      localStorage.removeItem('refresh_token');
+      window.dispatchEvent(new Event('auth:logout'));
+      return Promise.reject(refreshError);
+    } finally {
+      isRefreshing = false;
+    }
+  }
+);
+
+export default api;

package/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/web/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/web/src/pages/AppointmentDetail.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import api from '@/lib/api';
+import { PageHeader } from '@/components/page-header';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+  ArrowLeftIcon,
+  CalendarIcon,
+  ClockIcon,
+  UserIcon,
+  PhoneIcon,
+  FileTextIcon,
+  Loader2Icon,
+} from 'lucide-react';
+
+interface Appointment {
+  _id: string;
+  patient_name: string;
+  patient_phone: string;
+  start_time: string;
+  end_time: string;
+  duration_minutes: number;
+  notes: string;
+  status: string;
+  google_event_id: string;
+  cancelled_at: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+function formatDate(d: string) {
+  return new Date(d).toLocaleDateString('tr-TR', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+}
+
+function formatTime(d: string) {
+  return new Date(d).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
+}
+
+export default function AppointmentDetail() {
+  const { id } = useParams<{ id: string }>();
+  const [appt, setAppt] = useState<Appointment | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    api.get(`/whatsapp/appointments/${id}`)
+      .then(({ data }) => setAppt(data))
+      .catch(() => setError('Randevu bulunamadi'))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !appt) {
+    return (
+      <div className="p-4 sm:p-6 max-w-3xl space-y-4">
+        <Link to="/appointments">
+          <Button variant="ghost" size="sm" className="gap-1.5">
+            <ArrowLeftIcon className="size-4" /> Geri
+          </Button>
+        </Link>
+        <p className="text-sm text-muted-foreground">{error || 'Randevu bulunamadi'}</p>
+      </div>
+    );
+  }
+
+  const isUpcoming = new Date(appt.start_time) > new Date() && appt.status === 'scheduled';
+  const isPast = new Date(appt.start_time) <= new Date();
+
+  return (
+    <div className="p-4 sm:p-6 max-w-3xl space-y-6">
+      <div className="flex items-center gap-3">
+        <Link to="/appointments">
+          <Button variant="ghost" size="sm" className="gap-1.5">
+            <ArrowLeftIcon className="size-4" /> Geri
+          </Button>
+        </Link>
+      </div>
+
+      <PageHeader
+        title={appt.patient_name}
+        subtitle={formatDate(appt.start_time)}
+      />
+
+      {/* Status banner */}
+      <div className="flex items-center gap-2">
+        <Badge
+          variant={appt.status === 'scheduled' ? (isUpcoming ? 'default' : 'secondary') : 'destructive'}
+          className="text-xs"
+        >
+          {appt.status === 'cancelled' ? 'Iptal Edildi' : isUpcoming ? 'Yaklasan' : isPast ? 'Tamamlandi' : 'Aktif'}
+        </Badge>
+        {appt.cancelled_at && (
+          <span className="text-xs text-muted-foreground">
+            {new Date(appt.cancelled_at).toLocaleString('tr-TR')} tarihinde iptal edildi
+          </span>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {/* Patient info */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm flex items-center gap-2">
+              <UserIcon className="size-4" /> Hasta Bilgileri
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div>
+              <p className="text-xs text-muted-foreground">Ad Soyad</p>
+              <p className="text-sm font-medium">{appt.patient_name}</p>
+            </div>
+            <Separator />
+            <div>
+              <p className="text-xs text-muted-foreground">Telefon</p>
+              <p className="text-sm font-mono">{appt.patient_phone}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Appointment info */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm flex items-center gap-2">
+              <CalendarIcon className="size-4" /> Randevu Bilgileri
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div>
+              <p className="text-xs text-muted-foreground">Tarih</p>
+              <p className="text-sm font-medium">{formatDate(appt.start_time)}</p>
+            </div>
+            <Separator />
+            <div className="flex gap-6">
+              <div>
+                <p className="text-xs text-muted-foreground">Saat</p>
+                <p className="text-sm font-mono">
+                  {formatTime(appt.start_time)} - {formatTime(appt.end_time)}
+                </p>
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground">Sure</p>
+                <p className="text-sm">{appt.duration_minutes} dk</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Notes */}
+      {appt.notes && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm flex items-center gap-2">
+              <FileTextIcon className="size-4" /> Notlar
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">{appt.notes}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Metadata */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm flex items-center gap-2">
+            <ClockIcon className="size-4" /> Kayit Bilgileri
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Olusturulma</span>
+            <span>{new Date(appt.createdAt).toLocaleString('tr-TR')}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Son Guncelleme</span>
+            <span>{new Date(appt.updatedAt).toLocaleString('tr-TR')}</span>
+          </div>
+          {appt.google_event_id && (
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Google Calendar ID</span>
+              <span className="font-mono text-xs truncate max-w-[200px]">{appt.google_event_id}</span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}