elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/users/index.tsx

@@ -0,0 +1,407 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { formatDistanceToNow } from "date-fns"
+// Edit/permissions moved to /users/:id/edit page
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  Plus,
+  Users,
+  Trash2,
+  Loader2,
+  Shield,
+  ShieldCheck,
+  Stethoscope,
+  UserCog,
+} from "lucide-react"
+
+import {
+  useUsers,
+  useInviteUser,
+  useDeleteUser,
+} from "@/lib/hooks/use-users"
+import { useClinics } from "@/lib/hooks/use-clinics"
+import type { User } from "@/lib/hooks/use-users"
+
+import { PageHeader, EmptyState, StatusBadge } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+// ─── Constants ───────────────────────────────────────────────
+
+const INVITE_ROLES = ["admin", "doctor", "receptionist", "sales"] as const
+
+function roleIcon(role: string) {
+  switch (role) {
+    case "owner": return <ShieldCheck className="w-3.5 h-3.5" />
+    case "admin": return <Shield className="w-3.5 h-3.5" />
+    case "doctor": return <Stethoscope className="w-3.5 h-3.5" />
+    default: return <UserCog className="w-3.5 h-3.5" />
+  }
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function UsersPage() {
+  const { t } = useTranslation()
+  const { data: users, isLoading } = useUsers()
+  const deleteUser = useDeleteUser()
+  const navigate = useNavigate()
+
+  const [inviteOpen, setInviteOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<User | null>(null)
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    try {
+      await deleteUser.mutateAsync(deleteTarget.id)
+      toast.success(t("users.deactivated"))
+    } catch {
+      toast.error(t("users.deleteError"))
+    }
+    setDeleteTarget(null)
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t("users.title")} description={t("users.description")}>
+        <Button onClick={() => setInviteOpen(true)}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          {t("users.inviteUser")}
+        </Button>
+      </PageHeader>
+
+      {isLoading ? (
+        <TableSkeleton />
+      ) : !users?.length ? (
+        <EmptyState
+          icon={<Users className="w-6 h-6" />}
+          title={t("users.noUsers")}
+          action={
+            <Button variant="outline" onClick={() => setInviteOpen(true)}>
+              <Plus className="w-4 h-4 mr-1.5" />
+              {t("users.inviteUser")}
+            </Button>
+          }
+        />
+      ) : (
+        <div className="rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("common.name")}</TableHead>
+                <TableHead className="hidden sm:table-cell">{t("users.role")}</TableHead>
+                <TableHead className="hidden md:table-cell">{t("users.clinicAssignments")}</TableHead>
+                <TableHead className="hidden lg:table-cell">{t("users.lastLogin")}</TableHead>
+                <TableHead>{t("common.status")}</TableHead>
+                <TableHead className="w-[50px]" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.map((user) => (
+                <TableRow key={user.id} className="cursor-pointer" onClick={() => navigate(`/users/${user.id}/edit`)}>
+                  <TableCell>
+                    <div className="flex items-center gap-2.5">
+                      <Avatar size="sm">
+                        <AvatarFallback>
+                          {user.firstName.charAt(0)}{user.lastName.charAt(0)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <p className="font-medium text-sm truncate">{user.firstName} {user.lastName}</p>
+                        <p className="text-xs text-muted-foreground truncate">{user.email}</p>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell">
+                    <Badge variant="outline" className="text-xs gap-1">
+                      {roleIcon(user.role)}
+                      {t(`users.roles.${user.role}`)}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    <div className="flex items-center gap-1 flex-wrap">
+                      {user.clinics.slice(0, 2).map((c) => (
+                        <Badge key={c.id} variant="secondary" className="text-[10px]">{c.name}</Badge>
+                      ))}
+                      {user.clinics.length > 2 && (
+                        <span className="text-xs text-muted-foreground">+{user.clinics.length - 2}</span>
+                      )}
+                      {user.clinics.length === 0 && <span className="text-muted-foreground text-xs">—</span>}
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+                    {user.lastLoginAt
+                      ? formatDistanceToNow(new Date(user.lastLoginAt), { addSuffix: true })
+                      : "—"}
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      status={user.isActive ? "active" : "expired"}
+                      label={user.isActive ? t("common.active") : t("common.inactive")}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                      {user.role === "doctor" && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 text-xs"
+                          onClick={() => navigate(`/users/${user.id}/profile`)}
+                        >
+                          <Stethoscope className="w-3.5 h-3.5 mr-1" />
+                          {t("users.doctorProfile")}
+                        </Button>
+                      )}
+                      {user.role !== "owner" && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 text-xs text-destructive hover:text-destructive"
+                          onClick={() => setDeleteTarget(user)}
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </Button>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <InviteDialog open={inviteOpen} onOpenChange={setInviteOpen} />
+      <Dialog open={!!deleteTarget} onOpenChange={(v) => { if (!v) setDeleteTarget(null) }}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t("users.deactivate")}</DialogTitle>
+            <DialogDescription>{t("users.deactivateConfirm")}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>{t("common.cancel")}</Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={deleteUser.isPending}>
+              {deleteUser.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : t("users.deactivate")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+// ─── Invite Dialog ───────────────────────────────────────────
+
+function InviteDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
+  const { t } = useTranslation()
+  const invite = useInviteUser()
+  const { data: clinics } = useClinics()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [selectedClinics, setSelectedClinics] = useState<string[]>([])
+
+  const schema = z.object({
+    firstName: z.string().min(1, t("validation.required")),
+    lastName: z.string().min(1, t("validation.required")),
+    email: z.string().email(t("validation.emailRequired")),
+    password: z.string().min(6, t("users.passwordMin")),
+    role: z.string().min(1, t("validation.required")),
+    phone: z.string().optional(),
+  })
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { firstName: "", lastName: "", email: "", password: "", role: "doctor", phone: "" },
+  })
+
+  const onSubmit = async (values: z.infer<typeof schema>) => {
+    setErrorMessage(null)
+    try {
+      await invite.mutateAsync({
+        ...values,
+        phone: values.phone || undefined,
+        clinicIds: selectedClinics.length > 0 ? selectedClinics : undefined,
+      })
+      toast.success(t("users.inviteSuccess"))
+      form.reset()
+      setSelectedClinics([])
+      onOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("users.inviteError"))
+      } else {
+        setErrorMessage(t("users.inviteError"))
+      }
+    }
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) { form.reset(); setErrorMessage(null); setSelectedClinics([]) }
+    onOpenChange(next)
+  }
+
+  const toggleClinic = (id: string) => {
+    setSelectedClinics((prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id])
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("users.inviteUser")}</DialogTitle>
+          <DialogDescription>{t("users.inviteDesc")}</DialogDescription>
+        </DialogHeader>
+        <form noValidate onSubmit={(e) => { e.preventDefault(); form.handleSubmit(onSubmit)(e) }} className="space-y-3">
+          {errorMessage && (
+            <Alert variant="destructive" className="py-2.5">
+              <AlertDescription className="text-sm">{errorMessage}</AlertDescription>
+            </Alert>
+          )}
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("patients.firstName")} *</Label>
+              <Input {...form.register("firstName")} />
+              {form.formState.errors.firstName && <p className="text-xs text-destructive">{form.formState.errors.firstName.message}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("patients.lastName")} *</Label>
+              <Input {...form.register("lastName")} />
+              {form.formState.errors.lastName && <p className="text-xs text-destructive">{form.formState.errors.lastName.message}</p>}
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("common.email")} *</Label>
+            <Input type="email" {...form.register("email")} />
+            {form.formState.errors.email && <p className="text-xs text-destructive">{form.formState.errors.email.message}</p>}
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("users.password")} *</Label>
+              <Input type="password" {...form.register("password")} />
+              {form.formState.errors.password && <p className="text-xs text-destructive">{form.formState.errors.password.message}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("users.role")} *</Label>
+              <Select value={form.watch("role")} onValueChange={(v) => form.setValue("role", v)}>
+                <SelectTrigger className="w-full">
+                  <SelectValue>{t(`users.roles.${form.watch("role")}`)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {INVITE_ROLES.map((r) => (
+                    <SelectItem key={r} value={r}>{t(`users.roles.${r}`)}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("common.phone")}</Label>
+            <Input type="tel" placeholder="+905551234567" {...form.register("phone")} />
+          </div>
+          {clinics && clinics.length > 0 && (
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("users.clinicAssignments")}</Label>
+              <div className="space-y-1.5 max-h-32 overflow-y-auto border rounded-md p-2">
+                {clinics.map((c) => (
+                  <label key={c.id} className="flex items-center gap-2 text-sm cursor-pointer">
+                    <Checkbox
+                      checked={selectedClinics.includes(c.id)}
+                      onCheckedChange={() => toggleClinic(c.id)}
+                    />
+                    {c.name}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>{t("common.cancel")}</Button>
+            <Button type="submit" disabled={invite.isPending}>
+              {invite.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : t("users.inviteUser")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Skeleton ────────────────────────────────────────────────
+
+function TableSkeleton() {
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead><Skeleton className="h-4 w-24" /></TableHead>
+            <TableHead className="hidden sm:table-cell"><Skeleton className="h-4 w-16" /></TableHead>
+            <TableHead className="hidden md:table-cell"><Skeleton className="h-4 w-20" /></TableHead>
+            <TableHead className="hidden lg:table-cell"><Skeleton className="h-4 w-16" /></TableHead>
+            <TableHead><Skeleton className="h-4 w-12" /></TableHead>
+            <TableHead className="w-[50px]" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <TableRow key={i}>
+              <TableCell><Skeleton className="h-9 w-40" /></TableCell>
+              <TableCell className="hidden sm:table-cell"><Skeleton className="h-6 w-20 rounded-full" /></TableCell>
+              <TableCell className="hidden md:table-cell"><Skeleton className="h-5 w-24" /></TableCell>
+              <TableCell className="hidden lg:table-cell"><Skeleton className="h-4 w-16" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-14 rounded-full" /></TableCell>
+              <TableCell><Skeleton className="h-8 w-8 rounded" /></TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

package/frontend/src/pages/validation/index.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next"
+import { PageHeader } from "@/components/shared"
+import { Card, CardContent } from "@/components/ui/card"
+import { Construction } from "lucide-react"
+
+export default function ValidationPage() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t("nav.validation")} />
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="rounded-full bg-muted p-4 mb-4">
+            <Construction className="w-6 h-6 text-muted-foreground" />
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">
+            This page is under construction.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/frontend/src/stores/auth.store.ts

@@ -0,0 +1,108 @@
+import { create } from "zustand"
+import { api } from "@/lib/api"
+
+interface User {
+  id: string
+  email: string
+  firstName: string
+  lastName: string
+  role: string
+  phone?: string
+  permissions: string[]
+}
+
+interface Tenant {
+  id: string
+  name: string
+  features: string[]
+}
+
+interface AuthState {
+  user: User | null
+  tenant: Tenant | null
+  isAuthenticated: boolean
+  isLoading: boolean
+
+  login: (email: string, password: string) => Promise<void>
+  logout: () => Promise<void>
+  fetchMe: () => Promise<void>
+  reset: () => void
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  tenant: null,
+  isAuthenticated: !!localStorage.getItem("access_token"),
+  isLoading: false,
+
+  login: async (email, password) => {
+    set({ isLoading: true })
+    try {
+      const { data } = await api.post("/auth/login", { email, password })
+
+      localStorage.setItem("access_token", data.accessToken)
+      localStorage.setItem("refresh_token", data.refreshToken)
+
+      set({
+        user: data.user,
+        tenant: data.tenant,
+        isAuthenticated: true,
+        isLoading: false,
+      })
+    } catch (error) {
+      set({ isLoading: false })
+      throw error
+    }
+  },
+
+  logout: async () => {
+    try {
+      await api.post("/auth/logout")
+    } catch {
+      // Ignore logout errors
+    } finally {
+      localStorage.removeItem("access_token")
+      localStorage.removeItem("refresh_token")
+      set({ user: null, tenant: null, isAuthenticated: false })
+    }
+  },
+
+  fetchMe: async () => {
+    set({ isLoading: true })
+    try {
+      const { data } = await api.get("/auth/me")
+      set({
+        user: data.user,
+        tenant: data.tenant,
+        isAuthenticated: true,
+        isLoading: false,
+      })
+    } catch {
+      localStorage.removeItem("access_token")
+      localStorage.removeItem("refresh_token")
+      set({ user: null, tenant: null, isAuthenticated: false, isLoading: false })
+    }
+  },
+
+  reset: () => {
+    localStorage.removeItem("access_token")
+    localStorage.removeItem("refresh_token")
+    localStorage.removeItem("active_tenant_id")
+    set({ user: null, tenant: null, isAuthenticated: false, isLoading: false })
+  },
+}))
+
+/** Check if current user has ANY of the given permissions */
+export function useHasPermission(...perms: string[]): boolean {
+  const user = useAuthStore((s) => s.user)
+  if (!user) return false
+  if (user.role === "superadmin") return true
+  return perms.some((p) => user.permissions.includes(p))
+}
+
+/** Check if current user's role is one of the given roles */
+export function useHasRole(...roles: string[]): boolean {
+  const user = useAuthStore((s) => s.user)
+  if (!user) return false
+  return roles.includes(user.role)
+}

package/frontend/src/stores/ui.store.ts

@@ -0,0 +1,41 @@
+import { create } from "zustand"
+
+interface UIState {
+  sidebarOpen: boolean
+  sidebarCollapsed: boolean
+  darkMode: boolean
+
+  toggleSidebar: () => void
+  setSidebarOpen: (open: boolean) => void
+  toggleSidebarCollapsed: () => void
+  toggleDarkMode: () => void
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  sidebarOpen: false,
+  sidebarCollapsed: localStorage.getItem("sidebar_collapsed") === "true",
+  darkMode: localStorage.getItem("dark_mode") === "true",
+
+  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+
+  toggleSidebarCollapsed: () =>
+    set((s) => {
+      const next = !s.sidebarCollapsed
+      localStorage.setItem("sidebar_collapsed", String(next))
+      return { sidebarCollapsed: next }
+    }),
+
+  toggleDarkMode: () =>
+    set((s) => {
+      const next = !s.darkMode
+      localStorage.setItem("dark_mode", String(next))
+      document.documentElement.classList.toggle("dark", next)
+      return { darkMode: next }
+    }),
+}))
+
+// Init dark mode on load
+if (localStorage.getItem("dark_mode") === "true") {
+  document.documentElement.classList.add("dark")
+}

package/frontend/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/frontend/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/frontend/vite.config.ts

@@ -0,0 +1,29 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3005',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+    allowedHosts: ['localhost', 'meta.asistan7-24.com'],
+  },
+})